@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap";
/* [project]/src/app/login/login.css [app-client] (css) */
#login-container {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 40%, #0d0d2a 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.login-stars {
  pointer-events: none;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff6 0%, #0000 100%), radial-gradient(1px 1px at 30% 60%, #ffffff4d 0%, #0000 100%), radial-gradient(1.5px 1.5px at 50% 10%, #8bac0f80 0%, #0000 100%), radial-gradient(1px 1px at 70% 40%, #fff3 0%, #0000 100%), radial-gradient(1px 1px at 90% 80%, #fff6 0%, #0000 100%), radial-gradient(1.5px 1.5px at 20% 70%, #8bac0f66 0%, #0000 100%), radial-gradient(1px 1px at 60% 90%, #ffffff4d 0%, #0000 100%), radial-gradient(1px 1px at 80% 20%, #ffffff4d 0%, #0000 100%), radial-gradient(2px 2px at 45%, #8bac0f4d 0%, #0000 100%);
  animation: 5s ease-in-out infinite alternate starsTwinkle;
  position: absolute;
  inset: 0;
}

@keyframes starsTwinkle {
  0% {
    opacity: .4;
  }

  50% {
    opacity: .8;
  }

  100% {
    opacity: .6;
  }
}

.login-card {
  z-index: 1;
  background: linear-gradient(160deg, #141432f2 0%, #0a0a1efa 100%);
  border: 1px solid #8bac0f26;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  padding: 40px 32px 32px;
  animation: .5s ease-out cardAppear;
  position: relative;
  box-shadow: 0 0 60px #8bac0f0f, 0 20px 60px #00000080, inset 0 1px #ffffff0a;
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.login-card:before {
  content: "";
  z-index: -1;
  filter: blur(1px);
  background: linear-gradient(135deg, #8bac0f33, #0000 40%, #4a1a6b26);
  border-radius: 17px;
  position: absolute;
  inset: -1px;
}

.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo {
  margin-bottom: 12px;
  font-size: 48px;
  animation: 2s ease-in-out infinite logoBounce;
}

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

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

.login-title {
  color: #9bbc0f;
  text-shadow: 0 0 20px #8bac0f66;
  letter-spacing: 2px;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  line-height: 1.8;
}

.login-subtitle {
  color: #fff6;
  margin-top: 12px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.login-form {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.login-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.login-field label {
  color: #ffffff80;
  letter-spacing: 1px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
}

.login-field input {
  color: #e0e0e0;
  background: #0006;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  width: 100%;
  padding: 12px 14px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  transition: all .2s;
}

.login-field input::placeholder {
  color: #fff3;
}

.login-field input:focus {
  background: #00000080;
  border-color: #8bac0f80;
  outline: none;
  box-shadow: 0 0 15px #8bac0f1a;
}

.login-error {
  color: #ff6b6b;
  background: #ff3c3c1a;
  border: 1px solid #ff3c3c4d;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  animation: .3s ease-in-out shake;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

.login-btn {
  color: #9bbc0f;
  cursor: pointer;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #306230, #4a8a4a);
  border: 1px solid #8bac0f66;
  border-radius: 8px;
  margin-top: 4px;
  padding: 14px;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  transition: all .2s;
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a7a3a, #5aaa5a);
  border-color: #8bac0f99;
  transform: translateY(-2px);
  box-shadow: 0 0 25px #8bac0f33;
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.login-spinner {
  animation: 1s linear infinite spin;
  display: inline-block;
}

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

.login-divider {
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  display: flex;
}

.login-divider:before, .login-divider:after {
  content: "";
  background: #ffffff0f;
  flex: 1;
  height: 1px;
}

.login-divider span {
  color: #fff3;
  font-family: Inter, sans-serif;
  font-size: 11px;
}

.login-toggle {
  color: #fff6;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff0f;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  transition: all .2s;
}

.login-toggle:hover {
  color: #9bbc0f;
  background: #8bac0f08;
  border-color: #8bac0f33;
}

.login-footer {
  text-align: center;
  margin-top: 20px;
}

.login-pixel-art {
  color: #8bac0f33;
  letter-spacing: 2px;
  font-family: monospace;
  font-size: 10px;
}

/*# sourceMappingURL=src_app_login_login_08_8byc.css.map*/