:root {
  --gold: transparent;
  --gold2: #ffc926;
  --dark: #080807;
  --dark2: #101010;
  --dark3: #161614;
  --cream: #f0ebe0;
  --muted: #b6b6aa;
  --border: rgba(201,168,76,0.18);
  --border-dim: rgba(255,255,255,0.06);
  --red: #e05050;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--dark);
  color:var(--cream);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;
}

@keyframes scan{from{top:0;}to{top:100vh;}}

.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255, 255, 255, 0.04) 1px,transparent 1px);
  background-size:52px 52px;
}

#particles{position:fixed;inset:0;pointer-events:none;z-index:1;}

.card{
  position:relative;
  z-index:10;
  width:100%;
  max-width:440px;
  background:var(--dark2);
  border:1px solid  rgba(255, 255, 255, 0.295);
  padding:56px 52px 52px;
  animation:fadeUp .8s ease both;
  box-shadow: 0px 0px 10px#00000056;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

.card::before,.card::after{
  content:'';position:absolute;
  width:32px;height:32px;
}
.card::before{
  top:0;left:0;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
}
.card::after{
  bottom:0;right:0;
  border-bottom:1px solid var(--gold);
  border-right:1px solid var(--gold);
}

.corner{position:absolute;width:32px;height:32px;}
.corner.tr{top:0;right:0;border-top:1px solid var(--gold);border-right:1px solid var(--gold);}
.corner.bl{bottom:0;left:0;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);}

.logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:40px;
}

.logo-icon{
  width:80px;
  height:60px;
  border:1px solid  rgba(255, 255, 255, 0.295);
  display:flex;
  align-items:center;justify-content:center;
  font-size:22px;
  margin-bottom:16px;
  position:relative;
  border-radius: 10px;
}
.logo-icon::before{
  content:'';
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  border:1px solid transparent;
  animation:borderPulse 3s ease infinite;
}
@keyframes borderPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255, 255, 255, 0);}
  50%{box-shadow:0 0 16px 2px rgba(255, 255, 255, 0.15);}
}

.logo-main{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:1.1em;
  letter-spacing:.2em;
  color:var(--gold);
}
.logo-sub{
  font-size: .7em;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:5px;
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:36px;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{font-size: .8em;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--muted);
}

.field{position:relative;
  margin-bottom:16px;
}

.field label{
  display:block;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
  font-size: .7em;
}

.field input{
  width:100%;
  background:var(--dark3);
  border:none;border-bottom:1px solid var(--border-dim);
  color:var(--cream);
  font-family:'Barlow',sans-serif;font-size:15px;font-weight:300;
  padding:13px 0;outline:none;
  transition:border-color .3s;
  letter-spacing:.04em;
  font-size: 16px;
  border-radius: 10px;
}
.field input:focus{border-color:var(--gold);}
.field input::placeholder{color:rgba(106,106,98,.5);}

.field::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.field:focus-within::after{transform:scaleX(1);}

.btn-login{
  width:100%;margin-top:32px;
  padding:18px;
  background:var(--gold);color:var(--dark);
  border:none;
  font-family:'Barlow',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.35em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius: 10px;
  display:flex;align-items:center;
  justify-content:center;
  gap:12px;
  transition:background .3s,gap .3s;
  position:relative;
  overflow:hidden;
  font-size: 14px;
}
.btn-login::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
  transform:translateX(-100%);transition:transform .5s;
}
.btn-login:hover{background:var(--gold2);gap:18px;}
.btn-login:hover::before{transform:translateX(100%);}
.btn-login:disabled{opacity:.4;cursor:not-allowed;background:var(--muted);}
.btn-login svg{transition:transform .3s;}
.btn-login:hover:not(:disabled) svg{transform:translateX(4px);}

/* MSG */
.msg{
  min-height:20px;margin-top:20px;
  text-align:center;font-size:12px;letter-spacing:.1em;
  opacity:0;transition:opacity .3s;
}
.msg.show{opacity:1;}
.msg.erro{color:var(--red);}
.msg.ok{color:var(--gold);}

/* LOADING SPINNER no botão */
.spinner{
  width:14px;height:14px;
  border:1.5px solid rgba(8,8,7,.4);
  border-top-color:var(--dark);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:none;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn-login.loading .btn-text{display:none;}
.btn-login.loading .spinner{display:block;}

/* BACK LINK */
.back{
  display:block;text-align:center;margin-top:28px;
  font-size:10px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color .3s;
}
.back:hover{color:var(--gold);}

/* RESPONSIVE */
@media(max-width:520px){
  .card{padding:44px 28px 40px;margin:20px;}
}