fix: equal-height settings cards and full-width volume slider

- dashboard-grid uses align-items: stretch so both cards match height
- .card is now a flex column; .control-actions uses margin-top: auto to
  pin the save button row to the bottom of each card
- Volume slider label gets grid-column: 1 / -1 via .span-full so it
  fills the full card width instead of sharing a column with width/height

src/main/resources/static/css/styles.css

@@ -1043,7 +1043,7 @@ button:disabled:hover {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
-    align-items: start;
+    align-items: stretch;
 }
 
 .dashboard-span-full {
@@ -1303,6 +1303,8 @@ button:disabled:hover {
     border: 1px solid var(--color-border);
     border-radius: 14px;
     padding: 18px;
+    display: flex;
+    flex-direction: column;
 }
 
 .card-header {
@@ -2184,6 +2186,14 @@ button:disabled:hover {
     margin-top: 12px;
 }
 
+.control-grid .span-full {
+    grid-column: 1 / -1;
+}
+
+.control-grid .span-full input[type="range"] {
+    width: 100%;
+}
+
 .control-grid.condensed {
     gap: 10px;
     margin-top: 8px;
@@ -2255,7 +2265,8 @@ button:disabled:hover {
 .control-actions {
     display: flex;
     gap: 8px;
-    margin-top: 12px;
+    margin-top: auto;
+    padding-top: 16px;
     flex-wrap: wrap;
     width: 100%;
 }