style: update default-base.css for improved layout clarity

- Added new CSS classes for input instructions, hidden elements, and inline-block display to enhance visual structure.
- Adjusted focus styles for inputs and selects to improve user experience.
- This change aligns with ongoing efforts to refine input guidance and visual consistency across the plugin.

emhttp/plugins/dynamix/styles/default-base.css

@@ -126,6 +126,7 @@ hr {
 .resize-none {
     resize: none;
 }
+
 input[type="text"],
 input[type="password"],
 input[type="number"],
@@ -155,6 +156,20 @@ textarea,
     border-radius: 0;
     box-sizing: border-box;
 }
+
+.input-instructions {
+    font-style: italic;
+    opacity: .75;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    + .input-instructions {
+        opacity: 1;
+    }
+}
+
 input[type="button"],
 input[type="reset"],
 input[type="submit"],
@@ -306,6 +321,7 @@ select option {
     background-color: var(--mild-background-color);
 }
 select:focus {
+    background-color: var(--focus-input-bg-color);
     outline: 0;
 }
 select[disabled] {
@@ -1526,6 +1542,9 @@ dd {
         text-align: right;
     }
     dd {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
         /* white-space: nowrap; */
 
         input[type="text"],
@@ -1718,6 +1737,14 @@ span#wlan0 {
     background-color: var(--shade-bg-color);
 }
 
+.hidden {
+    display: none;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
 /*
  * Using CSS Nesting, to narrow down the scope of the styles to the .Theme--sidebar class.
  * This allows us to have default-azure & default-gray set css variables