Normalize settings on save

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

@@ -318,6 +318,82 @@ body.has-staging-banner {
     color: #fef3c7;
 }
 
+.toast-container {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 1200;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 220px;
+    max-width: 360px;
+    padding: 12px 16px;
+    border-radius: 12px;
+    border: 1px solid transparent;
+    background: rgba(15, 23, 42, 0.96);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
+    color: #e2e8f0;
+    font-size: 14px;
+    animation: toast-enter 0.2s ease-out;
+}
+
+.toast-exit {
+    opacity: 0;
+    transform: translateX(8px);
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+}
+
+.toast-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: currentColor;
+}
+
+.toast-message {
+    line-height: 1.4;
+}
+
+.toast-success {
+    border-color: rgba(34, 197, 94, 0.45);
+    color: #86efac;
+}
+
+.toast-error {
+    border-color: rgba(248, 113, 113, 0.45);
+    color: #fecaca;
+}
+
+.toast-warning {
+    border-color: rgba(251, 191, 36, 0.5);
+    color: #fde68a;
+}
+
+.toast-info {
+    border-color: rgba(56, 189, 248, 0.45);
+    color: #bae6fd;
+}
+
+@keyframes toast-enter {
+    from {
+        opacity: 0;
+        transform: translateX(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 .info-card {
     display: flex;
     flex-direction: column;
@@ -624,6 +700,15 @@ button:disabled:hover {
     box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
 }
 
+.text-input:invalid {
+    border-color: #f87171;
+}
+
+.text-input:focus:invalid {
+    border-color: #f87171;
+    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25);
+}
+
 .text-input:disabled,
 .text-input[aria-disabled="true"] {
     background: #020617;