/* assets/auth.css – login com fundo branco e card azul clarinho */
:root{
  --page-bg:#ffffff;
  --card-bg:#eaf1ff;        /* azul clarinho */
  --card-bd:#bfd3ff;        /* borda azul suave */
  --txt:#0b1228;
  --muted:#64748b;
  --primary:#2563eb;        /* azul */
  --primary-600:#1d4ed8;    /* azul + escuro */
  --input-bg:#ffffff;
  --input-bd:#cbd5e1;
  --input-focus:#93c5fd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--txt);
  background:var(--page-bg);
  display:grid; place-items:center; padding:24px;
}

.card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, #f3f7ff, var(--card-bg));
  border:1px solid var(--card-bd);
  border-radius:18px; padding:24px;
  box-shadow:0 18px 50px rgba(37,99,235,.15);
}

h1{margin:0 0 8px; font-size:22px; font-weight:800}
p.muted{margin:0 0 16px; color:var(--muted)}

label{display:block; font-size:13px; color:#334155; margin:10px 0 6px}
input{
  width:100%; padding:12px; border:1px solid var(--input-bd); border-radius:12px;
  background:var(--input-bg); color:var(--txt); outline:none;
}
input:focus{border-color:var(--input-focus); box-shadow:0 0 0 3px rgba(147,197,253,.45)}

button{
  width:100%; padding:12px; border:1px solid #3564ee; border-radius:12px;
  background:linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#fff; font-weight:700; cursor:pointer;
}
button[disabled]{opacity:.7; cursor:not-allowed}
button:hover{filter:brightness(1.04)}

.row{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
a{color:#2563eb; text-decoration:none}
a:hover{text-decoration:underline}

.alert{margin:12px 0; padding:10px; border-radius:10px}
.alert.err{background:#fff1f2; border:1px solid #fecaca; color:#991b1b}
.alert.ok{background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46}

.footer{margin-top:10px; text-align:center; font-size:12px; color:#6b7280}

/* Loading overlay */
.loading{position:fixed; inset:0; background:rgba(255,255,255,.75); display:none; place-items:center; z-index:50}
.spinner{width:56px;height:56px;border:6px solid #d0d7ff;border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}