<style>
#editor-toolbar [data-cmd].is-active { background: #e0e7ff; color: #4338ca; }
.dark #editor-toolbar [data-cmd].is-active { background: rgba(79,70,229,.3); color: #a5b4fc; }
</style>
<div id="editor-toolbar" class="flex flex-wrap items-center gap-0.5 px-2 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30">
    <button type="button" data-cmd="undo" title="Undo" class="p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
    </button>
    <button type="button" data-cmd="redo" title="Redo" class="p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6"/></svg>
    </button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="h1" class="px-2 py-1 rounded text-xs font-bold text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">H1</button>
    <button type="button" data-cmd="h2" class="px-2 py-1 rounded text-xs font-bold text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">H2</button>
    <button type="button" data-cmd="h3" class="px-2 py-1 rounded text-xs font-bold text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">H3</button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="bold"      class="p-1.5 rounded font-bold text-sm w-7 h-7 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">B</button>
    <button type="button" data-cmd="italic"    class="p-1.5 rounded italic text-sm w-7 h-7 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">I</button>
    <button type="button" data-cmd="underline" class="p-1.5 rounded underline text-sm w-7 h-7 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">U</button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="bulletList" title="Bullet List" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <circle cx="4" cy="6" r="1.5" fill="currentColor"/>
            <circle cx="4" cy="12" r="1.5" fill="currentColor"/>
            <circle cx="4" cy="18" r="1.5" fill="currentColor"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13"/>
        </svg>
    </button>
    <button type="button" data-cmd="orderedList" title="Ordered List" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 6h13M8 12h13M8 18h13"/>
            <text x="1" y="7.5" font-size="5.5" fill="currentColor" stroke="none" font-family="sans-serif" font-weight="600">1</text>
            <text x="1" y="13.5" font-size="5.5" fill="currentColor" stroke="none" font-family="sans-serif" font-weight="600">2</text>
            <text x="1" y="19.5" font-size="5.5" fill="currentColor" stroke="none" font-family="sans-serif" font-weight="600">3</text>
        </svg>
    </button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="alignLeft" title="Align Left" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M3 10h12M3 14h18M3 18h12"/></svg>
    </button>
    <button type="button" data-cmd="alignCenter" title="Align Center" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M6 10h12M3 14h18M6 18h12"/></svg>
    </button>
    <button type="button" data-cmd="alignRight" title="Align Right" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M9 10h12M3 14h18M9 18h12"/></svg>
    </button>
    <button type="button" data-cmd="alignJustify" title="Justify" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M3 10h18M3 14h18M3 18h18"/></svg>
    </button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="blockquote" title="Blockquote" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M3 21v-4a4 4 0 014-4h1V9a5 5 0 015-5v2a3 3 0 00-3 3v4h3v8H3zm10 0v-4a4 4 0 014-4h1V9a5 5 0 015-5v2a3 3 0 00-3 3v4h3v8h-10z"/></svg>
    </button>
    <button type="button" data-cmd="hr" title="Horizontal Rule" class="p-1.5 rounded text-xs font-mono text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">—</button>

    <div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1"></div>

    <button type="button" data-cmd="image" title="Insert Image" class="p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
    </button>
</div>
