/* ===================== LOGIN ===================== */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}

.login { width: 100%; max-width: 420px; }

.login__card {
  background: linear-gradient(180deg, #15151f 0%, #101018 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 38px 30px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: login-in .5s cubic-bezier(.2,.7,.3,1);
}
@keyframes login-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.login__logo { width: 60px; height: 60px; border-radius: 12px; image-rendering: pixelated; margin-bottom: 16px; }
.login__title {
  font-family: var(--font-mc); font-size: 1.9rem; letter-spacing: 2px;
  color: var(--text-primary); line-height: 1;
}
.login__title span { color: var(--moderation); }
.login__subtitle {
  font-family: var(--font-mc); font-size: 0.7rem; letter-spacing: 6px;
  color: var(--text-muted); margin-top: 8px;
}

.login__hint { color: var(--text-secondary); font-size: 0.9rem; margin: 26px 0 14px; }

.login__key {
  width: 100%;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 1.35rem; letter-spacing: 4px; text-align: center;
  color: var(--text-primary);
  background: #0c0c14; border: 1px solid var(--border-glow);
  border-radius: 10px; padding: 16px 12px;
  transition: border-color .2s, box-shadow .2s;
  text-transform: uppercase;
}
.login__key::placeholder { color: #3a3a55; letter-spacing: 4px; }
.login__key:focus {
  outline: none; border-color: var(--moderation);
  box-shadow: 0 0 0 3px rgba(240,101,95,.12);
}
.login__key.shake { animation: shake .4s; border-color: var(--rank-jrmod); }
@keyframes shake {
  10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); }
}

.login__btn {
  width: 100%; margin-top: 14px;
  font-family: var(--font-mc); font-size: 0.95rem; letter-spacing: 3px;
  text-transform: uppercase; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--moderation) 0%, #d94a44 100%);
  border: none; border-radius: 10px; padding: 15px;
  transition: filter .2s, transform .1s, opacity .2s;
}
.login__btn:hover { filter: brightness(1.08); }
.login__btn:active { transform: translateY(1px); }
.login__btn:disabled { opacity: .55; cursor: default; }

.login__error {
  min-height: 20px; margin-top: 14px;
  color: var(--rank-jrmod); font-size: 0.85rem; font-weight: 500;
}
.login__foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.72rem; line-height: 1.5;
}