.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  padding:70px 8%;
  position:relative;
  z-index:4;

  background:
    radial-gradient(circle at 75% 45%,rgba(0,150,255,.18),transparent 30%),
    linear-gradient(
      135deg,
      rgba(2,7,18,.96),
      rgba(4,18,38,.88),
      rgba(2,7,18,.98)
    );
}

.login-card{
  max-width:560px;
  padding:42px;
  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(7,27,55,.92),
      rgba(2,8,20,.94)
    );

  border:1px solid rgba(65,171,255,.22);

  box-shadow:
    0 0 70px rgba(0,150,255,.14),
    inset 0 0 45px rgba(0,170,255,.04);

  backdrop-filter:blur(16px);

  position:relative;
  overflow:hidden;
}

.login-card:before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(0,200,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,255,.045) 1px,transparent 1px);

  background-size:32px 32px;

  opacity:.24;
  pointer-events:none;
}

.login-card > *{
  position:relative;
  z-index:2;
}

.login-logo{
  width:170px;
  margin-bottom:30px;

  mix-blend-mode:screen;

  filter:
    drop-shadow(0 0 16px rgba(0,200,255,.35));
}

.login-card span{
  color:#39b7ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:4px;
}

.login-card h1{
  margin:18px 0;
  color:#fff;
  font-size:clamp(38px,5vw,64px);
  line-height:.92;
}

.login-card h1 strong{
  color:#2098ff;
}

.login-card p{
  color:#c8def8;
  font-size:16px;
  line-height:1.6;
  margin-bottom:28px;
}

#loginForm{
  display:grid;
  gap:13px;
}

#loginForm label{
  color:#8ecfff;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:900;
}

#loginForm input{
  width:100%;

  padding:16px 18px;

  border-radius:8px;

  border:1px solid rgba(65,171,255,.18);

  background:rgba(0,10,25,.52);

  color:#fff;

  outline:none;

  font-size:15px;

  box-shadow:
    inset 0 0 18px rgba(0,140,255,.04);
}

#loginForm input:focus{
  border-color:#34c3ff;

  box-shadow:
    0 0 18px rgba(0,170,255,.14);
}

#loginForm button{
  margin-top:12px;

  padding:16px 22px;

  border:none;
  border-radius:8px;

  color:white;

  background:
    linear-gradient(
      90deg,
      #009dff,
      #004cff
    );

  font-size:12px;
  font-weight:900;
  letter-spacing:1px;

  cursor:pointer;

  box-shadow:
    0 0 24px rgba(0,170,255,.22);

  transition:.3s;
}

#loginForm button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 0 36px rgba(0,200,255,.38);
}

.login-status{
  margin-top:18px;

  padding:13px 15px;

  border-radius:10px;

  color:#dff6ff;

  background:rgba(0,140,255,.06);

  border:1px solid rgba(65,171,255,.16);

  font-size:13px;
}

.login-status.error{
  color:#ffd0d0;

  border-color:rgba(255,120,120,.22);

  background:rgba(255,80,80,.05);
}

.login-status.success{
  color:#b7ffd8;

  border-color:rgba(97,255,176,.22);

  background:rgba(40,255,150,.05);
}

.login-visual{
  min-height:560px;

  border-radius:30px;

  border:1px solid rgba(65,171,255,.16);

  background:
    radial-gradient(
      circle at center,
      rgba(0,190,255,.12),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(3,20,42,.52),
      rgba(2,8,20,.86)
    );

  box-shadow:
    0 0 70px rgba(0,150,255,.08);

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:flex-start;

  padding-top:50px;

  overflow:hidden;

  position:relative;
}

.orb{
  width:180px;
  height:180px;

  border-radius:50%;

  border:1px solid rgba(0,210,255,.26);

  box-shadow:
    0 0 55px rgba(0,200,255,.18),
    inset 0 0 40px rgba(0,190,255,.08);

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.16),
      transparent 12%
    ),
    radial-gradient(
      circle,
      rgba(0,200,255,.12),
      transparent 58%
    );

  animation:orbPulse 4s ease-in-out infinite;
}

.orb:before,
.orb:after{
  content:"";
  position:absolute;

  border-radius:50%;

  inset:22%;

  border:1px solid rgba(0,210,255,.12);
}

.orb:after{
  inset:34%;
}

.scan-line{
  position:absolute;

  left:0;
  right:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,200,255,.55),
      transparent
    );

  box-shadow:
    0 0 14px rgba(0,200,255,.45);

  animation:scanMove 3.2s linear infinite;
}

.login-visual h2{
  margin-top:26px;

  color:#e9f7ff;

  font-size:58px;

  letter-spacing:8px;

  text-shadow:
    0 0 20px rgba(0,200,255,.42);
}

.login-visual p{
  color:#8ecfff;

  letter-spacing:3px;

  font-size:12px;

  text-transform:uppercase;
}

.bluefin-twin-img{
  width:min(430px,62%);

  margin-top:22px;

  position:relative;
  z-index:3;

  opacity:.38;

  mix-blend-mode:screen;

  filter:
    brightness(1.08)
    contrast(1.05)
    saturate(1.1)
    drop-shadow(0 0 20px rgba(0,210,255,.35))
    drop-shadow(0 0 60px rgba(0,140,255,.16));

  animation:
    twinFloat 7s ease-in-out infinite,
    twinPulse 4s ease-in-out infinite;
}

@keyframes orbPulse{
  0%,100%{
    transform:scale(.96);
    opacity:.72;
  }

  50%{
    transform:scale(1.03);
    opacity:1;
  }
}

@keyframes scanMove{
  from{
    top:8%;
  }

  to{
    top:92%;
  }
}

@keyframes twinFloat{
  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }
}

@keyframes twinPulse{
  0%,100%{
    filter:
      brightness(1.08)
      contrast(1.05)
      saturate(1.1)
      drop-shadow(0 0 20px rgba(0,210,255,.35))
      drop-shadow(0 0 60px rgba(0,140,255,.16));
  }

  50%{
    filter:
      brightness(1.12)
      contrast(1.08)
      saturate(1.2)
      drop-shadow(0 0 34px rgba(0,240,255,.55))
      drop-shadow(0 0 90px rgba(0,180,255,.22));
  }
}

@media(max-width:900px){

  .login-shell{
    grid-template-columns:1fr;
    padding:50px 7%;
  }

  .login-visual{
    min-height:360px;
  }

  .orb{
    width:140px;
    height:140px;
  }

  .bluefin-twin-img{
    width:min(320px,78%);
    opacity:.32;
  }
}