update settings page with status message area

app/styles.css

@@ -525,7 +525,47 @@
       margin-top: 18px;
       padding-top: 16px;
       border-top: 1px solid rgba(63, 63, 70, 0.7);
-      justify-content: flex-end;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+    .settings-page-status {
+      min-width: min(100%, 360px);
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(63, 63, 70, 0.92);
+      background: rgba(9, 9, 11, 0.78);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      box-sizing: border-box;
+    }
+    .settings-page-status[data-tone="info"] {
+      border-color: rgba(59, 130, 246, 0.55);
+      background: rgba(30, 64, 175, 0.14);
+    }
+    .settings-page-status[data-tone="success"] {
+      border-color: rgba(34, 197, 94, 0.5);
+      background: rgba(20, 83, 45, 0.18);
+    }
+    .settings-page-status[data-tone="warning"] {
+      border-color: rgba(245, 158, 11, 0.55);
+      background: rgba(120, 53, 15, 0.18);
+    }
+    .settings-page-status[data-tone="error"] {
+      border-color: rgba(239, 68, 68, 0.55);
+      background: rgba(127, 29, 29, 0.2);
+    }
+    .settings-page-status-text {
+      color: #f8fafc;
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .settings-page-status-time {
+      color: #94a3b8;
+      font-size: 12px;
+      line-height: 1.4;
     }
     .calendar-year-control {
       display: flex;