/* LinksBuilder — login (/login). Tokens + retro layer from sinapsialab.css. Mobile-first. */

.login-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}

/* Paired with .card-retro .card-retro-lg */
.login-card {
  width: 100%;
  max-width: 25rem;
  padding: 1.75rem 1.25rem;
  background: var(--portfolio-base);
}

.login-title {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  color: var(--portfolio-light);
}

.login-subtitle {
  margin: 0 0 1.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--portfolio-text);
}

.login-field { margin-bottom: 1.5rem; }

.login-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: var(--portfolio-text-light);
}

/* Paired with .input-retro */
.login-field input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  background: var(--portfolio-dark);
  color: var(--portfolio-text);
  transition: border-color 0.15s;
}

.login-field input::placeholder { color: var(--portfolio-text-faint); }

/* Paired with .btn-retro */
.login-btn {
  width: 100%;
  min-height: 3rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--portfolio-gradient-3);
  color: var(--portfolio-text-light);
}

.login-btn:hover {
  background: var(--portfolio-orange);
  color: var(--portfolio-dark);
  text-shadow: none;
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-btn:disabled:hover {
  background: var(--portfolio-gradient-3);
  color: var(--portfolio-text-light);
  box-shadow: var(--retro-shadow);
}

.login-message {
  display: none;
  margin-top: 1.25rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  background: var(--portfolio-dark);
  border: var(--retro-border-width) solid var(--portfolio-accent);
  border-radius: var(--retro-radius);
}

.login-message.success {
  display: block;
  color: var(--status-success);
  border-color: var(--status-success);
}

.login-message.error {
  display: block;
  color: var(--status-error);
  border-color: var(--status-error);
}

.login-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
}

.login-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 0.6rem;
  color: var(--portfolio-text);
  text-decoration: none;
  transition: color 0.15s;
}

.login-footer a:hover { color: var(--portfolio-orange); }

@media (min-width: 641px) {
  .login-wrap { padding: 2.5rem 1rem; }
  .login-card { padding: 2.25rem 2rem; }
  .login-title { font-size: 1.5rem; }
}