body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 15% 15%, rgba(37,99,235,.18), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(34,211,238,.10), transparent 22%),
    radial-gradient(circle at 70% 80%, rgba(245,158,11,.08), transparent 20%),
    linear-gradient(135deg,#07101d,#0a1525 45%,#0d1930 100%);
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:#eef4ff;
}
body:before{
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.16;
  mask-image:radial-gradient(circle at center, black, transparent 85%);
  pointer-events:none;
}
.login-wrap{
  position:relative;
  width:min(1180px,calc(100vw - 32px));
  padding:28px;
  border-radius:32px;
  background:rgba(6,14,28,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.back-link{position:relative;z-index:1;color:#dbeafe;font-weight:700;text-decoration:none}
.login-stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  margin-top:18px;
}
.login-side-card{
  background:linear-gradient(180deg,rgba(8,17,34,.76),rgba(8,17,34,.58));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-logo{
  width:220px;
  max-width:70%;
  height:auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.40));
}
.login-logo-inline{display:block;margin:16px auto 22px}
.pill{
  display:inline-flex;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:800;
}
.pill-blue{background:rgba(37,99,235,.12);color:#bfdbfe}
.login-title{margin:0 0 14px;font-size:clamp(2rem,4vw,3rem);line-height:1.05}
.login-sub{margin:0 0 18px;color:#a9bbd9;line-height:1.6}
.login-sub-strong{max-width:58ch;font-size:1rem;margin-left:auto;margin-right:auto}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;width:100%}
.feature-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  display:grid;
  gap:8px;
  color:#a9bbd9;
}
.feature-card strong{color:#eef4ff;font-size:1rem}
.login-box{
  background:linear-gradient(180deg,rgba(8,17,34,.84),rgba(8,17,34,.72));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:30px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.login-box-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.login-box-kicker{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#7dd3fc;font-weight:800;margin-bottom:6px}
.login-box h2{margin:0;font-size:1.9rem;letter-spacing:.02em}
.login-shield{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  font-weight:900;font-size:1.1rem;border:1px solid rgba(255,255,255,.10)
}
.login-shield-blue{background:rgba(37,99,235,.14);color:#dbeafe}
.login-box label{display:block;margin-top:14px;margin-bottom:8px;color:#dbeafe;font-size:.92rem;font-weight:700}
.login-box input,
.login-box button{
  width:100%;
  min-height:54px;
  border-radius:16px;
  box-sizing:border-box;
}
.login-box input{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(17,31,52,.98),rgba(11,22,40,.98));
  color:#eef4ff;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.18);
  transition:border-color .18s, box-shadow .18s;
}
.login-box input::placeholder{color:rgba(219,234,254,.52)}
.login-box input:focus{
  border-color:rgba(96,165,250,.72);
  box-shadow:0 0 0 4px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.22);
}
.login-box button{
  margin-top:18px;
  border:1px solid rgba(96,165,250,.24);
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(37,99,235,.24);
}
.login-box button:hover{filter:brightness(1.03);transform:translateY(-1px)}
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef4ff;
  -webkit-box-shadow:0 0 0 1000px #112039 inset, 0 10px 24px rgba(0,0,0,.18);
  transition:background-color 9999s ease-in-out 0s;
  border:1px solid rgba(255,255,255,.10);
}
.login-footnote{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);color:#a9bbd9;line-height:1.6}
.erro{min-height:20px;color:#fca5a5;margin:12px 0 0}
@media (max-width: 920px){
  .login-stage{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .login-wrap{padding:18px;width:min(100vw - 16px,1180px);border-radius:24px}
  .login-side-card,.login-box{padding:22px;border-radius:22px}
  .feature-grid{grid-template-columns:1fr}
}