:root {
       --primary: #4361ee;
       --secondary: #3f37c9;
       --accent: #4895ef;
       --light: #f8f9fa;
       --dark: #212529;
       --gray: #6c757d;
       --success: #4cc9f0;
       --error: #f72585;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Montserrat', sans-serif;
   }

   body {
       background-color: #f5f7fb;
       color: var(--dark);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       padding: 1rem;
   }

   .login-container {
       background-color: white;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       width: 100%;
       max-width: 400px;
       overflow: hidden;
       animation: fadeIn 0.5s ease;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .login-header {
       /* background-color: var(--primary); */
       color: white;
       padding: 1.5rem;
       text-align: center;
   }

   .logo {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }

   .login-title {
       color: #000;
       font-size: 1rem;
       font-weight: 500;
   }

   .login-body {
       padding: 2rem;
   }

   .form-group {
       margin-bottom: 1rem;
   }

   label {
       display: block;
       margin-bottom: 0.5rem;
       font-weight: 500;
       color: var(--dark);
       font-size: .9rem;
   }

   input {
       width: 100%;
       padding: 0.5rem 0.5rem;
       border: 1px solid #ddd;
       border-radius: 5px;
       font-size: .8rem;
       transition: all 0.3s ease;
   }

   input:focus {
       outline: none;
       border-color: var(--accent);
       box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.2);
   }

   .otp-container {
       display: none;
       margin-top: 1rem;
   }

   .otp-inputs {
       display: flex;
       justify-content: space-between;
       margin-bottom: 1rem;
   }

   .otp-input {
       width: 45px;
       height: 45px;
       text-align: center;
       font-size: 1rem;
       border: 1px solid #ddd;
       border-radius: 8px;
   }

   .otp-input:focus {
       border-color: var(--accent);
   }

   .btn {
       padding: 0.5rem 0.5rem;
       border-radius: 8px;
       font-size: .9rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s ease;
       border: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 100%;
   }

   .btn-primary {
       background-color: var(--primary);
       color: white;
   }

   .btn-primary:hover {
       background-color: var(--secondary);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
   }

   .btn-secondary {
       background-color: var(--light);
       color: var(--primary);
       border: 1px solid var(--primary);
   }

   .btn-secondary:hover {
       background-color: #e9ecef;
   }

   .timer {
       text-align: center;
       margin: 1rem 0;
       color: var(--gray);
       font-size: 0.7rem;
   }

   .resend-otp {
       text-align: center;
       margin-top: 1rem;
       margin-bottom: 1rem;
       font-size: .9rem;
   }

   .resend-link {
       color: var(--primary);
       text-decoration: none;
       font-weight: 500;
       cursor: pointer;
   }

   .resend-link:hover {
       text-decoration: underline;
   }

   .error-message {
       color: var(--error);
       font-size: 0.9rem;
       margin-top: 0.5rem;
       display: none;
   }

   /* Responsive adjustments */
   @media (max-width: 768px) {
       .login-body {
           padding: 1.5rem;
       }

       .otp-input {
           width: 45px;
           height: 45px;
       }
   }

   @media (max-width: 480px) {
       .login-header {
           padding: 1.2rem;
       }

       .logo {
           font-size: 1.5rem;
       }

       .login-title {
           font-size: 1.1rem;
       }

       .login-body {
           padding: 1.2rem;
       }

       input {
           padding: 0.7rem 0.9rem;
       }

       .otp-input {
           width: 40px;
           height: 40px;
           font-size: 1rem;
       }

       .btn {
           padding: 0.7rem;
           font-size: 0.9rem;
       }
   }