* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-1: #020914;
  --bg-2: #041a3b;
  --neon: #00d8ff;
  --neon-2: #33f4ff;
  --text: #e8fbff;
}

body {
  min-height: 100vh;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at center, rgba(0, 153, 255, 0.25) 0%, transparent 38%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 48%, #010715);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background-image:
    linear-gradient(rgba(0, 216, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 216, 255, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}

body::after {
  background:
    radial-gradient(circle at 20% 52%, rgba(0, 216, 255, 0.25), transparent 6%),
    radial-gradient(circle at 82% 47%, rgba(0, 216, 255, 0.25), transparent 6%),
    radial-gradient(circle at 50% 89%, rgba(0, 102, 255, 0.38), transparent 16%);
  filter: blur(2px);
}

.scene {
  position: relative;
  width: min(1120px, 95vw);
  height: min(740px, 92vh);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.circuit-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 14px var(--neon);
  opacity: 0.55;
  z-index: 0;
}

.circuit-line.left-1 { width: 360px; left: -60px; top: 42%; }
.circuit-line.left-2 { width: 320px; left: -20px; top: 59%; }
.circuit-line.right-1 { width: 360px; right: -60px; top: 42%; }
.circuit-line.right-2 { width: 320px; right: -20px; top: 59%; }

.dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 16px var(--neon), 0 0 30px var(--neon);
  z-index: 1;
  opacity: 0.85;
}

.d1 { left: 118px; top: 41%; }
.d2 { left: 170px; top: 59%; }
.d3 { right: 118px; top: 41%; }
.d4 { right: 170px; top: 59%; }

.robot {
  position: absolute;
  top: 18px;
  width: 490px;
  height: 620px;
  z-index: 2;
  pointer-events: none;
}

.robot-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 310px;
  height: 230px;
  transform: translateX(-50%);
  border-radius: 42% 42% 36% 36%;
  background: linear-gradient(145deg, #f7fbff 0%, #d4dce9 70%, #aab5c5 100%);
  box-shadow:
    inset -18px -20px 34px rgba(119, 130, 151, 0.45),
    inset 18px 18px 26px rgba(255, 255, 255, 0.8),
    0 24px 44px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(0, 216, 255, 0.22);
}

.robot-head::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 94px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 60px 60px 18px 18px;
  background: linear-gradient(145deg, #f5f9ff, #bbc6d8);
  box-shadow: inset 7px 8px 18px rgba(255, 255, 255, 0.8);
}

.ear {
  position: absolute;
  top: 70px;
  width: 52px;
  height: 82px;
  border-radius: 28px;
  background: linear-gradient(145deg, #e9eff8, #aeb9ca);
  box-shadow: inset 8px 8px 15px rgba(255, 255, 255, 0.58);
}

.ear.left { left: -34px; }
.ear.right { right: -34px; }

.face {
  position: absolute;
  inset: 42px 30px 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 44%, rgba(0, 216, 255, 0.22), transparent 33%),
    linear-gradient(145deg, #061528, #031020 62%, #020a14);
  box-shadow:
    inset 0 0 22px rgba(0, 216, 255, 0.18),
    0 0 20px rgba(0, 216, 255, 0.15);
}

.eye {
  position: absolute;
  top: 70px;
  width: 48px;
  height: 28px;
  border-radius: 50px 50px 18px 18px;
  background: radial-gradient(circle at 45% 38%, #b9ffff, #26eaff 62%, #00a6ca);
  box-shadow: 0 0 14px #00efff, 0 0 26px rgba(0, 216, 255, 0.75);
}

.eye.left { left: 78px; }
.eye.right { right: 78px; }

.mouth {
  position: absolute;
  left: 50%;
  top: 136px;
  width: 48px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 0 0 34px 34px;
  background: #21eaff;
  box-shadow: 0 0 15px #00eaff;
}

.robot-body {
  position: absolute;
  left: 50%;
  top: 205px;
  width: 245px;
  height: 295px;
  transform: translateX(-50%);
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, #f5f8ff, #c5ccd8 70%, #9ea7b7);
  box-shadow:
    inset -24px -25px 30px rgba(128, 138, 157, 0.36),
    inset 20px 18px 32px rgba(255, 255, 255, 0.74),
    0 30px 46px rgba(0, 0, 0, 0.35);
}

.robot-body::before {
  content: "";
  position: absolute;
  top: 88px;
  left: 53px;
  width: 138px;
  height: 44px;
  border-bottom: 5px solid rgba(116, 126, 143, 0.42);
  border-left: 5px solid rgba(116, 126, 143, 0.33);
  border-right: 5px solid rgba(116, 126, 143, 0.33);
  border-radius: 0 0 32px 32px;
}

.arm {
  position: absolute;
  top: 260px;
  width: 78px;
  height: 215px;
  border-radius: 50px;
  background: linear-gradient(145deg, #edf3fb, #b6bfce 80%);
  box-shadow: inset 10px 14px 24px rgba(255, 255, 255, 0.58), 0 12px 25px rgba(0, 0, 0, 0.32);
  z-index: 2;
}

.arm.left { left: 26px; transform: rotate(16deg); }
.arm.right { right: 26px; transform: rotate(-16deg); }

.hand {
  position: absolute;
  top: 350px;
  width: 102px;
  height: 128px;
  border-radius: 55px;
  background: linear-gradient(145deg, #f8fbff, #b8c1d0);
  box-shadow:
    inset 12px 16px 24px rgba(255, 255, 255, 0.72),
    inset -10px -12px 22px rgba(120, 132, 154, 0.3),
    0 0 22px rgba(0, 216, 255, 0.25),
    0 18px 30px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.hand.left { left: -38px; }
.hand.right { right: -38px; }

.hand::before,
.hand::after {
  content: "";
  position: absolute;
  left: 18px;
  width: 76px;
  height: 34px;
  border-radius: 22px;
  background: linear-gradient(145deg, #f5f9ff, #b4bfce);
  box-shadow: inset 9px 7px 14px rgba(255, 255, 255, 0.62);
}

.hand::before { top: 34px; }
.hand::after { top: 72px; }

.login-panel {
  position: relative;
  width: min(760px, 82vw);
  height: 420px;
  margin-top: 118px;
  z-index: 4;
  background:
    radial-gradient(circle at center, rgba(0, 216, 255, 0.17), transparent 42%),
    linear-gradient(180deg, rgba(5, 39, 91, 0.76), rgba(2, 12, 35, 0.9));
  clip-path: polygon(
    6% 18%, 25% 18%, 29% 8%, 71% 8%, 75% 18%, 94% 18%,
    94% 82%, 75% 82%, 69% 94%, 31% 94%, 25% 82%, 6% 82%
  );
  border: 2px solid rgba(0, 216, 255, 0.8);
  box-shadow:
    0 0 0 2px rgba(0, 216, 255, 0.35),
    0 0 26px rgba(0, 216, 255, 0.9),
    inset 0 0 38px rgba(0, 216, 255, 0.18),
    0 34px 60px rgba(0, 0, 0, 0.45);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  clip-path: inherit;
  border: 2px solid rgba(0, 216, 255, 0.38);
  filter: drop-shadow(0 0 12px var(--neon));
  opacity: 0.85;
}

.login-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(0, 216, 255, 0.42) 16.2%, transparent 16.7% 83.3%, rgba(0, 216, 255, 0.42) 83.6%, transparent 84%),
    radial-gradient(circle at 26% 34%, var(--neon) 0 4px, transparent 5px),
    radial-gradient(circle at 32% 34%, var(--neon) 0 4px, transparent 5px),
    radial-gradient(circle at 38% 34%, var(--neon) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 34%, var(--neon) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 34%, var(--neon) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 34%, var(--neon) 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 21%, rgba(0, 216, 255, 0.65) 21.3%, transparent 21.9% 78%, rgba(0, 216, 255, 0.65) 78.3%, transparent 78.9%);
  opacity: 0.6;
  mix-blend-mode: screen;
}

.form-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(0, 216, 255, 0.16), transparent 52%),
    rgba(1, 15, 39, 0.78);
  border: 3px solid var(--neon-2);
  box-shadow:
    0 0 18px var(--neon),
    0 0 40px rgba(0, 216, 255, 0.78),
    inset 0 0 30px rgba(0, 216, 255, 0.28);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
}

.ring {
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: var(--neon-2);
  border-right-color: var(--neon-2);
  filter: drop-shadow(0 0 12px var(--neon));
  animation: spin 8s linear infinite;
  opacity: 0.95;
}

.ring.second {
  inset: -54px;
  border-width: 5px;
  border-top-color: transparent;
  border-right-color: var(--neon);
  border-bottom-color: var(--neon);
  animation-duration: 13s;
  animation-direction: reverse;
  opacity: 0.7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-title {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 216, 255, 0.8);
}

.input-group {
  position: relative;
  z-index: 2;
  width: 210px;
  margin-bottom: 10px;
}

.input-group span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ddfbff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 0 10px var(--neon);
}

.input-group input {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(0, 216, 255, 0.8);
  border-radius: 8px;
  background: rgba(0, 130, 180, 0.43);
  outline: none;
  padding: 0 12px 0 38px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset 0 0 12px rgba(0, 216, 255, 0.2);
}

.input-group input::placeholder {
  color: rgba(231, 252, 255, 0.72);
}

.input-group input:focus {
  border-color: #fff;
  box-shadow: 0 0 12px var(--neon), inset 0 0 12px rgba(0, 216, 255, 0.3);
}

.login-btn {
  position: relative;
  z-index: 2;
  width: 140px;
  height: 38px;
  border: none;
  border-radius: 999px;
  margin-top: 8px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  background: linear-gradient(90deg, #00b8e6, #31f0ff);
  box-shadow: 0 0 16px rgba(0, 216, 255, 0.75), inset 0 0 8px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0, 216, 255, 1), 0 0 40px rgba(0, 216, 255, 0.45);
}

.admin-link {
  position: relative;
  z-index: 2;
  margin-top: 9px;
  color: rgba(232, 251, 255, 0.72);
  font-size: 12px;
  text-decoration: none;
}

.admin-link:hover {
  color: #fff;
  text-shadow: 0 0 12px var(--neon);
}

.login-error {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  width: min(310px, 78vw);
  transform: translateX(-50%);
  z-index: 8;
  padding: 10px 14px;
  border: 1px solid rgba(255, 56, 86, 0.72);
  border-radius: 10px;
  color: #ff4d6d;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: rgba(36, 4, 13, 0.86);
  box-shadow: 0 0 18px rgba(255, 56, 86, 0.24);
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 216, 255, 0.95) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.8px);
  background-size: 46px 46px, 82px 82px;
  background-position: 10px 13px, 28px 42px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 55%);
  animation: pulse 3s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.35; }
  to { opacity: 0.82; }
}

@media (max-width: 760px) {
  .scene {
    height: 100vh;
    transform: scale(0.86);
  }

  .login-panel {
    width: 92vw;
  }

  .robot {
    transform: scale(0.83);
    top: 4px;
  }

  .hand.left { left: 0; }
  .hand.right { right: 0; }
}

@media (max-width: 520px) {
  .scene {
    transform: scale(0.72);
    width: 135vw;
  }
}