/* glog-style-dark-futuristic.css */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0a0a12, #1a1a29);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #66f0ff;
  overflow: hidden;
}

.login-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 25px 30px 60px; /* extra bottom padding for footer */
  backdrop-filter: blur(20px);
  background: rgba(10, 10, 18, 0.7);
  border: 1px solid #0099cc;
  border-radius: 18px;
  box-shadow: 0 0 35px #00cfffaa;
  text-align: center;
}

h1 {
  margin-bottom: 22px;
  color: #00d8ff;
  text-shadow:
    0 0 8px #00d8ff,
    0 0 20px #00d8ff;
  font-weight: 900;
  letter-spacing: 1.1px;
  user-select: none;
}

.login-section {
  margin-top: 24px;
}

input[type="password"] {
  width: 80%;  /* narrower */
  max-width: 280px;
  padding: 14px;
  margin: 14px auto 0;
  display: block;  /* center horizontally */
  border-radius: 14px;
  border: none;
  background: #001a29;
  color: #66e8ff;
  font-size: 1.1em;
  box-shadow: inset 0 0 10px #00ccff44;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

input[type="password"]:focus {
  background: #002b45;
  outline: none;
  box-shadow:
    0 0 15px #00e6ffcc,
    inset 0 0 15px #00e6ffcc;
}

.login-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #00e5ff, #008bbd);
  color: #001a29;
  font-weight: 900;
  font-size: 1.05em;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
}

.login-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #00d8ffcc;
}

.divider {
  margin: 28px 0 18px;
  font-size: 1em;
  color: #3399bbcc;
  letter-spacing: 0.15em;
  user-select: none;
}

.error {
  margin-top: 14px;
  color: #ff4c4c;
  font-size: 1em;
  font-weight: 700;
  user-select: none;
}

/* New requirements section */
.requirements {
  margin-top: 28px;
  padding: 15px 20px;
  background: #002b45dd;
  border-radius: 12px;
  font-size: 0.9em;
  line-height: 1.5em;
  color: #66ccffcc;
  user-select: none;
  text-align: left;
  box-shadow: inset 0 0 10px #0077bbaa;
}

footer {
  background: linear-gradient(90deg, #0a1218, #101820, #0a1218);
  color: #00e5ff;
  padding: 16px 24px;
  text-align: center;
  box-shadow: 0 -4px 10px rgba(0, 229, 255, 0.4);
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: fixed;
  bottom: 0;
  width: 100%;
  user-select: none;
  z-index: 1000;
  backdrop-filter: saturate(180%) blur(6px);
  border-top: 1px solid #00e5ff44;
  animation: footer-glow 4s ease-in-out infinite alternate;
}

@keyframes footer-glow {
  0% {
    box-shadow: 0 -4px 10px rgba(0, 229, 255, 0.2);
    border-top-color: #00e5ff44;
  }
  100% {
    box-shadow: 0 -6px 20px rgba(0, 229, 255, 0.6);
    border-top-color: #00e5ff88;
  }
}

footer p {
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 1px 5px rgba(0, 229, 255, 0.7);
  margin: 0;
  letter-spacing: 0.05em;
}

.credits {
  font-size: 12px;
  color: #a0cfee;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-weight: 600;
  text-shadow: 0 0 6px #00e5ff66;
}

.credits strong {
  color: #00f0ff;
  text-shadow: 0 0 10px #00f0ffaa;
  font-weight: 900;
  letter-spacing: 0.1em;
}