style: streamline inputs and selects with more visible borders

- Increase --border opacity in both light and dark modes
- Harmonize Input and Select components with consistent rounded-lg corners
- Replace native selects in MainConverter with styled Select component

app/globals.css

@@ -128,7 +128,7 @@
   --accent-foreground: #ffffff;
   --destructive: #ef4444;
   --destructive-foreground: #ffffff;
-  --border: rgba(255, 255, 255, 0.08);
+  --border: rgba(255, 255, 255, 0.15);
   --input: rgba(255, 255, 255, 0.05);
   --ring: rgba(139, 92, 246, 0.5);
   --radius: 1rem;
@@ -153,7 +153,7 @@
   --accent-foreground: oklch(15% 0.05 255);
   --destructive: oklch(60% 0.2 25);
   --destructive-foreground: oklch(100% 0 0);
-  --border: rgba(0, 0, 0, 0.06);
+  --border: rgba(0, 0, 0, 0.12);
   --input: rgba(0, 0, 0, 0.01);
   --ring: rgba(139, 92, 246, 0.2);
 }

components/ui/Input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-xl border border-border bg-input px-4 py-2',
+          'flex h-10 w-full rounded-lg border border-border bg-input px-4 py-2',
           'text-sm ring-offset-background file:border-0 file:bg-transparent',
           'file:text-sm file:font-medium placeholder:text-muted-foreground',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',

components/units/converter/MainConverter.tsx

@@ -161,17 +161,16 @@ export default function MainConverter() {
             </div>
             <div className="w-40">
               <label className="text-sm font-medium mb-2 block">From</label>
-              <select
+              <Select
                 value={selectedUnit}
                 onChange={(e) => setSelectedUnit(e.target.value)}
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 {units.map((unit) => (
                   <option key={unit} value={unit}>
                     {unit}
                   </option>
                 ))}
-              </select>
+              </Select>
             </div>
             <Button
               variant="outline"
@@ -184,17 +183,16 @@ export default function MainConverter() {
             </Button>
             <div className="w-40">
               <label className="text-sm font-medium mb-2 block">To</label>
-              <select
+              <Select
                 value={targetUnit}
                 onChange={(e) => setTargetUnit(e.target.value)}
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 {units.map((unit) => (
                   <option key={unit} value={unit}>
                     {unit}
                   </option>
                 ))}
-              </select>
+              </Select>
             </div>
           </div>