theme fix

src/App.css

@@ -12,46 +12,29 @@
 }
 
 /* ============================
-   PROTECTED ROUTE SPINNER
+   PAGE LOADER (swaying tree)
    ============================ */
-.protected-route__loading {
+.page-loader {
     height: 100dvh;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
-    background: #eef6ee;
-    color: #9ca3af;
+    background: var(--color-bg-soft, #eef6ee);
 }
 
-.protected-route__spinner {
-    width: 28px;
-    height: 28px;
-    border: 3px solid #e5e7eb;
-    border-top-color: #22c55e;
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
+.page-loader__tree {
+    transform-origin: center bottom;
+    animation: tree-sway 1.8s ease-in-out infinite alternate;
 }
 
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+@keyframes tree-sway {
+    from { transform: rotate(-5deg); }
+    to   { transform: rotate(5deg); }
 }
 
 /* ============================
    LOGIN PAGE
    ============================ */
-/* ── Loading state ──────────────────────────────────────── */
-.login-page__spinner {
-    width: 28px;
-    height: 28px;
-    border: 3px solid #e5e7eb;
-    border-top-color: #22c55e;
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-}
 
 /* ── Login page — two-panel layout ─────────────────────── */
 .lp {
@@ -62,18 +45,6 @@
     background: linear-gradient(160deg, #eef6ee 0%, #dcfce7 100%);
 }
 
-/* Loading state wrapper */
-.lp--loading {
-    grid-template-columns: 1fr;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    background: var(--color-bg-soft);
-    color: #9ca3af;
-}
-
 /* ── Left: animated tree hero ───────────────────────────── */
 .lp__hero {
     display: flex;
@@ -835,6 +806,17 @@
 [data-theme="dark"] .sba-overlay {
     background: rgba(10, 18, 10, 0.76);
 }
+[data-theme="dark"] .sba-left-group rect {
+    fill: #1a2e1a;
+    stroke: #2d4a2d;
+}
+[data-theme="dark"] .sba-left-group line {
+    stroke: #2d4a2d;
+}
+[data-theme="dark"] .sba-right-group rect {
+    fill: #162416;
+    stroke: #2d4a2d;
+}
 
 /* ============================
    BOTTOM NAVIGATION — Static flex item, always at bottom
@@ -1252,7 +1234,7 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 100%);
+    background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2199,6 +2181,24 @@
     }
 }
 
+/* ============================
+   ALERT MESSAGES
+   ============================ */
+.alert-msg {
+    padding: 0.75rem;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    text-align: center;
+}
+.alert-msg--error {
+    background-color: #fef2f2;
+    color: #b91c1c;
+}
+.alert-msg--success {
+    background-color: #f0fdf4;
+    color: #15803d;
+}
+
 /* ============================
    DARK THEME
    ============================ */
@@ -2504,16 +2504,19 @@
     color: #4ade80;
 }
 
-/* -- Spinners -- */
-[data-theme="dark"] .protected-route__spinner,
-[data-theme="dark"] .login-page__spinner {
-    border-color: #2a2a2a;
-    border-top-color: #4ade80;
+/* -- Page loader -- */
+[data-theme="dark"] .page-loader {
+    background: #0f0f0f;
 }
 
-[data-theme="dark"] .protected-route__loading {
-    background: #0f0f0f;
-    color: #5a6a5a;
+/* -- Alert messages -- */
+[data-theme="dark"] .alert-msg--error {
+    background-color: rgba(185, 28, 28, 0.18);
+    color: #fca5a5;
+}
+[data-theme="dark"] .alert-msg--success {
+    background-color: rgba(21, 128, 61, 0.18);
+    color: #86efac;
 }
 
 /* -- Icon btn hover -- */