.login-card { 
            width: 90%; 
            max-width: 380px; 
            padding: 30px; 
            background-color: #e0e5ec; 
            border-radius: 30px; 
            box-shadow: 20px 20px 60px #bec3cf, -20px -20px 60px #ffffff; 
            text-align: center; 
            transition: all 0.3s ease; 
        }
        .login-card:hover { 
            transform: translateY(-5px); 
            box-shadow: rgb(190, 195, 207) 40.8571px 3.87503px 60px, rgb(255, 255, 255) -40.8571px -3.87503px 60px; 
        }
        .loginHeader { 
            margin-bottom: 40px; 
            text-align: center; 
        }
        .user-avatar { 
            width: 80px; 
            height: 80px; 
            margin: 0 auto 24px; 
            background: #e0e5ec; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            box-shadow: 8px 8px 20px #bec3cf, -8px -8px 20px #ffffff, inset 0 0 0 #bec3cf, inset 0 0 0 #ffffff; 
            transition: all 0.3s ease; 
            cursor: pointer;
            outline: none;
        }
        .user-avatar:hover { 
            box-shadow: 4px 4px 10px #bec3cf, -4px -4px 10px #ffffff, inset 4px 4px 10px #bec3cf, inset -4px -4px 10px #ffffff; 
            transform: scale(1.05); 
        }
        .user-avatar:active, .user-avatar:focus-visible { 
            box-shadow: inset 6px 6px 12px #bec3c9, inset -6px -6px 12px #ffffff; 
            transform: scale(1.05); 
        }
        .user-avatar .inner-icon { 
            width: 40px; 
            height: 40px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: #6c7293; 
        }
        .user-avatar .inner-icon svg { 
            width: 100%; 
            height: 100%; 
        }
        .loginHeader h2 { 
            color: #3d4468; 
            font-size: 2rem; 
            font-weight: 600; 
            margin-bottom: 8px; 
        }
        .loginHeader .subtitle { 
            color: #9499b7; 
            font-size: 15px; 
            font-weight: 400; 
        }
        .form-group { 
            position: relative; 
            margin-bottom: 25px; 
            width: 100%; 
        }
        .app-input { 
            position: relative; 
            background: #e0e5ec; 
            border-radius: 15px; 
            box-shadow: inset 8px 8px 16px #bec3cf, inset -8px -8px 16px #ffffff; 
            transition: all 0.3s ease; 
        }
        .app-input:focus-within { 
            box-shadow: inset 4px 4px 8px #bec3cf, inset -4px -4px 8px #ffffff; 
        }
        .app-input input { 
            width: 100%; 
            background: transparent; 
            border: none; 
            padding: 24px 24px 16px 55px; 
            color: #3d4468; 
            font-size: 16px; 
            font-weight: 500; 
            outline: none; 
            transition: all 0.3s ease; 
        }
        .app-input input::placeholder { 
            color: transparent; 
        }
        
        /* न्यू SVG आइकन्स के लिए CSS */
        .app-input .main-icon-svg { 
            position: absolute; 
            left: 20px; 
            top: 20px; 
            width: 20px;
            height: 20px;
            stroke: #9499b7; 
            z-index: 2; 
        }
        
        label.floating-label { 
            position: absolute; 
            left: 55px; 
            top: 18px; 
            color: #9499b7; 
            pointer-events: none; 
            transition: 0.3s;
            font-size: 0.95rem; 
        }
        input:focus + label.floating-label, 
        input:not(:placeholder-shown) + label.floating-label { 
            top: 6px; 
            left: 55px; 
            font-size: 0.75rem; 
            color: #556080; 
            font-weight: 600; 
        }
        .eye-btn { 
            position: absolute; 
            right: 12px; 
            top: 50%; 
            transform: translateY(-50%); 
            width: 38px; 
            height: 38px; 
            background: #e0e5ec; 
            border-radius: 10px; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            cursor: pointer; 
            color: #888; 
            box-shadow: 4px 4px 8px #bec3c9, -4px -4px 8px #ffffff; 
            transition: all 0.2s ease; 
            z-index: 3; 
        }
        .eye-btn svg {
            width: 18px;
            height: 18px;
            stroke: #888;
            fill: none;
        }
        .eye-btn.active { 
            box-shadow: inset 3px 3px 6px #bec3c9, inset -3px -3px 6px #ffffff; 
        }
        .options-row { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            margin: 10px 5px 25px; 
            font-size: 0.85rem; 
            color: #777; 
        }
        .checkbox-container { 
            display: flex; 
            align-items: center; 
            cursor: pointer; 
            user-select: none;
        }
        .checkbox-container input { 
            display: none; 
        }
        .custom-checkbox { 
            width: 24px; 
            height: 24px; 
            background: #e0e5ec; 
            border-radius: 6px; 
            margin-right: 10px; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            box-shadow: 3px 3px 6px #bec3c9, -3px -3px 6px #ffffff; 
            transition: all 0.2s ease; 
        }
        .custom-checkbox svg {
            width: 12px;
            height: 12px;
            stroke: transparent;
            transition: stroke 0.2s;
        }
        .checkbox-container input:checked + .custom-checkbox { 
            box-shadow: inset 2px 2px 5px #bec3c9, inset -2px -2px 5px #ffffff; 
        }
        .checkbox-container input:checked + .custom-checkbox svg { 
            stroke: #556080; 
        }
        .options-row a { 
            text-decoration: none; 
            color: #777; 
            transition: color 0.2s;
        }
        .options-row a:hover {
            color: #556080;
        }
        @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

        .input-group.error { 
            box-shadow: inset 8px 8px 16px #ffb8c4, inset -8px -8px 16px #ffffff, 0 0 0 2px #ff3b5c;
        }
        .error-message { 
            color: #ff4d4d; 
            font-size: 0.75rem; 
            text-align: left; 
            margin: 5px 0 0 10px; 
            display: none; 
            font-weight: 500;
    transition: 3s ease;
        }
        .input-group.error + .error-message { 
            display: block; 
        }
        button.submit-btn { 
            width: 100%; 
            padding: 15px; 
            border: none; 
            border-radius: 15px; 
            background: #e0e5ec; 
            color: #3d4468;
            font-size: 16px;
            font-weight: 600; 
            cursor: pointer; 
            box-shadow: 6px 6px 12px #bec3c9, -6px -6px 12px #ffffff; 
            transition: all 0.2s ease;
            outline: none;
        }
        button.submit-btn:hover {
            box-shadow: 4px 4px 8px #bec3c9, -4px -4px 8px #ffffff;
        }
        button.submit-btn:active { 
            box-shadow: inset 4px 4px 8px #bec3c9, inset -4px -4px 8px #ffffff; 
        }
        .divider { 
            display: flex; 
            align-items: center; 
            margin: 30px 0; 
            gap: 16px; 
        }
        .divider-line { 
            flex: 1; height: 2px; 
            background: linear-gradient(90deg, transparent, #bec3cf, transparent); 
        }
        .divider span { 
            color: #9499b7; 
            font-size: 13px; 
            font-weight: 500; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        }
        .social-icons { 
            display: flex; 
            justify-content: center; 
            gap: 20px; 
            margin-bottom: 30px; 
        }
        .icon-btn { 
            width: 55px; 
            height: 55px; 
            background: #e0e5ec; 
            border-radius: 15px; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            cursor: pointer; 
            box-shadow: 6px 6px 12px #bec3c9, -6px -6px 12px #ffffff; 
            transition: all 0.2s ease; 
        }
        .icon-btn svg { 
            width: 24px; 
            height: 24px; 
            fill: #556080; 
            transition: 0.3s; 
        }
        .icon-btn:hover {
            box-shadow: 4px 4px 8px #bec3c9, -4px -4px 8px #ffffff;
        }
        .icon-btn:active { 
            box-shadow: inset 4px 4px 8px #bec3c9, inset -4px -4px 8px #ffffff; 
            transform: scale(0.95); 
        }
        .signup-text { 
            font-size: 0.85rem; 
            color: #777; 
        }
        .signup-text a { 
            color: #556080; 
            font-weight: 600; 
            text-decoration: none; 
            margin-left: 5px; 
        }
        .signup-text a:hover {
            text-decoration: underline;
        }