/* components.css — boutons, formulaires, onglets auth, messages */
.auth-panel { padding: 26px; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.auth-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 12px 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.auth-tabs button.active {
  color: #06101f;
  background: linear-gradient(135deg, var(--acid), var(--cyan));
}

.auth-view { display: none; }
.auth-view.active { display: block; }

.form { display: grid; gap: 16px; margin-top: 22px; }

label { display: grid; gap: 8px; color: var(--text); font-weight: 800; }

input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  outline: none;
}

input:focus {
  border-color: rgba(140, 255, 102, 0.65);
  box-shadow: 0 0 0 4px rgba(140, 255, 102, 0.12);
}

.btn {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 950;
}

.btn.primary { color: #06101f; background: linear-gradient(135deg, var(--acid), var(--cyan)); }
.btn.secondary { color: var(--text); border: 1px solid var(--border); background: var(--panel-strong); }
.btn.danger { color: #190707; background: var(--danger); }

.message {
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 800;
}

.message.error { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.11); }
.message.success { border-color: rgba(140, 255, 102, 0.45); background: rgba(140, 255, 102, 0.10); }