* { box-sizing: border-box; }
body {
  margin: 0; padding: 0; min-height: 100vh;
  font-family: "Segoe UI", Inter, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5; color: #1f2937;
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 55%, #0f766e 100%) fixed;
}
#logincontainer {
  width: 100%; background: transparent; border: none;
  max-width: 960px; margin: 0 auto; padding: 40px 20px;
  position: relative; min-height: 100vh;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px;
}
#logincontainer h2 { font-variant: normal; }
#logincontainer > h2 {
  flex: 0 0 100%;
  font-size: 26px !important; font-weight: 700; letter-spacing: .2px;
  color: #fff !important;
}
#useradminlogin, #memlogin {
  flex: 1 1 340px; max-width: 450px; width: auto; float: none;
  background: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  padding: 28px 28px 24px; margin: 0;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.45);
}
#useradminlogin h2, #memlogin h2 {
  margin: 0 0 18px; font-size: 18px; font-weight: 600; color: #0f172a; text-align: left !important;
  padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;
}
#useradminlogin > div, #memlogin > div { margin-top: 12px !important; }
.failureNotification { display: block; color: #b91c1c; font-size: 13px; }
.failureNotification span:not(:empty) {
  display: block; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
}
.form-control {
  display: block; width: 100%; height: 42px; padding: 8px 12px;
  font-size: 14px; color: #111827; background-color: #f9fafb;
  border: 1px solid #d1d5db; border-radius: 10px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:hover { border-color: #14b8a6; }
.form-control:focus {
  outline: none; background-color: #fff; border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
input#loginbutton, input#loginbuttonII {
  width: 100%; height: 44px; font-size: 15px; font-weight: 600; color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 4px 10px rgba(13,148,136,.35);
  transition: transform .1s, box-shadow .15s, background .15s;
}
input#loginbutton:hover, input#loginbuttonII:hover {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  box-shadow: 0 6px 14px rgba(13,148,136,.45);
}
input#loginbutton:active, input#loginbuttonII:active { transform: translateY(1px); }
input#loginbutton:focus-visible, input#loginbuttonII:focus-visible {
  outline: 3px solid rgba(20,184,166,.45); outline-offset: 2px;
}
#fglink, #mfplink {
  display: inline-block; width: auto !important; float: none !important;
  color: #0d9488; text-decoration: none; font-size: 13px; font-weight: 500;
}
#fglink:hover, #mfplink:hover { color: #0f766e; text-decoration: underline; }
#mfplink { float: right !important; }
#loaderdiv {
  width: 100%; height: 100%; position: fixed; left: 0; top: 0;
  background-color: rgba(15,23,42,.55); z-index: 100; visibility: hidden;
}
#loaderdiv img { position: absolute; top: 40%; left: 50%; }
@media (max-width: 720px) {
  #logincontainer { padding: 24px 14px; gap: 16px; }
  #logincontainer > h2 { font-size: 20px !important; }
  #useradminlogin, #memlogin { flex-basis: 100%; max-width: none; padding: 22px 18px; }
}