.auth-wrap { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
    .auth-card {
        display: flex; width: 100%; max-width: 940px; background: #fff;
        border-radius: 22px; overflow: hidden;
        box-shadow: 0 30px 70px rgba(2, 8, 23, .45);
    }
    .auth-card.auth-solo { max-width: 460px; flex-direction: column; }
    .auth-brand {
        flex: 1 1 45%; position: relative; color: #fff; padding: 48px 42px;
        background: linear-gradient(150deg, #0b132b 0%, #16244f 45%, #0e7490 100%);
        display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
    }
    .auth-solo .auth-brand { flex: none; padding: 30px 34px; }
    .auth-brand::after {
        content: "\f072"; font-family: "FontAwesome"; position: absolute;
        right: -26px; bottom: -34px; font-size: 190px; color: rgba(255,255,255,.06); transform: rotate(-18deg);
    }
    .auth-solo .auth-brand::after { font-size: 120px; bottom: -24px; right: -18px; }
    .auth-badge {
        width: 58px; height: 58px; border-radius: 16px; background: #38bdf8; color: #0b132b;
        display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
        box-shadow: 0 10px 24px rgba(56,189,248,.4); margin-bottom: 26px;
    }
    .auth-solo .auth-badge { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: 16px; }
    .auth-brand h1 { font-weight: 800; font-size: 1.9rem; letter-spacing: -.5px; margin: 0 0 6px; }
    .auth-solo .auth-brand h1 { font-size: 1.4rem; }
    .auth-brand .tag { color: #cfe3ff; font-size: .95rem; line-height: 1.5; margin: 0 0 26px; max-width: 320px; }
    .auth-solo .auth-brand .tag { margin-bottom: 0; }
    .auth-features { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
    .auth-features li { display: flex; align-items: center; gap: 10px; color: #e2e8f0; font-size: .92rem; margin-bottom: 12px; font-weight: 500; }
    .auth-features li i { color: #4ade80; }
    .auth-brand .brand-foot { color: rgba(255,255,255,.55); font-size: .8rem; margin-top: 28px; }
    .auth-form { flex: 1 1 55%; padding: 46px 44px; }
    .auth-solo .auth-form { padding: 34px; }
    .auth-form h2 { font-weight: 800; color: #0f172a; font-size: 1.55rem; margin: 0 0 4px; letter-spacing: -.4px; }
    .auth-form .sub { color: #64748b; font-size: .92rem; margin: 0 0 26px; }
    .auth-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #475569; margin-bottom: 7px; display: block; }
    .auth-input-wrap { position: relative; margin-bottom: 20px; }
    .auth-input-wrap > i {
        position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
        color: #94a3b8; font-size: .95rem;
    }
    .auth-input {
        width: 100%; height: 50px; border: 1.5px solid #e2e8f0; border-radius: 12px;
        padding: 0 16px 0 42px; font-size: 15px; color: #0f172a; background: #f8fafc;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .auth-input:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.13); }
    .auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
    .auth-check { display: flex; align-items: center; gap: 8px; color: #475569; font-size: .88rem; cursor: pointer; user-select: none; }
    .auth-check input { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }
    .auth-forgot { color: #2563eb; font-size: .86rem; font-weight: 600; text-decoration: none; }
    .auth-forgot:hover { text-decoration: underline; }
    .auth-btn {
        width: 100%; height: 50px; border: none; border-radius: 12px; color: #fff; font-weight: 700;
        font-size: 15.5px; letter-spacing: .4px; cursor: pointer;
        background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
        box-shadow: 0 12px 24px rgba(37,99,235,.32); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }
    .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(37,99,235,.42); filter: brightness(1.03); }
    .auth-help { text-align: center; color: #94a3b8; font-size: .84rem; margin-top: 22px; }
    .auth-help a { color: #2563eb; text-decoration: none; font-weight: 600; }
    .auth-alert { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: 11px 15px; font-size: .86rem; margin-bottom: 20px; }
    .auth-alert ul { margin: 0; padding-left: 18px; }
    .auth-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 12px; padding: 11px 15px; font-size: .86rem; margin-bottom: 20px; }
    @media (max-width: 820px) {
        .auth-card { flex-direction: column; max-width: 460px; }
        .auth-brand { padding: 34px 30px; }
        .auth-brand .tag { max-width: none; margin-bottom: 18px; }
        .auth-features { display: flex; flex-wrap: wrap; gap: 6px 18px; }
        .auth-features li { margin-bottom: 4px; font-size: .84rem; }
        .auth-brand .brand-foot { display: none; }
        .auth-form { padding: 34px 30px; }
    }

    /* Small phones: the sign-in card is the whole screen, so reclaim the
       generous desktop padding and drop the decorative feature list. */
    @media (max-width: 479.98px) {
        .auth-card { border-radius: 16px; }
        .auth-brand { padding: 24px 20px; }
        .auth-brand h1 { font-size: 1.5rem; }
        .auth-brand::after { font-size: 130px; bottom: -22px; right: -18px; }
        .auth-badge { width: 46px; height: 46px; border-radius: 13px; font-size: 1.25rem; }
        .auth-features { display: none; }
        .auth-form { padding: 24px 20px; }
        .auth-form h2 { font-size: 1.3rem; }
        .auth-form .sub { margin-bottom: 20px; }

        /* Remember-me and the forgot link stack rather than colliding. */
        .auth-row { flex-wrap: wrap; gap: 10px; }
    }

    /* iOS Safari zooms the page whenever a focused field is under 16px.
       Hold the inputs at 16px on touch-sized screens so signing in never
       jumps the layout. */
    @media (max-width: 767.98px) {
        .auth-input { font-size: 16px; height: 48px; }
        .auth-btn { height: 48px; }
    }