body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0d1a2f; /* Dark blue background /
color: #e0e0e0;
overflow: hidden; / Prevent scroll if circuit lines go off-screen */
}

.login-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, rgba(30, 60, 100, 0.3) 0%, rgba(13, 26, 47, 0.8) 100%);
background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 L 0 10" fill="none" stroke="%232a517d" stroke-width="0.5" /></pattern><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><rect width="100" height="100" fill="url(%23smallGrid)" /><path d="M 100 0 L 0 0 L 0 100" fill="none" stroke="%232a517d" stroke-width="1" /></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
background-size: 100% 100%;
}

.login-box {
position: relative;
z-index: 10;
background: rgba(0, 0, 0, 0.7); /* Slightly transparent dark background /
border: 2px solid #00aaff; / Bright blue border /
border-radius: 10px;
padding: 40px;
box-shadow: 0 0 30px rgba(0, 170, 255, 0.8); / Strong blue glow */
text-align: center;
width: 350px;
max-width: 90%;
transition: all 0.3s ease-in-out;
}

.login-box::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid #00aaff;
border-radius: 12px;
z-index: -1;
box-shadow: 0 0 20px rgba(0, 170, 255, 0.6);
animation: pulseBorder 1.5s infinite alternate;
}

@keyframes pulseBorder {
from {
box-shadow: 0 0 20px rgba(0, 170, 255, 0.6);
}
to {
box-shadow: 0 0 35px rgba(0, 170, 255, 0.9);
}
}

.login-title {
color: #00aaff; /* Bright blue text */
font-size: 2.2em;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
}

.input-group {
display: flex;
align-items: center;
margin-bottom: 25px;
background: rgba(255, 255, 255, 0.08); /* Slightly visible input background /
border-radius: 5px;
border: 1px solid rgba(0, 170, 255, 0.5); / Lighter blue border for inputs */
padding: 8px 15px;
box-shadow: inset 0 0 8px rgba(0, 170, 255, 0.3);
}

.input-group label {
font-size: 1.5em;
margin-right: 10px;
color: #00aaff;
pointer-events: none; /* Make label non-interactive */
}

.input-group input {
flex-grow: 1;
background: transparent;
border: none;
color: #e0e0e0;
padding: 10px 0;
font-size: 1.1em;
outline: none;
}

.input-group input:focus {
box-shadow: 0 0 5px rgba(0, 170, 255, 0.7);
border-radius: 3px;
}

.login-button {
background: linear-gradient(45deg, #00aaff, #0077cc);
border: none;
border-radius: 5px;
color: white;
padding: 15px 30px;
font-size: 1.2em;
cursor: pointer;
margin-top: 20px;
width: 100%;
transition: background 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 170, 255, 0.4);
}

.login-button:hover {
background: linear-gradient(45deg, #00c0ff, #0099e6);
box-shadow: 0 8px 25px rgba(0, 170, 255, 0.6);
}

.error-message {
color: #ff6347; /* Tomato red for error messages /
margin-top: 20px;
font-size: 1em;
display: none; / Hidden by default */
}

/* Circuit board lines animation - similar to your images /
.login-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="circuitLines" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 0 50 L 50 50 L 50 0 M 50 100 L 50 50 L 100 50" fill="none" stroke="%2300aaff" stroke-width="1" opacity="0.1" /></pattern></defs><rect width="100%" height="100%" fill="url(%23circuitLines)" /></svg>');
background-size: 200px 200px;
animation: moveCircuit 60s linear infinite; / Slower animation for background /
opacity: 0.3;
z-index: 1; / Behind the login box */
}

@keyframes moveCircuit {
from { background-position: 0 0; }
to { background-position: 2000px 2000px; }
}

/* More abstract glowing elements - similar to the circular patterns in your images /
.login-container::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 10% 10%, rgba(0, 170, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(0, 170, 255, 0.15) 0%, transparent 60%),
radial-gradient(circle at 30% 70%, rgba(0, 170, 255, 0.08) 0%, transparent 40%);
z-index: 2; / Still behind the login box */
animation: subtleGlow 15s infinite;
}

@keyframes subtleGlow {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}

.forgot-password {
margin-top: 15px;
font-size: 0.9em;
}

.forgot-password a {
color: #00aaff;
text-decoration: none;
transition: color 0.3s ease;
}

.forgot-password a:hover {
color: #00c0ff;
text-decoration: underline;
}

.back-to-login {
margin-top: 20px;
font-size: 0.9em;
}

.back-to-login a {
color: #00aaff;
text-decoration: none;
transition: color 0.3s ease;
}

.back-to-login a:hover {
color: #00c0ff;
text-decoration: underline;
}