/* Nexos Portal UI — Titanium login */

:root{
  --nx-bg: #050816;
  --nx-ink: #e9eefc;
  --nx-muted: rgba(233,238,252,.70);
  --nx-card: rgba(255,255,255,.055);
  --nx-border: rgba(255,255,255,.12);
  --nx-blue-1: rgba(90,150,255,.95);
  --nx-blue-2: rgba(44,92,190,.95);
}

body.login{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(130,170,255,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(120,120,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(10,14,28,.85), rgba(5,8,22,1)),
    var(--nexos-login-bg, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--nx-ink);
}

#login{
  width: 360px;
  padding: 8% 0 0;
}

#loginform,
#registerform,
#lostpasswordform{
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 26px 70px rgba(0,0,0,.45);
}

.login h1 a{
  background-image: var(--nexos-login-logo, none);
  background-size: contain;
  width: 100%;
  height: 60px;
}

.login label{
  color: rgba(233,238,252,.82);
  font-weight: 700;
}

.login input[type=text],
.login input[type=password],
.login input[type=email]{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(245,248,255,.96);
  border-radius: 12px;
  padding: 10px 12px;
}

.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus{
  border-color: rgba(110,170,255,.45);
  box-shadow: 0 0 0 3px rgba(110,170,255,.16);
}

.login .button-primary{
  background: linear-gradient(180deg, rgba(90,150,255,.75), rgba(44,92,190,.55)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 18px 44px rgba(0,0,0,.45);
}

.login #backtoblog a,
.login #nav a{
  color: rgba(233,238,252,.68) !important;
}
.login #backtoblog a:hover,
.login #nav a:hover{
  color: rgba(245,248,255,.98) !important;
}

.login .message,
.login .notice,
.login .success{
  background: rgba(255,255,255,.06);
  border-left: 4px solid rgba(110,170,255,.65);
  color: rgba(245,248,255,.92);
}

@media (max-width: 420px){
  #login{ width: 92vw; }
  body.login{ background-attachment: scroll; }
}