* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Poppins', sans-serif;
   }
   
   body {
       background: #f1f5f9;
       color: #0f172a;
   }
   
   /* ================= LOGIN SECTION ================= */
   .login-section {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 80px 20px;
   }
   
   .login-container {
       background: white;
       width: 100%;
       max-width: 450px;
       padding: 40px;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.08);
   }
   
   .login-container h2 {
       text-align: center;
       margin-bottom: 30px;
       color: #0f172a;
   }
   
   .input-group {
       margin-bottom: 20px;
   }
   
   .input-group label {
       font-size: 14px;
       font-weight: 600;
       display: block;
       margin-bottom: 6px;
   }
   
   .input-group input {
       width: 100%;
       padding: 12px 14px;
       border: 1px solid #ccc;
       border-radius: 8px;
       outline: none;
       transition: 0.3s;
       font-size: 14px;
   }
   
   .input-group input:focus {
       border-color: #14b8a6;
       box-shadow: 0 0 0 3px rgba(20,184,166,0.2);
   }
   
   /* Buttons */
   .btn-login {
       width: 100%;
       padding: 12px;
       background: #14b8a6;
       border: none;
       color: white;
       border-radius: 8px;
       font-weight: 600;
       cursor: pointer;
       transition: 0.3s;
       text-align: center;
       text-decoration: none;
       display: inline-block;
   }
   
   .btn-login:hover {
       background: #0f766e;
   }
   
   .btn-reset {
       width: 100%;
       padding: 12px;
       margin-top: 10px;
       background: transparent;
       border: 1px solid #ccc;
       border-radius: 8px;
       cursor: pointer;
       transition: 0.3s;
   }
   
   .btn-reset:hover {
       background: #f1f5f9;
   }
   
   .extra-links {
       margin-top: 20px;
       text-align: center;
       font-size: 14px;
   }
   
   .extra-links a {
       color: #14b8a6;
       text-decoration: none;
       font-weight: 500;
   }
   
   .extra-links a:hover {
       text-decoration: underline;
   }
   
   .alert-error {
       color: red; 
       margin-bottom: 20px; 
       font-weight: 600; 
       text-align: center;
   }
   
   .alert-success {
       color: green; 
       margin-bottom: 20px; 
       font-weight: 600; 
       text-align: center;
   }
   
   /* ================= FOOTER ================= */
   footer {
       background: #0f172a;
       color: white;
       text-align: center;
       padding: 20px;
       margin-top: 40px;
   }