From a7d0354150b8e8720eef59eb12e0efc040c3a728 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Tue, 10 Mar 2026 18:26:58 -0400
Subject: [PATCH] style: update form input styles for improved appearance and
 focus effects

---
 themes/lucentui/css/app.css | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/themes/lucentui/css/app.css b/themes/lucentui/css/app.css
index a651a06a6..7e16c4d8b 100644
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -390,19 +390,31 @@ x-navigation-link svg {
 }
 
 .form-input {
-    border: none;
-    border-bottom: 2px solid #404040;
+    border: 1px solid hsl(var(--color-neutral));
+    border-radius: 0.375rem;
     outline: none;
-    background: transparent;
-    transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+    background: hsl(var(--color-background-secondary) / 0.5);
+    transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
+                box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
     width: 100%;
-    padding: 10px 0;
+    padding: 0.625rem;
+    font-size: 0.875rem;
+    color: hsl(var(--color-base));
+}
+
+.form-input:focus {
+    border-color: hsl(var(--color-primary));
+    box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
+}
+
+.form-input::placeholder {
+    color: hsl(var(--color-base) / 0.4);
 }
 
 .form-input-label {
     position: absolute;
-    top: 10px;
-    left: 0;
+    top: 0.625rem;
+    left: 0.625rem;
     color: #a3a3a3;
     pointer-events: none;
     transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -412,11 +424,7 @@ x-navigation-link svg {
 .form-input:not(:placeholder-shown) + .form-input-label {
     transform: translateY(-22px);
     font-size: 12px;
-    color: hsl(var(--color-background));
-}
-
-.form-input:focus {
-    border-bottom-color: hsl(var(--color-background));
+    color: hsl(var(--color-primary));
 }
 
 .form-radio:checked {