:root {
            --primary:        #1a73e8;
            --primary-dark:   #0d62d9;
            --primary-light:  #e8f0fe;
            --secondary:      #1e8e3e;
            --warning:        #f9ab00;
            --danger:         #d93025;
            --dark:           #202124;
            --light:          #f8f9fa;
            --gray:           #5f6368;
            --border:         #dadce0;
            --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
            --shadow:         0 2px 12px rgba(0,0,0,.10);
            --shadow-md:      0 4px 20px rgba(0,0,0,.12);
            --radius:         12px;
            --radius-sm:      8px;
            --transition:     all .25s ease;
            --bg-page:        #e8f0f8;
            --bg-card:        #ffffff;
            --bg-surface:     #f3f6fb;
            --text-primary:   #202124;
            --text-secondary: #5f6368;
            --text-muted:     #80868b;
            --input-bg:       #f8f9fa;
            --header-bg:      #1a2935;
            --header-text:    #ffffff;
            --table-header:   #f1f3f4;
        }

        /* ═══════════════════════════════════════════════════
           DARK MODE — Carefully designed for readability
        ═══════════════════════════════════════════════════ */
        body.dark-mode {
            --primary:        #7baaf7;
            --primary-dark:   #5a95f5;
            --primary-light:  #1e2d45;
            --secondary:      #34c779;
            --warning:        #fdd663;
            --danger:         #f28b82;
            --dark:           #e8eaed;
            --light:          #2d2f31;
            --gray:           #9aa0a6;
            --border:         #3c3f43;
            --shadow-sm:      0 1px 4px rgba(0,0,0,.3);
            --shadow:         0 2px 12px rgba(0,0,0,.4);
            --shadow-md:      0 4px 20px rgba(0,0,0,.5);
            --bg-page:        #111213;
            --bg-card:        #1e2022;
            --bg-surface:     #2d2f31;
            --text-primary:   #e8eaed;
            --text-secondary: #9aa0a6;
            --text-muted:     #6e7275;
            --input-bg:       #2d2f31;
            --header-bg:      #0d1117;
            --header-text:    #e8eaed;
            --table-header:   #2d2f31;
        }

        body.theme-ocean-blue {
            --primary:        #0284c7;
            --primary-dark:   #0369a1;
            --primary-light:  #e0f2fe;
            --header-bg:      #0c4a6e;
            --bg-page:        #f0f9ff;
        }

        body.theme-industrial {
            --primary:        #d97706;
            --primary-dark:   #b45309;
            --primary-light:  #fef3c7;
            --header-bg:      #1f2937;
            --bg-page:        #fffbeb;
        }

        body.theme-emerald-forest {
            --primary:        #059669;
            --primary-dark:   #047857;
            --primary-light:  #d1fae5;
            --header-bg:      #064e3b;
            --bg-page:        #f0fdf4;
        }

        body.theme-royal-purple {
            --primary:        #7c3aed;
            --primary-dark:   #6d28d9;
            --primary-light:  #ede9fe;
            --header-bg:      #4c1d95;
            --bg-page:        #faf5ff;
        }

        body.theme-crimson-red {
            --primary:        #dc2626;
            --primary-dark:   #b91c1c;
            --primary-light:  #fee2e2;
            --header-bg:      #7f1d1d;
            --bg-page:        #fef2f2;
        }

        body.theme-nordic-teal {
            --primary:        #0d9488;
            --primary-dark:   #0f766e;
            --primary-light:  #ccfbf1;
            --header-bg:      #134e4a;
            --bg-page:        #f0fdfa;
        }

        body.theme-slate-minimal {
            --primary:        #475569;
            --primary-dark:   #334155;
            --primary-light:  #f1f5f9;
            --header-bg:      #0f172a;
            --bg-page:        #f8fafc;
        }

        body.theme-cyber-dark {
            --primary:        #22d3ee;
            --primary-dark:   #0891b2;
            --primary-light:  #164e63;
            --secondary:      #34d399;
            --warning:        #facc15;
            --danger:         #f87171;
            --dark:           #f3f4f6;
            --light:          #1f2937;
            --gray:           #9ca3af;
            --border:         #374151;
            --bg-page:        #0f172a;
            --bg-card:        #1e293b;
            --bg-surface:     #334155;
            --text-primary:   #f8fafc;
            --text-secondary: #cbd5e1;
            --text-muted:     #94a3b8;
            --input-bg:       #334155;
            --header-bg:      #0284c7;
            --header-text:    #ffffff;
            --table-header:   #334155;
        }

                /* ═══════════════════════════════════════════════════
           TOAST
        ═══════════════════════════════════════════════════ */
        .toast-container { 
            position: fixed; 
            z-index: 10000; 
            pointer-events: none; 
            display: flex; 
            flex-direction: column; 
            gap: 10px; 
            transition: all 0.3s ease; 
            max-width: calc(100vw - 32px);
            box-sizing: border-box;
        }
        .toast-container.pos-top { top: 24px; left: 50%; transform: translateX(-50%); align-items: center; }
        .toast-container.pos-bottom { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; }
        .toast-container.pos-top-right { top: 24px; right: 20px; align-items: flex-end; }
        .toast-container.pos-bottom-right { bottom: 24px; right: 20px; align-items: flex-end; }
        .toast-container.pos-top-left { top: 24px; left: 20px; align-items: flex-start; }
        .toast-container.pos-bottom-left { bottom: 24px; left: 20px; align-items: flex-start; }

        .toast {
            background: var(--bg-card); 
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            padding: 12px 20px; 
            border-radius: 12px; 
            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.22), 0 4px 12px -2px rgba(0,0,0,0.12);
            display: flex; 
            align-items: center; 
            gap: 12px;
            animation: toastFadeIn .32s cubic-bezier(.175,.885,.32,1.275);
            font-weight: 600; 
            border: 1px solid var(--border);
            color: var(--text-primary); 
            font-size: 0.9rem; 
            line-height: 1.45;
            min-width: 280px;
            max-width: min(92vw, 560px);
            width: auto;
            word-break: break-word;
            box-sizing: border-box;
            pointer-events: auto;
        }
        .toast span { flex: 1; }
        .toast i { font-size: 1.15rem; flex-shrink: 0; }
        @keyframes toastFadeIn { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }
        
        body.toast-minimal .toast {
            border-radius: 8px; padding: 10px 16px; font-size: 0.86rem; box-shadow: none;
            border-bottom: 3px solid var(--primary); border-left: none; border-right: none; border-top: none;
        }
        body.toast-glassy .toast {
            background: rgba(255,255,255,0.15); backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 12px 32px rgba(0,0,0,0.18);
            color: var(--text-primary);
        }
        body.dark-mode.toast-glassy .toast {
            background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.12);
        }
        body.toast-outlined .toast {
            background: var(--bg-card); border: 2px solid var(--primary); border-radius: 10px; box-shadow: var(--shadow-sm); color: var(--text-primary);
        }
        body.toast-neon .toast {
            background: var(--bg-card); border: 1px solid var(--primary); box-shadow: 0 0 10px var(--primary), 0 0 20px rgba(37,99,235,0.4);
        }
        body.toast-soft-shadow .toast {
            border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); border: 1px solid var(--border);
        }
        body.dark-mode.toast-soft-shadow .toast {
            box-shadow: 0 12px 40px rgba(0,0,0,0.55);
        }
        body.toast-solid .toast {
            background: var(--text-primary); color: var(--bg-page); border: none; border-radius: 10px;
        }

        /* ═══════════════════════════════════════════════════
           SUPPRESS PLACEHOLDER ON ALL PASSWORD BOXES
        ═══════════════════════════════════════════════════ */
        input[type="password"]::placeholder,
        #unifiedAuthInput::placeholder,
        #devPassInput::placeholder,
        #adminPassInput::placeholder {
            color: transparent !important;
            opacity: 0 !important;
            font-size: 0 !important;
        }

        /* ═══════════════════════════════════════════════════
           UNIVERSAL POPUP CLOSE ("X") BUTTON HOVER EFFECT (RED)
        ═══════════════════════════════════════════════════ */
        .auth-close-btn,
        #unifiedAuthClose,
        #unifiedProfileClose,
        #devPassCloseBtn,
        #adminPassCloseBtn,
        #ackModalCloseBtn,
        .modal-close,
        .modal-close-btn,
        .btn-close,
        .close-btn,
        .close-modal,
        .popup-close,
        .universal-close-btn,
        button[aria-label="Close"],
        .modal-header button[onclick*="close"],
        .modal-overlay button[onclick*="close"]:not(.btn-cancel):not(.btn-primary):not(.btn-outline),
        .modal-card button[onclick*="close"]:not(.btn-cancel):not(.btn-primary):not(.btn-outline),
        .profile-popup-box button[onclick*="close"]:not(.btn-cancel),
        button:has(> i.fa-times),
        button:has(> i.fa-xmark),
        i.fa-times,
        i.fa-xmark {
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .auth-close-btn:hover,
        #unifiedAuthClose:hover,
        #unifiedProfileClose:hover,
        #devPassCloseBtn:hover,
        #adminPassCloseBtn:hover,
        #ackModalCloseBtn:hover,
        .modal-close:hover,
        .modal-close-btn:hover,
        .btn-close:hover,
        .close-btn:hover,
        .close-modal:hover,
        .popup-close:hover,
        .universal-close-btn:hover,
        button[aria-label="Close"]:hover,
        .modal-header button[onclick*="close"]:hover,
        .modal-overlay button[onclick*="close"]:not(.btn-cancel):not(.btn-primary):not(.btn-outline):hover,
        .modal-card button[onclick*="close"]:not(.btn-cancel):not(.btn-primary):not(.btn-outline):hover,
        .profile-popup-box button[onclick*="close"]:not(.btn-cancel):hover,
        button:has(> i.fa-times):hover,
        button:has(> i.fa-xmark):hover,
        i.fa-times:hover,
        i.fa-xmark:hover {
            background: #ef4444 !important;
            background-color: #ef4444 !important;
            color: #ffffff !important;
            border-color: #dc2626 !important;
            transform: scale(1.12) !important;
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45) !important;
            cursor: pointer !important;
        }

        .auth-close-btn:hover *,
        #unifiedAuthClose:hover *,
        #unifiedProfileClose:hover *,
        #devPassCloseBtn:hover *,
        #adminPassCloseBtn:hover *,
        #ackModalCloseBtn:hover *,
        .modal-close:hover *,
        .universal-close-btn:hover *,
        button[aria-label="Close"]:hover * {
            color: #ffffff !important;
        }

        /* ═══════════════════════════════════════════════════
           ROTATING LOCK ICON ON ACCESS LOGIN
        ═══════════════════════════════════════════════════ */
        .auth-lock-icon-box {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.12);
            color: var(--primary, #0284c7);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 24px;
            border: 1.5px solid rgba(37, 99, 235, 0.25);
            cursor: pointer;
            user-select: none;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .auth-lock-icon-box:hover {
            transform: rotate(360deg) scale(1.15);
            background: rgba(37, 99, 235, 0.22);
            border-color: var(--primary, #0284c7);
            box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
        }

        .auth-lock-icon-box i,
        .auth-lock-icon-box .fa-lock,
        .auth-lock-icon-box svg {
            display: inline-block;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .auth-lock-icon-box:hover i,
        .auth-lock-icon-box:hover .fa-lock,
        .auth-lock-icon-box:hover svg {
            transform: rotate(360deg);
        }