:root{
  --bg0:#f5f7fb;
  --bg1:#ffffff;
  --text:#0b1220;
  --muted:#5b677a;
  --border:rgba(15,23,42,.12);
  --shadow:0 30px 90px rgba(2,6,23,.12);
  --green:#22c55e;
}

html, body{ height:100%; }
body.es-auth-page{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, rgba(245,247,251,1), rgba(255,255,255,1));
  overflow:hidden;
  color: var(--text);
}

.es-auth-bg{
  position:fixed; inset:-35%;
  background:
    radial-gradient(closest-side at 18% 26%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(closest-side at 85% 18%, rgba(56,189,248,.16), transparent 55%),
    radial-gradient(closest-side at 60% 86%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(closest-side at 10% 92%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(28px) saturate(130%);
  animation: esAuthDrift 14s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes esAuthDrift{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(-2deg); }
  50%{ transform: translate3d(2%, 1%, 0) scale(1.08) rotate(1deg); }
  100%{ transform: translate3d(4%, -2%, 0) scale(1.10) rotate(2deg); }
}

.es-auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 64px 16px;
  position:relative;
}

.es-auth-card{
  width: 420px;
  max-width: calc(100% - 24px);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
}

.es-auth-brand{ display:flex; gap:12px; align-items:center; margin-bottom: 10px; }
.es-auth-badge{
  width:44px; height:44px; border-radius:14px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color: var(--green);
}
.es-auth-title{ font-weight:900; letter-spacing:.2px; }
.es-auth-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

label{ display:block; font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--muted); margin: 10px 0 6px; }
input[type="text"], input[type="password"]{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  font-weight:600;
  outline:none;
  font-family: inherit;
}
input[type="text"]:focus, input[type="password"]:focus{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.es-auth-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top: 10px;
}
.es-auth-check{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.es-auth-check input{ transform: translateY(1px); }
.es-auth-link{ font-size:12px; color: var(--muted); text-decoration:none; }
.es-auth-link:hover{ color: var(--text); text-decoration:underline; }

.es-auth-btn{
  width:100%;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,.55);
  background: var(--green);
  color: #06210f;
  font-weight:900;
  padding: 10px 12px;
  cursor:pointer;
  font-family: inherit;
}
.es-auth-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.es-auth-alert{
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: #7f1d1d;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 10px;
}

.es-auth-foot{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.es-auth-foot .dot{
  width:8px; height:8px; border-radius:999px; background: rgba(34,197,94,.35);
  border: 1px solid rgba(34,197,94,.45);
}