diff --git a/frontend/static/css/cobalt.css b/frontend/static/css/cobalt.css
index f984df7..3494368 100644
--- a/frontend/static/css/cobalt.css
+++ b/frontend/static/css/cobalt.css
@@ -51,9 +51,9 @@
   /* ---- PRIMARY accent -- Emkraan logo blue ramp (500=#2486B9 peak, 600=#1B6FB8 token) ---- */
   --accent-50:#E8F1FB; --accent-100:#C6DEF5; --accent-200:#93C2EC; --accent-300:#5FA4E0;
   --accent-400:#4A9FE0; --accent-500:#2486B9; --accent-600:#1B6FB8; --accent-700:#155A95; --accent-800:#114B7C; --accent-900:#0D3A61;
-  --accent: #1B6FB8;  --accent-hover: #2384C2;  --accent-press:#155A95;  --accent-bright: #4A9FE0;
+  --accent: var(--accent-600);  --accent-hover: #2384C2;  --accent-press:#155A95;  --accent-bright: var(--accent-400);
   --accent-dim: #10223A;  --accent-soft: var(--accent-dim);  --accent-veil: rgba(27,111,184,0.10);
-  --accent-border: rgba(36,134,185,0.55);  --accent-glow: rgba(36,134,185,0.34);
+  --accent-border: rgba(36,134,185,0.45);  --accent-glow: rgba(36,134,185,0.34);
   --accent-grad: linear-gradient(180deg, #2486B9 0%, #1B6FB8 100%);
 
   /* ---- Status -- mapped to logo inks ---- */
@@ -109,16 +109,24 @@
   --ease-in-out: cubic-bezier(0.65,0,0.35,1);
   --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
   --dur-instant:80ms; --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms; --dur-slower:300ms;
-  --t-instant:80ms; --t-fast:120ms; --t:180ms; --t-slow:240ms;
+  --t-instant:80ms; --t-fast:120ms; --t:180ms; --t-slow:260ms;
 
   /* ---- Spacing scale (4px base) ---- */
-  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
+  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:64px;
+
+  /* ---- Layout ---- */
+  --topbar-h:54px; --gutter:24px; --gutter-mobile:16px;
 
   /* ---- Mobile shell: single source for the drawer top-bar height. The fixed
      .mobile-topbar height, the .main-content padding-top, and the sticky-table
      head offset all read this so they can never drift. ---- */
   --mobile-topbar-h:56px;
 
+  /* ---- Z-index ladder ---- */
+  --z-wash:0; --z-base:1; --z-ambient:2; --z-content:3; --z-sticky:10;
+  --z-topbar:30; --z-drawer-backdrop:40; --z-drawer:50; --z-popover:100;
+  --z-modal-backdrop:1000; --z-modal:1010; --z-toast:1100; --z-tooltip:1200;
+
   /* ---- Body ambient wash (dark-but-not-black canvas the glow fades into) ---- */
   --body-wash: radial-gradient(120% 75% at 50% -10%, rgba(36,134,185,0.10) 0%, rgba(11,18,32,0) 55%),
                var(--bg-canvas);
@@ -231,7 +239,7 @@ body::before{
 .bg-blobs .b3{width:52vw;height:52vw;left:6vw;bottom:-24vh;
   background:radial-gradient(circle,rgba(27,111,184,.18),rgba(0,0,0,0) 66%);animation:drift3 18s ease-in-out infinite alternate;}
 .bg-blobs .b4{width:34vw;height:34vw;right:4vw;bottom:-10vh;
-  background:radial-gradient(circle,rgba(52,199,89,.11),rgba(0,0,0,0) 66%);animation:drift4 16s ease-in-out infinite alternate;}
+  background:radial-gradient(circle,rgba(36,134,185,.11),rgba(0,0,0,0) 66%);animation:drift4 16s ease-in-out infinite alternate;}
 /* Auth pages (login/setup) have no .app-container; lift their card above the blobs. */
 .auth-page .auth-card{position:relative;z-index:1;}
 a{color:inherit;text-decoration:none;}
@@ -584,7 +592,7 @@ body{overflow:hidden;background:var(--bg-primary);}
 /* =========================================================================
    17. Toast (JS-spawned + server-flash)
    ========================================================================= */
-.toast-root{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
+.toast-root{position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
 .toast{display:flex;align-items:center;gap:9px;max-width:380px;padding:10px 12px 10px 14px;border-radius:var(--radius-lg);
   font-size:13px;font-weight:500;box-shadow:var(--shadow-md);animation:slideUp .22s var(--ease-out);
   transition:opacity .2s var(--ease),transform .2s var(--ease);
@@ -762,8 +770,8 @@ body{overflow:hidden;background:var(--bg-primary);}
 /* =========================================================================
    24. SSO config modal + provider picker (Portainer-style)
    ========================================================================= */
-.sso-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;
-  background:rgba(6,10,18,.64);backdrop-filter:blur(5px);animation:fadeIn .18s var(--ease-out);}
+.sso-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:24px;
+  background:var(--scrim);backdrop-filter:blur(5px);animation:fadeIn .18s var(--ease-out);}
 .sso-modal{width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
   background:var(--surface-4);border:1px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:riseIn .26s var(--ease-out);}
 .sso-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;}