/* The anonymous screen. Loads no JavaScript, works with none too. */
.login-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:radial-gradient(circle at 15% 20%, var(--primary-color-soft) 0%, var(--primary-color) 45%, var(--primary-color-dark) 100%);
  position:relative;
  overflow:hidden;
  padding:var(--sp-5);
}
.login-rings{
  position:absolute;
  right:-140px;
  bottom:-160px;
  width:560px;
  height:560px;
  pointer-events:none;
}
.login-rings svg{width:100%;height:100%;}
.login-rings circle{fill:none;stroke:var(--on-brand-fill-2);stroke-width:1.5;}
.login-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:380px;
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:40px 36px 32px;
  text-align:center;
  animation:cardIn .5s var(--ease);
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(14px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.login-card img.logo{width:150px;margin:0 auto 6px;}
.login-card .login-sub{
  font-size:var(--fs-base);
  color:var(--text-secondary);
  margin-bottom:26px;
}

@media (max-width:560px){
  .login-card{padding:32px 22px 26px;}
}