/* Log in / Register — the landing page's look: a dark ink page with the animated grid and soft glows, the form on a
   white card with a travelling border beam, serif headings and the red "stamp" button with its light sweep.
   Loaded after magic.css on every sign-in page (login, register, forgot/reset password, verify email, MFA, complete sign-up, pending approval, admin sign-up review); scoped under body.mu-auth. The grid's
   random squares come from assets/js/magic.js (decorative); nothing depends on any script. Motion is off under
   prefers-reduced-motion. To revert a page, remove this stylesheet, magic.css/magic.js and the mu mu-auth body class. */

body.mu-auth { background: #0c1326; color: #fff; }
/* The pages that don't load marketing.css lose its flex centring, so restate what the shell needs. */
body.mu-auth .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.mu-auth .auth-card { background: var(--color-surface); color: var(--color-text); }
body.mu-auth .auth-shell {
  position: relative; overflow: hidden; flex-direction: column; gap: 22px; padding: 40px 20px;
  background:
    radial-gradient(800px 460px at 82% 8%, rgba(76, 196, 135, 0.18), transparent 60%),
    radial-gradient(700px 440px at 10% 95%, rgba(224, 103, 92, 0.16), transparent 60%),
    #0c1326;
}
body.mu-auth .mu-grid { z-index: 0; }

.mu-auth-tag {
  position: relative; z-index: 1; margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 0.84rem; color: rgba(255, 255, 255, 0.78);
  animation: mu-auth-in 0.6s var(--ease) backwards;
}
.mu-auth-tag b { background: var(--mu-stamp, #9c2b2b); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; letter-spacing: 0.05em; }

body.mu-auth .auth-card {
  position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; --r: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: mu-auth-in 0.7s var(--ease) 0.08s backwards;
}
@keyframes mu-auth-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
body.mu-auth .auth-card .brand .mark { border-radius: 6px; }
body.mu-auth .auth-card h2 { font-size: 1.7rem; letter-spacing: -0.012em; }
body.mu-auth .auth-card .foot-link a { color: var(--color-text); font-weight: 600; }

/* The submit button: the landing page's stamp button with its looping light sweep. */
body.mu-auth .auth-card .btn-primary.btn-block {
  position: relative; overflow: hidden; padding: 13px 22px; font-size: 0.98rem; background: var(--mu-stamp, #9c2b2b); color: #fff8f2;
  box-shadow: 0 8px 24px -10px rgba(156, 43, 43, 0.7); transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
body.mu-auth .auth-card .btn-primary.btn-block:hover { background: #ab3030; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(156, 43, 43, 0.85); }
body.mu-auth .auth-card .btn-primary.btn-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%) 0 0 / 250% 100% no-repeat; background-position: 150% 0;
  animation: mu-sweep 3.2s ease-in-out infinite;
}
body.mu-auth .auth-card input:focus, body.mu-auth .auth-card select:focus { border-color: var(--mu-green, #1e5631); box-shadow: 0 0 0 3px rgba(76, 196, 135, 0.3); }

@media (max-width: 520px) {
  body.mu-auth .auth-shell { padding: 24px 12px; }
  body.mu-auth .auth-card { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-auth-tag, body.mu-auth .auth-card, body.mu-auth .auth-card .btn-primary.btn-block::after { animation: none; }
}