Adjusting styles

app/static/css/style.css

@@ -276,21 +276,73 @@ h2 {
 /* Forms */
 label {
   display: block;
-  margin-bottom: 0.6rem;
+  margin-bottom: 0.2rem;
-  font-size: 0.9rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+}
+
+label.check {
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--text);
+  margin-bottom: 0;
 }
 
 input[type=text],
 input[type=email],
-input[type=password] {
+input[type=password],
+input[type=url],
+input[type=number],
+input[type=search],
+textarea {
   display: block;
   width: 100%;
-  margin-top: 0.25rem;
+  margin-top: 0;
-  padding: 0.5rem;
+  padding: 0.4rem 0.5rem;
   border-radius: 6px;
   border: 1px solid var(--border);
-  background: var(--bg);
+  background: var(--surface-2);
   color: var(--text);
+  font: inherit;
+  line-height: 1.4;
+}
+
+select {
+  display: block;
+  width: 100%;
+  margin-top: 0;
+  padding: 0.4rem 2rem 0.4rem 0.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background-color: var(--surface-2);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 1em;
+  color: var(--text);
+  font: inherit;
+  line-height: 1.4;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+::placeholder {
+  color: var(--muted);
+  opacity: 0.7;
 }
 
 .check {
@@ -307,13 +359,14 @@ input[type=password] {
 .form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.75rem 1rem;
+  gap: 0.5rem 0.75rem;
   align-items: end;
 }
 
 .form-grid>button {
   grid-column: 1 / -1;
   justify-self: start;
+  margin-top: 0.25rem;
 }
 
 .roles-field {
@@ -325,6 +378,10 @@ input[type=password] {
 
 .roles-field legend {
   color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   padding: 0 0.4rem;
 }
 
@@ -362,7 +419,7 @@ input[type=password] {
 .inline-edit {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.5rem;
   align-items: end;
 }
 
@@ -436,22 +493,12 @@ input[type=password] {
 .filter-bar input[type="text"] {
   flex: 1 1 180px;
   min-width: 0;
-  padding: 0.35rem 0.6rem;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 6px;
-  font: inherit;
 }
 
 .filter-bar select {
   flex: 0 1 auto;
-  padding: 0.35rem 0.6rem;
+  /* override full-width default from global select rule */
-  background: var(--surface-2);
+  width: auto;
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 6px;
-  font: inherit;
 }
 
 /* Buttons */