/* ===========================
   Your original styles
   =========================== */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #111c4e;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  overflow: hidden;
}

/* Center wrapper */
.login-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; }

/* Login box with glassmorphism */
.login-container {
  background: rgba(255, 255, 255, 0.15);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  width: 100%;
  max-width: 400px;
  text-align: center;
  animation: fadeIn 0.8s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Logo */
.login-logo { width: 85px; margin-bottom: 20px; animation: floatLogo 3s ease-in-out infinite; }

/* Title */
h2 { margin-bottom: 25px; color: #dce6f2; font-size: 24px; font-weight: 700; letter-spacing: 1px; }

/* Input groups */
.input-group { margin-bottom: 20px; text-align: left; }
label { font-size: 14px; color: #dcdcdc; }

input {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.7);
  color: #fff;
  outline: none;
  transition: border 0.3s, background 0.3s, box-shadow 0.3s;
}
input:focus {
  border-color: #58a6ff;
  background: rgba(22, 27, 34, 0.9);
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}

/* Password wrapper with eye icon */
.password-wrapper { position: relative; display: flex; align-items: center; }
.password-wrapper input { padding-right: 45px; }
.toggle-password {
  position: absolute; right: 12px; top: 55%; transform: translateY(-50%);
  cursor: pointer; color: #8b949e; font-size: 12px; transition: color 0.3s;
}
.toggle-password:hover { color: #fff; }

/* Login Button */
.login-btn {
  display: block; margin: 0 auto 20px auto; width: 85%; padding: 12px;
  background: linear-gradient(135deg, #2ea043, #3fb950);
  border: none; border-radius: 12px; color: white; font-size: 16px; font-weight: bold;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
}
.login-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #3fb950, #4ae169);
  box-shadow: 0 8px 22px rgba(46, 160, 67, 0.6);
}

/* Home Button */
.home-btn {
  display: inline-block; width: auto; min-width: 160px; padding: 12px 18px; border-radius: 12px;
  border: 2px solid #58a6ff; color: #58a6ff; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all 0.3s ease; margin-top: 10px; position: relative; overflow: hidden;
}
.home-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #58a6ff; transition: 0.3s; z-index: -1; }
.home-btn:hover::before { width: 100%; }
.home-btn:hover { color: #0d1117; box-shadow: 0 6px 16px rgba(88, 166, 255, 0.4); }

/* Animations (original) */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Responsive adjustments */
@media (max-width: 480px) {
  .login-container { padding: 30px 20px; border-radius: 16px; }
  .login-logo { width: 65px; }
  h2 { font-size: 20px; }
  input, .login-btn, .home-btn { font-size: 14px; padding: 10px; }
  .home-btn { min-width: 140px; }
}

/* ===========================
   Additions used by Tailwind login + SweetAlert2
   =========================== */

/* Prefer-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-fadeIn, .animate-floatLogo { animation: none !important; }
}

/* Class hooks used in the Tailwind-based markup */
.animate-fadeIn { animation: fadeIn 0.8s ease-in-out; }
.animate-floatLogo { animation: floatLogo 3s ease-in-out infinite; }

/* Extra hover glow for Return Home button when it has class 'group' */
a.group:hover {
  box-shadow: 0 8px 22px rgba(88,166,255,.6);
  transform: translateY(-3px);
}

/* SweetAlert2 compact responsive style */
.swal2-popup.swal-compact {
  width: clamp(280px, 92vw, 360px) !important;
  padding: 0.9rem 1rem !important;
  border-radius: 14px !important;
}
.swal2-title.swal-compact {
  font-size: 1.05rem !important;
  margin: .25rem 0 .25rem !important;
  line-height: 1.2 !important;
}
.swal2-html-container.swal-compact {
  font-size: .92rem !important;
  margin: 0 !important;
}
.swal2-icon.swal-compact {
  transform: scale(.8);
  margin: .25rem auto .25rem !important;
}
.swal2-actions .swal-compact {
  padding: .5rem 1rem !important;
  font-size: .85rem !important;
  border-radius: .6rem !important;
}
@media (max-width: 380px) {
  .swal2-title.swal-compact { font-size: 1rem !important; }
  .swal2-html-container.swal-compact { font-size: .88rem !important; }
  .swal2-icon.swal-compact { transform: scale(.72); }
}