html, body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
  color:#0f172a;
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(900px 600px at 88% 82%, rgba(34,197,94,.18), transparent 55%),
    linear-gradient(180deg,#318235,#318235)
}

#login-page{
  position:relative;
  display:flex;
  min-height:100vh;
  overflow:hidden
}

#login-page::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(circle at 86% 78%, rgba(255,255,255,.35), transparent 60%);
  opacity:.75
}

.login-image-side{
  width:54%;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  background-image:url('../../images/gallery/MARZO2.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}

.login-image-side::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 600px at 12% 18%, rgba(14,165,233,.34), transparent 60%),
    radial-gradient(900px 600px at 80% 88%, rgba(34,197,94,.22), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.62), rgba(2,6,23,.22))
}

.login-image-side::before{
  content:"";
  position:absolute;
  inset:-140px;
  z-index:1;
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.22), transparent 35%),
    radial-gradient(circle at 40% 10%, rgba(255,255,255,.18), transparent 32%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.16), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.12), transparent 35%);
  filter:blur(.2px);
  animation:sigmaSparkles 10s ease-in-out infinite
}

@keyframes sigmaSparkles{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.30}
  50%{transform:translate3d(0,-10px,0) scale(1.02);opacity:.44}
}

.login-form-side{
  width:46%;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 54px;
  background:
    radial-gradient(900px 560px at 25% 15%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(760px 520px at 80% 80%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg,#318235 0%, #318235 120%)
}

.login-form-side::before{
  content:"";
  position:absolute;
  inset:-240px;
  z-index:-1;
  background:
    conic-gradient(from 210deg,
      rgba(255,255,255,0),
      rgba(255,255,255,.20),
      rgba(255,255,255,.10),
      rgba(255,255,255,0));
  filter:blur(42px);
  opacity:.55;
  animation:sigmaAura 10s linear infinite
}

@keyframes sigmaAura{to{transform:rotate(360deg)}}

.login-card{
  width:100%;
  max-width:500px;
  padding:46px 48px;
  border-radius:26px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    0 30px 80px rgba(2,6,23,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
  animation:sigmaLoginIn .55s ease-out;
  transform:translateY(0);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease
}

@keyframes sigmaLoginIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.login-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 45% 0%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(650px 340px at 110% 30%, rgba(14,165,233,.18), transparent 55%);
  opacity:.75
}

.login-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:26px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18), rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.65
}

.login-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 40px 100px rgba(2,6,23,.34),
    0 0 0 10px rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.32)
}

.login-card h5{
  text-align:center;
  margin:0 0 14px 0;
  font-weight:900;
  letter-spacing:.5px;
  color:#f8fafc;
  font-size:1.95rem;
  text-shadow:0 16px 34px rgba(2,6,23,.35)
}

.login-card h5::after{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin:14px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
  box-shadow:0 14px 32px rgba(2,6,23,.22)
}

.login-form{
  position:relative;
  z-index:2
}

.login-card .input-field{
  margin-top:18px
}

.login-card .input-field .prefix{
  color:rgba(241,245,249,.82);
  transition:transform .18s ease, color .18s ease
}

.login-card .input-field label{
  color:rgba(241,245,249,.70) !important;
  font-weight:700
}

.login-card .input-field input{
  color:#f8fafc !important;
  border-bottom:1px solid rgba(255,255,255,.45) !important;
  box-shadow:none !important;
  border-radius:14px;
  padding-left:12px !important;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease
}

.login-card .input-field input:focus{
  border-bottom:2px solid rgba(255,255,255,.90) !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.14) !important;
  background:rgba(2,6,23,.12)
}

.login-card .input-field input:focus ~ .prefix{
  color:rgba(255,255,255,.95);
  transform:translateY(-1px)
}

.login-card .input-field input:focus + label{
  color:rgba(255,255,255,.92) !important
}

.login-card .btn{
  width:100%;
  height:50px;
  line-height:50px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.45));
  color:#0b1220;
  box-shadow:
    0 22px 50px rgba(2,6,23,.30),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
  position:relative;
  overflow:hidden
}

.login-card .btn::before{
  content:"";
  position:absolute;
  top:-45%;
  left:-60%;
  width:70%;
  height:210%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.60), transparent);
  transform:rotate(18deg);
  opacity:.65;
  animation:sigmaBtnShine 2.6s ease-in-out infinite
}

@keyframes sigmaBtnShine{
  0%{transform:translateX(-40%) rotate(18deg);opacity:0}
  35%{opacity:.55}
  55%{opacity:.25}
  100%{transform:translateX(220%) rotate(18deg);opacity:0}
}

.login-card .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:
    0 28px 64px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.55)
}

.login-card .btn:active{
  transform:translateY(0)
}

.login-card p.center-align{
  margin-top:1rem !important
}

.login-card a{
  color:rgba(255,255,255,.90);
  font-weight:800;
  font-size:.96rem;
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
  text-shadow:0 10px 26px rgba(2,6,23,.35)
}

.login-card a:hover{
  opacity:.95;
  transform:translateY(-1px);
  color:#ffffff;
  text-decoration:underline
}

.error-message{
  margin-top:14px;
  padding:.9rem 1rem !important;
  border-radius:14px !important;
  background:rgba(239,68,68,.14) !important;
  border:1px solid rgba(239,68,68,.22) !important;
  color:#fecaca !important;
  font-weight:900 !important;
  text-align:center;
  text-shadow:0 10px 26px rgba(2,6,23,.25)
}

#btn-spinner{
  color:#0b1220;
  animation:sigmaHourglass 1.1s linear infinite
}

@keyframes sigmaHourglass{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

@media (max-width:1200px){
  .login-image-side{width:52%}
  .login-form-side{width:48%;padding:56px 40px}
}

@media (max-width:1024px){
  #login-page{flex-direction:column}
  .login-image-side{width:100%;min-height:42vh}
  .login-form-side{width:100%;padding:26px 18px 36px}
  .login-card{margin-top:-54px;padding:38px 28px;border-radius:22px}
}

@media (max-width:480px){
  .login-image-side{min-height:36vh}
  .login-card{padding:28px 20px;border-radius:20px}
  .login-card h5{font-size:1.6rem}
}