/* Login page — page-specific styles (foundation lives in theme.css) */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.login-box {
  width: min(440px, 100%);
  padding: 42px 38px 30px;
  animation: rise .55s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
}

.brand { margin-bottom: 26px; }
.brand .brand-mark { margin: 0 auto 14px; }
.brand .brand-eyebrow { margin-bottom: 6px; }
.brand h1 {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--foreground);
  margin: 0 0 6px;
}
.brand-sub { color: var(--muted-text); font-size: 14.5px; margin: 0; }

/* form */
.form-floating > .form-control {
  background: #060a12;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  font-size: 15px;
  color: var(--foreground);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-floating > .form-control:focus {
  background: #08111f;
  border-color: var(--primary);
  color: var(--foreground);
  box-shadow: 0 0 0 4px rgba(79,216,208,.12);
}
.form-floating > .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--foreground);
  box-shadow: 0 0 0 1000px #060a12 inset;
}
.form-floating > label { color: var(--muted-text); }

.pass-wrap { position: relative; }
.pass-toggle {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent;
  color: var(--muted-text);
  font-size: 17px; opacity: .55;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  z-index: 3;
}
.pass-toggle:hover { opacity: 1; transform: translateY(-50%) scale(1.12); }
.pass-wrap .form-control { padding-right: 46px; }

.btn-brand .btn-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform .18s;
}
.btn-brand:hover .btn-arrow { transform: translateX(5px); }

.login-alert {
  background: rgba(228,99,76,.12);
  border: 1px solid rgba(228,99,76,.35);
  color: #ffb4a8;
  border-radius: 9px;
  font-size: 14px;
  padding: 11px 14px;
}

.secure-note {
  text-align: center;
  color: var(--muted-text);
  font-size: 13px;
  margin: 20px 0 0;
}

@media (max-width: 560px) {
  .login-box { padding: 34px 24px 24px; }
  .drop-1, .drop-3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-box { animation: none; }
}