/* ══════════════════════════════════════════
   Login Page
══════════════════════════════════════════ */

/* ── Page-level animations ── */
@keyframes loginPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#login-page {
  min-height: 100dvh;
  display: none; /* shown via html.no-session (new users) or inline style (after logout) */
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.46s cubic-bezier(0.4, 0, 1, 1);
  animation: loginPageIn 0.3s ease both;
}
html.no-session #login-page { display: flex; }

#login-page.exiting {
  opacity: 0;
  pointer-events: none;
}

/* ── Card entrance / exit animations ── */
@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(1.875rem) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes loginCardOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1.5rem) scale(1.06);
    filter: blur(8px);
  }
}

.login-card {
  width: 100%;
  max-width: 25rem;
  background: rgba(14, 14, 20, 0.82);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 1.25rem;
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(99, 102, 241, 0.10),
    0 0 120px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: loginCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.login-card.exiting {
  animation: loginCardOut 0.44s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* ── Brand ── */
.login-logo       { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 2rem; }
.login-logo-icon  {
  width: 2.375rem; height: 2.375rem;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border-radius: 0.625rem;
  display: flex; align-items: center; justify-content: center;
}
.login-logo-icon svg { width: 1.25rem; height: 1.25rem; }
.brand-name          { font-size: 1.125rem; font-weight: 700; letter-spacing: -.3px; }
.brand-name span     { color: var(--ac); }
.login-tagline       { font-size: 0.75rem; color: var(--t3); margin-left: auto; }

/* ── Heading ── */
.login-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.4px; margin-bottom: 0.375rem; }
.login-sub   { font-size: 0.84375rem; color: var(--t3); margin-bottom: 1.75rem; }

/* ── Form elements ── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.75rem; font-weight: 600; color: var(--t2);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 0.5rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--rsm);
  color: var(--t1);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.form-input:focus,
.form-select:focus  { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.form-input::placeholder { color: var(--t3); }
.form-input.error        { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.form-error              { font-size: 0.78125rem; color: var(--red); margin-top: 0.375rem; display: none; }
.form-error.show         { display: block; }
.form-hint               { font-size: 0.75rem; color: var(--t3); margin-top: 0.375rem; }
.form-select option      { background: var(--s2); }
.form-row                { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ── Primary button ── */
.btn-primary {
  width: 100%;
  padding: 0.8125rem;
  background: var(--ac);
  color: white;
  border: none;
  border-radius: var(--rsm);
  font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.5rem;
  transition: opacity var(--tr), transform var(--tr);
}
.btn-primary:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.btn-primary svg                  { width: 1rem; height: 1rem; }

.login-footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--t3); }