.ab-auth-user {
  --ab-primary: #FDE68A;
  --ab-secondary: #FEF3C7;
  --ab-accent: #8B6F56;
  --ab-surface: #F9F4EF;
  --ab-text: #2F3437;
  --ab-muted-text: #666666;
  --ab-border: #CCCCCC;
  --ab-shadow: rgba(0, 0, 0, 0.3);
  --ab-error: red;

  --ab-table-hover: #f2e7dc;
  --ab-deleted-bg: #ddd;
  --ab-deleted-text: #777;
  --ab-auth-text-btn-bg: #6D5A4A;
  --ab-auth-btn-hover: #5C4C3E;
  --ab-auth-btn-text: #F9F4EF;
  --ab-auth-heading: #F4A261;
  --ab-auth-label: #457B9D;
  --ab-auth-input-border: #A8DADC;

  background-color: var(--ab-surface);
  color: var(--ab-text);
}

.ab-auth-user .login-container,
.ab-auth-user .account-container {
  background-color: #FFFFFF;
  color: var(--ab-text);
  border: 1px solid var(--ab-border);
  box-shadow: 0 4px 8px var(--ab-shadow);
}

.ab-auth-user .button {
  background-color: var(--ab-primary);
  color: var(--ab-text);
  border: 1px solid var(--ab-border);
}

.ab-auth-user .button:hover {
  background-color: var(--ab-secondary);
}

.ab-auth-user a:not(.button) {
  color: var(--ab-accent);
  text-decoration: underline;
}

.ab-auth-user a:not(.button):hover {
  text-decoration: none;
}

.ab-auth-user input[type="text"],
.ab-auth-user select {
  border: 1px solid var(--ab-border);
  color: var(--ab-text);
  background-color: #FFFFFF;
}