/* Спільний вигляд панелі "Обрати символ" (category-tabs версія з
   gramota-editor.html) — gramota-editor.html і portrait.html підключають
   цей файл, тож зміна тут одразу оновлює обидві сторінки. Очікує, що
   сторінка вже має свій власний .sym-option/.sym-option-lbl/.sym-presets. */

.sym-cat-tabs { padding:14px 16px 0; display:flex; flex-wrap:wrap; gap:8px; }
.sym-cat-tab { font-family:'Fixel Display',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:9px 16px; border:1.5px solid var(--border); border-radius:0; background:#fff; color:#0A0A0A; cursor:pointer; transition:all 150ms; }
.sym-cat-tab:hover { border-color:#FF6B3A; }
.sym-cat-tab.active { border-color:#FF6B3A; background:#FFF1EC; color:#FF6B3A; }

.composite-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Fixel Display', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #FF6B3A; background: #FFEDE5;
  padding: 3px 7px; border-radius: 0;
  margin-top: 6px;
}