lua-cli 2.5.7 → 3.0.0-alpha.1

package/dist/web/app.css

@@ -22,11 +22,9 @@
     --lua-color-green-50: oklch(98.2% 0.018 155.826);
     --lua-color-green-100: oklch(96.2% 0.044 156.743);
     --lua-color-green-200: oklch(92.5% 0.084 155.995);
-    --lua-color-green-500: oklch(72.3% 0.219 149.579);
     --lua-color-green-600: oklch(62.7% 0.194 149.214);
     --lua-color-green-700: oklch(52.7% 0.154 150.069);
     --lua-color-green-800: oklch(44.8% 0.119 151.328);
-    --lua-color-green-900: oklch(39.3% 0.095 152.535);
     --lua-color-blue-50: oklch(97% 0.014 254.604);
     --lua-color-blue-100: oklch(93.2% 0.032 255.585);
     --lua-color-blue-200: oklch(88.2% 0.059 254.128);
@@ -49,10 +47,10 @@
     --lua-color-black: #000000;
     --lua-color-white: #fff;
     --lua-spacing: 4px;
-    --lua-container-xs: 20rem;
     --lua-container-md: 28rem;
     --lua-container-lg: 32rem;
     --lua-container-2xl: 42rem;
+    --lua-container-4xl: 56rem;
     --lua-text-xs: 12px;
     --lua-text-xs--line-height: calc(1 / 0.75);
     --lua-text-sm: 14px;
@@ -72,6 +70,8 @@
     --lua-font-weight-normal: 400;
     --lua-font-weight-medium: 500;
     --lua-font-weight-semibold: 600;
+    --lua-font-weight-bold: 700;
+    --lua-tracking-wide: 0.025em;
     --lua-leading-relaxed: 1.625;
     --lua-radius-sm: calc(var(--radius) - 4px);
     --lua-radius-md: 6px;
@@ -255,6 +255,20 @@
   }
 }
 @layer utilities {
+  #lua-root .lua\:pointer-events-none {
+    pointer-events: none;
+  }
+  #lua-root .lua\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
   #lua-root .lua\:absolute {
     position: absolute;
   }
@@ -270,14 +284,20 @@
   #lua-root .lua\:inset-0 {
     inset: calc(var(--lua-spacing) * 0);
   }
-  #lua-root .lua\:right-4 {
-    right: calc(var(--lua-spacing) * 4);
+  #lua-root .lua\:top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  #lua-root .lua\:right-0 {
+    right: calc(var(--lua-spacing) * 0);
   }
   #lua-root .lua\:bottom-0 {
     bottom: calc(var(--lua-spacing) * 0);
   }
-  #lua-root .lua\:bottom-4 {
-    bottom: calc(var(--lua-spacing) * 4);
+  #lua-root .lua\:left-0 {
+    left: calc(var(--lua-spacing) * 0);
+  }
+  #lua-root .lua\:left-3 {
+    left: calc(var(--lua-spacing) * 3);
   }
   #lua-root .lua\:z-50 {
     z-index: 50;
@@ -312,6 +332,9 @@
   #lua-root .lua\:mt-6 {
     margin-top: calc(var(--lua-spacing) * 6);
   }
+  #lua-root .lua\:mr-2 {
+    margin-right: calc(var(--lua-spacing) * 2);
+  }
   #lua-root .lua\:mr-4 {
     margin-right: calc(var(--lua-spacing) * 4);
   }
@@ -330,6 +353,9 @@
   #lua-root .lua\:mb-4 {
     margin-bottom: calc(var(--lua-spacing) * 4);
   }
+  #lua-root .lua\:mb-6 {
+    margin-bottom: calc(var(--lua-spacing) * 6);
+  }
   #lua-root .lua\:ml-1 {
     margin-left: calc(var(--lua-spacing) * 1);
   }
@@ -386,6 +412,9 @@
   #lua-root .lua\:h-48 {
     height: calc(var(--lua-spacing) * 48);
   }
+  #lua-root .lua\:h-auto {
+    height: auto;
+  }
   #lua-root .lua\:h-full {
     height: 100%;
   }
@@ -395,21 +424,18 @@
   #lua-root .lua\:max-h-full {
     max-height: 100%;
   }
-  #lua-root .lua\:min-h-7 {
-    min-height: calc(var(--lua-spacing) * 7);
-  }
   #lua-root .lua\:min-h-48 {
     min-height: calc(var(--lua-spacing) * 48);
   }
   #lua-root .lua\:min-h-\[320px\] {
     min-height: 320px;
   }
+  #lua-root .lua\:min-h-full {
+    min-height: 100%;
+  }
   #lua-root .lua\:w-1 {
     width: calc(var(--lua-spacing) * 1);
   }
-  #lua-root .lua\:w-1\/3 {
-    width: calc(1/3 * 100%);
-  }
   #lua-root .lua\:w-4 {
     width: calc(var(--lua-spacing) * 4);
   }
@@ -432,6 +458,9 @@
   #lua-root .lua\:max-w-2xl {
     max-width: var(--lua-container-2xl);
   }
+  #lua-root .lua\:max-w-4xl {
+    max-width: var(--lua-container-4xl);
+  }
   #lua-root .lua\:max-w-full {
     max-width: 100%;
   }
@@ -441,18 +470,12 @@
   #lua-root .lua\:max-w-md {
     max-width: var(--lua-container-md);
   }
-  #lua-root .lua\:max-w-xs {
-    max-width: var(--lua-container-xs);
-  }
   #lua-root .lua\:min-w-0 {
     min-width: calc(var(--lua-spacing) * 0);
   }
   #lua-root .lua\:min-w-12 {
     min-width: calc(var(--lua-spacing) * 12);
   }
-  #lua-root .lua\:min-w-16 {
-    min-width: calc(var(--lua-spacing) * 16);
-  }
   #lua-root .lua\:min-w-24 {
     min-width: calc(var(--lua-spacing) * 24);
   }
@@ -462,9 +485,6 @@
   #lua-root .lua\:min-w-\[120px\] {
     min-width: 120px;
   }
-  #lua-root .lua\:min-w-\[140px\] {
-    min-width: 140px;
-  }
   #lua-root .lua\:flex-1 {
     flex: 1;
   }
@@ -474,9 +494,20 @@
   #lua-root .lua\:shrink-0 {
     flex-shrink: 0;
   }
+  #lua-root .lua\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  #lua-root .lua\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   #lua-root .lua\:rotate-90 {
     rotate: 90deg;
   }
+  #lua-root .lua\:transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   #lua-root .lua\:animate-spin {
     animation: var(--lua-animate-spin);
   }
@@ -662,6 +693,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  #lua-root .lua\:border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
   #lua-root .lua\:border-blue-200 {
     border-color: var(--lua-color-blue-200);
   }
@@ -674,21 +709,9 @@
   #lua-root .lua\:border-gray-300 {
     border-color: var(--lua-color-gray-300);
   }
-  #lua-root .lua\:border-gray-500 {
-    border-color: var(--lua-color-gray-500);
-  }
-  #lua-root .lua\:border-gray-600 {
-    border-color: var(--lua-color-gray-600);
-  }
-  #lua-root .lua\:border-gray-700 {
-    border-color: var(--lua-color-gray-700);
-  }
   #lua-root .lua\:border-green-200 {
     border-color: var(--lua-color-green-200);
   }
-  #lua-root .lua\:border-green-500 {
-    border-color: var(--lua-color-green-500);
-  }
   #lua-root .lua\:border-red-200 {
     border-color: var(--lua-color-red-200);
   }
@@ -698,6 +721,9 @@
   #lua-root .lua\:border-yellow-200 {
     border-color: var(--lua-color-yellow-200);
   }
+  #lua-root .lua\:border-l-blue-500 {
+    border-left-color: var(--lua-color-blue-500);
+  }
   #lua-root .lua\:bg-black {
     background-color: var(--lua-color-black);
   }
@@ -731,30 +757,12 @@
   #lua-root .lua\:bg-gray-300 {
     background-color: var(--lua-color-gray-300);
   }
-  #lua-root .lua\:bg-gray-600 {
-    background-color: var(--lua-color-gray-600);
-  }
-  #lua-root .lua\:bg-gray-700 {
-    background-color: var(--lua-color-gray-700);
-  }
-  #lua-root .lua\:bg-gray-800 {
-    background-color: var(--lua-color-gray-800);
-  }
   #lua-root .lua\:bg-green-50 {
     background-color: var(--lua-color-green-50);
   }
   #lua-root .lua\:bg-green-100 {
     background-color: var(--lua-color-green-100);
   }
-  #lua-root .lua\:bg-green-500 {
-    background-color: var(--lua-color-green-500);
-  }
-  #lua-root .lua\:bg-green-900\/20 {
-    background-color: var(--lua-color-green-900);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--lua-color-green-900) 20%, transparent);
-    }
-  }
   #lua-root .lua\:bg-red-50 {
     background-color: var(--lua-color-red-50);
   }
@@ -827,9 +835,6 @@
   #lua-root .lua\:py-4 {
     padding-block: calc(var(--lua-spacing) * 4);
   }
-  #lua-root .lua\:py-5 {
-    padding-block: calc(var(--lua-spacing) * 5);
-  }
   #lua-root .lua\:py-8 {
     padding-block: calc(var(--lua-spacing) * 8);
   }
@@ -842,15 +847,24 @@
   #lua-root .lua\:pt-0 {
     padding-top: calc(var(--lua-spacing) * 0);
   }
+  #lua-root .lua\:pt-2 {
+    padding-top: calc(var(--lua-spacing) * 2);
+  }
   #lua-root .lua\:pt-4 {
     padding-top: calc(var(--lua-spacing) * 4);
   }
   #lua-root .lua\:pb-2 {
     padding-bottom: calc(var(--lua-spacing) * 2);
   }
+  #lua-root .lua\:pb-6 {
+    padding-bottom: calc(var(--lua-spacing) * 6);
+  }
   #lua-root .lua\:pb-24 {
     padding-bottom: calc(var(--lua-spacing) * 24);
   }
+  #lua-root .lua\:pl-10 {
+    padding-left: calc(var(--lua-spacing) * 10);
+  }
   #lua-root .lua\:text-center {
     text-align: center;
   }
@@ -910,6 +924,10 @@
     --tw-leading: var(--lua-leading-relaxed);
     line-height: var(--lua-leading-relaxed);
   }
+  #lua-root .lua\:font-bold {
+    --tw-font-weight: var(--lua-font-weight-bold);
+    font-weight: var(--lua-font-weight-bold);
+  }
   #lua-root .lua\:font-medium {
     --tw-font-weight: var(--lua-font-weight-medium);
     font-weight: var(--lua-font-weight-medium);
@@ -922,6 +940,10 @@
     --tw-font-weight: var(--lua-font-weight-semibold);
     font-weight: var(--lua-font-weight-semibold);
   }
+  #lua-root .lua\:tracking-wide {
+    --tw-tracking: var(--lua-tracking-wide);
+    letter-spacing: var(--lua-tracking-wide);
+  }
   #lua-root .lua\:break-words {
     overflow-wrap: break-word;
   }
@@ -934,6 +956,9 @@
   #lua-root .lua\:whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  #lua-root .lua\:text-blue-500 {
+    color: var(--lua-color-blue-500);
+  }
   #lua-root .lua\:text-blue-600 {
     color: var(--lua-color-blue-600);
   }
@@ -943,12 +968,6 @@
   #lua-root .lua\:text-blue-800 {
     color: var(--lua-color-blue-800);
   }
-  #lua-root .lua\:text-gray-200 {
-    color: var(--lua-color-gray-200);
-  }
-  #lua-root .lua\:text-gray-300 {
-    color: var(--lua-color-gray-300);
-  }
   #lua-root .lua\:text-gray-400 {
     color: var(--lua-color-gray-400);
   }
@@ -1009,11 +1028,8 @@
   #lua-root .lua\:caret-black {
     caret-color: var(--lua-color-black);
   }
-  #lua-root .lua\:opacity-60 {
-    opacity: 60%;
-  }
-  #lua-root .lua\:opacity-80 {
-    opacity: 80%;
+  #lua-root .lua\:opacity-0 {
+    opacity: 0%;
   }
   #lua-root .lua\:shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1051,11 +1067,25 @@
     transition-timing-function: var(--tw-ease, var(--lua-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--lua-default-transition-duration));
   }
+  #lua-root .lua\:transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--lua-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--lua-default-transition-duration));
+  }
+  #lua-root .lua\:transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--lua-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--lua-default-transition-duration));
+  }
   #lua-root .lua\:transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--lua-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--lua-default-transition-duration));
   }
+  #lua-root .lua\:duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   #lua-root .lua\:select-text {
     -webkit-user-select: text;
     -moz-user-select: text;
@@ -1105,13 +1135,6 @@
       }
     }
   }
-  #lua-root .lua\:hover\:border-blue-500 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--lua-color-blue-500);
-      }
-    }
-  }
   #lua-root .lua\:hover\:border-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1119,20 +1142,6 @@
       }
     }
   }
-  #lua-root .lua\:hover\:border-gray-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--lua-color-gray-400);
-      }
-    }
-  }
-  #lua-root .lua\:hover\:border-gray-500 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--lua-color-gray-500);
-      }
-    }
-  }
   #lua-root .lua\:hover\:bg-black-hover {
     &:hover {
       @media (hover: hover) {
@@ -1154,20 +1163,6 @@
       }
     }
   }
-  #lua-root .lua\:hover\:bg-gray-500 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--lua-color-gray-500);
-      }
-    }
-  }
-  #lua-root .lua\:hover\:bg-gray-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--lua-color-gray-700);
-      }
-    }
-  }
   #lua-root .lua\:hover\:bg-neutral-200 {
     &:hover {
       @media (hover: hover) {
@@ -1327,16 +1322,6 @@
       pointer-events: none;
     }
   }
-  #lua-root .lua\:disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-  #lua-root .lua\:disabled\:border-gray-600 {
-    &:disabled {
-      border-color: var(--lua-color-gray-600);
-    }
-  }
   #lua-root .lua\:disabled\:border-transparent {
     &:disabled {
       border-color: transparent;
@@ -1350,11 +1335,6 @@
       }
     }
   }
-  #lua-root .lua\:disabled\:bg-gray-700 {
-    &:disabled {
-      background-color: var(--lua-color-gray-700);
-    }
-  }
   #lua-root .lua\:disabled\:text-black\/16 {
     &:disabled {
       color: var(--lua-color-black);
@@ -1363,11 +1343,6 @@
       }
     }
   }
-  #lua-root .lua\:disabled\:text-gray-500 {
-    &:disabled {
-      color: var(--lua-color-gray-500);
-    }
-  }
   #lua-root .lua\:data-\[state\=active\]\:-mb-px {
     &[data-state="active"] {
       margin-bottom: -1px;
@@ -1934,6 +1909,41 @@
     z-index: 1;
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1962,6 +1972,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -2027,35 +2041,20 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
-@property --tw-translate-z {
+@property --tw-content {
   syntax: "*";
+  initial-value: "";
   inherits: false;
-  initial-value: 0;
 }
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-scroll-snap-strictness {
   syntax: "*";
   inherits: false;
@@ -2069,12 +2068,21 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     #lua-root *, #lua-root ::before, #lua-root ::after, #lua-root ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -2089,12 +2097,9 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
       --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-outline-style: solid;
-      --tw-duration: initial;
       --tw-scroll-snap-strictness: proximity;
     }
   }
@@ -3115,7 +3120,6 @@ a:focus-visible,
 .chat-header p {
   margin: 0;
   font-size: 12px;
-  color: #cccccc;
   font-style: italic;
   font-family: inherit;
 }
@@ -6941,598 +6945,10 @@ a:focus-visible,
   letter-spacing: 0.5px;
 }
 
-/* Product Management Styles */
-.product-management {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: #1e1e1e;
-}
-
-.product-header {
-  background: #2d2d30;
-  color: #cccccc;
-  padding: 12px 16px;
-  border-bottom: 1px solid #3e3e42;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.product-header .header-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.product-header h3 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #ffffff;
-  font-family: inherit;
-}
-
-.product-count {
-  color: #8c8c8c;
-  font-size: 12px;
-}
-
-.product-header .header-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.product-header .create-button {
-  background: transparent;
-  color: #cccccc;
-  border: 1px solid #3e3e42;
-  border-radius: 4px;
-  padding: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  transition: all 0.2s;
-}
-
-.product-header .create-button:hover {
-  background: #007acc;
-  border-color: #007acc;
-  color: #ffffff;
-}
-
-.product-content {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.product-search {
-  padding: 16px;
-  border-bottom: 1px solid #3e3e42;
-  background: #2d2d30;
-  flex-shrink: 0;
-}
-
-.search-container {
-  display: flex;
-  gap: 8px;
-}
-
-.search-input {
-  flex: 1;
-  background: #1e1e1e;
-  border: 1px solid #3e3e42;
-  border-radius: 4px;
-  color: #ffffff;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #007acc;
-}
-
-.search-button {
-  background: #007acc;
-  color: #ffffff;
-  border: none;
-  border-radius: 4px;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.2s;
-}
-
-.search-button:hover {
-  background: #005a9e;
-}
-
-.products-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.product-item {
-  background: #2d2d30;
-  border: 1px solid #3e3e42;
-  border-radius: 6px;
-  padding: 16px;
-  margin-bottom: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.product-item:hover {
-  border-color: #007acc;
-  background: #323233;
-  transform: translateX(2px);
-}
-
-.product-item .product-info {
-  flex: 1;
-}
-
-.product-name {
-  color: #ffffff;
-  font-weight: 600;
-  font-size: 16px;
-  margin-bottom: 4px;
-}
-
-.product-description {
-  color: #cccccc;
-  font-size: 14px;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-.product-meta {
-  color: #8c8c8c;
-  font-size: 12px;
-}
-
-.product-arrow {
-  color: #007acc;
-  font-size: 18px;
-  font-weight: bold;
-  margin-left: 12px;
-}
-
-.no-products {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #8c8c8c;
-  text-align: center;
-}
-
-.no-products-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.6;
-}
-
-.no-products-text {
-  margin: 0 0 8px 0;
-  color: #cccccc;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.no-products-subtext {
-  margin: 0;
-  color: #8c8c8c;
-  font-size: 14px;
-  opacity: 0.8;
-}
-
-/* Product Detail Styles */
-.product-detail {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.product-detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-bottom: 1px solid #3e3e42;
-  background: #2d2d30;
-  flex-shrink: 0;
-}
-
-.product-detail-header .back-button {
-  background: transparent;
-  color: #007acc;
-  border: none;
-  padding: 4px 8px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: color 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  border-radius: 4px;
-}
-
-.product-detail-header .back-button:hover {
-  background: #3e3e42;
-  color: #ffffff;
-}
-
-.product-detail-header h4 {
-  flex: 1;
-  margin: 0;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.product-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.product-detail .product-info {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-.product-field {
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #3e3e42;
-}
-
-.product-field:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-.field-label {
-  color: #8c8c8c;
-  font-size: 12px;
-  font-weight: 500;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.field-value {
-  color: #ffffff;
-  font-size: 14px;
-  word-break: break-word;
-  line-height: 1.4;
-}
-
-/* Product Form Styles */
-.product-form {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-.form-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.form-group label {
-  color: #cccccc;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.form-group input,
-.form-group textarea {
-  background: #1e1e1e;
-  border: 1px solid #3e3e42;
-  border-radius: 4px;
-  color: #ffffff;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-family: inherit;
-  transition: border-color 0.2s;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: #007acc;
-}
-
-.add-field-container {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.field-hint {
-  color: #8c8c8c;
-  font-size: 11px;
-  font-style: italic;
-}
-
-.form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 16px;
-  border-top: 1px solid #3e3e42;
-}
-
-.product-form .cancel-button {
-  background: transparent;
-  border: 1px solid #3e3e42;
-  color: #cccccc;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.product-form .cancel-button:hover:not(:disabled) {
-  background: #3e3e42;
-  color: #ffffff;
-}
-
-.product-form .save-button {
-  background: #007acc;
-  color: #ffffff;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: background 0.2s;
-}
-
-.product-form .save-button:hover:not(:disabled) {
-  background: #005a9e;
-}
-
-.product-form .save-button:disabled {
-  background: #666666;
-  cursor: not-allowed;
-}
-
-/* Product Pagination */
-.product-pagination {
-  background: #2d2d30;
-  border-top: 1px solid #3e3e42;
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.product-pagination .pagination-info {
-  color: #8c8c8c;
-  font-size: 12px;
-}
-
-.product-pagination .pagination-controls {
-  display: flex;
-  gap: 8px;
-}
-
-.product-pagination .pagination-button {
-  background: transparent;
-  color: #cccccc;
-  border: 1px solid #3e3e42;
-  border-radius: 4px;
-  padding: 6px 8px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s;
-  min-width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.product-pagination .pagination-button:hover:not(:disabled) {
-  background: #3e3e42;
-  border-color: #007acc;
-  color: #007acc;
-}
-
-.product-pagination .pagination-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Detail Header Styles */
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.detail-header h3 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #ffffff;
-  font-family: inherit;
-}
-
-/* Custom Data Management Styles */
-
-.custom-data-search {
-  padding: 30px;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.search-header {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.search-header h4 {
-  font-size: 24px;
-  color: #111827;
-  margin-bottom: 8px;
-}
-
-.search-header p {
-  font-size: 14px;
-  color: #6b7280;
-}
-
-.search-form {
-  background: white;
-  padding: 30px;
-  border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  margin-bottom: 30px;
-}
-
-.search-form .form-group {
-  margin-bottom: 20px;
-}
-
-.search-form .form-group:last-of-type {
-  margin-bottom: 0;
-}
-
-.search-button-large {
-  width: 100%;
-  padding: 14px;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-top: 20px;
-}
-
-.search-button-large:hover:not(:disabled) {
-  background: #2563eb;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
-}
-
-.search-button-large:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.search-results {
-  margin-top: 30px;
-}
-
-.search-results h5 {
-  font-size: 18px;
-  color: #111827;
-  margin-bottom: 15px;
-  font-weight: 600;
-}
-
-.feature-list {
-  margin-top: 30px;
-  padding: 20px;
-  background: #f9fafb;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-}
-
-.feature-list div {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #4b5563;
-}
-
-.feature-list div:last-child {
-  margin-bottom: 0;
-}
-
-.feature-item {
-  font-weight: 600;
-  color: #111827;
-}
-
-.json-editor {
-  width: 100%;
-  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  padding: 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  background: #f9fafb;
-  resize: vertical;
-  min-height: 200px;
-}
-
-.json-editor:focus {
-  outline: none;
-  border-color: #3b82f6;
-  background: white;
-}
-
-.collection-input {
-  background: #f3f4f6 !important;
-  cursor: not-allowed;
-}
-
-.field-hint {
-  display: block;
-  margin-top: 6px;
-  font-size: 12px;
-  color: #6b7280;
-}
-
-/* JSON display in view mode */
-pre {
-  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  background: #f9fafb;
-  padding: 12px;
-  border-radius: 8px;
-  overflow-x: auto;
-  margin: 0;
-}
+/* Product Management Styles - Migrated to Luaniverse Components */
+/* This file is kept for backward compatibility but styles are now handled by Luaniverse components */
+/* Custom Data Management Styles - Migrated to Luaniverse Components */
+/* This file is kept for backward compatibility but styles are now handled by Luaniverse components */