/* Start:/local/templates/site_zabotix/assets/tokens.css?17799592151663*/
/*
 * Design tokens — Zabotix p.zabotix redesign.
 *
 * Источник значений: блоки :root в plan/redesign/*.html (profile.html — основной).
 * Имена сохранены без префикса --color- для совместимости с макетами:
 * можно копировать стили из плана редизайна как есть.
 *
 * Конфликты разрешены в пользу profile.html (например, --radius-lg = 12px).
 */

:root {
  /* Брендовые цвета */
  --header-bg: #0f1a2f;
  --accent: #d45b40;
  --accent-light: #e37a62;
  --accent-soft: rgba(212, 91, 64, 0.1);
  --additional: #6471b2;
  --additional-light: #7e8ac4;

  /* Поверхности и фон */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #e4e7ed;

  /* Текст */
  --text: #1a2a4a;
  --text-secondary: #6b7a93;
  --text-muted: #9aa6b8;

  /* Статусные цвета */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #e74c3c;

  /* Лейаут — фиксированные размеры */
  --sidebar-w: 260px;
  --topbar-h: 64px;

  /* Радиусы */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* Тени */
  --shadow-sm: 0 2px 8px rgba(26, 42, 74, 0.06);
  --shadow: 0 4px 20px rgba(26, 42, 74, 0.1);
  --shadow-lg: 0 12px 40px rgba(26, 42, 74, 0.2);
  --shadow-accent: 0 6px 16px rgba(212, 91, 64, 0.3);

  /* Анимации */
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  /* Шрифты */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/base/reset.css?17799592151354*/
/*
 * Modern CSS reset для p.zabotix redesign.
 *
 * Минимальный современный сброс. Не пытается сравнять все теги к нулю
 * (это работа typography.css), только убирает агрессивные браузерные
 * умолчания, которые мешают предсказуемому layout.
 */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Удалить пунктирную рамку фокуса в Firefox для кнопок */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Sane focus styles — accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/base/fonts.css?1779959215938*/
/*
 * Локальные шрифты для p.zabotix redesign — variable fonts.
 *
 * Один TTF-файл на семейство содержит все веса.
 * Браузер выбирает нужный font-weight автоматически.
 *
 * Источник: github.com/google/fonts (SIL Open Font License).
 * Файлы лежат в ../fonts/ относительно этого CSS.
 *
 * Используются через CSS-переменные --font-display и --font-body
 * (см. tokens.css).
 */

@font-face {
  font-family: 'Montserrat';
  src: url('/local/templates/site_zabotix/assets/base/../fonts/Montserrat[wght].ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/local/templates/site_zabotix/assets/base/../fonts/OpenSans[wdth,wght].ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/base/typography.css?17799592156053*/
/*
 * Тег-стили для контент-менеджера — фундаментальный слой типографики.
 *
 * Принцип: только селекторы на теги без классов. Контент-менеджер
 * пишет «голый» HTML через визуальный редактор — оно автоматически
 * выглядит фирменно, без необходимости знать классы дизайн-системы.
 *
 * Источник идей: legacy styles2.0/tags.css (но переписано под новые
 * токены, без сотен [data-variant]-вариантов — те жили там как
 * компоненты, теперь это работа assets/components/* и assets/pages/*).
 *
 * Стили применяются ТОЛЬКО к тегам без классов (`:not([class])`),
 * чтобы не ломать наш design-system на pz-* классах.
 */

/* ============================================
   ЗАГОЛОВКИ
   ============================================ */

h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

h1:not([class]) { font-size: 32px; }
h2:not([class]) { font-size: 24px; margin-bottom: 14px; }
h3:not([class]) { font-size: 20px; margin-bottom: 12px; }
h4:not([class]) { font-size: 18px; margin-bottom: 10px; }
h5:not([class]) { font-size: 16px; margin-bottom: 8px; font-weight: 600; }
h6:not([class]) { font-size: 14px; margin-bottom: 8px; font-weight: 600; }

/* ============================================
   ТЕКСТ И АКЦЕНТЫ
   ============================================ */

p:not([class]) {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
}

p:not([class]):last-child {
  margin-bottom: 0;
}

strong:not([class]),
b:not([class]) {
  font-weight: 600;
  color: var(--text);
}

em:not([class]),
i:not([class]) {
  font-style: italic;
}

small:not([class]) {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================
   ССЫЛКИ
   ============================================ */

a:not([class]) {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:not([class]):hover {
  color: var(--accent-light);
  text-decoration: underline;
}

a:not([class]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================
   СПИСКИ
   ============================================ */

ul:not([class]),
ol:not([class]) {
  margin: 0 0 12px 24px;
  padding: 0;
}

li:not([class]) {
  margin-bottom: 4px;
  line-height: 1.6;
}

li:not([class]):last-child {
  margin-bottom: 0;
}

dl:not([class]) {
  margin-bottom: 12px;
}

dt:not([class]) {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

dd:not([class]) {
  margin: 0 0 8px 24px;
  color: var(--text-secondary);
}

/* ============================================
   ЦИТАТА И КОД
   ============================================ */

blockquote:not([class]) {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  font-style: italic;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

code:not([class]) {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

pre:not([class]) {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: var(--bg);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--text);
}

pre:not([class]) code:not([class]) {
  background: none;
  padding: 0;
}

/* ============================================
   РАЗДЕЛИТЕЛИ
   ============================================ */

hr:not([class]) {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* ============================================
   МЕДИА
   ============================================ */

img:not([class]) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

figure:not([class]) {
  margin: 16px 0;
}

figcaption:not([class]) {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}

/* ============================================
   ТАБЛИЦЫ — базовые стили без классов
   ============================================ */

table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}

th:not([class]),
td:not([class]) {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

th:not([class]) {
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
}

/* ============================================
   ФОРМЫ — базовые стили без классов
   ============================================ */

label:not([class]) {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

input:not([class]),
textarea:not([class]),
select:not([class]) {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

input:not([class]):focus,
textarea:not([class]):focus,
select:not([class]):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:not([class])::placeholder,
textarea:not([class])::placeholder {
  color: var(--text-muted);
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/button.css?17799592151441*/
/* Button component — Zabotix design system */

.pz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}

.pz-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pz-button--primary {
  background: var(--accent);
  color: #fff;
}

.pz-button--primary:hover:not(:disabled) {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pz-button--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.pz-button--secondary:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--text-muted);
}

.pz-button--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.pz-button--ghost:hover:not(:disabled) {
  color: var(--accent);
  background: var(--bg);
}

.pz-button--danger {
  background: var(--danger);
  color: #fff;
}

.pz-button--small {
  padding: 6px 12px;
  font-size: 12px;
}

.pz-button--large {
  padding: 14px 28px;
  font-size: 16px;
}

.pz-button--icon-only {
  padding: 8px;
  width: 36px;
  height: 36px;
}

.pz-button__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/input.css?17799592157311*/
/* Input component — Zabotix design system */

.pz-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.pz-input::placeholder {
  color: var(--text-muted);
}

.pz-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.15);
}

.pz-input:disabled,
.pz-input[readonly] {
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Readonly — поле принимает фокус (tab по форме), но визуально остаётся
   неактивным: не подсвечиваем accent-ring, чтобы не вводить пользователя
   в заблуждение, что поле редактируемое. */
.pz-input[readonly]:focus {
  border-color: var(--border);
  box-shadow: none;
}

.pz-input--error {
  border-color: var(--danger);
}

.pz-input--error:focus {
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.pz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.pz-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pz-field__error {
  font-size: 12px;
  color: var(--danger);
}
.pz-field__error[hidden] { display: none; }
.pz-field__error a {
  color: var(--danger);
  text-decoration: underline;
  font-weight: 600;
}
.pz-field__error a:hover { text-decoration: none; }
/* В floating-field блок ошибки рендерится после .co-hint —
   делаем чуть больше зазор от input, чтобы не сливалось с hint'ом. */
.pz-field--floating .pz-field__error {
  margin-top: 4px;
}

.pz-field__hint {
  font-size: 12px;
  color: var(--text-muted);
}

.pz-checkbox,
.pz-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pz-checkbox input,
.pz-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.pz-checkbox__label,
.pz-radio__label {
  font-size: 14px;
  color: var(--text);
}

.pz-textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: border-color var(--transition);
}

.pz-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.15);
}

.pz-select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  padding-right: 36px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%236b7a93' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")
    no-repeat right 12px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
}

.pz-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.15);
}

/* ============================================================================
 * .pz-field--floating — модификатор с floating-label паттерном
 *
 * Разметка:
 *   <div class="pz-field pz-field--floating">
 *     <input type="text" id="x" class="pz-field__input" placeholder=" " required>
 *     <label for="x" class="pz-field__label">Название поля</label>
 *   </div>
 *
 * Важно:
 *   - Атрибут placeholder=" " (один пробел) обязателен — иначе :placeholder-shown
 *     не сработает и определение пустого состояния развалится.
 *   - <input> ДО <label> — сиблинговый селектор + опирается на этот порядок.
 *   - Подсказку (hint) выносить в отдельный <span class="pz-field__hint"> под
 *     инпутом, не в placeholder.
 * ============================================================================ */

.pz-field--floating {
  position: relative;
  display: block;
  /* margin-bottom наследуется от .pz-field (16px) — здесь не дублируем. */
}

.pz-field--floating .pz-field__input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 24px 14px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
  box-sizing: border-box;
}

.pz-field--floating .pz-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.15);
}

/* Состояние ошибки — красная рамка вокруг floating-input + красный focus-ring.
   Применяется через JS при server-side validation failures (см. script.js). */
.pz-field--floating .pz-field__input--error,
.pz-field--floating .pz-field__input[aria-invalid="true"] {
  border-color: var(--danger);
}
.pz-field--floating .pz-field__input--error:focus,
.pz-field--floating .pz-field__input[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.pz-field--floating .pz-field__input:focus-visible {
  outline: none;
}

.pz-field--floating .pz-field__input::placeholder {
  color: transparent;
}

.pz-field--floating .pz-field__input[readonly],
.pz-field--floating .pz-field__input:disabled {
  background: var(--bg);
  cursor: not-allowed;
}

/* Подавляем focus-ring для readonly — фокус возможен (tab по форме), но визуально
   не выделяем как редактируемое поле. */
.pz-field--floating .pz-field__input[readonly]:focus {
  border-color: var(--border);
  box-shadow: none;
}

.pz-field--floating .pz-field__label {
  position: absolute;
  left: 14px;
  top: 22px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  background: transparent;
  transition:
    top 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease;
}

.pz-field--floating .pz-field__input:focus + .pz-field__label,
.pz-field--floating .pz-field__input:not(:placeholder-shown) + .pz-field__label,
.pz-field--floating .pz-field__input:-webkit-autofill + .pz-field__label {
  top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Required-маркер `*` не должен сжиматься вместе с меткой при float-up —
   фиксируем размер 14px независимо от состояния родителя. */
.pz-field--floating .pz-field__label .co-req {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/modal.css?17799592152085*/
/* Modal component */

.pz-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 26, 47, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.pz-modal--open {
  opacity: 1;
  visibility: visible;
}

.pz-modal__dialog {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--transition);
}

.pz-modal--open .pz-modal__dialog {
  transform: translateY(0) scale(1);
}

.pz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.pz-modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.pz-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: all var(--transition);
}

.pz-modal__close:hover {
  color: var(--text);
  background: var(--bg);
}

.pz-modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.pz-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.pz-modal--large .pz-modal__dialog {
  max-width: 720px;
}

.pz-modal--small .pz-modal__dialog {
  max-width: 360px;
}

.pz-modal__body--centered {
  text-align: center;
}

.pz-modal__success-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
}

.pz-modal__success-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/card.css?1779959215927*/
/* Card component */

.pz-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.pz-card--hoverable:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.pz-card--elevated {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.pz-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.pz-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.pz-card__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pz-card__body {
  padding: 20px;
}

.pz-card__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/badge.css?17799592151153*/
/* Badge component — статусные метки */

.pz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.pz-badge--success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

.pz-badge--danger {
  background: rgba(231, 76, 60, 0.12);
  color: var(--danger);
}

.pz-badge--warning {
  background: rgba(255, 184, 0, 0.15);
  /* Тёмный янтарный для контраста на 15%-tinted жёлтом фоне; */
  /* var(--warning)=#f59e0b слишком светлый и плохо читается. */
  color: #b8860b;
}

.pz-badge--info {
  background: rgba(100, 113, 178, 0.15);
  /* Тёмный синий — более тёмный оттенок --additional=#6471b2 */
  /* для читаемости на 15%-tinted фоне. */
  color: #4a5b9c;
}

.pz-badge--neutral {
  background: var(--bg);
  color: var(--text-secondary);
}

.pz-badge--accent {
  background: rgba(212, 91, 64, 0.12);
  color: var(--accent);
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/empty-state.css?17799592154471*/
/*
 * components/empty-state.css — переиспользуемый компонент пустого/ошибочного
 * состояния для контейнеров (таблицы, корзина, списки, dashboard'ы).
 *
 * Базовый класс: .empty-state — flex-центрирование, иконка с opacity 0.5,
 * текст-описание, опциональная кнопка действия. Используется через
 * window.EmptyState.renderEmpty() / renderError() (assets/utilities/empty-state.js)
 * либо инлайном в шаблонах (server-side render).
 *
 * Modifiers:
 *   .empty-state--inline    — горизонтальный layout (иконка + текст в строку),
 *                             для компактных мест типа bottom-bar корзины.
 *   .empty-state--error     — оранжевая акцентная иконка (semantics ошибки).
 *   .empty-state--compact   — уменьшенные отступы (для inline-вкладок таблицы).
 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
  min-height: 160px;
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.empty-state__text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0;
}

.empty-state__action {
  margin-top: 4px;
}

.empty-state__action button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.empty-state__action button:hover {
  background: var(--accent);
  color: #fff;
}

/* Inline-вариант: иконка + текст в одной строке (для горизонтальных контейнеров
   типа bottom-bar корзины — паритет с .cart-empty из макета). */
.empty-state--inline {
  flex-direction: row;
  gap: 8px;
  padding: 8px 12px;
  min-height: 0;
  white-space: nowrap;
  text-align: left;
}

.empty-state--inline .empty-state__icon {
  width: 20px;
  height: 20px;
}

.empty-state--inline .empty-state__text {
  font-size: 12px;
}

/* Error-вариант: иконка в акцентном цвете. */
.empty-state--error .empty-state__icon {
  color: var(--accent);
  opacity: 0.7;
}

.empty-state--compact {
  padding: 24px 16px;
  min-height: 120px;
}

.empty-state--compact .empty-state__icon {
  width: 36px;
  height: 36px;
}

/* Loading-вариант: spinner вместо статичной иконки.
   Используется через EmptyState.renderLoading() или server-side инлайном. */
.empty-state--loading .empty-state__icon {
  opacity: 1;
  color: var(--accent);
}

.empty-state__spinner {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(212, 91, 64, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: emptyStateSpin 0.8s linear infinite;
}

@keyframes emptyStateSpin {
  to { transform: rotate(360deg); }
}

/* Page-level loader — fullscreen overlay для initial page load.
   Использование: <div class="page-loader" data-page-loader></div>
   Авто-скрывается на window.load через empty-state.js (с min-show
   anti-flicker задержкой). */
.page-loader {
  position: fixed;
  top: var(--topbar-h, 0);
  right: 0;
  bottom: 0;
  left: var(--sidebar-w, 0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(212, 91, 64, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: emptyStateSpin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .empty-state__spinner,
  .page-loader__spinner {
    animation: none;
    border-top-color: var(--accent);
    opacity: 0.6;
  }
}

/* End */


/* Start:/local/templates/site_zabotix/assets/utilities/pf-custom-select.css?17799592157586*/
/*
 * pf-custom-select.css — стили кастомного dropdown-компонента PfCustomSelect.
 *
 * Переехал из styles2.0/ в assets/utilities/ как переиспользуемая утилита,
 * подключаемая в Foundation-bundle через $pzCssFiles в header.php.
 *
 * JS — js/pf-custom-select.js (грузится глобально через includeAllScripts).
 *
 * Используется на: /store-page/ (фильтр приложений), последующие Page-ветки
 * (профиль, клиенты) могут использовать без дополнительной регистрации.
 */

/*
 * PfCustomSelect — стили кастомного dropdown для замены нативных <select>.
 * BEM-нейминг: .pf-custom-select
 * Использует CSS-переменные из tokens.css
 */

/* ========================================
   Скрытие оригинального <select>
   ======================================== */

.pf-custom-select__hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   Wrapper
   ======================================== */

.pf-custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--font-family-base, "Roboto", sans-serif);
    font-size: var(--inputy-font-size, 0.8125rem);
}

/* ========================================
   Trigger (кнопка)
   ======================================== */

.pf-custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--inputy-height, 2.4375rem);
    padding: 0 var(--inputy-padding-x, 0.875rem);
    box-sizing: border-box;
    border: 1px solid var(--inputy-border-color, #e2e5ec);
    border-radius: var(--inputy-border-radius, 0.25rem);
    background-color: #ffffff;
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--inputy-font-weight, 400);
    line-height: 1.25rem;
    color: var(--color-text-primary-dark, #3c4368);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast, 0.15s ease);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.pf-custom-select__trigger:hover:not(:disabled) {
    border-color: #c8d0d8;
}

.pf-custom-select__trigger:focus:not(:disabled) {
    border-color: var(--color-orange, #d35a3f);
    box-shadow: 0 0 0 1px var(--color-orange, #d35a3f);
}

/* Открытый dropdown */
.pf-custom-select--open .pf-custom-select__trigger {
    border-color: var(--color-orange, #d35a3f);
    box-shadow: 0 0 0 1px var(--color-orange, #d35a3f);
}

/* Текст в trigger */
.pf-custom-select__trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Стрелка */
.pf-custom-select__arrow {
    flex-shrink: 0;
    width: 11px;
    height: 7px;
    margin-left: var(--spacing-sm, 0.5rem);
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.5 5L10 1' stroke='%239E9E9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--transition-fast, 0.15s ease);
}

.pf-custom-select--open .pf-custom-select__arrow {
    transform: rotate(180deg);
}

/* ========================================
   Disabled
   ======================================== */

.pf-custom-select--disabled .pf-custom-select__trigger {
    background-color: #f5f5f5;
    color: var(--color-gray, #9e9e9e);
    cursor: not-allowed;
    border-color: var(--inputy-border-color, #e2e5ec);
}

.pf-custom-select--disabled .pf-custom-select__trigger:hover {
    border-color: var(--inputy-border-color, #e2e5ec);
}

.pf-custom-select--disabled .pf-custom-select__arrow {
    opacity: 0.4;
}

/* ========================================
   Dropdown (выпадающий список)
   ======================================== */

.pf-custom-select__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: #ffffff;
    border: 1px solid var(--inputy-border-color, #e2e5ec);
    border-radius: var(--border-radius-sm, 0.25rem);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.1));
    max-height: 280px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.pf-custom-select--open .pf-custom-select__dropdown {
    display: flex;
}

/* ========================================
   Поле поиска
   ======================================== */

.pf-custom-select__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm, 0.5rem) var(--inputy-padding-x, 0.875rem);
    border: none;
    border-bottom: 1px solid var(--inputy-border-color, #e2e5ec);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--inputy-font-weight, 400);
    line-height: 1.25rem;
    color: var(--color-text-primary-dark, #3c4368);
    outline: none;
    background-color: #fafafa;
    flex-shrink: 0;
}

.pf-custom-select__search::placeholder {
    color: var(--color-gray, #9e9e9e);
}

/* ========================================
   Список опций
   ======================================== */

.pf-custom-select__options {
    overflow-y: auto;
    max-height: 240px;
    flex: 1;
}

/* Отдельная опция */
.pf-custom-select__option {
    padding: var(--spacing-sm, 0.5rem) var(--inputy-padding-x, 0.875rem);
    cursor: pointer;
    font-size: inherit;
    line-height: 1.25rem;
    color: var(--color-text-primary-dark, #3c4368);
    transition: background-color var(--transition-fast, 0.15s ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-custom-select__option:hover {
    background-color: var(--color-gray-light-2, #eeeeee);
}

/* Выбранная опция */
.pf-custom-select__option--selected {
    background-color: rgba(212, 91, 64, 0.08);
    color: var(--color-orange, #d35a3f);
    font-weight: var(--font-weight-medium, 500);
}

.pf-custom-select__option--selected:hover {
    background-color: rgba(212, 91, 64, 0.14);
}

/* Disabled опция */
.pf-custom-select__option--disabled {
    color: var(--color-gray, #9e9e9e);
    cursor: not-allowed;
    opacity: 0.6;
}

.pf-custom-select__option--disabled:hover {
    background-color: transparent;
}

/* Пустой результат поиска */
.pf-custom-select__empty {
    padding: var(--spacing-md, 1rem) var(--inputy-padding-x, 0.875rem);
    color: var(--color-gray, #9e9e9e);
    text-align: center;
    font-size: var(--font-size-xs, 0.8125rem);
}

/* ========================================
   Адаптивность
   ======================================== */

@media (max-width: 768px) {
    .pf-custom-select__dropdown {
        max-height: 220px;
    }

    .pf-custom-select__options {
        max-height: 180px;
    }
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/table.css?17799592151288*/
/* Table component */

.pz-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.pz-table__head {
  background: var(--bg);
}

.pz-table__th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.pz-table__th--sortable {
  cursor: pointer;
  user-select: none;
}

.pz-table__th--sortable:hover {
  color: var(--accent);
}

.pz-table__row {
  transition: background var(--transition);
}

.pz-table__row:hover {
  background: var(--bg);
}

.pz-table__row--clickable {
  cursor: pointer;
}

.pz-table__td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.pz-table__row:last-child .pz-table__td {
  border-bottom: none;
}

.pz-table--compact .pz-table__th,
.pz-table--compact .pz-table__td {
  padding: 8px 12px;
}

.pz-table__td--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pz-table__td--actions {
  text-align: right;
  white-space: nowrap;
}

.pz-table__empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/tabs.css?17799592151347*/
/*
 * components/tabs.css — горизонтальная навигация табами.
 *
 * Используется на разделах /personal/partners/ и /personal/affiliate/
 * (рендерится через page_blocks/partners_tabs.php — фильтрует видимые
 * табы через PartnersAccess::getVisibleItems() и $tabSection).
 *
 * Самодостаточность: все значения через var(--token, fallback).
 */

.pz-tabs-container {
  border-bottom: 1px solid var(--border, #e4e7ed);
  padding: 0 8px;
  margin-bottom: 16px;
}

.pz-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.pz-tab {
  margin: 0;
}

.pz-tab__link {
  display: inline-block;
  padding: 12px 0;
  font-family: var(--font-body, "Open Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #6b7a93);
  text-decoration: none;
  position: relative;
  border-bottom: 3px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.pz-tab__link:hover {
  color: var(--accent, #d45b40);
}

.pz-tab.is-active .pz-tab__link {
  color: var(--text, #1a2a4a);
  border-bottom-color: var(--accent, #d45b40);
}

.pz-tabs__empty {
  padding: 12px 0;
  color: var(--text-muted, #9aa6b8);
  font-size: 13px;
}

/* End */


/* Start:/local/templates/site_zabotix/assets/components/pagination.css?17799592151942*/
/* Pagination component — Zabotix design system
 *
 * Markup:
 *   <nav class="pz-pagination" aria-label="pagination">
 *     <ul class="pz-pagination__list">
 *       <li class="pz-pagination__item pz-pagination__item--active"><a href="?p=1" class="pz-pagination__link">1</a></li>
 *       <li class="pz-pagination__item"><a href="?p=2" class="pz-pagination__link">2</a></li>
 *       <li class="pz-pagination__item pz-pagination__item--ellipsis"><span>…</span></li>
 *       <li class="pz-pagination__item"><a href="?p=8" class="pz-pagination__link">8</a></li>
 *       <li class="pz-pagination__item pz-pagination__item--next"><a href="?p=3" class="pz-pagination__link">→</a></li>
 *     </ul>
 *   </nav>
 */

.pz-pagination {
  display: flex;
  justify-content: center;
  padding: 24px 0 0;
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.pz-pagination__list {
  list-style: none;
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.pz-pagination__item {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition:
    background var(--transition),
    color var(--transition);
}

.pz-pagination__item:hover {
  background: rgba(26, 42, 74, 0.04);
  color: var(--accent);
}

.pz-pagination__item--active {
  border: 1px solid var(--header-bg);
}

.pz-pagination__item--active .pz-pagination__link {
  font-weight: 700;
}

.pz-pagination__item--ellipsis {
  color: var(--text-muted);
  cursor: default;
  user-select: none;
}

.pz-pagination__item--ellipsis:hover {
  background: transparent;
  color: var(--text-muted);
}

.pz-pagination__link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

/* End */


/* Start:/local/templates/site_zabotix/assets/layouts/page-shell.css?17799592152717*/
/* Page shell — общий layout страницы (sidebar + topbar + content area) */

/* CSS-переменная для высоты Bitrix admin-панели (#bx-panel).
   Базовое значение 0 — для не-админов панели нет.
   Реальное значение ставит JS-observer через
   document.documentElement.style.setProperty('--bx-panel-h', N + 'px')
   (см. local/templates/site_zabotix/js/bx-panel-offset.js). При folded — 39px,
   при expanded — больше. Override на pz-page--with-bxpanel НЕ ставим — он
   шадовил бы значение из JS на :root. */
:root {
  --bx-panel-h: 0px;
}

/* Bitrix-панель по умолчанию position:relative — уезжает при скролле.
   Делаем её закреплённой сверху, чтобы всегда оставалась видна. */
.pz-page--with-bxpanel ~ #bx-panel,
body > #bx-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 9000;
}

/* Статичный фоновый слой — синий tint под полупрозрачными sidebar/topbar.
   В макете через conic-gradient blobs, на проде упрощено: статичные radial blobs
   на сплошном тёмно-синем (--header-bg) для глубины без анимации. */
.pz-bg-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 80vmax 60vmax at 15% 25%,
      rgba(212, 91, 64, 0.18),
      transparent 60%
    ),
    radial-gradient(
      ellipse 70vmax 70vmax at 85% 75%,
      rgba(100, 113, 178, 0.18),
      transparent 60%
    ),
    var(--header-bg);
}

.pz-page {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Sidebar/header начинаются под admin-панелью (var() = 0 если её нет). */
.pz-sidebar,
.pz-header {
  top: var(--bx-panel-h) !important;
}

.pz-page__main {
  margin-left: var(--sidebar-w);
  padding-top: calc(var(--topbar-h) + var(--bx-panel-h));
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
  min-width: 0;
}

.pz-page__content {
  flex: 1;
  padding: 24px;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

.pz-page__container {
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .pz-page__main {
    margin-left: 0;
  }
}

.pz-page__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

@media (max-width: 768px) {
  .pz-page__backdrop--open {
    display: block;
  }
}

/* End */


/* Start:/local/templates/site_zabotix/assets/layouts/sidebar.css?17799592154075*/
/* Sidebar layout — fixed, with backdrop blur */

.pz-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: #0f1a2f !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1001;
  transition: transform var(--transition);
  box-shadow: 2px 0 30px rgba(8, 14, 26, 0.25);
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.pz-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: var(--topbar-h);
}

.pz-sidebar__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.03em;
}

.pz-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 8px;
}

.pz-sidebar__nav::-webkit-scrollbar {
  width: 4px;
}

.pz-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.pz-sidebar__section {
  padding: 14px 24px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.25);
}

.pz-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  margin: 2px 12px;
  border-radius: var(--radius-sm);
}

.pz-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(2px);
}

.pz-sidebar__item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.pz-sidebar__item:hover .pz-sidebar__item-icon {
  opacity: 1;
  transform: scale(1.05);
}

/* F4 Task: некликабельный заголовок раздела — клик только раскрывает подменю.
   Убираем translateX-сдвиг на hover; курсор остаётся pointer, потому что
   клик всё-таки реагирует (toggle подменю через initSidebarCollapse). */
.pz-sidebar__item--header:hover {
  transform: none;
}

.pz-sidebar__item--active {
  background: rgba(212, 91, 64, 0.12);
  color: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}

.pz-sidebar__item--active:hover {
  transform: none;
}

.pz-sidebar__item--active .pz-sidebar__item-icon {
  opacity: 1;
}

.pz-sidebar__item-arrow {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.3);
  transition:
    transform var(--transition),
    color var(--transition);
}

.pz-sidebar__item-arrow--open {
  transform: rotate(90deg);
  color: var(--accent);
}

.pz-sidebar__children {
  overflow: hidden;
  max-height: 0;
  /* Не используем var(--transition) — там shorthand `0.35s cubic-bezier(...)` */
  /* и `0.35s` попадёт в slot delay вместо timing-function (350ms задержка). */
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  margin: 0 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
}

.pz-sidebar__children--open {
  max-height: 200px;
}

.pz-sidebar__child {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px 9px 56px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: all var(--transition);
  border-left: 2px solid transparent;
}

.pz-sidebar__child:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding-left: 60px;
}

.pz-sidebar__child-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .pz-sidebar {
    transform: translateX(-100%);
  }

  .pz-sidebar--open {
    transform: translateX(0);
  }
}

/* End */


/* Start:/local/templates/site_zabotix/assets/layouts/header.css?17799592153917*/
/* Top header (topbar) — fixed, with backdrop blur */

.pz-header {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: #0f1a2f !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  transition: left var(--transition);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pz-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pz-header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
}

.pz-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.pz-header__breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.pz-header__breadcrumb a:hover {
  color: var(--accent-light);
}

.pz-header__breadcrumb > span:not(.pz-header__breadcrumb-sep) {
  color: #fff;
  font-weight: 600;
}

.pz-header__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.pz-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pz-header__partner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  height: 32px;
}

.pz-header__partner-id {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.pz-header__partner-id strong {
  color: #fff;
  font-weight: 600;
}

.pz-header__partner-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.pz-header__partner-menu:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pz-header__partner-menu-chevron {
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform var(--transition);
}

.pz-header__partner-menu-chevron--open {
  transform: rotate(180deg);
}

/* Dropdown menu — выпадает из топбара */
.pz-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);
  z-index: 2000;
  overflow: hidden;
}

.pz-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pz-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.pz-dropdown__item:hover {
  background: var(--bg);
  color: var(--text);
}

/* F4 Task: некликабельный заголовок раздела — без hover, без cursor:pointer. */
.pz-dropdown__item--header,
.pz-dropdown__item--header:hover {
  background: transparent;
  cursor: default;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.pz-dropdown__item svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.pz-dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.pz-dropdown__sub {
  padding-left: 36px;
}

@media (max-width: 768px) {
  .pz-header {
    left: 0;
  }

  .pz-header__burger {
    display: block;
  }
}

/* End */


/* Start:/local/templates/site_zabotix/assets/layouts/auth-shell.css?17799592151301*/
/*
 * Auth-shell layout — минимальный layout для auth-страниц.
 *
 * Используется когда $isAuthMode === true в header.php (Task 20):
 *   - страницы с define('IS_AUTH_LAYOUT', true) (forgot-password, change-password,
 *     confirm-email, registration без cookie, registration-success-modal);
 *   - гостевой доступ к защищённой странице (auth-overlay через NEED_AUTH или
 *     fallback needAuthForUri()).
 *
 * Источник разметки: site_zabotix_auth/header.php:64 (.registration-container).
 * Стили самой формы (input, button, label) — в assets/legacy/auth-form.css
 * (legacy до редизайна auth-формы в Page-фазе).
 *
 * Имя класса .registration-container оставлено без pz- префикса намеренно:
 * шаблоны компонентов system.auth.* (после переноса в Task 18 шаг 3) и
 * legacy/auth-form.css продолжают на него ссылаться — переименование
 * сделаем в Page-фазе вместе с редизайном auth-формы.
 */

.registration-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}

/* End */


/* Start:/local/templates/site_zabotix/assets/legacy/auth-form.css?177995921537934*/
/*
 * Legacy CSS — стили форм bitrix:system.auth.* и общих auth-страниц.
 *
 * Источник: 13 CSS-файлов из site_zabotix_auth/styles/, повторяющие
 * полный набор который подключал site_zabotix_auth/header.php.
 * Старые токены (--font-family-base, --color-secondary и т.п.) определяются
 * в самом начале — без них main/typography/buttons из этого файла не
 * отрендерится.
 *
 * Файл template_styles.css из site_zabotix_auth/ НЕ включён — это просто
 * @import-агрегатор.
 *
 * Подключается БЕЗУСЛОВНО из header.php (Task 20). Bitrix дедуплицирует
 * если template.php компонента тоже addCss этот файл.
 *
 * Сосуществует с нашими новыми pz-*-токенами в tokens.css — переменные
 * не пересекаются по именам (наши без префикса --color-).
 *
 * Удаляется в Page-фазе при редизайне auth-формы под pz-* классы.
 */


/* === site_zabotix_auth/styles/tokens.css === */
:root {
  /* Цветовая палитра */
  --color-primary: #222b4b;
  --color-white: #ededf2;
  --color-secondary: #333333;
  --color-accent: #525c81;
  --color-additional: #6471b2;
  --color-gray: #9e9e9e;
  --color-gray-2: #757485;
  --color-orange: #d45b40;
  --color-error: #ff2e2e;
  --color-orange-dark: #b74d35;
  --color-gray-light: #e2e5ec;
  --color-gray-light-2: #eeeeee;
  --color-light-dark: rgba(0, 0, 0, 0.1); /* Для разделительных линий */
  --color-accent-blue: #5b74ff; /* Для фона badge */
  --color-text-primary-dark: #3c4368; /* Для заголовков, активных табов */
  --color-border-button-outline: rgba(
    34,
    43,
    75,
    0.7
  ); /* Для обводки btn-outline */

  /* Типографика */
  --font-family-base: "Roboto", sans-serif;
  --font-size-2xs: 0.625rem; /* 10px */
  --font-size-xs: 0.8125rem; /* 13px */
  --font-size-base: 1rem; /* 16px */
  --font-size-s: 0.875rem; /* 14px */
  --font-size-m: 1rem; /* 16px */
  --font-size-lg: 1.5rem; /* 24px - Заголовок "Магазин приложений" */
  --font-size-2xl: 2.5rem; /* 40px */
  --font-size-xxl: 3.125rem; /* 50px */
  --line-height-base: 1.5;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Отступы */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-m: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.375rem; /* 22px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 2.5rem; /* 40px */
  --spacing-xxl: 3.125rem; /* 50px */

  /* Брейкпоинты */
  --breakpoint-sm: 36rem; /* 576px */
  --breakpoint-md: 48rem; /* 768px */
  --breakpoint-lg: 62rem; /* 992px */
  --breakpoint-xl: 75rem; /* 1200px */

  /* Тени */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* 0 2px 4px */
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 0 4px 8px */
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 0 8px 16px */

  /* Скругления */
  --border-radius-sm: 0.25rem; /* 4px */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 1rem; /* 16px */
  --border-radius-round: 50px; /* Для круглых элементов, badge */

  /* Анимации */
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;
}


/* === site_zabotix_auth/styles/normalize.css === */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/* === site_zabotix_auth/styles/main.css === */
/* Google Fonts удалены - шрифты подключаются локально через fonts.css в header.php */


/* Базовые стили */
html {
  font-size: 16px; /* Базовый размер для расчета rem */
}

html,
body {
  position: relative;
  height: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-secondary);
}

h1 {
  margin: 0;
}

a {
  color: var(--color-additional);
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.logo {
  background: url(/local/templates/site_zabotix/assets/legacy/../../images/logo.svg) no-repeat center center;
  width: 8.3125rem; /* 133px */
  height: 2.125rem; /* 34px */
  background-size: contain; /* Добавим, чтобы лого не обрезалось */
}

/* Утилиты */
.container {
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.content-area {
  flex-grow: 1; /* Занимает оставшееся пространство */
  display: flex;
  flex-direction: column;
}

/* Адаптивность (пример): скрываем сайдбар на маленьких экранах */
@media (max-width: var(--breakpoint-md)) {
  .content-area {
    padding: var(--spacing-lg);
  }
}

/* Медиа запросы */
@media (min-width: var(--breakpoint-sm)) {
  /* Стили для sm */
}

@media (min-width: var(--breakpoint-md)) {
  /* Стили для md */
}

@media (min-width: var(--breakpoint-lg)) {
  /* Стили для lg */
}

@media (min-width: var(--breakpoint-xl)) {
  /* Стили для xl */
}

/* --- Медиа-запрос для изменения базового шрифта --- */
@media (max-width: 1440px) {
  html {
    font-size: 14px; /* Устанавливаем новую базу для расчета rem на экранах <= 1440px */
  }
}

/* Стили для заголовка секции */
.section-header {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.section-content {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section-header h2 {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary-dark);
  margin: 0;
  font-weight: var(--font-weight-bold);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 300px; /* Достаточно большое значение, чтобы вместить контент */
  }
}


/* === site_zabotix_auth/styles/layout.css === */
.row {
  display: flex;
  flex-direction: row;
}

.row-reverse {
  flex-direction: row-reverse;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}


/* === site_zabotix_auth/styles/typography.css === */
.text-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.16;
}

.text-m {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
}

.text-s {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
}

.text-white {
  color: var(--color-white);
}


/* === site_zabotix_auth/styles/buttons.css === */
/* --- Стили для кнопок --- */

/* Кнопки */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  color: white;
  white-space: nowrap;
  text-align: center;
  height: 36px;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-base);
  line-height: 1;
}

.button-auto {
  width: auto;
}

.button-secondary {
  background: none;
  color: var(--color-secondary);
  border: 2px solid var(--color-border-button-outline);
  --color-accent: var(--color-light-dark);
  font-weight: var(--font-weight-medium);
  line-height: initial;
}

.button-orange {
  background-color: var(--color-orange);
  --color-accent: var(--color-orange-dark);
}

.button-clear {
  border: none;
  background: none;
}

.button:hover {
  background-color: var(--color-accent);
}

.button:disabled {
  filter: brightness(0.5);
  pointer-events: none;
}

.button-icon {
  cursor: pointer;
  border: none;
  background: none;
  width: 1.5rem; /* 20px - Примерный размер, уточнить */
  height: 1.5rem; /* 20px */
}

.button-icon:hover {
  background-color: var(--color-light-dark, rgba(34, 43, 75, 0.1));
}

/* Можно добавить другие стили кнопок (primary, secondary) если нужно */


/* === site_zabotix_auth/styles/input.css === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"] {
  padding: var(--spacing-m);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

input::placeholder {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

@media (max-height: 700px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"] {
    padding: var(--spacing-sm);
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

input:focus-visible {
  outline-color: var(--color-orange);
}

/* --- Стили для выпадающих списков --- */

.dropdown-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: left;
}

.dropdown-label {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs); /* 13px */
  color: var(--color-secondary); /* #333333 */
}

.dropdown-wrapper {
  position: relative;
  display: inline-block; /* Чтобы ширина была по контенту */
}

.dropdown-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: 1px solid var(--color-gray-light); /* #E2E5EC */
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm)
    var(--spacing-m); /* Отступы внутри select */
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs); /* 13px */
  color: var(--color-secondary);
  cursor: pointer;
  min-width: 200px; /* Примерная минимальная ширина */
  line-height: 1.5; /* Примерно */
}

.dropdown-select.dropdown-select-full-width {
  width: 100%;
}

.dropdown-select:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-orange);
}

.dropdown-arrow {
  position: absolute;
  top: 50%;
  right: var(--spacing-m);
  transform: translateY(-50%);
  pointer-events: none; /* Чтобы не мешала клику по select */
  color: var(--color-gray-2); /* Цвет стрелки */
  font-size: var(--font-size-xs);
}


/* === site_zabotix_auth/styles/form.css === */
.form-group label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
}

.form-header {
  margin-bottom: 1.375rem; /* 22px */
}

.form-content {
  max-width: 22.5rem; /* 360px */
  margin: 0 auto;
}

.form-group {
  margin-bottom: var(--spacing-lg);
  text-align: left;
}

.form-footer {
  margin-top: var(--spacing-lg);
  text-align: center;
  font-size: var(--font-size-xs);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"] {
  width: 100%;
}

.checkbox-group {
  display: flex;
  /* align-items: center; */
  gap: var(--spacing-sm);
}

/* --- Медиа-запрос для адаптации формы по высоте --- */
@media (max-height: 700px) {
  .form-group {
    margin-bottom: var(--spacing-m);
  }
}

.validation-error {
  color: var(--color-error);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: -0.11px;
}


/* === site_zabotix_auth/styles/checkbox.css === */
/* Сброс стандартного оформления чекбокса */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-custom {
  position: relative;
  appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

input[type="checkbox"]:checked + .checkbox-custom {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
    center center no-repeat;
}


/* === site_zabotix_auth/styles/modal.css === */
:root {
  /* Можно использовать переменные из main.css, если они там есть */
  --modal-success-color: #4caf50; /* Пример цвета успеха */
  --modal-error-color: #f44336; /* Пример цвета ошибки */
  --modal-background-color: #ffffff;
  --modal-text-color: var(--color-secondary, #333333);
  --modal-border-radius: var(--border-radius-md); /* Используем токен */
  --modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --modal-max-width: 28.125rem; /* 450px */
  --modal-padding: var(--spacing-xl);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(34, 43, 75, 0.43); /* Цвет фона подложки */
  backdrop-filter: blur(4px); /* Размытие фона */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Убедимся, что модалка поверх всего */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Показываем оверлей, когда модалка видима (через v-if в Vue) */
.modal-overlay:has(.modal-content) {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: var(--modal-background-color);
  padding: var(--modal-padding);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  max-width: var(--modal-max-width);
  width: 90%;
  position: relative;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/* Анимация появления контента */
.modal-overlay:has(.modal-content) .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 0.625rem; /* 10px */
  right: 0.9375rem; /* 15px */
  background: none;
  border: none;
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  color: var(--color-gray, #9e9e9e);
  cursor: pointer;
  padding: 0.3125rem; /* 5px */
}

.modal-close:hover {
  color: var(--modal-text-color);
}

.modal-icon {
  margin-bottom: var(--spacing-md);
  line-height: 1; /* Сохраняем для выравнивания */
  height: 3rem; /* 48px */
  display: flex; /* Используем flex для центрирования */
  align-items: center;
  justify-content: center;
}

/* Убираем font-size, задаем размеры для img */
.modal-icon img,
.modal-icon span {
  /* Применяем и к span ошибки для единообразия */
  display: inline-block;
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  vertical-align: middle;
}

.modal-icon span.icon-error {
  font-size: 3rem; /* 48px */
  line-height: 3rem; /* 48px */
  color: var(--modal-error-color);
}

.modal-icon .icon-success {
  /* color больше не нужен для SVG */
}

.modal-icon .icon-error {
  color: var(--modal-error-color); /* Оставляем цвет для символа ошибки */
}

/* Дополнительные стили для соответствия Figma, если нужны */
.modal-success .modal-icon .icon-success {
  /* специфичные стили для иконки успеха */
}

.modal-error .modal-icon .icon-error {
  /* специфичные стили для иконки ошибки */
}

.modal-title {
  font-size: var(--font-size-lg, 20px); /* Используем переменную, если есть */
  font-weight: var(--font-weight-medium, 500);
  color: var(--modal-text-color);
  margin-bottom: var(--spacing-sm, 8px);
  margin-top: 0; /* Убираем верхний отступ у h3 */
}

.modal-message {
  font-size: var(--font-size-base, 16px);
  color: var(--modal-text-color);
  margin-bottom: var(--spacing-lg, 20px);
  line-height: 1.5;
}

.modal-confirm {
  /* Стили для кнопки подтверждения, если нужны специфичные */
  /* Например, минимальная ширина или отступы */
  margin: 0 auto; /* Центрируем кнопку, если она одна */
  display: block;
}


/* === site_zabotix_auth/styles/table.css === */
/* --- Стили для таблиц --- */

table {
  width: 100%;
  border-collapse: collapse;
}

table td:first-child,
table th:first-child {
  padding-left: var(--spacing-xl);
}

table th,
table td {
  padding: var(--spacing-m); /* Отступ между колонками */
  padding-left: 0;
  font-size: var(--font-size-m);
  white-space: nowrap;
}

table td {
  padding: var(--spacing-lg); /* Отступ между колонками */
  padding-left: 0;
}

thead tr {
  border-bottom: 1px solid var(--color-light-dark);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray); /* #9E9E9E */
  text-align: left;
}

thead th {
  color: var(--color-gray);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-medium);
}

tbody tr {
  border-bottom: 1px solid var(--color-light-dark);
}

tbody th {
  padding-right: var(--spacing-m); /* Отступ между колонками */
  font-family: var(--font-family-base);
  color: var(--color-text-primary-dark); /* #333333 */
  font-size: var(--font-size-s); /* 14px */
  line-height: var(--line-height-base);
}

tbody td {
  color: var(--color-text-primary-dark);
}

.table-container {
  border-radius: var(--border-radius-sm);
  overflow: auto;
}

.col-no-wrap {
  white-space: initial;
}


/* === site_zabotix_auth/styles/tabs.css === */
/* --- Стили для табов --- */

.tabs-container {
  border-bottom: 1px solid var(--color-light-dark); /* Линия под табами */
  padding: 0 var(--spacing-xl);
}

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab-item {
  margin-right: var(--spacing-xl); /* Отступ между табами */
}

.tab-link {
  display: inline-block; /* Или flex для иконки/badge */
  padding: var(--spacing-m) 0; /* Отступ снизу для высоты и линии */
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-m); /* 16px */
  color: var(--color-text-primary-dark);
  text-decoration: none;
  position: relative; /* Для активной линии */
  border-bottom: 3px solid transparent; /* Скрытая линия по умолчанию */
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-link:hover {
  color: var(--color-primary); /* Цвет при наведении */
}

.tab-item.active .tab-link {
  border-bottom-color: var(--color-orange); /* Показываем линию */
}

.tab-badge {
  display: inline-block;
  background-color: var(--color-accent-blue);
  color: var(--color-white);
  font-size: var(--font-size-xs); /* 12px */
  line-height: calc(var(--font-size-xs) * 1.2);
  font-weight: var(--font-weight-medium);
  /* Горизонтальные отступы */
  /* Примерно, чтобы выровнять по высоте */
  border-radius: var(--border-radius-round); /* Круглый badge */
  margin-left: var(--spacing-sm); /* Отступ от текста таба */
  width: 1rem; /* Минимальная ширина, чтобы был круглым даже с 1 цифрой */
  height: 1rem;
  text-align: center;
  transform: translateY(-1px);
}


/* === site_zabotix_auth/styles/registration.css === */
/* .registration-container — layout перенесён в assets/layouts/auth-shell.css
   (width:100%, min-height:100vh, display:flex). Дублирование с height:100%
   ломало растяжку правой половины. */

.registration-form {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2xl);
  padding-bottom: var(--spacing-m);
  min-width: 0; /* Allow flex item to shrink below content size */
}

.registration-form-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}

.registration-image {
  flex: 1;
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-xxl);
  min-width: 0; /* Allow flex item to shrink below content size */
  /* padding-bottom: calc(var(--spacing-xxl) + 10px); */
}

.registration-image-content {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.registration-dots {
  background-image: url(/local/templates/site_zabotix/assets/legacy/../../images/Dots.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4rem; /* 64px */
  height: 0.375rem; /* 6px */
}

.registration-image-text {
  max-width: 29.625rem; /* 474px */
  margin-bottom: 2.125rem; /* 34px */
}

@media (max-width: var(--breakpoint-md)) {
  /* Используем переменную */
  .registration-container {
    flex-direction: column;
  }

  .registration-image {
    display: none;
  }

  .registration-form {
    padding: var(--spacing-lg);
  }
}

/* --- Медиа-запрос для уменьшения фонового изображения --- */
@media (max-width: 80rem) {
  /* 1280px */
  .registration-image-content {
    width: 85%; /* Уменьшаем ширину изображения */
    height: auto; /* Сохраняем пропорции */
    /* Примечание: позиционирование top: 0; right: 0; остается, 
       изображение будет прижато к правому верхнему углу, 
       но займет 85% ширины контейнера .registration-image */
  }
}

/* --- Медиа-запрос для адаптации формы по высоте --- */
@media (max-height: 700px) {
  .registration-image-content {
    width: 65%; /* Уменьшаем ширину изображения */
    height: auto; /* Сохраняем пропорции */
  }
}

.form-checkbox {
  position: relative;
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.form-checkbox label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  padding-left: 30px;
}

.form-checkbox label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: white;
  transition: all 0.2s ease;
}

.form-checkbox input[type="checkbox"]:checked + label::before {
  background-color: #d45b40;
  border-color: #d45b40;
}

.form-checkbox input[type="checkbox"]:checked + label::after {
  content: "✓";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

.checkbox-text {
  font-size: var(--font-size-s, 14px);
  color: var(--color-text, #333);
}

/* Дополнительные стили для контейнера чекбокса */
.form-checkbox {
  display: block;
  margin-bottom: 20px;
}

.form-checkbox input[type="checkbox"]:focus {
  outline: none !important;
}


/* === site_zabotix_auth/styles/auth-form.css === */
/* Блок ошибки авторизации */
.auth-error-message {
  color: var(--color-error);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 4px;
  margin-bottom: 8px;
}

.form-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.form-header-subtitle {
  font-size: 14px;
  color: var(--color-gray-600);
  margin-top: var(--spacing-xs);
  font-weight: 400;
  line-height: 1.4;
}

.form-header .text-lg {
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Специфичные стили для шаблона авторизации */
.registration-form .form-content {
  max-width: 36.5rem;
}

.partner-registration-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px !important;
  position: relative;
}

.partner-registration-form__input-group {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}

.partner-registration-form__input-container {
  position: relative;
  margin-bottom: 16px !important;
  flex: 1;
}

.partner-registration-form__floating-label {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 15px;
  color: #999;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  pointer-events: none;
  transition: all 0.18s linear;
  transform-origin: left top;
  opacity: 0.5;
}

.partner-registration-form__input-container.has-value
  .partner-registration-form__floating-label,
.partner-registration-form__input-container:focus-within
  .partner-registration-form__floating-label {
  top: 6px;
  left: 11px;
  font-size: 12px;
  opacity: 1;
  transform: translateY(-2px);
  color: #999;
}

.partner-registration-form__input-container input[type="text"],
.partner-registration-form__input-container input[type="email"],
.partner-registration-form__input-container input[type="password"],
.partner-registration-form__input-container input[type="number"],
.partner-registration-form__input-container input[type="tel"],
.partner-registration-form__input-container input[type="date"] {
  width: 100% !important;
  height: 56px !important;
  padding: 30px 10px 12px 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  font-size: 15px !important;
  color: #29373d !important;
  font-family: "Open Sans", sans-serif !important;
  transition: all 0.2s ease;
}

.partner-registration-form__input-container input[type="text"]:focus,
.partner-registration-form__input-container input[type="email"]:focus,
.partner-registration-form__input-container input[type="password"]:focus,
.partner-registration-form__input-container input[type="number"]:focus,
.partner-registration-form__input-container input[type="tel"]:focus,
.partner-registration-form__input-container input[type="date"]:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--color-orange) !important;
}

/* Убираем отступы/layout основного шаблона при выводе формы авторизации */
.layout-container--auth,
.main-content-wrapper--auth,
.main-content-wrapper--auth .content-area {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.main-content-wrapper--auth .content-area {
  display: block;
}

.main-content-wrapper--auth .registration-container {
  min-height: 100vh;
}

.registration-form .form-footer {
  margin-top: 16px;
  font-size: 13px;
}

.partner-registration-form__modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.partner-registration-form__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.partner-registration-form__modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.partner-registration-form__modal-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

.partner-registration-form__modal-text {
  color: #333;
  margin-bottom: 14px;
}

.partner-registration-form__modal-button {
  width: 100%;
}


/* === site_zabotix_auth/styles/email-confirmation.css === */
/* Email Confirmation Card Styles */
.email-confirmation-card {
  width: 100%;
  max-width: 28rem; /* 448px */
  margin: 0 auto;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-gray-light);
  background-color: white;
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-family-base);
}

.email-confirmation-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-lg);
}

/* Icon Container */
.email-confirmation-icon {
  border-radius: 50%;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
}

.email-confirmation-icon--success {
  background-color: rgba(212, 91, 64, 0.1); /* #d45b40 with 10% opacity */
}

.email-confirmation-icon--error {
  background-color: rgba(255, 46, 46, 0.1); /* #ff2e2e with 10% opacity */
}

.email-confirmation-icon svg {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  stroke-width: 3;
}

.email-confirmation-icon--success svg {
  color: var(--color-orange);
}

.email-confirmation-icon--error svg {
  color: var(--color-error);
}

/* Message */
.email-confirmation-message {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.email-confirmation-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  line-height: 1.3;
}

.email-confirmation-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  opacity: 0.7;
  line-height: 1.5;
}

/* Button */
.email-confirmation-button {
  width: 100%;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-m) var(--spacing-lg);
  color: white;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  transition: opacity var(--transition-fast);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.email-confirmation-button--success {
  background-color: var(--color-orange);
}

.email-confirmation-button--success:hover {
  opacity: 0.9;
}

.email-confirmation-button--success:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 91, 64, 0.3);
}

.email-confirmation-button--error {
  background-color: var(--color-error);
}

.email-confirmation-button--error:hover {
  opacity: 0.9;
}

.email-confirmation-button--error:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 46, 46, 0.3);
}

/* SVG Icons (inline) */
.icon-check {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.icon-x {
  display: inline-block;
  width: 100%;
  height: 100%;
}


/* End */


/* Start:/local/templates/site_zabotix/template_styles.css?1772011875687*/



@import url("/local/templates/site_zabotix/styles/normalize.css");


@import url("/local/templates/site_zabotix/styles/main.css");
@import url("/local/templates/site_zabotix/styles/layout.css");
@import url("/local/templates/site_zabotix/styles/typography.css");


@import url("/local/templates/site_zabotix/styles/buttons.css");
@import url("/local/templates/site_zabotix/styles/input.css");
@import url("/local/templates/site_zabotix/styles/form.css");
@import url("/local/templates/site_zabotix/styles/checkbox.css");
@import url("/local/templates/site_zabotix/styles/modal.css");
@import url("/local/templates/site_zabotix/styles/table.css");
@import url("/local/templates/site_zabotix/styles/tabs.css");
@import url("/local/templates/site_zabotix/styles/pagination.css");


@import url("/local/templates/site_zabotix/styles/navbar.css");
@import url("/local/templates/site_zabotix/styles/sidebar.css");


@import url("/local/templates/site_zabotix/styles/registration.css");
@import url("/local/templates/site_zabotix/styles/payment-history.css");
@import url("/local/templates/site_zabotix/styles/reference-info.css");
@import url("/local/templates/site_zabotix/styles/store.css");


@import url("/local/templates/site_zabotix/styles/tokens.css");

/* End */
/* /local/templates/site_zabotix/assets/tokens.css?17799592151663 */
/* /local/templates/site_zabotix/assets/base/reset.css?17799592151354 */
/* /local/templates/site_zabotix/assets/base/fonts.css?1779959215938 */
/* /local/templates/site_zabotix/assets/base/typography.css?17799592156053 */
/* /local/templates/site_zabotix/assets/components/button.css?17799592151441 */
/* /local/templates/site_zabotix/assets/components/input.css?17799592157311 */
/* /local/templates/site_zabotix/assets/components/modal.css?17799592152085 */
/* /local/templates/site_zabotix/assets/components/card.css?1779959215927 */
/* /local/templates/site_zabotix/assets/components/badge.css?17799592151153 */
/* /local/templates/site_zabotix/assets/components/empty-state.css?17799592154471 */
/* /local/templates/site_zabotix/assets/utilities/pf-custom-select.css?17799592157586 */
/* /local/templates/site_zabotix/assets/components/table.css?17799592151288 */
/* /local/templates/site_zabotix/assets/components/tabs.css?17799592151347 */
/* /local/templates/site_zabotix/assets/components/pagination.css?17799592151942 */
/* /local/templates/site_zabotix/assets/layouts/page-shell.css?17799592152717 */
/* /local/templates/site_zabotix/assets/layouts/sidebar.css?17799592154075 */
/* /local/templates/site_zabotix/assets/layouts/header.css?17799592153917 */
/* /local/templates/site_zabotix/assets/layouts/auth-shell.css?17799592151301 */
/* /local/templates/site_zabotix/assets/legacy/auth-form.css?177995921537934 */
/* /local/templates/site_zabotix/template_styles.css?1772011875687 */