<div style="padding-top: 140px; padding-bottom: 80px; min-height: 100vh; color: white;">
    <div class="container">
       
        <div class="row">
             <div class="text-center" style="margin-bottom: 30px;">
            <?php if ($this->session->flashdata()) {
                echo Helpers::showFlash($this->session->flashdata("response"));
            } ?>
        </div>
            <div class="col-lg-5 m-auto">
                <div class="card main-card" style="position: relative; overflow: hidden; border: 1px solid rgba(153, 69, 255, 0.3); padding: 2.5rem;">
                    <div style="position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: linear-gradient(135deg, var(--solana-purple), var(--solana-cyan)); opacity: 0.15; filter: blur(50px); border-radius: 50%;"></div>

                    <div style="position: relative; z-index: 1;">
                        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
                            2FA Verification
                        </h2>

                        <form method="post">
                            <div class="input-group" style="margin-bottom: 2rem;">
                                <label class="input-label" style="font-size: 0.875rem; color: rgba(255,255,255,0.6); display: block; margin-bottom: 0.5rem;">
                                    6-Digit Authenticator Code
                                </label>
                                <input type="text" class="input" name="2fa_code" id="2fa_code" placeholder="000000" maxlength="6" pattern="\d{6}" required style="text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: 700; color: #14F195; background: rgba(0,0,0,0.2);">
                            </div>

                            <div style="background: rgba(153, 69, 255, 0.05); border-radius: 0.75rem; padding: 1rem; margin-bottom: 2rem; border: 1px solid rgba(153, 69, 255, 0.1);">
                                <div style="display: flex; gap: 0.75rem; align-items: center;">
                                    <p style="font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin: 0;">
                                        Open your Google Authenticator to view your current security code.
                                    </p>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" style="width: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">
                                Verify
                            </button>
                        </form>

                        <div style="text-align: center; margin-top: 1.5rem;">
                            <a href="<?= base_url() ?>login" style="text-decoration: none; font-size: 0.875rem; color: rgba(255,255,255,0.5); transition: 0.3s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.5)'">
                                ← Back to Sign In
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>