*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  min-height:100vh;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:#08020a;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:28px 20px;gap:14px;
  position:relative;overflow:hidden;
}

/* ── FUNDO ─────────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.orb1{position:absolute;width:900px;height:700px;top:50%;left:50%;transform:translate(-50%,-52%);background:radial-gradient(ellipse at center,rgba(140,15,8,.48) 0%,transparent 70%);animation:pulse1 8s ease-in-out infinite;}
.orb2{position:absolute;width:550px;height:440px;bottom:-80px;right:-60px;background:radial-gradient(ellipse at center,rgba(160,95,0,.22) 0%,transparent 70%);animation:floatB 10s ease-in-out infinite;}
.orb3{position:absolute;width:460px;height:360px;top:-60px;left:-60px;background:radial-gradient(ellipse at center,rgba(80,5,30,.26) 0%,transparent 70%);animation:floatB 12s ease-in-out infinite reverse;}
.orb4{position:absolute;width:300px;height:250px;top:15%;right:8%;background:radial-gradient(ellipse at center,rgba(180,120,0,.14) 0%,transparent 70%);animation:floatB 9s ease-in-out infinite 2s;}
.orb5{position:absolute;width:280px;height:220px;bottom:20%;left:6%;background:radial-gradient(ellipse at center,rgba(100,8,40,.18) 0%,transparent 70%);animation:floatB 11s ease-in-out infinite 1s;}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(196,150,24,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(196,150,24,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 75% 65% at 50% 50%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 50%,black 20%,transparent 100%);}
.light-streak{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(200,155,30,.045) 50%,transparent 70%);animation:streak 7s ease-in-out infinite;}

@keyframes pulse1{0%,100%{opacity:.85;transform:translate(-50%,-52%) scale(1);}50%{opacity:1;transform:translate(-50%,-52%) scale(1.07);}}
@keyframes floatB{0%,100%{opacity:.7;}50%{opacity:1;}}
@keyframes streak{0%,100%{opacity:0;}50%{opacity:1;}}

/* ── CARD ───────────────────────────────────────────────── */
.card{
  position:relative;z-index:1;
  width:100%;max-width:490px;
  background:#1a0909;
  border:1px solid rgba(196,150,24,.32);
  border-radius:18px;
  padding:26px 44px 22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 32px 80px rgba(0,0,0,.72);
  animation:up .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* logo + titulo em linha */
.card-head{
  display:flex;align-items:center;gap:18px;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid rgba(196,150,24,.14);
}
.logo{width:250px;flex-shrink:0;height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));}

.head-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;font-weight:normal;letter-spacing:-.02em;margin-bottom:5px;
  background:linear-gradient(90deg,#f0e8d8 0%,#f0d060 35%,#fff8e0 50%,#f0d060 65%,#f0e8d8 100%);
  background-size:250% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3.5s linear infinite;
}
@keyframes shimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}

.head-sub{font-size:13px;line-height:1.5;color:rgba(240,232,216,.70);}

/* alertas */
.alert{
  display:flex;gap:8px;align-items:flex-start;
  padding:10px 13px;border-radius:7px;margin-bottom:15px;
  font-size:13px;line-height:1.4;
  border:1px solid rgba(255,70,70,.20);
  background:rgba(110,10,10,.28);
  color:rgba(255,200,185,.90);
}
.alert-ok{
  border-color:rgba(60,200,100,.18);
  background:rgba(0,80,30,.20);
  color:rgba(160,240,190,.90);
}

/* form */
.form{display:flex;flex-direction:column;gap:12px;}

.lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(240,232,216,.65);margin-bottom:7px;}

.inp-wrap{position:relative;}
.inp{
  width:100%;padding:12px 15px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(240,232,216,.13);
  border-radius:9px;
  color:#f0e8d8;font-size:14px;font-family:inherit;
  outline:none;-webkit-appearance:none;
  transition:border-color .16s,box-shadow .16s;
}
.inp::placeholder{color:rgba(240,232,216,.28);}
.inp:focus{border-color:rgba(196,150,24,.50);box-shadow:0 0 0 3px rgba(196,150,24,.11);}

/* neutraliza o fundo branco do autofill do navegador */
.inp:-webkit-autofill,
.inp:-webkit-autofill:hover,
.inp:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #1a0d0d inset;
  box-shadow:0 0 0 1000px #1a0d0d inset;
  -webkit-text-fill-color:#f0e8d8;
  caret-color:#f0e8d8;
  border-color:rgba(240,232,216,.13);
  transition:background-color 9999s ease-in-out 0s;
}

.eye{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:rgba(240,232,216,.45);font-size:15px;
  padding:5px;border-radius:4px;line-height:1;
  transition:color .14s;
}
.eye:hover{color:#f0e8d8;}
.inp-pass{padding-right:42px;}

/* botão entrar */
.btn-main{
  width:100%;padding:13px;
  background:linear-gradient(90deg,#b07a10 0%,#f0d060 28%,#fff0a0 50%,#f0d060 72%,#b07a10 100%);
  background-size:220% auto;
  animation:btnShimmer 2.8s linear infinite;
  border:none;border-radius:9px;
  color:#120700;font-size:14.5px;font-weight:700;font-family:inherit;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:filter .18s,box-shadow .18s,transform .07s;
  margin-top:2px;
  box-shadow:0 4px 18px rgba(196,150,24,.22);
}
@keyframes btnShimmer{0%{background-position:220% center;}100%{background-position:-220% center;}}
.btn-main:hover{filter:brightness(1.07);box-shadow:0 8px 26px rgba(196,150,24,.26);}
.btn-main:active{transform:translateY(1px);}

/* divisor */
.div{display:flex;align-items:center;gap:10px;color:rgba(240,232,216,.32);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.div::before,.div::after{content:'';flex:1;height:1px;background:rgba(240,232,216,.09);}

/* botão criar usuário */
.btn-sec{
  width:100%;padding:12px;
  background:transparent;
  border:1px solid rgba(240,232,216,.13);
  border-radius:9px;
  color:rgba(240,232,216,.68);font-size:13.5px;font-family:inherit;cursor:pointer;
  transition:border-color .16s,color .16s,background .16s;
}
.btn-sec:hover{border-color:rgba(196,150,24,.30);color:#f0e8d8;background:rgba(196,150,24,.06);}

/* rodapé do card */
.card-foot{
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(240,232,216,.07);
  font-size:11.5px;color:rgba(240,232,216,.40);
  text-align:center;line-height:1.65;
}

/* copyright */
.copy{
  position:relative;z-index:1;
  font-size:11px;color:rgba(240,232,216,.55);
  letter-spacing:.03em;text-align:center;
}

/* ── MODAL ──────────────────────────────────────────────── */
.over{
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  align-items:center;justify-content:center;padding:20px;
}
.over.open{display:flex;}

.mbox{
  width:100%;max-width:430px;
  background:rgba(24,8,8,.97);
  border:1px solid rgba(196,150,24,.30);
  border-radius:18px;padding:30px 34px;
  box-shadow:0 40px 100px rgba(0,0,0,.80);
  animation:up .28s cubic-bezier(.22,1,.36,1) both;
}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}
.mt{font-size:16px;font-weight:600;color:#f0e8d8;margin-bottom:3px;letter-spacing:-.01em;}
.ms{font-size:12.5px;color:rgba(240,232,216,.60);line-height:1.5;}
.mx{background:none;border:none;color:rgba(240,232,216,.40);font-size:24px;line-height:1;cursor:pointer;padding:0;}
.mx:hover{color:#f0e8d8;}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media(max-width:500px){
  .card{padding:22px 20px 18px;}
  .logo{width:160px;}
  .card-head{gap:12px;}
  .head-title{font-size:17px;}
  .mbox{padding:22px 18px;}
}