:root{
  --navy:#071a33; --navy-2:#0c2545; --navy-3:#102f57;
  --gold:#b98a2e; --gold-2:#d6a64a; --gold-3:#e7c87f;
  --ink:#13243a; --muted:#6b7a8d;
  --paper:#fbf9f3; --line:#e7e1d3;
  --danger:#b3261e;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; min-height:100svh; display:grid; place-items:center; padding:28px;
  font-family:"Hanken Grotesk",system-ui,Arial,sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -20%, var(--navy-3) 0%, var(--navy-2) 38%, var(--navy) 78%),
    var(--navy);
  position:relative; overflow:hidden;
}
/* atmosfera: glow dourado + brasão fantasma gigante atrás */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 420px at 50% 8%, rgba(214,166,74,.16), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(16,47,87,.6), transparent 70%);
}
body::after{
  content:"S"; position:fixed; right:-6vw; bottom:-14vh; pointer-events:none;
  font-family:"Fraunces",serif; font-weight:600; font-size:min(64vh,560px); line-height:1;
  color:rgba(214,166,74,.04); letter-spacing:-.04em;
}
.grain{position:fixed; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}

.stage{position:relative; z-index:1; width:min(404px,100%); display:grid; justify-items:center; gap:0}

.crest{display:block; width:62px; height:auto; margin:2px auto 16px; filter:drop-shadow(0 6px 12px rgba(185,138,46,.28)); animation:drop .6s cubic-bezier(.2,.8,.2,1) both}

.card{
  width:100%; background:linear-gradient(180deg,#fffdf8,var(--paper));
  border-radius:22px; padding:34px 34px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -30px rgba(2,10,24,.7), 0 8px 24px -16px rgba(0,0,0,.5);
  border:1px solid rgba(214,166,74,.18);
  position:relative; overflow:hidden;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) .06s both;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-2),var(--gold),transparent)}

.brand{text-align:center; margin-bottom:26px}
.eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  padding-bottom:8px; position:relative}
.brand h1{font-family:"Fraunces",serif; font-weight:600; font-size:34px; line-height:1; color:var(--navy); margin:6px 0 0; letter-spacing:-.01em}
.kicker{font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:var(--muted); font-size:15px; margin:8px 0 0}

form{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field>span{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
input{
  font:inherit; font-size:15px; color:var(--ink); padding:13px 15px;
  background:#fff; border:1px solid var(--line); border-radius:12px; transition:border-color .2s, box-shadow .2s;
}
input::placeholder{color:#aab4c0}
input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(185,138,46,.14)}

button[type=submit]{
  margin-top:6px; position:relative; overflow:hidden; cursor:pointer;
  padding:14px; border:0; border-radius:12px; font-size:15px; font-weight:700; letter-spacing:.02em;
  color:var(--navy); background:linear-gradient(135deg,var(--gold-3),var(--gold-2) 40%,var(--gold));
  box-shadow:0 10px 22px -10px rgba(185,138,46,.7); transition:transform .15s, box-shadow .2s;
}
button[type=submit] span{position:relative; z-index:1}
button[type=submit]::after{content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); transition:left .6s ease}
button[type=submit]:hover{transform:translateY(-1px); box-shadow:0 16px 30px -12px rgba(185,138,46,.8)}
button[type=submit]:hover::after{left:130%}
button[type=submit]:active{transform:translateY(0)}
button:disabled{opacity:.55; cursor:default; box-shadow:none}

.erro{margin:2px 0 0; color:var(--danger); font-size:13px; font-weight:500;
  background:rgba(179,38,30,.07); border:1px solid rgba(179,38,30,.18); border-radius:10px; padding:9px 12px}

.trust{margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted)}
.trust a{color:var(--gold); text-decoration:none; font-weight:600}
.trust a:hover{text-decoration:underline}

.legal{margin:20px 0 0; font-size:11.5px; letter-spacing:.04em; color:rgba(232,238,247,.45); text-align:center;
  animation:rise .7s ease .2s both}

/* ---- troca de senha (modal) ---- */
.modal-bg{position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:24px;
  background:rgba(4,12,26,.62); backdrop-filter:blur(6px); animation:fade .3s ease both}
.modal{width:min(400px,100%); background:linear-gradient(180deg,#fffdf8,var(--paper));
  border:1px solid rgba(214,166,74,.2); border-radius:20px; padding:30px 28px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.7); position:relative; overflow:hidden;
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.modal::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-2),var(--gold),transparent)}
.modal .eyebrow{font-size:10.5px}
.modal h2{font-family:"Fraunces",serif; font-weight:600; color:var(--navy); margin:6px 0 6px; font-size:23px}
.modal p{color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 18px}
.modal .field{margin-bottom:14px}
.modal button{width:100%; margin-top:2px}
.modal .erro{margin-top:10px}

@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes drop{from{opacity:0; transform:translateY(-14px) scale(.92)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}