body {
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', sans-serif;
     height: 100vh;
     background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #a1ffce, #fcd1d1, #f6d365, #fda085, #84fab0, #8fd3f4 );
     background-size: 400% 400%;
     animation: gradientBG 10s ease infinite;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
 @keyframes gradientBG {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
 .header {
     position: absolute;
     top: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 15px 0;
     text-align: center;
     font-size: 24px;
     font-weight: bold;
     letter-spacing: 2px;
}
 .login-container {
     background: rgba(255, 255, 255, 0.95);
     padding: 40px;
     border-radius: 15px;
     width: 90%;
     max-width: 360px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
     text-align: center;
     margin-top: 80px;
}
 .login-container h2 {
     margin-bottom: 25px;
     color: #333;
     font-size: 55px;
}
 @media (max-width: 480px) {
     .login-container {
         padding: 25px 20px;
    }
     .login-container h2 {
         font-size: 32px;
    }
     input, button {
         font-size: 15px;
         padding: 10px;
    }
}
 input {
     width: 100%;
     padding: 12px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 10px;
     font-size: 16px;
}
 button {
     width: 100%;
     padding: 12px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 10px;
     font-size: 16px;
     cursor: pointer;
     margin-top: 10px;
     transition: background-color 0.3s ease;
}
 button:hover {
     background-color: #0056b3;
}
 .error {
     color: red;
     font-size: 14px;
     margin-top: 10px;
}
 input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear {
     display: none;
}
 input[type="password"]::-webkit-credentials-auto-fill-button, input[type="password"]::-webkit-contacts-auto-fill-button {
     visibility: hidden;
     pointer-events: none;
     position: absolute;
     right: 0;
}

 .link-container {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 15px;
}
 .link-btn {
     color: #007bff;
     text-decoration: none;
     font-size: 14px;
     text-align: center;
     padding: 8px;
     border-radius: 5px;
     transition: all 0.3s ease;
}
 .link-btn:hover {
     background-color: rgba(0, 123, 255, 0.1);
     text-decoration: underline;
}

 .back-btn {
     background: transparent;
     border: none;
     color: #007bff;
     font-size: 16px;
     cursor: pointer;
     padding: 10px;
     margin-bottom: 15px;
     text-align: left;
     width: 100%;
}
 .back-btn:hover {
     text-decoration: underline;
}
 .step-text {
     background: #e7f3ff;
     padding: 10px;
     border-radius: 8px;
     text-align: center;
     font-weight: 600;
     color: #0056b3;
     margin-bottom: 20px;
     font-size: 14px;
}
 .feedback {
     font-size: 12px;
     margin-top: 5px;
     min-height: 18px;
}
 .feedback.success {
     color: #28a745;
}
 .feedback.error {
     color: #dc3545;
}
 .otp-timer {
     background: #fff3cd;
     border: 1px solid #ffc107;
     border-radius: 8px;
     padding: 10px;
     text-align: center;
     margin: 15px 0;
     font-size: 14px;
     color: #856404;
}
 .primary-btn {
     background: #007bff;
     color: white;
     border: none;
     padding: 12px;
     border-radius: 10px;
     font-size: 16px;
     cursor: pointer;
     width: 100%;
     margin: 10px 0;
     transition: all 0.3s ease;
}
 .primary-btn:hover {
     background: #0056b3;
}
 .primary-btn:disabled {
     background: #ccc;
     cursor: not-allowed;
}
 .secondary-btn {
     background: #6c757d;
     color: white;
     border: none;
     padding: 12px;
     border-radius: 10px;
     font-size: 14px;
     cursor: pointer;
     width: 100%;
     margin: 10px 0;
     transition: all 0.3s ease;
}
 .secondary-btn:hover {
     background: #5a6268;
}
 .secondary-btn:disabled {
     background: #ccc;
     cursor: not-allowed;
}
 #signupScreen, #forgotPasswordScreen {
     animation: fadeIn 0.3s ease;
}
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}


 body.popup-open {
     overflow: hidden;
}

 .custom-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     backdrop-filter: blur(5px);
     animation: fadeIn 0.3s ease;
}

 .custom-popup-content {
     background: #fefefe;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
     width: 90%;
     max-width: 450px;
     text-align: center;
     border-top: 4px solid #007bff;
     transform: scale(0.9);
     animation: zoomIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
 @keyframes fadeIn {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes zoomIn {
     from {
         transform: scale(0.8);
         opacity: 0;
    }
     to {
         transform: scale(1);
         opacity: 1;
    }
}
 .custom-popup-content p {
     font-size: 18px;
     color: #333;
     margin-top: 0;
     margin-bottom: 25px;
     line-height: 1.6;
     white-space: pre-line;
}
 .custom-popup-content .btn-group {
     display: flex;
     gap: 15px;
     justify-content: center;
     margin-top: 20px;
}
 .custom-popup-content button {
     border: none;
     border-radius: 8px;
     padding: 12px 25px;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
     min-width: 100px;
}

 .custom-popup-content #okBtn, .custom-popup-content #yesBtn {
     background: linear-gradient(135deg, #28a745, #218838);
     color: white;
}

 .custom-popup-content #noBtn, .custom-popup-content #cancelBtn {
     background: linear-gradient(135deg, #dc3545, #c82333);
     color: white;
}
 .custom-popup-content #okBtn:hover, .custom-popup-content #yesBtn:hover, .custom-popup-content #noBtn:hover, .custom-popup-content #cancelBtn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 .custom-prompt-input {
     width: 100%;
     padding: 12px;
     font-size: 16px;
     border: 2px solid #ddd;
     border-radius: 8px;
     margin-top: 10px;
     box-sizing: border-box;
}