/* ============================================================
   Modern auth UI — shared by member & staff login
   ============================================================ */
:root{
  --auth-bg-1:#0b3d1f;
  --auth-bg-2:#166534;
  --auth-bg-3:#15803d;
  --auth-accent:#16a34a;
  --auth-accent-2:#4ade80;
  --auth-text:#0f172a;
  --auth-muted:#64748b;
  --auth-border:#e2e8f0;
  --auth-radius:18px;
}

*{box-sizing:border-box;}

body.auth-page{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--auth-text);
  background:linear-gradient(135deg,var(--auth-bg-1),var(--auth-bg-2) 55%,var(--auth-bg-3));
  background-size:200% 200%;
  animation:auth-pan 18s ease infinite;
  position:relative;
  overflow:hidden;
}
@keyframes auth-pan{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
/* soft decorative glow blobs */
body.auth-page::before,
body.auth-page::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.45;
  z-index:0;
}
body.auth-page::before{
  width:420px;height:420px;
  background:var(--auth-accent);
  top:-120px;left:-120px;
}
body.auth-page::after{
  width:380px;height:380px;
  background:var(--auth-accent-2);
  bottom:-140px;right:-100px;
}

.auth-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:410px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--auth-radius);
  box-shadow:0 30px 60px -15px rgba(2,6,23,.55);
  padding:40px 34px 32px;
  backdrop-filter:blur(8px);
  animation:auth-rise .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes auth-rise{
  from{opacity:0;transform:translateY(18px) scale(.98);}
  to{opacity:1;transform:none;}
}

.auth-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:22px;
}
.auth-logo img{
  width:84px;height:84px;
  object-fit:cover;
  border-radius:50%;
  padding:6px;
  background:#fff;
  box-shadow:0 8px 22px rgba(67,56,202,.25);
  border:1px solid var(--auth-border);
}
.auth-title{
  margin:14px 0 2px;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-align:center;
}
.auth-subtitle{
  margin:0;
  font-size:.9rem;
  color:var(--auth-muted);
  text-align:center;
}

.auth-alert{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.85rem;
  padding:11px 14px;
  border-radius:12px;
  margin-bottom:18px;
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}
.auth-alert.success{
  background:#ecfdf5;color:#047857;border-color:#a7f3d0;
}

.auth-field{
  position:relative;
  margin-bottom:16px;
}
.auth-field .icon{
  position:absolute;
  top:50%;left:16px;
  transform:translateY(-50%);
  color:var(--auth-muted);
  font-size:.95rem;
  pointer-events:none;
}
.auth-field input{
  width:100%;
  height:52px;
  padding:0 16px 0 44px;
  font-size:.95rem;
  color:var(--auth-text);
  background:#f8fafc;
  border:1.5px solid var(--auth-border);
  border-radius:13px;
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.auth-field input::placeholder{color:#94a3b8;}
.auth-field input:focus{
  background:#fff;
  border-color:var(--auth-accent);
  box-shadow:0 0 0 4px rgba(99,102,241,.15);
}

/* PIN entry */
.auth-field input.pin-input{
  text-align:center;
  letter-spacing:14px;
  font-size:1.5rem;
  font-weight:700;
  padding-left:16px;
  padding-right:0;
}

.auth-btn{
  width:100%;
  height:52px;
  border:none;
  border-radius:13px;
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(135deg,var(--auth-accent),#15803d);
  box-shadow:0 12px 24px -8px rgba(22,163,74,.55);
  transition:transform .15s,box-shadow .15s,opacity .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(22,163,74,.7);}
.auth-btn:active{transform:translateY(0);}
.auth-btn.secondary{
  background:transparent;
  color:var(--auth-muted);
  box-shadow:none;
  border:1.5px solid var(--auth-border);
  height:46px;
  font-weight:500;
}
.auth-btn.secondary:hover{
  transform:none;
  border-color:var(--auth-accent);
  color:var(--auth-accent);
}
.auth-btn.danger{
  background:transparent;color:#b91c1c;border:1.5px solid #fecaca;box-shadow:none;height:46px;
}
.auth-btn.danger:hover{transform:none;background:#fef2f2;}

.auth-divider{
  display:flex;align-items:center;
  gap:12px;
  margin:20px 0 16px;
  color:#94a3b8;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.auth-divider::before,
.auth-divider::after{
  content:"";flex:1;height:1px;background:var(--auth-border);
}

.auth-foot{
  margin-top:18px;
  text-align:center;
  font-size:.85rem;
  color:var(--auth-muted);
}
.auth-link{
  color:var(--auth-accent);
  font-weight:600;
  text-decoration:none;
}
.auth-link:hover{text-decoration:underline;}

.auth-credit{
  position:relative;z-index:1;
  margin-top:18px;
  color:rgba(255,255,255,.7);
  font-size:.78rem;
  text-align:center;
}