.login-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--color-bg);

}



.login-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: 10px;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

  padding: 2.5rem 3rem;

  width: 100%;

  max-width: 380px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.5rem;

}



.login-card__brand {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.75rem;

}



.login-card__logo {

  height: 50px;

  width: auto;

}



.login-card__title {

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--color-text);

  margin: 0;

  letter-spacing: 0.01em;

}



.login-card__subtitle {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  margin: -0.75rem 0 0;

  text-align: center;

}



.login-card__divider {

  width: 100%;

  border: none;

  border-top: 1px solid var(--color-border);

  margin: 0;

}



.login-card__btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.625rem;

  padding: 0.625rem 1.25rem;

  background-color: var(--color-accent);

  color: #fff;

  border: none;

  border-radius: 6px;

  font-size: 0.9375rem;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

  transition: opacity 0.15s;

}



.login-card__btn:hover {

  opacity: 0.88;

}



.login-card__btn svg {

  width: 18px;

  height: 18px;

  flex-shrink: 0;

}



.login-flash {

  width: 100%;

  padding: 0.625rem 0.875rem;

  border-radius: 5px;

  font-size: 0.875rem;

}



.login-flash--alert {

  background-color: #fef2f2;

  color: #b91c1c;

  border: 1px solid #fecaca;

}



.login-flash--notice {

  background-color: #f0fdf4;

  color: #15803d;

  border: 1px solid #bbf7d0;

}



[data-theme="dark"] .login-flash--alert {

  background-color: rgba(185, 28, 28, 0.15);

  border-color: rgba(185, 28, 28, 0.3);

  color: #fca5a5;

}



[data-theme="dark"] .login-flash--notice {

  background-color: rgba(21, 128, 61, 0.15);

  border-color: rgba(21, 128, 61, 0.3);

  color: #86efac;

}