body {
    margin: 0;
    font-family: monospace;
    background: #05070f;
    color: #00ffcc;
    overflow: hidden;
}

/* 🌌 ANIMATED BACKGROUND GLOW */
.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, #00ffcc33, transparent 40%),
                radial-gradient(circle at 90% 80%, #ff00ff22, transparent 40%);
    animation: move 6s infinite alternate;
    z-index: -1;
}

@keyframes move {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 🧠 SPLIT SCREEN */
.container {
    display: flex;
    height: 100vh;
}

/* LEFT SIDE */
.left {
    flex: 1;
    padding: 80px;
}

.left h1 {
    font-size: 45px;
    text-shadow: 0 0 20px #00ffcc;
}

.info-box {
    margin-top: 40px;
    padding: 20px;
    border-left: 2px solid #00ffcc;
    opacity: 0.8;
}

/* RIGHT LOGIN */
.login-box {
    width: 380px;
    margin: auto;
    padding: 40px;

    /* GLASSMORPHISM */
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);

    border: 1px solid #00ffcc;
    border-radius: 12px;

    box-shadow: 0 0 25px #00ffcc33;

    transition: 0.3s;
}

/* INPUTS */
input {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    background: transparent;
    border: 1px solid #00ffcc;
    color: #00ffcc;
    outline: none;
}

/* 🎯 BUTTON ANIMATION */
button {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #00ffcc;
    color: #00ffcc;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: #00ffcc;
    color: black;
    box-shadow: 0 0 20px #00ffcc;
    transform: scale(1.05);
}

/* 📢 STATUS MESSAGE */
#status {
    margin-top: 10px;
    font-size: 14px;
}