/* Login screen — a graphite panel with a slow emerald aurora behind it. */

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: #0b1211;
  position: relative;
  overflow: hidden;
}

.auth-aurora { position: absolute; inset: 0; pointer-events: none; }
.auth-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(78px);
  opacity: .5;
  animation: drift 20s ease-in-out infinite alternate;
}
.auth-aurora .a1 { width: 430px; height: 430px; background: #0f766e; top: -110px; inset-inline-start: -90px; }
.auth-aurora .a2 { width: 340px; height: 340px; background: #d97706; bottom: -110px; inset-inline-end: -70px; animation-delay: -7s; }
.auth-aurora .a3 { width: 300px; height: 300px; background: #14a08f; top: 45%; inset-inline-start: 55%; animation-delay: -13s; }

@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(36px,-28px,0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-aurora span { animation: none; }
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 388px;
  background: rgba(18,27,25,.9);
  border: 1px solid #24322f;
  border-radius: 16px;
  padding: 1.9rem 1.6rem 1.6rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  color: #e3ebe8;
}

.auth-mark {
  width: 52px; height: 52px;
  margin: 0 auto .85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #5eead4 0%, #14a08f 55%, #0b544e 100%);
  display: grid; place-items: center;
  font-size: 1.45rem; font-weight: 800; color: #04201d;
  box-shadow: 0 8px 26px rgba(20,160,143,.4);
}

.auth-card h1 {
  text-align: center;
  font-size: 1.3rem;
  margin: 0 0 .2rem;
  color: #fff;
}
.auth-tag {
  text-align: center;
  color: #7d8d89;
  font-size: .84rem;
  margin: 0 0 1.4rem;
}

.auth-card .field { margin-bottom: .85rem; }
.auth-card .field > label {
  color: #93a5a0;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .3rem; display: block;
}
.auth-card input[type=text],
.auth-card input[type=password] {
  width: 100%;
  padding: .62rem .75rem;
  background: #0b1211;
  border: 1px solid #24322f;
  border-radius: 8px;
  color: #e3ebe8;
  font: inherit; font-size: .92rem;
  transition: border-color .16s, box-shadow .16s;
}
.auth-card input::placeholder { color: #55635f; }
.auth-card input:focus {
  outline: none;
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45,212,191,.17);
}

.auth-btn {
  width: 100%;
  margin-top: .5rem;
  padding: .68rem 1rem;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #14a08f 0%, #0f766e 100%);
  color: #04201d;
  font: inherit; font-size: .95rem; font-weight: 800;
  cursor: pointer;
  transition: filter .16s, transform .16s;
}
.auth-btn:hover { filter: brightness(1.09); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; }

.auth-note {
  margin-bottom: 1rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  font-size: .84rem;
  border-inline-start: 3px solid;
  display: flex; align-items: flex-start; gap: .5rem;
}
.auth-note.err  { background: rgba(248,113,113,.13); border-color: #f87171; color: #fca5a5; }
.auth-note.warn { background: rgba(251,191,36,.13);  border-color: #fbbf24; color: #fcd34d; }

.auth-foot {
  margin-top: 1.15rem;
  text-align: center;
  font-size: .78rem;
  color: #55635f;
}
.auth-langs { display: flex; gap: .4rem; justify-content: center; margin-top: .7rem; }
.auth-langs a {
  padding: .22rem .55rem;
  border-radius: 6px;
  font-size: .78rem; font-weight: 600;
  color: #7d8d89;
  border: 1px solid #24322f;
}
.auth-langs a:hover { color: #2dd4bf; border-color: #2dd4bf; }
.auth-langs a.on { background: #2dd4bf; border-color: #2dd4bf; color: #04201d; }