.login {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(22rem, 100%);
  margin: calc(var(--space-7) * 2) auto 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.field input {
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}

.field input:focus-visible {
  outline: var(--border-width) solid var(--accent);
  outline-offset: 3px;
}

.login button {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.login button:focus-visible {
  outline: var(--border-width) solid var(--accent);
  outline-offset: 3px;
}

.login button:disabled {
  cursor: default;
}

.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
  letter-spacing: 0;
  line-height: 1.5;
}