/* Meet Your Fortune — wspólny wygląd stron konta (logowanie, rejestracja, reset hasła).
   Kolor przewodni zależy od systemu, z którego użytkownik przyszedł (?system=…); stylistyka — faza 12. */
:root { --accent: #1d2a25; --accent-dark: #0f1814; --accent-rgb: 29,42,37; --gold: #A8842E; --muted: #5e6a64; }
body[data-system="tarot"]  { --accent: #0E4F3C; --accent-dark: #0a3d2e; --accent-rgb: 14,79,60; }
body[data-system="iching"] { --accent: #7A1F1C; --accent-dark: #5A1512; --accent-rgb: 122,31,28; }
body[data-system="number"] { --accent: #1E2B55; --accent-dark: #131c3d; --accent-rgb: 30,43,85; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: #1a1a1a;
  font-family: 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #FCFBF9 0%, #FAF8ED 45%, #F3EFDE 100%); }
nav.fa-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 32px; width: 100%; max-width: 1080px; margin: 0 auto; }
.fa-logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--accent); text-decoration: none; letter-spacing: .01em; }
.fa-nav .fa-back { font-size: 14px; color: var(--muted); text-decoration: none; }
.fa-nav .fa-back:hover { color: var(--accent); text-decoration: underline; }
main { flex: 1; }
.auth-wrap { max-width: 420px; margin: 40px auto 80px; padding: 0 20px; }
.auth-card { background: rgba(var(--accent-rgb), .04); border: 1px solid rgba(var(--accent-rgb), .12); border-radius: 16px; padding: 40px 32px; }
.auth-card h1 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 500; color: var(--accent); text-align: center; margin: 0 0 8px; }
.auth-card .subtitle { text-align: center; color: var(--muted); font-size: .95rem; margin: 0 0 28px; line-height: 1.5; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; letter-spacing: .02em; }
.form-group input { width: 100%; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 8px;
  font: inherit; font-size: .95rem; color: #1a1a1a; background: #fff; transition: border-color .2s; }
.form-group input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,132,46,.1); }
.auth-btn { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; margin-top: 8px; }
.auth-btn:hover { background: var(--accent-dark); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-error { display: none; background: rgba(180,40,40,.08); color: #8b1a1a; padding: 10px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 16px; }
.auth-error.visible { display: block; }
.auth-success { display: none; background: rgba(var(--accent-rgb), .07); color: var(--accent); padding: 10px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 16px; }
.auth-success.visible { display: block; }
.auth-success a { color: var(--accent); font-weight: 600; }
.auth-footer { text-align: center; margin-top: 24px; font-size: .9rem; color: var(--muted); }
.auth-footer a, .forgot-link:hover { color: var(--gold); }
.auth-footer a { text-decoration: none; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }
.forgot-link { display: block; text-align: right; margin-top: 8px; font-size: .82rem; color: var(--muted); text-decoration: none; }
.pw-checks { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pw-check { font-size: .8rem; color: #7a8a82; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.pw-check .icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb), .2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.pw-check .icon svg { opacity: 0; transition: opacity .2s; }
.pw-check.pass { color: var(--accent); }
.pw-check.pass .icon { border-color: var(--accent); background: var(--accent); }
.pw-check.pass .icon svg { opacity: 1; }
.pw-match { font-size: .8rem; margin-top: 4px; min-height: 1.2em; }
.pw-match.ok { color: var(--accent); }
.pw-match.mismatch { color: #8b3a3a; }
.dev-link { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: 8px; font-size: .8rem; word-break: break-all; color: var(--muted); }
.dev-link a { color: var(--accent); }
footer.fa-foot { padding: 32px; text-align: center; border-top: 1px solid #e4dccb; font-size: 12.5px; color: var(--muted); }
footer.fa-foot a { color: var(--muted); text-decoration: none; margin: 0 8px; }
footer.fa-foot a:hover { color: var(--accent); }
footer.fa-foot .copyright { font-size: 12px; color: #b3ac9c; margin-top: 8px; }