<div class="uk-auth-split">
    <!-- Left: Brand / Visual -->
    <div class="uk-auth-split-visual">
        <div class="uk-auth-split-visual-inner">
            <div class="uk-auth-brand">
                <i class="fas fa-cube"></i>
                <span>Nexus</span>
            </div>
            <h2 class="uk-auth-visual-title">Design faster.<br>Ship with confidence.</h2>
            <p class="uk-auth-visual-desc">Join 12,000+ teams building beautiful products...</p>
            <div class="uk-auth-visual-stats">
                <div class="uk-auth-stat"><span class="uk-auth-stat-value">12k+</span><span>Teams</span></div>
                <div class="uk-auth-stat"><span class="uk-auth-stat-value">98%</span><span>Satisfaction</span></div>
                <div class="uk-auth-stat"><span class="uk-auth-stat-value">50+</span><span>Components</span></div>
            </div>
        </div>
    </div>

    <!-- Right: Form -->
    <div class="uk-auth-split-form">
        <div class="uk-auth-form-inner">
            <div class="uk-auth-form-header">
                <h1 class="uk-auth-form-title">Welcome back</h1>
                <p class="uk-auth-form-subtitle">Sign in to your account to continue</p>
            </div>
            <form class="uk-auth-form">
                <div class="uk-auth-field">
                    <label class="uk-auth-label">Email address</label>
                    <div class="uk-auth-input-wrap">
                        <i class="fas fa-envelope uk-auth-input-icon"></i>
                        <input type="email" class="uk-auth-input" placeholder="[email protected]">
                    </div>
                </div>
                <div class="uk-auth-field">
                    <div class="uk-auth-label-row">
                        <label class="uk-auth-label">Password</label>
                        <a href="#" class="uk-auth-link">Forgot password?</a>
                    </div>
                    <div class="uk-auth-input-wrap">
                        <i class="fas fa-lock uk-auth-input-icon"></i>
                        <input type="password" class="uk-auth-input" placeholder="••••••••">
                        <button type="button" class="uk-auth-input-action"><i class="fas fa-eye"></i></button>
                    </div>
                </div>
                <div class="uk-auth-checkbox-row">
                    <label class="uk-auth-checkbox">
                        <input type="checkbox" checked> <span>Remember me for 30 days</span>
                    </label>
                </div>
                <button type="submit" class="uk-auth-btn uk-auth-btn-primary">
                    Sign in <i class="fas fa-arrow-right"></i>
                </button>
                <div class="uk-auth-divider"><span>or continue with</span></div>
                <div class="uk-auth-social">
                    <button type="button" class="uk-auth-btn uk-auth-btn-social"><i class="fab fa-google"></i> Google</button>
                    <button type="button" class="uk-auth-btn uk-auth-btn-social"><i class="fab fa-github"></i> GitHub</button>
                </div>
            </form>
            <p class="uk-auth-footer-text">Don't have an account? <a href="#" class="uk-auth-link uk-auth-link-bold">Create one for free</a></p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.uk-auth-input-action').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const wrap = btn.closest('.uk-auth-input-wrap');
            const input = wrap ? wrap.querySelector('input') : null;
            if (!input) return;
            const icon = btn.querySelector('i');
            const isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            if (icon) {
                icon.classList.toggle('fa-eye', !isPassword);
                icon.classList.toggle('fa-eye-slash', isPassword);
            }
            btn.setAttribute('aria-pressed', isPassword ? 'true' : 'false');
        });
    });
});
</script>

<style>
    .uk-auth-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        min-height: 640px;
        text-align: left;
    }

    /* Visual side */
    .uk-auth-split-visual {
        background: linear-gradient(145deg, #0b1b2f 0%, #1e3a8a 100%);
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .uk-auth-split-visual::before {
        content: '';
        position: absolute;
        width: 400px; height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(96,165,250,0.25) 0%, transparent 70%);
        top: -100px; right: -100px;
    }
    .uk-auth-split-visual::after {
        content: '';
        position: absolute;
        width: 300px; height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(167,139,250,0.2) 0%, transparent 70%);
        bottom: -80px; left: -60px;
    }
    .uk-auth-split-visual-inner {
        position: relative;
        z-index: 1;
        padding: 3rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .uk-auth-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 2.5rem;
        color: #fff;
    }
    .uk-auth-brand i {
        font-size: 1.5rem;
        color: #93c5fd;
    }
    .uk-auth-visual-title {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1rem;
        color: #fff;
    }
    .uk-auth-visual-desc {
        font-size: 0.9rem;
        color: #94a3b8;
        line-height: 1.6;
        margin-bottom: 2.5rem;
        max-width: 340px;
    }
    .uk-auth-visual-stats {
        display: flex;
        gap: 2rem;
    }
    .uk-auth-stat {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    .uk-auth-stat-value {
        font-size: 1.35rem;
        font-weight: 800;
        color: #fff;
    }
    .uk-auth-stat-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* Form side */
    .uk-auth-split-form {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 2.5rem;
    }
    .uk-auth-form-inner {
        width: 100%;
        max-width: 380px;
    }
    .uk-auth-form-header {
        margin-bottom: 2rem;
    }
    .uk-auth-form-title {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }
    .uk-auth-form-subtitle {
        font-size: 0.875rem;
        color: #64748b;
        margin: 0;
    }
    .uk-auth-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    .uk-auth-field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .uk-auth-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .uk-auth-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #334155;
    }
    .uk-auth-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .uk-auth-input-icon {
        position: absolute;
        left: 0.875rem;
        font-size: 0.85rem;
        color: #94a3b8;
        pointer-events: none;
    }
    .uk-auth-input {
        width: 100%;
        padding: 0.75rem 0.875rem 0.75rem 2.5rem;
        border: 1.5px solid #e2e8f0;
        border-radius: 0.6rem;
        font-size: 0.875rem;
        color: #0b1b2f;
        background: #fff;
        transition: all 0.15s;
        outline: none;
        box-sizing: border-box;
    }
    .uk-auth-input::placeholder {
        color: #cbd5e1;
    }
    .uk-auth-input:focus {
        border-color: #1e3a8a;
        box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
    }
    .uk-auth-input-action {
        position: absolute;
        right: 0.75rem;
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.85rem;
        padding: 0.25rem;
        transition: color 0.15s;
    }
    .uk-auth-input-action:hover {
        color: #1e3a8a;
    }
    .uk-auth-checkbox-row {
        display: flex;
        align-items: center;
    }
    .uk-auth-checkbox {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #64748b;
        cursor: pointer;
        user-select: none;
    }
    .uk-auth-checkbox input {
        width: 16px;
        height: 16px;
        accent-color: #1e3a8a;
        cursor: pointer;
    }
    .uk-auth-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-weight: 700;
        font-size: 0.875rem;
        border-radius: 0.6rem;
        cursor: pointer;
        transition: all 0.15s;
        border: 1.5px solid transparent;
        font-family: inherit;
    }
    .uk-auth-btn-primary {
        background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
        color: #fff;
        padding: 0.8rem 1.25rem;
        box-shadow: 0 4px 14px rgba(30,58,138,0.25);
    }
    .uk-auth-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(30,58,138,0.35);
    }
    .uk-auth-btn-primary i {
        font-size: 0.75rem;
        transition: transform 0.15s;
    }
    .uk-auth-btn-primary:hover i {
        transform: translateX(3px);
    }
    .uk-auth-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .uk-auth-divider::before,
    .uk-auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }
    .uk-auth-social {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .uk-auth-btn-social {
        background: #fff;
        border-color: #e2e8f0;
        color: #334155;
        padding: 0.7rem 0.75rem;
        font-weight: 600;
        font-size: 0.8rem;
    }
    .uk-auth-btn-social:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
    }
    .uk-auth-btn-social i {
        font-size: 0.95rem;
    }
    .uk-auth-link {
        font-size: 0.75rem;
        font-weight: 600;
        color: #1e3a8a;
        text-decoration: none;
        transition: color 0.15s;
    }
    .uk-auth-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }
    .uk-auth-link-bold {
        font-size: 0.8rem;
        font-weight: 700;
    }
    .uk-auth-footer-text {
        text-align: center;
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 1.75rem;
        margin-bottom: 0;
    }

    /* Responsive */
    @media (max-width: 860px) {
        .uk-auth-split {
            grid-template-columns: 1fr;
            min-height: auto;
        }
        .uk-auth-split-visual {
            display: none;
        }
        .uk-auth-split-form {
            padding: 2.5rem 1.5rem;
        }
    }
</style>

<div class="uk-auth-split uk-auth-split-reverse">
    <!-- Left: Form -->
    <div class="uk-auth-split-form">
        <div class="uk-auth-form-inner">
            <div class="uk-auth-form-header">
                <h1 class="uk-auth-form-title">Create your account</h1>
                <p class="uk-auth-form-subtitle">Start building in under 60 seconds</p>
            </div>
            <form class="uk-auth-form">
                <div class="uk-auth-social">
                    <button type="button" class="uk-auth-btn uk-auth-btn-social"><i class="fab fa-google"></i> Google</button>
                    <button type="button" class="uk-auth-btn uk-auth-btn-social"><i class="fab fa-github"></i> GitHub</button>
                </div>
                <div class="uk-auth-divider"><span>or sign up with email</span></div>
                <div class="uk-auth-field">
                    <label class="uk-auth-label">Full name</label>
                    <div class="uk-auth-input-wrap">
                        <i class="fas fa-user uk-auth-input-icon"></i>
                        <input type="text" class="uk-auth-input" placeholder="Jane Cooper">
                    </div>
                </div>
                <div class="uk-auth-field">
                    <label class="uk-auth-label">Work email</label>
                    <div class="uk-auth-input-wrap">
                        <i class="fas fa-envelope uk-auth-input-icon"></i>
                        <input type="email" class="uk-auth-input" placeholder="[email protected]">
                    </div>
                </div>
                <div class="uk-auth-field">
                    <label class="uk-auth-label">Password</label>
                    <div class="uk-auth-input-wrap">
                        <i class="fas fa-lock uk-auth-input-icon"></i>
                        <input type="password" class="uk-auth-input" placeholder="Create a strong password">
                        <button type="button" class="uk-auth-input-action"><i class="fas fa-eye"></i></button>
                    </div>
                    <div class="uk-auth-password-strength">
                        <span class="uk-auth-strength-bar active"></span>
                        <span class="uk-auth-strength-bar active"></span>
                        <span class="uk-auth-strength-bar"></span>
                        <span class="uk-auth-strength-bar"></span>
                    </div>
                </div>
                <div class="uk-auth-checkbox-row">
                    <label class="uk-auth-checkbox">
                        <input type="checkbox">
                        <span>I agree to the <a href="#" class="uk-auth-link">Terms</a> and <a href="#" class="uk-auth-link">Privacy Policy</a></span>
                    </label>
                </div>
                <button type="submit" class="uk-auth-btn uk-auth-btn-primary">
                    Create account <i class="fas fa-arrow-right"></i>
                </button>
            </form>
            <p class="uk-auth-footer-text">Already have an account? <a href="#" class="uk-auth-link uk-auth-link-bold">Sign in</a></p>
        </div>
    </div>

    <!-- Right: Visual -->
    <div class="uk-auth-split-visual uk-auth-split-visual-alt">
        <div class="uk-auth-split-visual-inner">
            <div class="uk-auth-brand">
                <i class="fas fa-cube"></i>
                <span>Nexus</span>
            </div>
            <h2 class="uk-auth-visual-title">Everything you need<br>to build faster.</h2>
            <p class="uk-auth-visual-desc">50+ components, dark mode, accessibility-first...</p>
            <ul class="uk-auth-feature-list">
                <li><i class="fas fa-check-circle"></i> Production-ready components</li>
                <li><i class="fas fa-check-circle"></i> Fully responsive by default</li>
                <li><i class="fas fa-check-circle"></i> Copy-paste code snippets</li>
                <li><i class="fas fa-check-circle"></i> Lifetime updates & support</li>
            </ul>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.uk-auth-input-action').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const wrap = btn.closest('.uk-auth-input-wrap');
            const input = wrap ? wrap.querySelector('input') : null;
            if (!input) return;
            const icon = btn.querySelector('i');
            const isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            if (icon) {
                icon.classList.toggle('fa-eye', !isPassword);
                icon.classList.toggle('fa-eye-slash', isPassword);
            }
            btn.setAttribute('aria-pressed', isPassword ? 'true' : 'false');
        });
    });
});
</script>

<style>
    .uk-auth-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        min-height: 640px;
        text-align: left;
    }
    .uk-auth-split-visual {
        background: linear-gradient(145deg, #0b1b2f 0%, #1e3a8a 100%);
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .uk-auth-split-visual-inner {
        position: relative;
        z-index: 1;
        padding: 3rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .uk-auth-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 2.5rem;
        color: #fff;
    }
    .uk-auth-brand i { font-size: 1.5rem; color: #93c5fd; }
    .uk-auth-visual-title {
        font-size: 2rem; font-weight: 800; line-height: 1.2;
        margin-bottom: 1rem; color: #fff;
    }
    .uk-auth-visual-desc {
        font-size: 0.9rem; color: #94a3b8; line-height: 1.6;
        margin-bottom: 2.5rem; max-width: 340px;
    }
    .uk-auth-split-form {
        display: flex; align-items: center; justify-content: center;
        padding: 3rem 2.5rem;
    }
    .uk-auth-form-inner { width: 100%; max-width: 380px; }
    .uk-auth-form-header { margin-bottom: 2rem; }
    .uk-auth-form-title {
        font-size: 1.75rem; font-weight: 800; color: #0b1b2f;
        margin-bottom: 0.5rem; line-height: 1.2;
    }
    .uk-auth-form-subtitle { font-size: 0.875rem; color: #64748b; margin: 0; }
    .uk-auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
    .uk-auth-field { display: flex; flex-direction: column; gap: 0.5rem; }
    .uk-auth-label-row {
        display: flex; align-items: center; justify-content: space-between;
    }
    .uk-auth-label { font-size: 0.8rem; font-weight: 700; color: #334155; }
    .uk-auth-input-wrap { position: relative; display: flex; align-items: center; }
    .uk-auth-input-icon {
        position: absolute; left: 0.875rem; font-size: 0.85rem;
        color: #94a3b8; pointer-events: none;
    }
    .uk-auth-input {
        width: 100%; padding: 0.75rem 0.875rem 0.75rem 2.5rem;
        border: 1.5px solid #e2e8f0; border-radius: 0.6rem;
        font-size: 0.875rem; color: #0b1b2f; background: #fff;
        transition: all 0.15s; outline: none; box-sizing: border-box;
    }
    .uk-auth-input::placeholder { color: #cbd5e1; }
    .uk-auth-input:focus {
        border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
    }
    .uk-auth-input-action {
        position: absolute; right: 0.75rem; background: none; border: none;
        color: #94a3b8; cursor: pointer; font-size: 0.85rem;
        padding: 0.25rem; transition: color 0.15s;
    }
    .uk-auth-input-action:hover { color: #1e3a8a; }
    .uk-auth-checkbox-row { display: flex; align-items: center; }
    .uk-auth-checkbox {
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.8rem; color: #64748b; cursor: pointer; user-select: none;
    }
    .uk-auth-checkbox input {
        width: 16px; height: 16px; accent-color: #1e3a8a; cursor: pointer;
    }
    .uk-auth-btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0.5rem; font-weight: 700; font-size: 0.875rem;
        border-radius: 0.6rem; cursor: pointer; transition: all 0.15s;
        border: 1.5px solid transparent; font-family: inherit;
    }
    .uk-auth-btn-primary {
        background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
        color: #fff; padding: 0.8rem 1.25rem;
        box-shadow: 0 4px 14px rgba(30,58,138,0.25);
    }
    .uk-auth-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(30,58,138,0.35);
    }
    .uk-auth-btn-primary i {
        font-size: 0.75rem; transition: transform 0.15s;
    }
    .uk-auth-btn-primary:hover i { transform: translateX(3px); }
    .uk-auth-divider {
        display: flex; align-items: center; gap: 0.75rem;
        font-size: 0.7rem; font-weight: 600; color: #94a3b8;
        text-transform: uppercase; letter-spacing: 0.05em;
    }
    .uk-auth-divider::before,
    .uk-auth-divider::after {
        content: ''; flex: 1; height: 1px; background: #e2e8f0;
    }
    .uk-auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .uk-auth-btn-social {
        background: #fff; border-color: #e2e8f0; color: #334155;
        padding: 0.7rem 0.75rem; font-weight: 600; font-size: 0.8rem;
    }
    .uk-auth-btn-social:hover { border-color: #cbd5e1; background: #f8fafc; }
    .uk-auth-btn-social i { font-size: 0.95rem; }
    .uk-auth-link {
        font-size: 0.75rem; font-weight: 600; color: #1e3a8a;
        text-decoration: none; transition: color 0.15s;
    }
    .uk-auth-link:hover { color: #1d4ed8; text-decoration: underline; }
    .uk-auth-link-bold { font-size: 0.8rem; font-weight: 700; }
    .uk-auth-footer-text {
        text-align: center; font-size: 0.8rem; color: #64748b;
        margin-top: 1.75rem; margin-bottom: 0;
    }
    @media (max-width: 860px) {
        .uk-auth-split { grid-template-columns: 1fr; min-height: auto; }
        .uk-auth-split-visual { display: none; }
        .uk-auth-split-form { padding: 2.5rem 1.5rem; }
    }
    .uk-auth-split-reverse { grid-template-columns: 1fr 1fr; }
    .uk-auth-split-visual-alt {
        background: linear-gradient(145deg, #0f172a 0%, #312e81 100%);
    }
    .uk-auth-password-strength { display: flex; gap: 4px; margin-top: 2px; }
    .uk-auth-strength-bar {
        flex: 1; height: 4px; border-radius: 999px;
        background: #e2e8f0; transition: background 0.2s;
    }
    .uk-auth-strength-bar.active { background: #22c55e; }
    .uk-auth-feature-list {
        list-style: none; padding: 0; margin: 2rem 0 0;
        display: flex; flex-direction: column; gap: 0.875rem;
    }
    .uk-auth-feature-list li {
        display: flex; align-items: center; gap: 0.75rem;
        font-size: 0.85rem; font-weight: 500; color: #cbd5e1;
    }
    .uk-auth-feature-list li i { color: #4ade80; font-size: 0.9rem; }
    @media (max-width: 860px) {
        .uk-auth-split-reverse { grid-template-columns: 1fr; }
        .uk-auth-split-visual-alt { display: none; }
    }
</style>