body {
       background: linear-gradient(135deg, #c9c7eb 0%, #9989a9 100%);
       min-height: 100vh;
       font-family: 'Segoe UI', 'Roboto', sans-serif;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem;
   }

   .auth-card {
       background: #ffffffee;
       border-radius: 16px;
       padding: 2.5rem 2rem;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
       width: 100%;
       max-width: 441px;
       transition: box-shadow 0.3s ease;
   }

   .auth-card:hover {
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
   }

   .auth-card h2 {
       font-weight: 700;
       color: #1e3a8a;
   }

   .form-label {
       font-weight: 500;
       color: #374151;
   }

   .form-label i {
       margin-right: 6px;
       color: #4f46e5;
   }

   .form-control {
       border-radius: 10px;
       padding: 0.75rem 1rem;
       background: #f1f5f9;
       border: 1px solid #e2e8f0;
       font-size: 1rem;
       transition: all 0.2s;
   }

   .form-control:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 3px #c7d2fe;
       background-color: #fff;
   }

   .btn-primary {
       background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
       border: none;
       font-weight: 600;
       font-size: 1.05rem;
       padding: 0.7rem 1rem;
       border-radius: 10px;
       transition: background 0.3s ease;
   }

   .btn-primary:hover {
       background: linear-gradient(90deg, #4338ca 0%, #3730a3 100%);
   }

   .google-btn {
       background: #db4437;
       color: #fff;
       border-radius: 10px;
       font-weight: 600;
       padding: 0.7rem 1rem;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       font-size: 1rem;
   }

   .google-btn:hover {
       background: #c23321;
       color: white;
       text-decoration: none;
   }

   #error-alert {
       border-radius: 8px;
       font-size: 0.95rem;
       padding: 0.75rem;
       background: #fee2e2;
       color: #b91c1c;
       border: none;
       margin-bottom: 1rem;
   }

   .text-muted {
       color: #6b7280 !important;
   }

   .text-center span.text-muted {
       font-weight: 500;
       font-size: 1rem;
   }

   a.text-decoration-none {
       color: #4f46e5;
       font-weight: 500;
   }

   a.text-decoration-none:hover {
       color: #3730a3;
       text-decoration: underline;
   }
   .login-with-google-btn {
  text-decoration: none;
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 30px 12px 42px;
  text-align: center;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 14px;
  font-weight: 500 ;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 100px 15px;
  border: 1px solid #d8d8d8;
}

.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.login-with-google-btn:active {
  background-color: #eeeeee;
}

.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}