* { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; }

        /* ===== SCROLLBAR ===== */
        .custom-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        
        /* ===== SWEETALERT ===== */
        .swal2-container { z-index: 9999 !important; }
        .swal-custom-padding { padding: 1rem !important; }
        @media (min-width: 640px) {
            .swal-custom-padding { padding: 1.25rem !important; }
        }

        /* ===== LOGIN PAGE ===== */
        .login-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #0f172a 50%, #1e3a5f 75%, #0f172a 100%);
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        .login-bg::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
                        radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                        radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
            animation: bgPulse 12s ease-in-out infinite alternate;
        }
        @keyframes bgPulse {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-2%, -1%) scale(1.05); }
        }
        .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: floatOrb 20s ease-in-out infinite; }
        .orb-1 { width: 300px; height: 300px; background: #3b82f6; top: 10%; left: 10%; }
        .orb-2 { width: 250px; height: 250px; background: #8b5cf6; bottom: 15%; right: 10%; animation-delay: -7s; animation-duration: 25s; }
        .orb-3 { width: 200px; height: 200px; background: #06b6d4; top: 50%; left: 50%; animation-delay: -14s; animation-duration: 18s; }
        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(30px, -40px); }
            50% { transform: translate(-20px, 20px); }
            75% { transform: translate(40px, 30px); }
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .login-input {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #f1f5f9;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .login-input::placeholder { color: rgba(148, 163, 184, 0.6); }
        .login-input:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.6);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 20px rgba(59, 130, 246, 0.1);
            background: rgba(255, 255, 255, 0.08);
        }
        .btn-login {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
            position: relative; overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-login::before {
            content: ''; position: absolute; top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            transition: left 0.5s;
        }
        .btn-login:hover::before { left: 100%; }
        .btn-login:hover { transform: translateY(-1px); box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4); }
        .btn-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .grid-overlay {
            position: absolute; inset: 0;
            background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px; pointer-events: none;
        }
        .particle { position: absolute; width: 3px; height: 3px; background: rgba(148, 163, 184, 0.3); border-radius: 50%; animation: particleFloat 15s linear infinite; }
        @keyframes particleFloat {
            0% { transform: translateY(100vh) translateX(0); opacity: 0; }
            10% { opacity: 1; } 90% { opacity: 1; }
            100% { transform: translateY(-10vh) translateX(50px); opacity: 0; }
        }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .fade-delay-1 { animation-delay: 0.1s; opacity: 0; }
        .fade-delay-2 { animation-delay: 0.2s; opacity: 0; }
        .fade-delay-3 { animation-delay: 0.3s; opacity: 0; }
        .toggle-password { cursor: pointer; transition: color 0.2s; }
        .toggle-password:hover { color: #93c5fd; }

        /* ===== SIDEBAR ===== */
        .sidebar {
            width: 260px;
            min-height: 100vh;
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 40;
            position: fixed;
            top: 0; left: 0; bottom: 0;
            overflow-y: auto;
        }
        .sidebar-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            z-index: 35;
            opacity: 0; visibility: hidden;
            transition: all 0.3s;
        }
        .sidebar-overlay.active { opacity: 1; visibility: visible; }
        .main-area {
            margin-left: 260px;
            min-height: 100vh;
            transition: margin-left 0.3s;
        }
        @media (max-width: 1023px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main-area { margin-left: 0; }
        }
        .sidebar-link {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 16px; margin: 2px 12px;
            border-radius: 10px; color: #94a3b8;
            font-size: 14px; font-weight: 500;
            transition: all 0.2s; cursor: pointer;
            border: 1px solid transparent;
        }
        .sidebar-link:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
        .sidebar-link.active {
            background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.1));
            color: #60a5fa;
            border-color: rgba(59,130,246,0.2);
            box-shadow: 0 0 20px rgba(59,130,246,0.05);
        }
        .sidebar-link .icon-wrap {
            width: 34px; height: 34px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px; flex-shrink: 0;
            background: rgba(255,255,255,0.04);
            transition: all 0.2s;
        }
        .sidebar-link.active .icon-wrap { background: rgba(59,130,246,0.2); }

        /* ===== DASHBOARD NAVBAR ===== */
        .top-navbar {
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            height: 64px;
            position: sticky; top: 0; z-index: 30;
        }

        /* ===== BIRTHDAY TAB ===== */
        .btab-btn {
            background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
        }
        .btab-btn:hover { background: #e2e8f0; color: #334155; }
        .btab-btn.active { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
        .bday-today { border-color: #fde68a !important; background: #fffbeb !important; }
        .bday-today:hover { border-color: #fcd34d !important; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1) !important; }

        /* ===== USER MENU ===== */
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .user-avatar:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); }
        .dropdown-menu {
            opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.95);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

        /* ===== SALARY RESULT TABLE ===== */
        .salary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .salary-table th, .salary-table td { padding: 10px 14px; text-align: left; }
        .salary-table thead th {
            background: #f8fafc; border-bottom: 2px solid #e2e8f0;
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b;
        }
        .salary-table tbody td { border-bottom: 1px solid #f1f5f9; }
        .salary-table .row-label { color: #475569; font-weight: 500; }
        .salary-table .row-amount { text-align: right; font-family: 'Inter', monospace; font-weight: 600; color: #1e293b; white-space: nowrap; }
        .salary-table .row-desc { color: #94a3b8; font-size: 12px; }
        .salary-table .row-separator td { padding: 4px; background: transparent; border: none; }
        .salary-table .row-header td { background: #f8fafc; font-weight: 700; color: #334155; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; }
        .salary-table .row-total td { background: #f0fdf4; font-weight: 700; color: #166534; border-top: 2px solid #86efac; font-size: 14px; }
        .salary-table .row-gross td { background: #eff6ff; font-weight: 700; color: #1e40af; border-top: 2px solid #93c5fd; }
        .salary-table .row-deduction td { color: #dc2626; }
        .salary-table .row-total-deduction td { background: #fef2f2; font-weight: 700; color: #991b1b; border-top: 2px solid #fca5a5; }

        /* Salary input styling */
        .salary-input {
            border: 1px solid #d1d5db;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 14px;
            transition: all 0.2s;
            background: #fff;
            width: 100%;
        }
        .salary-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
        }

        /* Print styles */
        @media print {
            .sidebar, .top-navbar, .sidebar-overlay, #loginPage { display: none !important; }
            .main-area { margin-left: 0 !important; }
        }

        /* Screenshot Mode styles */
        body.screenshot-mode .sidebar,
        body.screenshot-mode .top-navbar,
        body.screenshot-mode #bdayControls,
        body.screenshot-mode .bday-card-unselected { display: none !important; }
        body.screenshot-mode .main-area { margin-left: 0 !important; padding: 20px !important; }
        body.screenshot-mode #btnExitScreenshot { display: flex !important; }