:root{
  --bg:#0d0d0d;
  --card:#141414;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.10);
  --text:#f0f0f0;
  --muted:#6b7280;
  --red:#e8192c;
  --red2:#b91c1c;
  --red-dim:rgba(232,25,44,0.15);
  --glow:rgba(232,25,44,0.22);
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  overflow:auto;
}

/* background */
.bg-fx{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 55% at 15% 85%, rgba(232,25,44,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 85% 15%, rgba(232,25,44,0.05) 0%, transparent 60%);
  animation:bgDrift 10s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:5% 5%,-5% -5%}
}
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.wrap{
  position:relative;z-index:1;
  width:100%;max-width:430px;
  animation:fadeUp .45s ease both;
}

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

/* logo */
.logo-area{text-align:center;margin-bottom:2rem}
.logo-img{
  max-width:200px;
  height:auto;
  filter: drop-shadow(0 0 24px rgba(232,25,44,0.4));
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(232,25,44,0.35))}
  50%{filter:drop-shadow(0 0 36px rgba(232,25,44,0.55))}
}
.logo-sub{
  font-size:.72rem;
  color:var(--muted);
  margin-top:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* separador */
.divider{
  width:40px;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  margin:.8rem auto 0;
  border-radius:2px;
}

/* card */
.login-card{
  background:var(--card);
  border:0;
  border-radius:16px;
  padding:2rem 2rem 1.95rem;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  position:relative;
  z-index:0;
  overflow:hidden;
  isolation:isolate;
}
.login-card::before{
  content:'';
  position:absolute;
  z-index:0;
  left:-50%;
  top:-50%;
  width:200%;
  height:200%;
  background-repeat:no-repeat;
  background-size:50% 50%,50% 50%;
  background-position:0 0,100% 0,100% 100%,0 100%;
  background-image:linear-gradient(#e8192c,#e8192c),linear-gradient(#dc2626,#dc2626),linear-gradient(#b91c1c,#b91c1c),linear-gradient(#991b1b,#991b1b);
  animation:borderSpin 4s linear infinite;
}
.login-card::after{
  content:'';
  position:absolute;
  z-index:1;
  left:1px;
  top:1px;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  background:var(--card);
  border-radius:15px;
}
.login-card>*{
  position:relative;
  z-index:2;
}
@keyframes borderSpin{
  to{transform:rotate(1turn)}
}

.login-card-title{
  font-size:1.05rem;font-weight:700;
  margin-bottom:.2rem;letter-spacing:-.01em;
}
.login-card-desc{font-size:.8rem;color:var(--muted);margin-bottom:1.5rem}

.field{margin-bottom:1rem}
.field label{
  display:block;font-size:.72rem;font-weight:600;
  color:var(--muted);margin-bottom:.4rem;
  letter-spacing:.07em;text-transform:uppercase;
}
.field-inner{position:relative}
.field-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:.9rem;pointer-events:none;opacity:.45;
  width:18px;text-align:center;
}
.field input{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border2);
  border-radius:9px;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:.88rem;
  min-height:46px;
  padding:10px 12px 10px 42px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input.with-action{padding-right:96px}
.field input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(232,25,44,.12);
  background:rgba(232,25,44,.03);
}
.field input::placeholder{color:rgba(255,255,255,.18)}
.field-action{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:rgba(255,255,255,.07);color:var(--text);
  border-radius:7px;padding:0 12px;font-family:inherit;font-size:.72rem;
  min-width:70px;height:30px;line-height:30px;text-align:center;
  cursor:pointer;transition:background .15s,color .15s;
}
.field-action:hover{background:rgba(232,25,44,.18);color:#fff}

/* erro */
.msg-erro{
  display:none;
  background:rgba(232,25,44,.1);
  border:1px solid rgba(232,25,44,.25);
  border-radius:8px;
  color:#fca5a5;
  font-size:.8rem;
  padding:.6rem 1rem;
  margin-bottom:1rem;
  align-items:center;gap:.5rem;
}
.msg-erro:not(:empty){display:flex}
.msg-erro.oculto{display:none!important}

/* botão */
.btn-login{
  width:100%;
  background:linear-gradient(135deg,var(--red),var(--red2));
  border:none;border-radius:9px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:.9rem;font-weight:700;
  letter-spacing:.02em;
  padding:11px;cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 20px rgba(232,25,44,.3);
  position:relative;overflow:hidden;
  margin-top:.5rem;
}
.btn-login::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .2s;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(232,25,44,.45)}
.btn-login:hover::after{opacity:1}
.btn-login:active{transform:translateY(0) scale(.99)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none}

@media (max-width:480px){
  body{align-items:flex-start;padding:1rem .85rem}
  .wrap{max-width:100%;padding-top:1rem}
  .logo-area{margin-bottom:1.25rem}
  .logo-img{max-width:168px}
  .login-card{padding:1.35rem;border-radius:14px}
  .login-card::after{border-radius:13px}
  .field input.with-action{padding-right:88px}
  .field-action{min-width:64px;padding:0 10px}
}