/* ════════════════════════════════════════
   ADMIN LOGIN PAGE — admin-login.css
════════════════════════════════════════ */
.admin-login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden;
}

.alog-wrapper {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  animation: alogRise 0.7s cubic-bezier(0.22,0.61,0.36,1) both 0.1s;
}
@keyframes alogRise {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Brand */
.alog-brand {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.alog-brand-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #0a9396, #007f82);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 8px 24px rgba(10,147,150,0.45);
}
.alog-brand-name {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; color: #fff;
}
.alog-brand-sub {
  font-size: 11px; font-weight: 600;
  color: rgba(148,210,189,0.8);
  text-transform: uppercase; letter-spacing: 1px;
}

/* Card */
.alog-card {
  width: 440px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  backdrop-filter: blur(28px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
  position: relative;
}
.alog-card::before {
  content: '';
  position: absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(148,210,189,0.4), transparent);
}

.alog-card-top {
  padding: 36px 40px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,147,150,0.04);
}
.alog-shield {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(10,147,150,0.12);
  border: 1px solid rgba(10,147,150,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #94d2bd;
  margin: 0 auto 18px;
  box-shadow: 0 0 30px rgba(10,147,150,0.2);
  animation: pulse 3s ease infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 30px rgba(10,147,150,0.2); }
  50%      { box-shadow: 0 0 50px rgba(10,147,150,0.4); }
}
.alog-card-top h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 6px;
}
.alog-card-top p { font-size: 13px; color: rgba(255,255,255,0.42); }

/* Form */
.alog-form {
  padding: 28px 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
}

.alog-group { display: flex; flex-direction: column; gap: 7px; }
.alog-group label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.alog-input-wrap { position: relative; display: flex; align-items: center; }
.alog-icon {
  position: absolute; left: 14px;
  color: #94d2bd; font-size: 13.5px; pointer-events: none; opacity: 0.75;
}
.alog-input-wrap input {
  width: 100%; padding: 13px 44px 13px 42px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 11px;
  font-family: var(--font-body); font-size: 14px; color: #fff;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.alog-input-wrap input::placeholder { color: rgba(255,255,255,0.25); }
.alog-input-wrap input:focus {
  border-color: #94d2bd;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(148,210,189,0.12);
}
.alog-input-wrap input.alog-err-field {
  border-color: #e05252 !important;
  box-shadow: 0 0 0 3px rgba(224,82,82,0.12) !important;
}
.alog-toggle {
  position: absolute; right: 13px;
  background: none; border: none;
  color: rgba(255,255,255,0.35); cursor: pointer; font-size: 13.5px;
  transition: color .2s;
}
.alog-toggle:hover { color: rgba(255,255,255,0.8); }
.alog-err { font-size: 11.5px; color: #ff9a9a; min-height: 15px; padding-left: 2px; }

/* Submit */
.alog-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; margin-top: 4px;
  background: linear-gradient(135deg, #0a9396, #007f82);
  border: none; border-radius: 12px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff;
  cursor: pointer; letter-spacing: 0.2px;
  box-shadow: 0 6px 22px rgba(10,147,150,0.4);
  transition: transform .22s, box-shadow .22s;
}
.alog-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,147,150,0.55); }
.alog-btn:active { transform: translateY(0); }
.alog-btn i:last-child { margin-left: auto; transition: transform .2s; }
.alog-btn:hover i:last-child { transform: translateX(4px); }

/* Back link */
.alog-back {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: rgba(255,255,255,0.4);
  text-decoration: none; transition: color .2s;
}
.alog-back:hover { color: rgba(255,255,255,0.75); }

/* Toast */
.alog-toast {
  margin: 0 0 4px;
  padding: 0; border-radius: 10px;
  font-size: 13px; font-weight: 500; text-align: center;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s, opacity .3s, padding .3s;
}
.alog-toast.show {
  padding: 10px 16px; max-height: 60px; opacity: 1;
}
.alog-toast.success { background: rgba(45,189,136,0.15); border:1px solid rgba(45,189,136,0.3); color:#2dbd88; }
.alog-toast.error   { background: rgba(224,82,82,0.12);  border:1px solid rgba(224,82,82,0.28);  color:#ff9a9a; }

/* Footer */
.alog-footer-tag {
  font-size: 12px; color: rgba(255,255,255,0.28);
  display: flex; align-items: center; gap: 6px;
}
.alog-footer-tag i { color: #94d2bd; }

@media (max-width: 480px) {
  .alog-card { width: 92vw; }
  .alog-form { padding: 24px 22px 28px; }
  .alog-card-top { padding: 28px 22px 22px; }
}