/* ==========================================================================
   Auth (login/register) — a two-pane card instead of a lone centered form on
   an empty field: the left pane borrows the sidebar's own --panel-* tokens
   (so it's automatically the right shade in both themes, no new tokens) and
   carries an actual thesis about the product; the right pane is the form.
   ========================================================================== */
.auth-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.auth-brand-pane {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 2.25rem;
  background: var(--panel-bg);
}
@media (min-width: 768px) {
  .auth-brand-pane { display: flex; }
}
.auth-brand-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--panel-accent);
  display: inline-block;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent) 25%, transparent);
}
.auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.auth-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--panel-text-muted);
  line-height: 1.45;
}
.auth-feature-list .icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--panel-accent); }
.auth-form-pane {
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-active { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-error { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-neutral { background: var(--color-surface-muted); color: var(--color-text-muted); }