/* ==========================================================
   منصة زاد — auth.css
   Styles communs aux pages d'authentification
   (register, login, confirmation…). Complète style.css.
   ========================================================== */

.reg{background:var(--soft);background-image:radial-gradient(var(--line) 2px,transparent 2.5px);
  background-size:24px 24px;padding:36px 0 56px;min-height:calc(100vh - 64px)}
.fm{max-width:640px;margin:auto;background:var(--card);border:2px solid var(--line);border-radius:24px;padding:26px 20px}
.fm.narrow{max-width:460px}
.fm h1{font-size:1.7rem;font-weight:900}
.fm .sub{margin-bottom:20px}
.fr{display:grid;gap:14px}
.fd label{display:block;font-weight:800;color:var(--ink);margin-bottom:2px}
.fd label small{font-weight:600;color:var(--muted)}
.fd input,.fd select{width:100%;min-height:46px;padding:8px 14px;font:inherit;color:var(--text);
  background:var(--bg);border:2px solid var(--line);border-radius:14px}
.fd input:focus,.fd select:focus{border-color:var(--ink);outline:none}
.fd input:focus-visible,.fd select:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.fd [aria-invalid="true"]{border-color:var(--coral)}
.ltr{direction:ltr;text-align:right}
.er{margin:4px 0 0;color:#c92a2a;font-size:.88rem;font-weight:600;line-height:1.5}
.hint{margin:4px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.al{border-radius:14px;padding:12px 16px;margin-bottom:18px;font-weight:600}
.al a{text-decoration:underline}
.al.bad{background:#fff0f0;border:2px solid var(--coral);color:#c92a2a}
.al.ok{background:#e6fbf3;border:2px solid var(--mint);color:#0b6b54}
.al.info{background:var(--soft);border:2px solid var(--line);color:var(--text)}
.fm .btn{width:100%;margin-top:20px;min-height:50px;font-size:1.05rem}
.alt{text-align:center;margin:16px 0 0;color:var(--muted)}
.alt a{color:var(--ink);font-weight:800;text-decoration:underline}
.fm .btn.inline{width:auto;display:inline-block}

@media (prefers-color-scheme:dark){
  .er{color:#ff8787}
  .al.bad{background:#3a1d24;color:#ffb3b3}
  .al.ok{background:#12372e;color:#8ff0d0}
}
@media (min-width:600px){
  .fm{padding:34px 36px}
  .fr.two{grid-template-columns:1fr 1fr}
}