Auth Screens

<form class="uk-auth-card">
    <div class="uk-auth-logo"><i class="fas fa-cube"></i></div>
    <h4 class="uk-auth-title">Welcome back</h4>
    <p class="uk-auth-sub">Sign in to continue.</p>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Email</label>
        <input type="email" class="uk-auth-input" required>
    </div>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Password</label>
        <input type="password" class="uk-auth-input" required>
    </div>
    <div class="uk-auth-row">
        <label class="uk-auth-check"><input type="checkbox"> Remember me</label>
        <a href="#" class="uk-auth-link">Forgot?</a>
    </div>
    <button type="submit" class="uk-auth-btn">Sign In</button>
</form>

<style>
    .uk-auth-card {
        padding: 2rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1.25rem;
        box-shadow: 0 20px 40px rgba(30, 58, 138, 0.06);
    }
    .uk-auth-logo {
        width: 48px; height: 48px;
        border-radius: 0.75rem;
        background: #1e3a8a;
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    .uk-auth-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #0b1b2f;
        margin: 0 0 0.35rem;
    }
    .uk-auth-sub {
        font-size: 0.85rem;
        color: #64748b;
        margin-bottom: 1.5rem;
    }
    .uk-auth-field { margin-bottom: 1rem; }
    .uk-auth-label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #0b1b2f;
        margin-bottom: 0.4rem;
    }
    .uk-auth-input {
        width: 100%;
        padding: 0.7rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 0.88rem;
        outline: 0;
        transition: all 0.15s;
    }
    .uk-auth-input:focus {
        border-color: #1e3a8a;
        box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
    }
    .uk-auth-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.82rem;
        margin-bottom: 1.25rem;
    }
    .uk-auth-check { color: #64748b; display: flex; align-items: center; gap: 0.35rem; }
    .uk-auth-link { color: #1e3a8a; font-weight: 600; text-decoration: none; }
    .uk-auth-link:hover { text-decoration: underline; }
    .uk-auth-btn {
        width: 100%;
        padding: 0.75rem;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.15s;
    }
    .uk-auth-btn:hover { background: #0f2a5c; }
    .uk-auth-footer {
        text-align: center;
        font-size: 0.82rem;
        color: #64748b;
        margin-top: 1.25rem;
    }
</style>

<div class="uk-auth-split">
    <div class="uk-auth-split-visual">
        <div class="uk-auth-split-glow"></div>
        <div class="uk-auth-split-content">
            <div class="uk-auth-split-logo"><i class="fas fa-cube"></i></div>
            <div class="uk-auth-split-title">Welcome to WebNexa</div>
            <div class="uk-auth-split-desc">The fastest way to build.</div>
        </div>
    </div>
    <form class="uk-auth-split-form">
        <h4 class="uk-auth-title">Sign in</h4>
        <div class="uk-auth-field">
            <label class="uk-auth-label">Email</label>
            <input type="email" class="uk-auth-input" required>
        </div>
        <div class="uk-auth-field">
            <label class="uk-auth-label">Password</label>
            <input type="password" class="uk-auth-input" required>
        </div>
        <button class="uk-auth-btn">Sign In</button>
        <div class="uk-auth-divider"><span>OR</span></div>
        <div class="uk-auth-social">
            <button class="uk-auth-social-btn"><i class="fab fa-google"></i> Google</button>
            <button class="uk-auth-social-btn"><i class="fab fa-github"></i> GitHub</button>
        </div>
    </form>
</div>

<style>
    .uk-auth-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 520px;
    }
    @media (max-width: 768px) {
        .uk-auth-split { grid-template-columns: 1fr; }
        .uk-auth-split-visual { min-height: 180px; }
    }
    .uk-auth-split-visual {
        position: relative;
        background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 100%);
        color: #fff;
        padding: 3rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
    }
    .uk-auth-split-glow {
        position: absolute;
        top: -80px; right: -80px;
        width: 320px; height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    }
    .uk-auth-split-content { position: relative; }
    .uk-auth-split-logo {
        width: 48px; height: 48px;
        border-radius: 0.75rem;
        background: rgba(255,255,255,0.15);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    .uk-auth-split-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }
    .uk-auth-split-desc { font-size: 0.9rem; opacity: 0.85; }
    .uk-auth-split-form {
        padding: 3rem 2.5rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .uk-auth-divider {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1.25rem 0;
        font-size: 0.75rem;
        color: #94a3b8;
        font-weight: 700;
    }
    .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.5rem;
    }
    .uk-auth-social-btn {
        padding: 0.65rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.85rem;
        color: #0b1b2f;
        cursor: pointer;
        transition: all 0.15s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }
    .uk-auth-social-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
</style>

<form class="uk-auth-card">
    <h4 class="uk-auth-title">Create your account</h4>
    <p class="uk-auth-sub">Start your 14-day free trial.</p>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Full name</label>
        <input type="text" class="uk-auth-input" required>
    </div>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Email</label>
        <input type="email" class="uk-auth-input" required>
    </div>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Password</label>
        <input type="password" class="uk-auth-input" required>
    </div>
    <label class="uk-auth-check">
        <input type="checkbox" required> I agree to the Terms
    </label>
    <button type="submit" class="uk-auth-btn">Create Account</button>
</form>

<form class="uk-auth-card">
    <div class="uk-auth-logo" style="background:#fef3c7;color:#d97706;">
        <i class="fas fa-key"></i>
    </div>
    <h4 class="uk-auth-title">Forgot password?</h4>
    <p class="uk-auth-sub">We'll send you a reset link.</p>
    <div class="uk-auth-field">
        <label class="uk-auth-label">Email</label>
        <input type="email" class="uk-auth-input" required>
    </div>
    <button class="uk-auth-btn">Send Reset Link</button>
</form>

<div class="uk-otp">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
    <input type="text" maxlength="1" class="uk-otp-input" inputmode="numeric">
</div>

<style>
    .uk-otp {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1.5rem;
    }
    .uk-otp-input {
        width: 44px; height: 52px;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 800;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        outline: 0;
        transition: all 0.15s;
    }
    .uk-otp-input:focus {
        border-color: #1e3a8a;
        box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
    }
</style>

<div class="uk-auth-strength">
    <div class="uk-auth-strength-bar active"></div>
    <div class="uk-auth-strength-bar active"></div>
    <div class="uk-auth-strength-bar active"></div>
    <div class="uk-auth-strength-bar"></div>
</div>
<div class="uk-auth-strength-label">Strong password</div>

<style>
    .uk-auth-strength {
        display: flex;
        gap: 4px;
        margin-top: -0.5rem;
        margin-bottom: 0.35rem;
    }
    .uk-auth-strength-bar {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: #e2e8f0;
        transition: background 0.15s;
    }
    .uk-auth-strength-bar.active { background: #059669; }
    .uk-auth-strength-label {
        font-size: 0.72rem;
        color: #059669;
        font-weight: 700;
        margin-bottom: 1rem;
    }
</style>