:root { --accent: #00f2ff; --bg: #030303; }
        body, html { margin: 0; padding: 0; background: var(--bg); color: #fff; font-family: 'Inter', sans-serif; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 100vh; }
        
        /* 🌌 背景のノイズ演出 */
        body::before { content: ""; position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px); pointer-events: none; opacity: 0.3; }

        .login-box {
            width: 90%; max-width: 350px; padding: 40px; border: 1px solid rgba(0, 242, 255, 0.2);
            background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); text-align: center;
        }
        .gate-title { font-size: 0.7rem; letter-spacing: 6px; color: var(--accent); margin-bottom: 40px; }
        
        input {
            width: 100%; background: transparent; border: 0; border-bottom: 1px solid #333;
            color: #fff; padding: 15px 5px; font-size: 0.9rem; outline: none; margin-bottom: 20px;
            transition: 0.3s; text-align: center;
        }
        input:focus { border-color: var(--accent); text-shadow: 0 0 10px var(--accent); }
        
        .login-btn {
            width: 100%; padding: 15px; background: transparent; border: 1px solid var(--accent);
            color: var(--accent); letter-spacing: 5px; cursor: pointer; margin-top: 20px; transition: 0.3s;
        }
        .login-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px var(--accent); }
        
        .error-msg { font-size: 0.5rem; color: #ff0055; margin-top: 20px; opacity: 0; transition: 0.3s; }