.ui-formatbar { display:inline-flex; padding:3px; border:1px solid var(--color-border,#d1d5db); border-radius:var(--radius-control,6px); align-items:center; gap:2px; background:var(--color-surface,#fff); }
.ui-formatbar-button { position:relative; display:inline-flex; width:30px; height:30px; padding:0; border:0; border-radius:var(--radius-control,5px); align-items:center; justify-content:center; background:transparent; color:var(--color-text-muted,#64748b); cursor:pointer; }
.ui-formatbar-button:hover,.ui-formatbar-button:focus-visible,.ui-formatbar-button.is-checked { background:var(--color-primary-soft,#eff6ff); color:var(--color-primary,#2563eb); outline:none; }
.ui-formatbar-color::after { position:absolute; right:5px; bottom:3px; left:5px; height:3px; border-radius:2px; background:var(--ui-format-color); box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text,#111827) 20%,transparent); content:""; }
.ui-formatbar-palette { position:absolute; z-index:10050; display:grid; width:132px; padding:6px; grid-template-columns:repeat(4,24px); gap:6px; border:1px solid var(--color-border,#d1d5db); border-radius:var(--radius-control,6px); background:var(--color-surface,#fff); box-shadow:0 8px 24px rgba(15,23,42,.18); }
.ui-formatbar-swatch { width:24px; height:24px; padding:0; border:1px solid color-mix(in srgb,var(--color-text,#111827) 24%,transparent); border-radius:4px; background:var(--ui-swatch-color); cursor:pointer; }
.ui-formatbar-swatch:hover,.ui-formatbar-swatch:focus-visible,.ui-formatbar-swatch[aria-selected=true] { outline:2px solid var(--color-primary,#2563eb); outline-offset:1px; }

.ui-formatbar-preview { min-width:96px; padding:5px 9px; border:1px solid var(--color-border,#d1d5db); border-radius:4px; line-height:1.25; white-space:nowrap; }