:root{
  --grad-left:#9b1b8f; --grad-right:#f59e0b; --white:#ffffff; --text:#2a2a2a;
  --muted:#6b7280; --primary:#f59e0b; --primary-hover:#d97706;
  --input-border:#e5e7eb; --shadow:0 10px 25px rgba(0,0,0,.15); --radius:16px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text); background:linear-gradient(90deg,var(--grad-left) 0%,var(--grad-right) 100%);
}
.page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:24px; }
.header{ display:flex; justify-content:center; margin-top:8px; margin-bottom:24px; }
.logo{ width:180px; height:auto; display:block; filter:brightness(0) invert(1); }

.main{ width:100%; max-width:420px; text-align:center; }
.card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 24px 18px; backdrop-filter:blur(2px); }

/* Mensagens */
.msg{ 
  text-align:left; font-weight:600; padding:10px 12px; border-radius:10px; margin-bottom:12px;
  font-size:.95rem;
}
.msg:empty{ display:none; } /* oculta quando não houver texto */

.msg-erro{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.msg-sucesso{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }

.form{ text-align:left; }
.form-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
label{ font-size:.95rem; font-weight:600; color:#374151; }
input[type="email"], input[type="password"]{
  width:100%; height:44px; padding:0 12px; border:1px solid var(--input-border); border-radius:10px;
  background:#fff; color:var(--text); outline:none; transition: box-shadow .2s, border-color .2s;
}
input::placeholder{ color:#9ca3af; }
input:focus{ border-color:#fbbf24; box-shadow:0 0 0 3px rgba(245,158,11,.25); }
.remember{ display:flex; align-items:center; gap:8px; margin:4px 0 14px; user-select:none; cursor:pointer; color:#4b5563; font-size:.95rem; }

.btn-primary{
  width:100%; height:46px; border:none; border-radius:10px; background:var(--primary); color:#fff;
  font-weight:700; font-size:1rem; cursor:pointer; transition: background .2s, transform .03s ease-in;
}
.btn-primary:hover{ background:var(--primary-hover); }
.btn-primary:active{ transform:translateY(1px); }

.forgot{ display:inline-block; margin-top:12px; color:#7c3aed; text-decoration:none; font-weight:600; }
.forgot:hover{ text-decoration:underline; }

.social{ display:flex; justify-content:center; gap:16px; margin:22px 0 10px; }
.social a{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); border-radius:50%; backdrop-filter:blur(2px); color:#fff; text-decoration:none;
  transition: transform .1s ease, background .2s;
}
.social a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.25); }
.social i{ font-size:16px; }

.footer-links{ text-align:center; color:#fff; margin-bottom:6px; font-weight:600; }
.footer-links a{ color:#fff; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

.copyright{ text-align:center; color:#fff; opacity:.9; font-size:.9rem; margin-bottom:6px; }

.whatsapp-float{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); text-decoration:none; z-index:50;
}
.whatsapp-float i{ font-size:24px; }

@media (max-width:420px){
  .logo{ width:160px; }
  .card{ padding:20px 18px 16px; }
}