/* Строка сервисов платформы — одна на все сервисы.

   Рисуется в оболочке (шаблон) и в каждом сервисе (скрипт bar.js), чтобы
   переход между сервисами выглядел как переключение вкладок в одном окне.
   Вид — как строка отделов «Завода»: те же размеры, шрифт, вкладка-пилюля
   с коралловым подчёркиванием. Все цвета — свои переменные с префиксом
   --fzb-, чтобы строка одинаково выглядела на любой странице. */

.fzb {
  --fzb-card: #FFFFFF; --fzb-ink: #221E1F; --fzb-muted: #6E6760; --fzb-line: #E6E1D8;
  --fzb-soft: #FDF3DF; --fzb-coral: #E85B41; --fzb-chip: #EFEBE3; --fzb-err: #C13B24;
  --fzb-shadow: 0 6px 20px rgba(34, 30, 31, .10);
  position: relative; z-index: 45;
  display: flex; align-items: center; gap: 14px;
  height: 53px; padding: 0 16px;
  background: var(--fzb-card); color: var(--fzb-ink);
  border-bottom: 1px solid var(--fzb-line);
  font: 13px/1.3 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}
:root[data-theme="dark"] .fzb {
  --fzb-card: #221E19; --fzb-ink: #F6F1E7; --fzb-muted: #B3AA9C; --fzb-line: #3A342B;
  --fzb-soft: #352918; --fzb-chip: #332C23; --fzb-err: #E8836B;
  --fzb-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
.fzb *, .fzb *::before, .fzb *::after { box-sizing: border-box; }
.fzb svg { width: 16px; height: 16px; flex: none; }

.fzb-home { display: flex; align-items: center; gap: 9px; flex: none; color: var(--fzb-ink); text-decoration: none; }
.fzb-home img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; }
.fzb-brand { font-weight: 700; white-space: nowrap; }
.fzb-brand i { font-style: normal; color: var(--fzb-coral); }

.fzb-tabs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fzb-tabs::-webkit-scrollbar { display: none; }
.fzb-tab {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px;
  color: var(--fzb-muted); text-decoration: none; white-space: nowrap;
}
.fzb-tab:hover { background: var(--fzb-soft); color: var(--fzb-ink); }
.fzb-tab.is-on { background: var(--fzb-soft); color: var(--fzb-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--fzb-coral); }
.fzb-tab svg { opacity: .85; }
.fzb-tab:focus-visible, .fzb-btn:focus-visible, .fzb-home:focus-visible { outline: 3px solid var(--fzb-coral); outline-offset: 2px; }

.fzb-right { display: flex; align-items: center; gap: 8px; flex: none; }
.fzb-who { text-align: right; min-width: 0; max-width: 200px; }
.fzb-who b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fzb-who span { display: block; font-size: 10.5px; color: var(--fzb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fzb-ava {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--fzb-coral); color: #fff;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.fzb-btn {
  width: 28px; height: 28px; flex: none; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--fzb-line); border-radius: 8px;
  background: transparent; color: var(--fzb-muted); cursor: pointer; text-decoration: none;
}
.fzb-btn:hover { color: var(--fzb-ink); border-color: var(--fzb-muted); }
.fzb-btn.is-on { color: var(--fzb-ink); background: var(--fzb-soft); border-color: var(--fzb-soft); }
.fzb-btn.is-exit:hover { color: var(--fzb-err); border-color: var(--fzb-err); }

/* Место под строку, пока скрипт её не нарисовал, — страница не прыгает. */
.fzb-slot { min-height: 53px; background: var(--fzb-card, #fff); border-bottom: 1px solid #E6E1D8; }
:root[data-theme="dark"] .fzb-slot { background: #221E19; border-color: #3A342B; }

@media (max-width: 760px) {
  .fzb { gap: 8px; padding: 0 10px; }
  .fzb-brand, .fzb-who { display: none; }
  .fzb-tab { padding: 7px 9px; }
  .fzb-tab span { display: none; }
  .fzb-tab.is-on span { display: inline; }
}