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

   body {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(135deg, rgb(237, 237, 243), rgb(167, 168, 173));
   }

   .login-box {
     width: 350px;
     background: white;
     padding: 40px 25px;
     border-radius: 15px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     text-align: center;
   }

   .login-box img.logo {
     width: 60px;
     height: 60px;
     margin-bottom: 10px;
   }

   .login-box h4 {
     margin-bottom: 15px;
     color: #3F51B5;
   }

   .input-box {
     position: relative;
     margin-bottom: 10px;
     text-align: left;
   }

   .input-box input {
     width: 100%;
     padding: 10px 12px;
     border: 1px solid #ccc;
     border-radius: 8px;
     outline: none;
     transition: 0.3s;
   }

   .input-box label {
     display: block;
     margin-bottom: 2px;
   }

   .input-box input:focus {
     border-color: #6C63FF;
     box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
   }

   .login-btn {
     width: 100%;
     padding: 10px;
     border: none;
     border-radius: 8px;
     background: #6C63FF;
     color: white;
     font-size: 16px;
     cursor: pointer;
     transition: background 0.3s ease;
   }

   .login-btn:hover {
     background: #574fd6;
   }

   .captcha-container {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
   }

   .captcha-container img {
     height: 60px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }

   .refresh-btn {
     cursor: pointer;
     font-size: 20px;
     color: #6C63FF;
     border: none;
     background: none;
   }

   .error {
     color: red;
     margin-top: 15px;
   }

   .error-msg {
     background: linear-gradient(to right, #e44f4f, #f56f6f)
   }