/* AUTH BEAUTY — Notlife (v1) — 2025-08-21
   Solo stile; nessuna dipendenza dalla logica PHP.  */
:root{
  --nl-primary:#2563eb;      /* blue-600 */
  --nl-primary-2:#1d4ed8;    /* blue-700 */
  --nl-bg-1:#f8fbff;
  --nl-bg-2:#f4f5ff;
  --nl-border:rgba(24,32,56,.08);
  --nl-shadow:rgba(16,24,40,.10);
}

.auth-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 120%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(180deg, var(--nl-bg-1) 0, var(--nl-bg-2) 100%);
}

.auth-page .auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}

.auth-page .auth-card,       /* preferibile */
.auth-page .card{            /* fallback se usi .card */
  width:min(560px, 92vw);
  border-radius:20px;
  border:1px solid var(--nl-border);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 18px 50px var(--nl-shadow);
  padding:28px 24px;
}

.auth-page .brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:8px; }
.auth-page .brand img{ height:72px; width:auto; filter:drop-shadow(0 6px 14px rgba(37,99,235,.25)); }
.auth-page h1{ font-size:22px; letter-spacing:.2px; margin:4px 0 2px; text-align:center; }
.auth-page .subtitle{ color:#667085; font-size:14px; margin-bottom:18px; text-align:center; }

.auth-page .form-label{ font-weight:600; font-size:14px; }
.auth-page .form-control{
  height:48px; border-radius:12px; border:1px solid #e5e7eb; background:#fbfdff;
}

.auth-page .input-icon{ position:relative; }
.auth-page .input-icon i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:18px; color:#94a3b8; }
.auth-page .input-icon input{ padding-left:42px; }

.auth-page .toggle-pass{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#6b7280; border:0; background:transparent;
}

.auth-page .btn-primary{
  height:50px; border-radius:12px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--nl-primary) 0, var(--nl-primary-2) 100%);
  border:1px solid rgba(37,99,235,.2);
  box-shadow:0 8px 20px rgba(37,99,235,.35);
}
.auth-page .btn-primary:active{ transform:translateY(1px); box-shadow:0 6px 16px rgba(37,99,235,.28); }

.auth-page .btn .spinner-border{
  width:1rem; height:1rem; border-width:.2rem; margin-right:.5rem;
}

.auth-page .secure{
  display:flex; align-items:center; gap:6px; color:#16a34a; font-weight:600; font-size:12px;
  margin-top:8px; justify-content:center;
}
.auth-page .footer{ color:#98a2b3; font-size:12px; margin-top:12px; text-align:center; }

@media (max-width:380px){
  .auth-page .auth-card, .auth-page .card{ padding:22px 18px; border-radius:16px }
  .auth-page h1{ font-size:20px }
}