@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');

:root {
    --neon: #00f2fe;
    --glow: rgba(0, 242, 254, 0.5);
    --bg-dark: #020204;
}

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

body.lock-screen {
    background: var(--bg-dark);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
}

.scanline {
    width: 100%; height: 100px;
    background: linear-gradient(0deg, rgba(0, 242, 254, 0) 0%, rgba(0, 242, 254, 0.1) 50%, rgba(0, 242, 254, 0) 100%);
    position: fixed; bottom: 100%;
    animation: scan 4s linear infinite;
    z-index: 10; pointer-events: none;
}

@keyframes scan {
    0% { bottom: 100%; }
    100% { bottom: -100px; }
}

#bg-canvas { position: fixed; top: 0; left: 0; z-index: 1; }

.login-container {
    position: relative; z-index: 5;
    height: 100vh; display: flex; align-items: center; justify-content: center;
}

.glass-box {
    position: relative;
    background: rgba(10, 15, 25, 0.7);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 242, 254, 0.2);
    padding: 60px 40px;
    border-radius: 40px;
    width: 420px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(0, 242, 254, 0.05);
}

.inner-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; border-radius: 40px;
    background: radial-gradient(circle at top right, rgba(0, 242, 254, 0.1), transparent 60%);
}

.neon-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px; font-weight: 900;
    background: linear-gradient(to bottom, #fff, var(--neon));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 4px; margin: 20px 0 10px;
}

.badge {
    display: inline-block; padding: 4px 12px; border-radius: 4px;
    background: rgba(0, 242, 254, 0.1); color: var(--neon);
    font-size: 10px; letter-spacing: 2px; font-weight: 700; border: 1px solid var(--neon);
}

.input-wrapper { margin: 40px 0; }

.glitch-border {
    position: relative; background: rgba(0,0,0,0.4);
    border-radius: 15px; border-bottom: 2px solid var(--neon);
    display: flex; align-items: center; padding: 0 20px;
}

.sensor-icon { font-size: 20px; color: var(--neon); text-shadow: 0 0 10px var(--neon); }

input[type="password"] {
    width: 100%; height: 60px; background: transparent; border: none;
    padding-left: 15px; color: #fff; font-size: 20px; outline: none;
    letter-spacing: 5px;
}

.btn-ultra {
    width: 100%; height: 60px; background: transparent; border: 1px solid var(--neon);
    border-radius: 15px; position: relative; cursor: pointer; overflow: hidden;
    color: var(--neon); font-weight: 800; transition: 0.3s;
}

.btn-ultra:hover {
    background: var(--neon); color: #000; box-shadow: 0 0 30px var(--glow);
}

.contact-link {
    margin-top: 30px; display: inline-block; color: #888; text-decoration: none;
    font-size: 13px; letter-spacing: 1px; transition: 0.3s;
}

.contact-link:hover { color: #fff; text-shadow: 0 0 10px #fff; }

.tool-grid {
    display: flex; height: 100vh; padding: 15px; gap: 15px;
}

.iframe-container { flex: 3; border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.iframe-container iframe { width: 100%; height: 100%; }

.prediction-side { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.p-card {
    background: rgba(0,0,0,0.8); border: 1px solid var(--neon);
    border-radius: 30px; padding: 40px; text-align: center;
    box-shadow: 0 0 40px rgba(0, 242, 254, 0.15);
}