{# Appearance Dropdown (mode + brand) #}
<div class="theme-controls">
    <div class="theme-dropdown">
        <button class="theme-dropdown__button" aria-haspopup="true" aria-expanded="false" title="Theme presets">
            <span class="theme-dropdown__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <path
                        d="M12 3C7.03 3 3 7.03 3 12c0 2.76 2.24 5 5 5h1.25c.69 0 1.25.56 1.25 1.25v.25c0 2.07 1.68 3.75 3.75 3.75 4.28 0 7.75-3.47 7.75-7.75C22 7.37 17.63 3 12 3z"
                        stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                    <circle cx="8.4" cy="9.9" r="0.95" fill="currentColor" opacity="0.9" />
                    <circle cx="12.1" cy="8.1" r="0.95" fill="currentColor" opacity="0.75" />
                    <circle cx="15.4" cy="11" r="0.95" fill="currentColor" opacity="0.85" />
                    <circle cx="13.2" cy="14.2" r="0.95" fill="currentColor" opacity="0.7" />
                </svg>
            </span>
            <span class="sr-only">Theme presets</span>
            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.178l3.71-3.947a.75.75 0 111.08 1.04l-4.24 4.51a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z" />
            </svg>
        </button>
        <ul class="theme-dropdown__menu">
            <li><button data-appearance="system">System</button></li>
            <li><button data-appearance="light">Light</button></li>
            <li><button data-appearance="dark">Dark</button></li>
            <li class="separator" aria-hidden="true"></li>
            <li><button data-palette="">Default</button></li>
            <li><button data-palette="snow-lynx">Snow Lynx</button></li>
            <li><button data-palette="brown-bengal">Brown Bengal</button></li>
            <li><button data-palette="silver-bengal">Silver Bengal</button></li>
            <li><button data-palette="charcoal-bengal">Charcoal Bengal</button></li>
            <li><button data-palette="blue-bengal">Blue Bengal</button></li>

        </ul>
    </div>
</div>
