@layer components {
  .auth-layout { display: flex; flex-direction: column; min-height: 100dvh; background: var(--color-surface) url("../../brand/bgp.webp") center / cover no-repeat; }
  .auth-header { position: fixed; inset: 0 0 auto; height: 72px; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-6); gap: var(--space-6); }
  .auth-header img { object-fit: contain; }
  .auth-main { flex: 1; display: grid; place-items: center; padding: 80px var(--space-6); }
  .auth-panel { width: 100%; max-width: 420px; padding: var(--space-10) var(--space-6); border-radius: var(--radius-card); background: var(--color-surface); }
  .auth-logo { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto var(--space-6); }
  .auth-logo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #000; opacity: 0.16; }
  .auth-panel h1 { text-align: center; font-size: var(--text-2xl); line-height: var(--line-2xl); font-weight: var(--weight-bold); }
  .auth-intro { text-align: center; margin-top: var(--space-1); color: var(--color-text-muted); }
  .auth-intro a { font-weight: var(--weight-semibold); }
  .auth-form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
  .auth-forgot { justify-self: end; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .auth-social { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
  .auth-divider { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--text-xs); }
  .auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--color-border); flex: 1; }
  .auth-back { display: block; text-align: center; margin-top: var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .auth-message { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-info-soft); color: var(--color-info-text); font-size: var(--text-sm); }
  .auth-message[data-error] { background: var(--color-danger-soft); color: var(--color-danger-text); }
  .auth-symbol { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-card); background: var(--color-surface-muted); margin-bottom: var(--space-6); --icon-size: var(--icon-xl); }
  @media (max-width: 520px) { .auth-header { padding-inline: var(--space-4); } .auth-main { padding: 80px var(--space-4); } }
}