/* Email/social authentication visuals. */
.auth-modal { max-width: 510px; margin: 0 auto; }
.modal.auth { max-height: calc(100dvh - 24px); overflow: hidden; }
.modal.auth .modal-content { max-height: calc(100dvh - 24px); overflow: hidden; }
.auth-modal-head { display: flex; align-items: start; justify-content: space-between; gap: 17px; margin-bottom: 20px; }
.auth-modal h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 5vw, 3.3rem); line-height: .9; letter-spacing: -.07em; }
.auth-modal h2 span { color: var(--red); }
.auth-modal-copy { margin: 10px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.auth-tabs { display: flex; gap: 7px; padding: 5px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(0,0,0,.25); }
.auth-tab { flex: 1; min-height: 37px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 800; }
.auth-tab.active { color: #fff; background: rgba(255,16,16,.15); box-shadow: inset 0 0 0 1px rgba(255,40,40,.36); }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 17px 0; color: var(--dim); font-family: "DM Mono", monospace; font-size: .57rem; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: rgba(255,255,255,.1); }
.auth-provider-row { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; padding: 0 2px; }
.auth-provider-btn { flex: 1 1 0; min-width: 0; width: auto !important; padding: 0 12px; text-decoration: none; cursor: pointer; }
.auth-provider-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.google-btn { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #fff; background: rgba(255,255,255,.055); font-size: .72rem; font-weight: 800; transition: .24s var(--ease); }
.google-btn i { color: #4285f4; font-size: 1rem; }
.google-btn:hover { border-color: #4285f4; background: rgba(66,133,244,.1); transform: translateY(-2px); }
.profile-initials { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #ff3b3b, #8c0000); font-family: "Space Grotesk", sans-serif; font-size: .75rem; font-weight: 800; }
.auth-foot-link { margin: 15px 0 0; color: var(--muted); font-size: .66rem; text-align: center; }
.auth-foot-link button { padding: 0; border: 0; color: var(--red-bright); background: none; font-weight: 800; }
/* Styled django-allauth Google confirmation page. */
.social-auth-page { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(circle at 50% 25%, rgba(135,0,0,.25), transparent 46%), var(--black); }
.social-auth-card { width: min(470px, 100%); padding: 38px 34px 30px; border: 1px solid rgba(255,40,40,.5); border-radius: 24px; color: #fff; text-align: center; background: linear-gradient(145deg, #210404, #0b0101); box-shadow: 0 28px 80px rgba(0,0,0,.58), var(--glow); }
.social-auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 25px; text-align: left; }
.social-auth-brand strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: .84rem; }
.social-auth-brand small { display: block; margin-top: 3px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }
.social-auth-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 19px; place-items: center; border: 1px solid rgba(66,133,244,.6); border-radius: 17px; color: #4285f4; background: rgba(66,133,244,.1); font-size: 1.45rem; }
.social-auth-card .eyebrow { margin-bottom: 10px; }
.social-auth-card h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 6vw, 3rem); line-height: .95; letter-spacing: -.07em; }
.social-auth-card h1 span { color: var(--red-bright); }
.social-auth-copy { max-width: 330px; margin: 14px auto 24px; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.social-auth-form { margin: 0; }
.google-continue-btn { display: inline-flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #4285f4; border-radius: 11px; color: #fff; background: #1a73e8; font-size: .72rem; font-weight: 800; transition: .24s var(--ease); }
.google-continue-btn:hover { background: #4285f4; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(66,133,244,.25); }
.google-continue-btn i:first-child { font-size: 1rem; }
.social-auth-cancel { display: block; margin-top: 17px; color: var(--muted); font-size: .66rem; }
.social-auth-cancel:hover { color: #fff; }
.social-auth-note { display: block; margin-top: 22px; color: var(--dim); font-size: .56rem; }
.social-auth-note i { margin-right: 4px; color: var(--green); }
@media (max-width: 560px) {
  .modal-backdrop { padding: 12px; }
  .modal.auth { width: min(100%, 510px); border-radius: 18px; }
  .modal.auth .modal-content { padding: 23px 17px 18px; }
  .auth-modal-head { margin-bottom: 13px; }
  .auth-modal h2 { font-size: clamp(1.8rem, 10vw, 2.55rem); }
  .auth-modal-copy { margin-top: 7px; line-height: 1.45; }
  .auth-tabs { margin-bottom: 13px; }
  .auth-divider { margin: 12px 0; }
  .auth-provider-row { gap: 8px; padding: 0; }
  .auth-provider-btn { padding: 0 8px; font-size: .64rem; }
  .auth-foot-link { margin-top: 11px; }
  .social-auth-page { min-height: calc(100vh - var(--nav-h) - 8px); padding: 22px 14px; }
  .social-auth-card { padding: 28px 19px 23px; border-radius: 19px; }
}

/* Keep every supporting label in the auth modal clearly readable. */
.auth-modal .auth-modal-copy,
.auth-modal .auth-tab,
.auth-modal .auth-divider,
.auth-modal .field label,
.auth-modal .auth-foot-link {
  color: #fff;
}