                        <div class="page-header">
                            <div>
                                <h1>Buttons</h1>
                                <p class="subtitle">Modern button family, Bootstrap variants, sizes, icon-buttons, button groups, and async loading states.</p>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin-bottom: 8px;">PRIMARY VARIANTS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Modern button family</h2><p class="m-card__subtitle">The native theme buttons — primary fills with the brand color, ghost is the neutral outline.</p></div></header>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <button type="button" class="m-btn m-btn--primary">Primary</button>
                                <button type="button" class="m-btn m-btn--ghost">Ghost</button>
                                <button type="button" class="m-btn m-btn--primary"><i class="fa-solid fa-plus"></i> With icon</button>
                                <button type="button" class="m-btn m-btn--ghost">With icon <i class="fa-solid fa-arrow-right"></i></button>
                                <button type="button" class="m-btn m-btn--primary" disabled>Disabled</button>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BOOTSTRAP COLOR FAMILY</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Semantic colors</h2><p class="m-card__subtitle">Bootstrap <code style="background:var(--m-surface-2);padding:1px 6px;border-radius:4px;font-size:12px;">.btn-*</code> classes mapped to the brand palette.</p></div></header>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-info">Info</button>
                            </div>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
                                <button type="button" class="btn btn-outline-primary">Outline primary</button>
                                <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
                                <button type="button" class="btn btn-outline-success">Outline success</button>
                                <button type="button" class="btn btn-outline-warning">Outline warning</button>
                                <button type="button" class="btn btn-outline-danger">Outline danger</button>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">SIZES</h5>
                        <section class="m-card">
                            <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
                                <button type="button" class="btn btn-primary btn-sm">Small</button>
                                <button type="button" class="btn btn-primary">Default</button>
                                <button type="button" class="btn btn-primary btn-lg">Large</button>
                                <button type="button" class="m-btn m-btn--primary" style="height:30px;padding:0 12px;font-size:12.5px;">Compact m-btn</button>
                                <button type="button" class="m-btn m-btn--primary" style="height:44px;padding:0 20px;font-size:14.5px;">Tall m-btn</button>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">ICON-ONLY BUTTONS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Toolbar-style icon buttons</h2><p class="m-card__subtitle">Used across tables, cards, and topbars for compact actions.</p></div></header>
                            <div style="display: flex; gap: 4px; flex-wrap: wrap; align-items: center;">
                                <button type="button" class="icon-btn" aria-label="Refresh"><i class="fa-solid fa-arrows-rotate"></i></button>
                                <button type="button" class="icon-btn" aria-label="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                <button type="button" class="icon-btn" aria-label="Copy"><i class="fa-regular fa-copy"></i></button>
                                <button type="button" class="icon-btn" aria-label="Archive"><i class="fa-solid fa-box-archive"></i></button>
                                <button type="button" class="icon-btn" aria-label="Delete" style="color: var(--m-danger);"><i class="fa-regular fa-trash-can"></i></button>
                                <button type="button" class="icon-btn" aria-label="Download"><i class="fa-solid fa-download"></i></button>
                                <button type="button" class="icon-btn" aria-label="More"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BUTTON GROUPS</h5>
                        <section class="m-card">
                            <div style="display: flex; gap: 16px; flex-wrap: wrap;">
                                <div class="btn-group" role="group" aria-label="Toolbar group">
                                    <button type="button" class="btn btn-secondary"><i class="fa-solid fa-bold"></i></button>
                                    <button type="button" class="btn btn-secondary"><i class="fa-solid fa-italic"></i></button>
                                    <button type="button" class="btn btn-secondary"><i class="fa-solid fa-underline"></i></button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-secondary">Day</button>
                                    <button type="button" class="btn btn-primary">Week</button>
                                    <button type="button" class="btn btn-secondary">Month</button>
                                    <button type="button" class="btn btn-secondary">Year</button>
                                </div>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">LOADING STATES</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Async actions</h2><p class="m-card__subtitle">Click "Save" to see the spinner pattern. Toast confirms when done.</p></div></header>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <button type="button" class="m-btn m-btn--primary" id="loading-demo-btn">
                                    <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i>
                                    <span>Save</span>
                                </button>
                                <button type="button" class="m-btn m-btn--primary" disabled>
                                    <span class="btn-spinner" aria-hidden="true"></span>
                                    Loading…
                                </button>
                                <button type="button" class="m-btn m-btn--ghost" disabled>
                                    <i class="fa-solid fa-circle-check" style="color: var(--m-success);"></i>
                                    Saved
                                </button>
                            </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>
