* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #eaf6ff;
  overflow-x: hidden;
  background: radial-gradient(circle at top, #14365f 0%, #07111f 45%, #03060c 100%);
}
.grid-bg {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(0, 204, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 204, 255, .12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(700px) rotateX(62deg) scale(1.6);
  transform-origin: bottom;
  animation: gridMove 8s linear infinite;
  opacity: .45;
}
.scanner {
  position: fixed;
  inset: -20% 0 auto 0;
  height: 220px;
  background: linear-gradient(transparent, rgba(0, 255, 255, .22), transparent);
  animation: scan 5s ease-in-out infinite;
  pointer-events: none;
}
.auth-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap: 50px;
  padding: 40px 8%;
}
.auth-shell.single { grid-template-columns: minmax(280px, 450px); justify-content: center; }
.robot-stage { text-align: center; }
.robot-stage h1 {
  margin: 24px 0 8px;
  font-size: clamp(34px, 6vw, 78px);
  letter-spacing: 4px;
  text-shadow: 0 0 20px #00d9ff, 0 0 45px #006eff;
}
.robot-stage p { color: #8feaff; letter-spacing: 3px; }
.card {
  background: linear-gradient(145deg, rgba(10, 24, 45, .9), rgba(3, 8, 18, .88));
  border: 1px solid rgba(0, 234, 255, .45);
  box-shadow: 0 0 35px rgba(0, 217, 255, .22), inset 0 0 35px rgba(0, 115, 255, .08);
  border-radius: 22px;
  padding: 34px;
  backdrop-filter: blur(12px);
}
.card h2 { margin: 0 0 8px; font-size: 30px; }
.muted { color: #a9c9d9; margin-bottom: 26px; }
label { display: block; margin: 16px 0 8px; font-weight: 700; color: #8feaff; }
input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 217, 255, .45);
  outline: none;
  background: rgba(2, 9, 20, .75);
  color: #fff;
  font-size: 15px;
}
input:focus { box-shadow: 0 0 18px rgba(0, 217, 255, .42); }
button, .btn-link {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #00d9ff, #2479ff, #ff2f5f);
  color: white;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 22px rgba(0, 217, 255, .35);
}
button:hover, .btn-link:hover { filter: brightness(1.18); transform: translateY(-1px); }
.link-text { text-align: center; color: #b7cedb; }
a { color: #00eaff; font-weight: 700; }
.alert {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 47, 95, .15);
  border: 1px solid rgba(255, 47, 95, .45);
  color: #ffd6df;
  margin-bottom: 12px;
}
.robot {
  position: relative;
  width: 230px;
  height: 310px;
  margin: auto;
  animation: floatBot 3s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(0, 217, 255, .65));
}
.head {
  position: absolute;
  left: 55px;
  top: 35px;
  width: 120px;
  height: 92px;
  background: linear-gradient(145deg, #f2f7ff, #7b8ea8 55%, #17253c);
  clip-path: polygon(16% 0, 84% 0, 100% 28%, 88% 100%, 12% 100%, 0 28%);
  border: 3px solid #00eaff;
}
.eye {
  position: absolute;
  top: 35px;
  width: 28px;
  height: 10px;
  background: #00fff2;
  box-shadow: 0 0 16px #00fff2;
  animation: eyePulse 1.2s infinite alternate;
}
.left-eye { left: 24px; transform: skew(-18deg); }
.right-eye { right: 24px; transform: skew(18deg); }
.face-line { position: absolute; left: 42px; bottom: 15px; width: 36px; height: 4px; background: #ff2f5f; box-shadow: 0 0 14px #ff2f5f; }
.antenna { position: absolute; top: 0; width: 8px; height: 78px; background: #ffd84d; box-shadow: 0 0 12px #ffd84d; }
.antenna.left { left: 78px; transform: rotate(-35deg); }
.antenna.right { right: 78px; transform: rotate(35deg); }
.neck { position: absolute; left: 94px; top: 126px; width: 42px; height: 24px; background: #40536e; }
.body-core {
  position: absolute;
  left: 40px;
  top: 148px;
  width: 150px;
  height: 125px;
  background: linear-gradient(145deg, #1d75ff, #08295f 60%, #061024);
  clip-path: polygon(18% 0, 82% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
  border: 3px solid #00eaff;
}
.core-light { position: absolute; left: 59px; top: 38px; width: 32px; height: 32px; border-radius: 50%; background: #ff315f; box-shadow: 0 0 22px #ff315f; animation: corePulse 1s infinite alternate; }
.plate { position: absolute; bottom: 20px; height: 12px; background: #f7f7f7; }
.p1 { left: 28px; width: 38px; } .p2 { right: 28px; width: 38px; }
.arm { position: absolute; top: 165px; width: 42px; height: 98px; background: linear-gradient(#ffffff, #42536b); border: 2px solid #00eaff; }
.left-arm { left: 0; transform-origin: top; animation: leftArm 2.6s ease-in-out infinite; }
.right-arm { right: 0; transform-origin: top; animation: rightArm 2.6s ease-in-out infinite; }
@keyframes floatBot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes eyePulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes corePulse { from { transform: scale(.85); } to { transform: scale(1.1); } }
@keyframes leftArm { 50% { transform: rotate(8deg); } }
@keyframes rightArm { 50% { transform: rotate(-8deg); } }
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 42px; } }
@keyframes scan { 0% { top: -30%; } 50% { top: 80%; } 100% { top: -30%; } }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; padding: 28px 18px; }
  .robot { transform: scale(.8); }
}