Redirecting to login...

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Georgia, serif; background: linear-gradient(135deg, #1a2332 0%, #0a0e1a 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-container { background: rgba(26, 35, 50, 0.9); border: 2px solid #3a5f7f; border-radius: 12px; padding: 40px; max-width: 450px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.7); } h1 { color: #6aa3b8; text-align: center; margin-bottom: 10px; font-size: 2.5em; text-shadow: 0 0 15px rgba(106, 163, 184, 0.5); } .subtitle { color: #8a9aaa; text-align: center; margin-bottom: 30px; font-size: 0.9em; } .form-section { display: none; } .form-section.active { display: block; } .form-group { margin-bottom: 20px; } label { display: block; color: #b8a88a; margin-bottom: 8px; font-weight: 600; } input[type="text"], input[type="password"] { width: 100%; padding: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid #3a5f7f; border-radius: 4px; color: #e8dcc4; font-size: 1em; transition: border-color 0.3s; } input:focus { outline: none; border-color: #6aa3b8; box-shadow: 0 0 10px rgba(106, 163, 184, 0.3); } button { width: 100%; padding: 14px; background: linear-gradient(135deg, #6aa3b8 0%, #4a8398 100%); color: #0d1321; border: none; border-radius: 4px; font-size: 1.1em; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: transform 0.2s, box-shadow 0.2s; } button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(106, 163, 184, 0.4); } button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .qr-container { text-align: center; margin: 20px 0; padding: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 8px; } .qr-container img { max-width: 250px; height: auto; } .secret-box { background: rgba(0, 0, 0, 0.4); padding: 12px; border-radius: 4px; word-break: break-all; font-family: monospace; color: #6aa3b8; font-size: 0.9em; margin: 10px 0; border: 1px solid #3a5f7f; } .info-box { background: rgba(106, 163, 184, 0.1); padding: 15px; border-radius: 4px; border-left: 4px solid #6aa3b8; color: #8a9aaa; margin: 15px 0; font-size: 0.9em; } .status { margin-top: 15px; padding: 12px; border-radius: 4px; text-align: center; display: none; } .status.error { background: rgba(220, 53, 69, 0.2); border: 1px solid #dc3545; color: #ff6b7a; display: block; } .status.success { background: rgba(40, 167, 69, 0.2); border: 1px solid #28a745; color: #5dff7e; display: block; } .link { color: #6aa3b8; text-decoration: none; cursor: pointer; font-size: 0.9em; } .link:hover { text-decoration: underline; } .steps { color: #8a9aaa; font-size: 0.9em; line-height: 1.6; margin: 15px 0; } .steps ol { padding-left: 20px; } .steps li { margin: 8px 0; }

🌊 VanaFlux

Secure Authentication v0.3.0

🔒 Enter the 6-digit code from your authenticator app

First time? Setup TOTP

📱 Scan this QR code with Google Authenticator or Microsoft Authenticator
Generating QR code...

← Back to Login