:root{
  --bg1:#5a2ea6;
  --bg2:#8b3bd6;
  --bg3:#2a1b5a;
  --glass: rgba(255,255,255,.12);
  --glass2: rgba(255,255,255,.18);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --border: rgba(255,255,255,.20);
  --shadow: rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  min-height:100vh;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 50% 20%, var(--bg2), var(--bg1) 45%, var(--bg3));
}

.bg{ position:fixed; inset:0; }
.stars{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(rgba(255,255,255,.85) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 60px 60px, 90px 90px, 140px 140px;
  background-position: 0 0, 20px 40px, 50px 80px;
  filter: blur(.2px);
  opacity:.55;
  animation: drift 14s linear infinite;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-60px, 40px, 0); }
}

.mountains{
  position:absolute; left:-5%; right:-5%; bottom:-10%;
  height:60%;
  background:
    linear-gradient(to top, rgba(0,0,0,.38), transparent 45%),
    radial-gradient(900px 380px at 25% 70%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(900px 420px at 75% 75%, rgba(0,0,0,.22), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

.wrap{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(440px, 92vw);
  padding:28px 28px 22px;
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 18px 50px var(--shadow);
  backdrop-filter: blur(10px);
}

.card h1{
  margin:4px 0 18px;
  text-align:center;
  font-size:28px;
  letter-spacing:.8px;
}

.field{ margin:14px 0; }
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.6px;
  margin-bottom:6px;
}

.input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(0,0,0,.12);
}
.input input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--txt);
  font-size:14px;
  padding:4px 2px;
}
.icon{ opacity:.75; }

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0 16px;
  flex-wrap:wrap;
}

.check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  user-select:none;
}
.check input{ accent-color:#ffffff; }

.link{
  color: rgba(255,255,255,.86);
  text-decoration:none;
  font-size:13px;
}
.link:hover{ text-decoration:underline; }
.strong{ font-weight:700; }

.btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:12px 14px;
  font-weight:700;
  letter-spacing:.6px;
  cursor:pointer;
  background: #ffffff;
  color:#2a1b5a;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.btn:hover{ transform: translateY(-1px); }

.bottom{
  margin:16px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.alert{
  background: rgba(255, 80, 80, .18);
  border: 1px solid rgba(255, 80, 80, .30);
  color: rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:12px;
  margin: 0 0 12px;
  font-size:13px;
}
/* =========================
   DIVIDER LOGIN
========================= */
.divider{
  margin:18px 0 14px;
  text-align:center;
  position:relative;
}
.divider span{
  font-size:15px;
  color:var(--muted);
  letter-spacing:.6px;
}
.divider:before,
.divider:after{
  content:"";
  position:absolute;
  top:50%;
  width:38%;
  height:1px;
  background: var(--border);
}
.divider:before{ left:0; }
.divider:after{ right:0; }

/* =========================
   BOTÃO OPERADOR
========================= */
.btn-ghost{
  display:block;
  width:100%;
  text-align:center;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  font-weight:700;
  letter-spacing:.6px;
  text-decoration:none;
  backdrop-filter: blur(6px);
  transition: all .15s ease;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
/* ===== Extras (Operador / botão secundário) ===== */
.subtitle{
  margin: -6px 0 14px;
  text-align:center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.divider{
  margin: 8px 0 8px;
}
.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(255,255,255,.18);
}
.divider span{
  padding: 0 2px;
}

.btn-secondary{
  display:block;
  width:100%;
  text-align:center;
  text-decoration:none;
  border-radius:999px;
  padding:12px 14px;
  font-weight:700;
  letter-spacing:.6px;
  cursor:pointer;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}