                        <div class="page-header">
                            <div>
                                <h1>Toggles & switches</h1>
                                <p class="subtitle">Bootstrap form-switch, settings-style toggle rows, plus checkboxes and radios with brand styling.</p>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin-bottom: 8px;">DEFAULT SWITCH</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Bootstrap form-switch</h2><p class="m-card__subtitle">Bootstrap 5 native toggle, restyled to use the brand accent.</p></div></header>
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="sw-1" checked><label class="form-check-label" for="sw-1">Two-factor authentication</label></div>
                                <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="sw-2"><label class="form-check-label" for="sw-2">Email digest</label></div>
                                <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="sw-3" checked><label class="form-check-label" for="sw-3">Real-time mentions</label></div>
                                <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="sw-4" disabled checked><label class="form-check-label" for="sw-4">System alerts (always on)</label></div>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">SETTINGS-STYLE TOGGLE ROWS</h5>
                        <section class="m-card">
                            <div class="notif-grid">
                                <div class="notif-row">
                                    <div>
                                        <p class="notif-row__title">Product updates</p>
                                        <p class="notif-row__sub">New features, improvements, and changelog entries.</p>
                                    </div>
                                    <div class="form-check form-switch" style="margin:0;"><input type="checkbox" class="form-check-input" checked></div>
                                </div>
                                <div class="notif-row">
                                    <div>
                                        <p class="notif-row__title">Weekly digest</p>
                                        <p class="notif-row__sub">A weekly recap of activity in your workspace.</p>
                                    </div>
                                    <div class="form-check form-switch" style="margin:0;"><input type="checkbox" class="form-check-input"></div>
                                </div>
                                <div class="notif-row">
                                    <div>
                                        <p class="notif-row__title">Comments &amp; mentions</p>
                                        <p class="notif-row__sub">Notify me when someone @mentions me.</p>
                                    </div>
                                    <div class="form-check form-switch" style="margin:0;"><input type="checkbox" class="form-check-input" checked></div>
                                </div>
                                <div class="notif-row">
                                    <div>
                                        <p class="notif-row__title">Marketing &amp; tips</p>
                                        <p class="notif-row__sub">Best-practice guides and the occasional promo.</p>
                                    </div>
                                    <div class="form-check form-switch" style="margin:0;"><input type="checkbox" class="form-check-input"></div>
                                </div>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">CHECKBOXES &amp; RADIOS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Form-check controls</h2><p class="m-card__subtitle">Restyled with brand-blue checked state and a 3px focus ring.</p></div></header>
                            <div class="row">
                                <div class="col-md-6">
                                    <h3 style="font-size:13px;font-weight:600;color:var(--m-text-muted);margin:0 0 12px;">Checkboxes</h3>
                                    <div style="display:flex;flex-direction:column;gap:8px;">
                                        <div class="form-check"><input class="form-check-input" type="checkbox" id="cb-1" checked><label class="form-check-label" for="cb-1">Selected option</label></div>
                                        <div class="form-check"><input class="form-check-input" type="checkbox" id="cb-2"><label class="form-check-label" for="cb-2">Unselected option</label></div>
                                        <div class="form-check"><input class="form-check-input" type="checkbox" id="cb-3" disabled><label class="form-check-label" for="cb-3" style="color:var(--m-text-faint);">Disabled option</label></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h3 style="font-size:13px;font-weight:600;color:var(--m-text-muted);margin:0 0 12px;">Radios</h3>
                                    <div style="display:flex;flex-direction:column;gap:8px;">
                                        <div class="form-check"><input class="form-check-input" type="radio" name="r1" id="r-1" checked><label class="form-check-label" for="r-1">Monthly billing</label></div>
                                        <div class="form-check"><input class="form-check-input" type="radio" name="r1" id="r-2"><label class="form-check-label" for="r-2">Annual billing (20% off)</label></div>
                                        <div class="form-check"><input class="form-check-input" type="radio" name="r1" id="r-3"><label class="form-check-label" for="r-3">Pay-as-you-go</label></div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
