/* =========================================================
   MyCashPower sign-in pages: modern look (mint on dark)
   Log in, Sign up, Forgot password, Reset password.
   Loaded only on those pages, via {% block head_extra %}.
   Scoped to .auth-page or to a body that contains it.
   Remove the <link> in each template to roll back completely.
   ========================================================= */

.auth-page {
  --d-bg: #0a0e13;
  --d-card: #131922;
  --d-inner: #0f141b;
  --d-chip: #1b2330;
  --d-line: rgba(255, 255, 255, 0.08);
  --d-text: #f3f6f9;
  --d-muted: #9da9ba;
  --d-mint: #4ed6a3;
  --d-ink: #04241a;
  --d-red: #ff6b6b;
  max-width: 520px;
  padding-top: 20px;
  color: var(--d-text);
}

/* ---------- Page shell (only when the dashboard is showing) ---------- */

body:has(main.auth-page) {
  --bg: #0a0e13;
  --card-bg: #131922;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f3f6f9;
  --muted: #9da9ba;
  --accent: #4ed6a3;
  --accent-dark: #3cc08f;
  background: #0a0e13;
}

body:has(main.auth-page) .topbar {
  background: rgba(10, 14, 19, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 0;
}

body:has(main.auth-page) .lang-switch {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #131922;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #f3f6f9;
  font-weight: 700;
}

body:has(main.auth-page) .lang-switch:hover {
  box-shadow: inset 0 0 0 1px rgba(78, 214, 163, 0.6);
  color: #f3f6f9;
}

body:has(main.auth-page) .nav-ticker {
  background: #0f141b;
  border-bottom: 0;
}

body:has(main.auth-page) .site-footer,
body:has(main.auth-page) .site-footer a {
  color: #9da9ba;
}

/* Guest header buttons: pills, with colours that survive visited/hover */
body:has(main.auth-page) .header-cta-primary,
body:has(main.auth-page) .header-cta-secondary {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 14px;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 800; white-space: nowrap;
}
body:has(main.auth-page) a.header-cta-primary,
body:has(main.auth-page) a.header-cta-primary:visited,
body:has(main.auth-page) a.header-cta-primary:hover,
body:has(main.auth-page) a.header-cta-primary:focus {
  background: #4ed6a3; color: #04241a;
}
body:has(main.auth-page) a.header-cta-secondary,
body:has(main.auth-page) a.header-cta-secondary:visited,
body:has(main.auth-page) a.header-cta-secondary:hover,
body:has(main.auth-page) a.header-cta-secondary:focus {
  border: 0; background: #131922; color: #f3f6f9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* ---------- Card ---------- */

.auth-page .auth-card {
  max-width: 460px;
  margin: 28px auto 24px;
  padding: 32px 28px;
  border: 0;
  border-radius: 32px;
  background: var(--d-card);
  box-shadow: inset 0 0 0 1px var(--d-line), 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: au-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes au-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.auth-page .auth-card h1 {
  margin: 0 0 20px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--d-text); text-align: left;
}
.auth-page .auth-card .muted { margin: 16px 0 0; color: var(--d-muted); font-size: 0.95rem; line-height: 1.55; }
.auth-page .auth-card h1 + .muted { margin: -8px 0 8px; }

/* Links: mint, bold, never underlined */
.auth-page .auth-card a, .auth-page .auth-card a:visited { color: var(--d-mint); font-weight: 700; text-decoration: none; }
.auth-page .auth-card a:hover { color: #7ce6bd; text-decoration: none; }

.auth-page .scope-note {
  margin: 0 0 16px; padding: 14px 18px;
  border: 0; border-radius: 22px;
  background: var(--d-inner); color: var(--d-muted);
  font-size: 0.9rem; line-height: 1.55;
}
.auth-page .scope-note strong { color: var(--d-text); }
.auth-page .invite-banner { background: rgba(78, 214, 163, 0.12); color: var(--d-text); }

/* ---------- Home link ---------- */

.auth-page .auth-card a.auth-home,
.auth-page .auth-card a.auth-home:visited {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 18px; padding: 8px 16px;
  border-radius: 999px; background: var(--d-chip);
  box-shadow: inset 0 0 0 1px var(--d-line);
  color: var(--d-text); font-size: 0.9rem; font-weight: 700; text-decoration: none;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}
.auth-page .auth-card a.auth-home:hover { background: rgba(78, 214, 163, 0.16); color: var(--d-mint); transform: translateX(-2px); }

/* ---------- Google button ---------- */

.auth-page .auth-card a.btn-google,
.auth-page .auth-card a.btn-google:visited,
.auth-page .auth-card a.btn-google:hover {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 54px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: #fff; color: #1f1f1f;
  font-size: 1rem; font-weight: 700;
  transition: transform 0.15s, box-shadow 0.2s;
}
.auth-page .auth-card a.btn-google:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.auth-page .auth-card a.btn-google:active { transform: scale(0.98); }

.auth-page .auth-divider { margin: 22px 0 6px; color: var(--d-muted); font-size: 0.85rem; }
.auth-page .auth-divider::before, .auth-page .auth-divider::after { background: var(--d-line); }

/* ---------- Fields ---------- */

.auth-page .auth-card label { margin: 16px 0 6px; color: var(--d-muted); font-size: 0.85rem; font-weight: 600; }
.auth-page .optional-tag { color: var(--d-muted); font-weight: 500; font-size: inherit; }

.auth-page .auth-card input[type="text"],
.auth-page .auth-card input[type="email"],
.auth-page .auth-card input[type="password"] {
  width: 100%; height: 54px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--d-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--d-text); font: inherit; font-size: 1rem; font-weight: 600;
  transition: box-shadow 0.2s;
}
.auth-page .auth-card input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--d-mint); }
.auth-page .auth-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--d-text);
  -webkit-box-shadow: 0 0 0 1000px var(--d-bg) inset, 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.auth-page .password-field { position: relative; }
.auth-page .password-field input { padding-right: 88px; }
.auth-page .toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: auto; height: 38px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--d-chip); color: var(--d-mint);
  font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer;
  transition: background 0.2s;
}
.auth-page .toggle-password:hover { background: #243042; color: var(--d-mint); }

.auth-page .field-hint { margin: 8px 0 0 6px; min-height: 1.2em; font-size: 0.85rem; font-weight: 600; color: var(--d-mint); }
.auth-page .field-hint-error { color: var(--d-red); }

/* ---------- Main button ---------- */

.auth-page .auth-card form button[type="submit"] {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; margin-top: 24px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--d-mint); color: var(--d-ink);
  font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  transition: transform 0.15s, filter 0.2s;
}
.auth-page .auth-card form button[type="submit"]:hover { filter: brightness(1.07); }
.auth-page .auth-card form button[type="submit"]:active { transform: scale(0.98); }
.auth-page .auth-card form button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.auth-page a:focus-visible, .auth-page button:focus-visible { outline: 3px solid var(--d-mint); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before { animation: none !important; transition: none !important; }
}

@media (max-width: 700px) {
  .auth-page { padding-top: 8px; }
  .auth-page .auth-card { margin-top: 16px; padding: 26px 20px; border-radius: 28px; }
}