/* modules/auth/styles.css — styles propres aux vues auth (login + invite).
   Les classes structurelles partagées (view-header, tabs, card, …) viennent
   de core/ui/styles.css + modules/shell/styles.css (DA admin). On ne définit
   ici que les classes login-* spécifiques à index.html et invite.html. */

/* ── Login / invite modal (pré-stores) ───────────────────────────────── */
.login-stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
}
.login-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 620px at 50% -12%, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 62%),
    radial-gradient(900px 520px at 88% 108%, color-mix(in oklab, var(--accent) 7%, transparent) 0%, transparent 60%),
    var(--bg);
  animation: backdropIn .4s ease both;
}
[data-theme="dark"] .login-backdrop {
  background:
    radial-gradient(1100px 620px at 50% -12%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 62%),
    radial-gradient(900px 520px at 88% 108%, color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 60%),
    var(--bg);
}
.login-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: modalIn .25s cubic-bezier(.2,.7,.2,1) both;
}
.login-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.login-modal-body {
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.login-h { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 0; color: var(--ink); }
.login-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.login-link { font-size: 12px; color: var(--accent); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.login-link:hover { text-decoration: underline; }
.login-pwd { position: relative; }
.login-pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px;
  color: var(--mute); cursor: pointer; border-radius: var(--radius);
  transition: background .12s, color .12s;
}
.login-pwd-toggle:hover { color: var(--ink); background: var(--bg-deep); }
.login-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.login-remember input { accent-color: var(--accent); width: 14px; height: 14px; }
.login-submit { justify-content: center; padding: 11px 14px; font-size: 14px; margin-top: 6px; }
.login-error {
  background: color-mix(in oklab, var(--live) 12%, var(--bg-elev));
  color: var(--live);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  border: 1px solid color-mix(in oklab, var(--live) 30%, transparent);
}