body {
            background: var(--cf-blue);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
        }
        /* Decorative blocks behind the card, matching dummy.my flat aesthetic */
        body::before, body::after {
            content: '';
            position: fixed;
            border-radius: var(--cf-radius);
            z-index: 0;
            pointer-events: none;
        }
        body::before {
            width: 320px; height: 320px;
            background: var(--cf-orange);
            top: -80px; left: -80px;
            transform: rotate(-12deg);
            opacity: 0.18;
        }
        body::after {
            width: 280px; height: 280px;
            background: var(--cf-yellow);
            bottom: -100px; right: -60px;
            transform: rotate(8deg);
            opacity: 0.18;
        }
        .auth-shell {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 960px;
            width: 100%;
            gap: 32px;
            align-items: center;
        }
        /* Left: pitch card (white) */
        .auth-pitch {
            background: #fff;
            color: var(--cf-ink);
            padding: 36px 32px;
            border-radius: var(--cf-radius);
        }
        .auth-pitch .brand {
            display: block;
            text-align: center;
            margin-bottom: 24px;
        }
        .auth-pitch .brand img {
            max-width: 300px;
            width: 100%;
            height: auto;
            display: inline-block;
        }
        .auth-pitch h1 {
            color: var(--cf-ink);
            font-size: 34px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.025em;
            margin: 0 0 12px;
        }
        .auth-pitch .lead {
            color: var(--cf-ink-soft);
            font-size: 16px;
            margin: 0 0 24px;
            max-width: 380px;
        }
        .auth-pitch ul {
            list-style: none; padding: 0; margin: 0;
        }
        .auth-pitch ul li {
            display: flex; align-items: center; gap: 12px;
            margin: 10px 0;
            font-size: 14px;
            color: var(--cf-ink);
            font-weight: 500;
        }
        .auth-pitch ul li .chk {
            width: 22px; height: 22px;
            background: var(--cf-green);
            color: #fff;
            border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
        }

        /* Right: auth/login card (blue) */
        .auth-card {
            background: var(--cf-blue);
            border-radius: var(--cf-radius);
            padding: 36px 32px;
            box-shadow: none;
            color: #fff;
        }
        .auth-card .auth-brand-mobile {
            display: none;
        }
        .auth-card h2 {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0 0 6px;
            color: #fff;
        }
        .auth-card .auth-sub {
            color: rgba(255,255,255,0.85);
            font-size: 14px;
            margin: 0 0 24px;
        }
        .auth-card .yellow-underline {
            display: inline-block;
            width: 48px; height: 4px;
            background: var(--cf-yellow);
            border-radius: 2px;
            margin-bottom: 18px;
        }

        .auth-card .form-label { font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 6px; }
        .auth-card .form-control { padding: 12px 14px; font-size: 15px; background: #fff; color: var(--cf-ink); border: 1.5px solid rgba(255,255,255,0.4); }
        .auth-card .form-control:focus { border-color: var(--cf-yellow); box-shadow: 0 0 0 3px rgba(242,197,61,0.25); }
        .auth-card .input-group .btn-outline-secondary { border: 1.5px solid rgba(255,255,255,0.4); color: var(--cf-ink); background: #fff; }
        .auth-card .input-group .btn-outline-secondary:hover { background: var(--cf-bg); color: var(--cf-ink); }
        .auth-card .form-check-input { background-color: transparent; border-color: rgba(255,255,255,0.6); }
        .auth-card .form-check-input:checked { background-color: var(--cf-yellow); border-color: var(--cf-yellow); }
        .auth-card .form-check-label { color: rgba(255,255,255,0.9); }

        .auth-card .btn-primary {
            background: var(--cf-orange) !important;
            border-color: var(--cf-orange) !important;
            color: #fff !important;
            padding: 13px 22px;
            font-size: 15px;
            font-weight: 700;
            border-radius: var(--cf-radius-sm);
        }
        .auth-card .btn-primary:hover {
            background: var(--cf-orange-d) !important;
            border-color: var(--cf-orange-d) !important;
        }
        .auth-card a { color: #fff; font-weight: 700; font-size: 14px; text-decoration: underline; }
        .auth-card a:hover { color: var(--cf-yellow); }
        .auth-card .alert { color: var(--cf-ink); }

        .auth-card .auth-divider {
            display: flex; align-items: center; gap: 14px;
            margin: 22px 0 16px;
            color: rgba(255,255,255,0.85);
            font-size: 12px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06em;
        }
        .auth-card .auth-divider::before, .auth-card .auth-divider::after {
            content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.3);
        }

        .auth-card .btn-social {
            background: #fff !important;
            border: 1.5px solid #fff !important;
            color: var(--cf-ink) !important;
            font-weight: 600;
            padding: 11px 16px;
            border-radius: var(--cf-radius-sm);
            text-decoration: none !important;
        }
        .auth-card .btn-social:hover { background: var(--cf-bg) !important; }

        .auth-footer {
            color: rgba(255,255,255,0.7);
            font-size: 12px;
            text-align: center;
            margin-top: 24px;
        }
        .auth-footer a { color: rgba(255,255,255,0.92); text-decoration: underline; }

        @media (max-width: 860px) {
            .auth-shell { grid-template-columns: 1fr; max-width: 460px; }
            .auth-pitch { display: none; }
            .auth-card .auth-brand-mobile {
                display: block;
                margin-bottom: 18px;
            }
            .auth-card .auth-brand-mobile img {
                max-width: 240px;
                width: 100%;
                height: auto;
                display: block;
            }
        }