@layer atoms {
  [data-atom="auth.login"] .al{ display:grid; gap: var(--al-gap,10px); padding: var(--al-pad,0); }
  [data-atom="auth.login"] .row{ display:grid; gap:6px; }
  [data-atom="auth.login"] label{ opacity:.9; font-size:.9rem; }
  [data-atom="auth.login"] input{
    padding:10px 12px; border:1px solid var(--al-bd, rgba(255,255,255,.2));
    border-radius: var(--al-radius,10px); background: var(--al-bg, transparent); color: var(--al-fg, inherit);
  }
  [data-atom="auth.login"] .actions{ margin-top:6px; display:flex; justify-content:flex-end; }
  [data-atom="auth.login"] .btn{
    appearance:none; border:1px solid transparent; border-radius: var(--al-radius,10px);
    background: var(--al-btn-bg, #fff); color: var(--al-btn-fg, #111); padding:10px 14px; cursor:pointer;
  }
  [data-atom="auth.login"] .msg{ color:#ffb3b3; font-size:.9rem; margin:4px 0 0; }
}