/* ==========================================================================
   NEWBUS UI v2 — дизайн-система EasyRemoteJob.ru

   Основано на референсе: off-white полотно, глубокий чёрный, виолетовый акцент.
   Сетка 8px, базовый шаг 16px, типографика Helvetica Neue.

   Правило совместимости: имена классов не менялись — весь существующий
   HTML продолжает работать. Новые компоненты добавлены, старые переоформлены.

   Содержание
     1. Шрифты
     2. Токены
     3. Reset и база
     4. Типографика
     5. Контейнеры и сетка
     6. Кнопки
     7. Формы
     8. Карточки
     9. Бейджи и чипы
    10. Аватары
    11. Навигация
    12. Таблицы
    13. Алерты и тосты
    14. Модальные окна
    15. Прогресс и индикаторы
    16. Пагинация
    17. Аккордеон
    18. Календарь
    19. Утилиты
    20. Адаптив
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ШРИФТЫ
   -------------------------------------------------------------------------- */
@import url('./fonts.css');

/* --------------------------------------------------------------------------
   2. ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root{
  /* -- полотно и поверхности -- */
  --nb-bg:            #F1F1EF;
  --nb-surface:       #FFFFFF;
  --nb-surface-alt:   #F7F7F5;
  --nb-surface-sunk:  #EBEBE8;
  --nb-border:        #E4E4E0;
  --nb-border-strong: #CFCFC9;

  /* -- чернила -- */
  --nb-ink:            #1A1A1A;
  --nb-text:           #1A1A1A;
  --nb-text-secondary: #6B6B6B;
  --nb-text-muted:     #9A9A96;
  --nb-text-on-dark:   #FFFFFF;
  --nb-text-on-accent: #FFFFFF;

  /* -- акцент -- */
  --nb-primary:            #7C4DFF;
  --nb-primary-hover:      #6B3BF5;
  --nb-primary-active:     #5B2FE0;
  --nb-primary-soft:       #EDE6FF;
  --nb-primary-soft-hover: #DCCEFF;
  --nb-primary-pressed:    #C9B6FF;

  /* -- дополнительные акценты из палитры -- */
  --nb-lime:        #D9F04B;
  --nb-lime-soft:   #F0FAC4;
  --nb-yellow:      #FFD84D;
  --nb-yellow-soft: #FFF4CE;

  /* -- статусы -- */
  --nb-success:      #1FA971;
  --nb-success-soft: #DFF5EB;
  --nb-warning:      #C4820A;
  --nb-warning-soft: var(--nb-yellow-soft);
  --nb-danger:       #E23D3D;
  --nb-danger-soft:  #FCE6E6;
  --nb-info:         var(--nb-primary);
  --nb-info-soft:    var(--nb-primary-soft);
  --nb-violet:       var(--nb-primary);
  --nb-violet-soft:  var(--nb-primary-soft);

  /* -- радиусы -- */
  --nb-radius-sm:   10px;
  --nb-radius-md:   14px;
  --nb-radius-lg:   20px;
  --nb-radius-xl:   28px;
  --nb-radius-pill: 999px;

  /* -- сетка 8px -- */
  --nb-space-1: 4px;
  --nb-space-2: 8px;
  --nb-space-3: 12px;
  --nb-space-4: 16px;
  --nb-space-5: 20px;
  --nb-space-6: 24px;
  --nb-space-7: 32px;
  --nb-space-8: 40px;
  --nb-space-10: 56px;
  --nb-space-12: 72px;

  /* -- тени: мягкие, почти незаметные -- */
  --nb-shadow-sm: 0 1px 2px rgba(26,26,26,.04);
  --nb-shadow-md: 0 8px 24px rgba(26,26,26,.06);
  --nb-shadow-lg: 0 24px 56px rgba(26,26,26,.12);
  --nb-shadow-focus: 0 0 0 3px rgba(124,77,255,.25);

  /* -- типографика -- */
  --nb-font-display: 'Helvetica Neue', Helvetica, 'Arial', system-ui, sans-serif;
  --nb-font-body:    'Helvetica Neue', Helvetica, 'Arial', system-ui, sans-serif;
  --nb-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -- высота управляющих элементов -- */
  --nb-control-h:    48px;
  --nb-control-h-sm: 38px;
  --nb-control-h-lg: 58px;

  /* -- переходы -- */
  --nb-ease: cubic-bezier(.2,.8,.2,1);
  --nb-fast: 140ms var(--nb-ease);
  --nb-med:  240ms var(--nb-ease);
}

/* --------------------------------------------------------------------------
   3. RESET И БАЗА
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-family: var(--nb-font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video{ max-width: 100%; display: block; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
hr{ border: none; border-top: 1px solid var(--nb-border); margin: var(--nb-space-6) 0; }

a{
  color: var(--nb-primary);
  text-decoration: none;
  transition: color var(--nb-fast);
}
a:hover{ color: var(--nb-primary-hover); text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--nb-primary);
  outline-offset: 2px;
  border-radius: var(--nb-radius-sm);
}

::selection{ background: var(--nb-primary-soft); color: var(--nb-ink); }

/* --------------------------------------------------------------------------
   4. ТИПОГРАФИКА
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--nb-font-display);
  margin: 0 0 var(--nb-space-3);
  color: var(--nb-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h1{ font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
h2{ font-size: clamp(24px, 3.2vw, 34px); }
h3{ font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -0.02em; }
h4{ font-size: 17px; letter-spacing: -0.01em; }
h5{ font-size: 15px; }
h6{ font-size: 14px; }

/* Крупный дисплейный заголовок как на референсе */
.nb-display{
  font-family: var(--nb-font-display);
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--nb-ink);
  margin: 0 0 var(--nb-space-5);
}

p{ margin: 0 0 var(--nb-space-4); color: var(--nb-text-secondary); }
p:last-child{ margin-bottom: 0; }

/* Цвет наследуется: иначе <b> становится невидимым на тёмных и цветных
   поверхностях. Акцент в обычном тексте задаётся отдельным правилом ниже. */
strong, b{ font-weight: 700; }
p > strong, p > b, li > strong, li > b{ color: var(--nb-ink); }
small{ font-size: 13px; }

/* Мелкая прописная надпись над блоком — «COLOR PALETTE», «UI COMPONENTS» */
.nb-eyebrow{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nb-text-muted);
  margin-bottom: var(--nb-space-3);
}

.nb-lead{
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--nb-text-secondary);
  letter-spacing: -0.01em;
}

.nb-caption{ font-size: 13px; color: var(--nb-text-muted); }

code, kbd, samp{
  font-family: var(--nb-font-mono);
  font-size: .875em;
  background: var(--nb-surface-sunk);
  padding: 2px 6px;
  border-radius: 6px;
}

blockquote{
  margin: 0 0 var(--nb-space-4);
  padding-left: var(--nb-space-4);
  border-left: 3px solid var(--nb-primary);
  color: var(--nb-text-secondary);
}

/* --------------------------------------------------------------------------
   5. КОНТЕЙНЕРЫ И СЕТКА
   -------------------------------------------------------------------------- */
.nb-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--nb-space-6);
}
.nb-container-narrow{ max-width: 820px; }

.nb-section{ padding: var(--nb-space-10) 0; }

.nb-grid{ display: grid; gap: var(--nb-space-5); }
/* У элемента сетки по умолчанию min-width:auto, то есть он не может стать уже
   своего min-content. Из-за этого широкая таблица или длинная строка внутри
   колонки растягивает всю сетку, а с ней и страницу. */
.nb-grid > *{ min-width: 0; }
.nb-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nb-flex{ display: flex; }
.nb-flex-col{ display: flex; flex-direction: column; }
.nb-wrap{ flex-wrap: wrap; }
.nb-items-center{ align-items: center; }
.nb-items-start{ align-items: flex-start; }
.nb-justify-between{ justify-content: space-between; }
.nb-justify-center{ justify-content: center; }

.nb-gap-1{ gap: var(--nb-space-1); }
.nb-gap-2{ gap: var(--nb-space-2); }
.nb-gap-3{ gap: var(--nb-space-3); }
.nb-gap-4{ gap: var(--nb-space-4); }
.nb-gap-6{ gap: var(--nb-space-6); }

/* --------------------------------------------------------------------------
   6. КНОПКИ
   Референс: чёрная «Default», виолетовая «Button», обводка, светло-виолетовая
   «Pressed». Все — pill.
   -------------------------------------------------------------------------- */
.nb-btn{
  --btn-h: var(--nb-control-h);
  --btn-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-space-2);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1.5px solid transparent;
  border-radius: var(--nb-radius-pill);
  font-family: var(--nb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background var(--nb-fast), border-color var(--nb-fast),
              color var(--nb-fast), transform var(--nb-fast), box-shadow var(--nb-fast);
}
.nb-btn:hover{ text-decoration: none; }
.nb-btn:active{ transform: translateY(1px); }
.nb-btn:disabled,
.nb-btn.is-disabled{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.nb-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* размеры */
.nb-btn-sm{ --btn-h: var(--nb-control-h-sm); --btn-px: 18px; font-size: 14px; }
.nb-btn-lg{ --btn-h: var(--nb-control-h-lg); --btn-px: 34px; font-size: 16px; }

/* Основная: чёрная, при наведении — виолетовая */
.nb-btn-primary{
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-text-on-dark);
}
.nb-btn-primary:hover{
  background: var(--nb-primary);
  border-color: var(--nb-primary);
  color: var(--nb-text-on-accent);
}
.nb-btn-primary:active{ background: var(--nb-primary-active); border-color: var(--nb-primary-active); }

/* Акцентная виолетовая */
.nb-btn-secondary{
  background: var(--nb-primary);
  border-color: var(--nb-primary);
  color: var(--nb-text-on-accent);
}
.nb-btn-secondary:hover{ background: var(--nb-primary-hover); border-color: var(--nb-primary-hover); }
.nb-btn-secondary:active{ background: var(--nb-primary-pressed); border-color: var(--nb-primary-pressed); color: var(--nb-ink); }

/* Обводка */
.nb-btn-outline{
  background: var(--nb-surface);
  border-color: var(--nb-ink);
  color: var(--nb-ink);
}
.nb-btn-outline:hover{
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-text-on-dark);
}

/* Мягкая виолетовая — состояние «Pressed» с референса */
.nb-btn-soft{
  background: var(--nb-primary-soft);
  border-color: var(--nb-primary-soft);
  color: var(--nb-primary-active);
}
.nb-btn-soft:hover{ background: var(--nb-primary-soft-hover); border-color: var(--nb-primary-soft-hover); }

/* Без фона — для тулбаров */
.nb-btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--nb-text-secondary);
}
.nb-btn-ghost:hover{ background: var(--nb-surface-sunk); color: var(--nb-ink); }

/* Разрушающие действия */
.nb-btn-danger{
  background: var(--nb-danger-soft);
  border-color: var(--nb-danger-soft);
  color: var(--nb-danger);
}
.nb-btn-danger:hover{ background: #F9D2D2; border-color: #F9D2D2; }

.nb-btn-danger-solid{
  background: var(--nb-danger);
  border-color: var(--nb-danger);
  color: #fff;
}
.nb-btn-danger-solid:hover{ background: #C93333; border-color: #C93333; }

/* Круглая кнопка-иконка */
.nb-btn-icon{
  width: var(--btn-h);
  padding: 0;
  border-radius: 50%;
}

/* Круглая кнопка со стрелкой — акцент с референса */
.nb-btn-arrow{
  width: var(--btn-h);
  padding: 0;
  border-radius: 50%;
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-text-on-dark);
}
.nb-btn-arrow:hover{ background: var(--nb-primary); border-color: var(--nb-primary); }
.nb-btn-arrow svg{ width: 20px; height: 20px; }

.nb-btn-block{ width: 100%; }

/* Группа: кнопка + круглая стрелка вплотную */
.nb-btn-group{ display: inline-flex; align-items: center; gap: var(--nb-space-2); }

/* --------------------------------------------------------------------------
   7. ФОРМЫ
   -------------------------------------------------------------------------- */
.nb-field{ margin-bottom: var(--nb-space-5); }
.nb-field:last-child{ margin-bottom: 0; }

.nb-label{
  display: block;
  margin-bottom: var(--nb-space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--nb-ink);
  letter-spacing: -0.01em;
}

.nb-hint{
  margin-top: var(--nb-space-2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--nb-text-muted);
}

.nb-input,
.nb-select,
.nb-textarea{
  width: 100%;
  height: var(--nb-control-h);
  padding: 0 var(--nb-space-4);
  background: var(--nb-surface);
  border: 1.5px solid var(--nb-border-strong);
  border-radius: var(--nb-radius-md);
  color: var(--nb-ink);
  font-size: 15px;
  transition: border-color var(--nb-fast), box-shadow var(--nb-fast), background var(--nb-fast);
}

.nb-input::placeholder,
.nb-textarea::placeholder{ color: var(--nb-text-muted); }

.nb-textarea{
  height: auto;
  min-height: 128px;
  padding: var(--nb-space-3) var(--nb-space-4);
  line-height: 1.5;
  resize: vertical;
}

.nb-input:hover,
.nb-select:hover,
.nb-textarea:hover{ border-color: var(--nb-text-secondary); }

.nb-input:focus,
.nb-select:focus,
.nb-textarea:focus{
  outline: none;
  border-color: var(--nb-primary);
  box-shadow: var(--nb-shadow-focus);
}

.nb-input:disabled,
.nb-select:disabled,
.nb-textarea:disabled{
  background: var(--nb-surface-sunk);
  border-color: var(--nb-border);
  color: var(--nb-text-muted);
  cursor: not-allowed;
}

/* Состояния валидации */
.nb-input.is-error,
.nb-select.is-error,
.nb-textarea.is-error{ border-color: var(--nb-danger); }
.nb-input.is-error:focus{ box-shadow: 0 0 0 3px rgba(226,61,61,.2); }
.nb-input.is-error ~ .nb-hint{ color: var(--nb-danger); }

.nb-input.is-success,
.nb-select.is-success,
.nb-textarea.is-success{ border-color: var(--nb-success); }
.nb-input.is-success ~ .nb-hint{ color: var(--nb-success); }

.nb-select{
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231A1A1A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

/* Поиск с иконкой */
.nb-search{ position: relative; }
.nb-search .nb-input{ padding-left: 48px; }
.nb-search > svg{
  position: absolute;
  left: 17px;
  top: calc(50% + 15px);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--nb-text-muted);
  pointer-events: none;
}
/* Если у поля нет подписи — иконка центрируется по самому полю */
.nb-search.nb-search-bare > svg{ top: 50%; }

/* Чекбокс */
.nb-checkbox{
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
}
.nb-checkbox input{
  appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--nb-border-strong);
  border-radius: 7px;
  background: var(--nb-surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--nb-fast), border-color var(--nb-fast);
}
.nb-checkbox input::after{
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--nb-fast);
}
.nb-checkbox input:checked{ background: var(--nb-primary); border-color: var(--nb-primary); }
.nb-checkbox input:checked::after{ transform: rotate(45deg) scale(1); }
.nb-checkbox input:disabled{ opacity: .45; cursor: not-allowed; }

/* Радио */
.nb-radio{
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-3);
  cursor: pointer;
  font-size: 15px;
}
.nb-radio input{
  appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--nb-border-strong);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--nb-fast);
}
.nb-radio input::after{
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nb-primary);
  transform: scale(0);
  transition: transform var(--nb-fast);
}
.nb-radio input:checked{ border-color: var(--nb-primary); }
.nb-radio input:checked::after{ transform: scale(1); }

/* Переключатель */
.nb-switch{
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.nb-switch input{ opacity: 0; width: 0; height: 0; }
.nb-switch-track{
  position: absolute;
  inset: 0;
  background: var(--nb-border-strong);
  border-radius: var(--nb-radius-pill);
  cursor: pointer;
  transition: background var(--nb-fast);
}
.nb-switch-track::before{
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--nb-shadow-sm);
  transition: transform var(--nb-fast);
}
.nb-switch input:checked + .nb-switch-track{ background: var(--nb-primary); }
.nb-switch input:checked + .nb-switch-track::before{ transform: translateX(20px); }

/* Группа полей в строку */
.nb-input-group{ display: flex; gap: var(--nb-space-2); align-items: center; }
.nb-input-group .nb-input{ flex: 1; }

/* --------------------------------------------------------------------------
   8. КАРТОЧКИ
   -------------------------------------------------------------------------- */
.nb-card{
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg);
  padding: var(--nb-space-6);
  box-shadow: var(--nb-shadow-sm);
}

.nb-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-3);
  margin-bottom: var(--nb-space-4);
}

.nb-card-title{
  font-family: var(--nb-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.nb-card-flat{ box-shadow: none; }
.nb-card-alt{ background: var(--nb-surface-alt); border-color: transparent; box-shadow: none; }
.nb-card-sunk{ background: var(--nb-surface-sunk); border-color: transparent; box-shadow: none; }

.nb-card-link{ display: block; color: inherit; }
.nb-card-link:hover{
  text-decoration: none;
  border-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-md);
  transform: translateY(-2px);
  transition: all var(--nb-med);
}

/* Цветные карточки с референса */
.nb-card-dark{
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-text-on-dark);
}
.nb-card-violet{
  background: var(--nb-primary);
  border-color: var(--nb-primary);
  color: var(--nb-text-on-accent);
}
.nb-card-lime{
  background: var(--nb-lime);
  border-color: var(--nb-lime);
  color: var(--nb-ink);
}
.nb-card-yellow{
  background: var(--nb-yellow);
  border-color: var(--nb-yellow);
  color: var(--nb-ink);
}

.nb-card-dark h1, .nb-card-dark h2, .nb-card-dark h3, .nb-card-dark h4,
.nb-card-violet h1, .nb-card-violet h2, .nb-card-violet h3, .nb-card-violet h4{
  color: inherit;
}
.nb-card-dark p, .nb-card-violet p{ color: rgba(255,255,255,.75); }
.nb-card-dark strong, .nb-card-violet strong{ color: inherit; }
.nb-card-lime p, .nb-card-yellow p{ color: rgba(26,26,26,.7); }

/* Вложенная светлая карточка возвращает обычные цвета текста: без этого
   заголовки и абзацы внутри неё наследуют белый от цветного родителя
   и становятся невидимыми на белом фоне. */
.nb-card-dark .nb-card,
.nb-card-violet .nb-card,
.nb-card-lime .nb-card,
.nb-card-yellow .nb-card{ color: var(--nb-text); }
.nb-card-dark .nb-card h1, .nb-card-dark .nb-card h2,
.nb-card-dark .nb-card h3, .nb-card-dark .nb-card h4,
.nb-card-violet .nb-card h1, .nb-card-violet .nb-card h2,
.nb-card-violet .nb-card h3, .nb-card-violet .nb-card h4{ color: var(--nb-ink); }
.nb-card-dark .nb-card p,
.nb-card-violet .nb-card p{ color: var(--nb-text-secondary); }
.nb-card-dark .nb-card strong,
.nb-card-violet .nb-card strong{ color: var(--nb-ink); }

/* Кнопка внутри цветной карточки — обводка в цвет текста */
.nb-card-dark .nb-btn-outline,
.nb-card-violet .nb-btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.nb-card-dark .nb-btn-outline:hover,
.nb-card-violet .nb-btn-outline:hover{ background: #fff; border-color: #fff; color: var(--nb-ink); }

/* Медиа-шапка карточки */
.nb-card-media{
  margin: calc(var(--nb-space-6) * -1) calc(var(--nb-space-6) * -1) var(--nb-space-5);
  border-radius: var(--nb-radius-lg) var(--nb-radius-lg) 0 0;
  overflow: hidden;
}
.nb-card-media img{ width: 100%; height: auto; object-fit: cover; }

/* --------------------------------------------------------------------------
   9. БЕЙДЖИ И ЧИПЫ
   -------------------------------------------------------------------------- */
.nb-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 var(--nb-space-3);
  border-radius: var(--nb-radius-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--nb-surface-sunk);
  color: var(--nb-text-secondary);
  white-space: nowrap;
}
.nb-badge::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.nb-badge-dot-off::before{ display: none; }

.nb-badge-primary{ background: var(--nb-primary-soft); color: var(--nb-primary-active); }
.nb-badge-success{ background: var(--nb-success-soft); color: #157A51; }
.nb-badge-warning{ background: var(--nb-yellow-soft); color: #8A5B00; }
.nb-badge-danger{  background: var(--nb-danger-soft); color: #B62A2A; }
.nb-badge-info{    background: var(--nb-primary-soft); color: var(--nb-primary-active); }
.nb-badge-violet{  background: var(--nb-primary-soft); color: var(--nb-primary-active); }
.nb-badge-dark{    background: var(--nb-ink); color: #fff; }
.nb-badge-lime{    background: var(--nb-lime-soft); color: #5A6B00; }

/* Чип-тег без точки */
.nb-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-2);
  padding: 6px 14px;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-sunk);
  color: var(--nb-text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.nb-chip-outline{ background: transparent; border: 1px solid var(--nb-border-strong); }
.nb-chip-active{ background: var(--nb-ink); color: #fff; }

/* --------------------------------------------------------------------------
   10. АВАТАРЫ
   -------------------------------------------------------------------------- */
.nb-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--nb-primary-soft);
  color: var(--nb-primary-active);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--nb-surface);
  flex-shrink: 0;
}
.nb-avatar-sm{ width: 32px; height: 32px; font-size: 13px; }
.nb-avatar-lg{ width: 64px; height: 64px; font-size: 20px; }
.nb-avatar-dark{ background: var(--nb-ink); color: #fff; }

.nb-avatar-group{ display: flex; }
.nb-avatar-group .nb-avatar{ margin-left: -12px; }
.nb-avatar-group .nb-avatar:first-child{ margin-left: 0; }
.nb-avatar-group-more{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nb-surface-sunk);
  border: 2px solid var(--nb-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--nb-text-secondary);
  margin-left: -12px;
}

/* --------------------------------------------------------------------------
   11. НАВИГАЦИЯ
   -------------------------------------------------------------------------- */
.nb-sidebar{
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg);
  padding: var(--nb-space-4);
}

.nb-nav-item{
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  padding: var(--nb-space-3) var(--nb-space-4);
  border-radius: var(--nb-radius-md);
  color: var(--nb-text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--nb-fast), color var(--nb-fast);
}
.nb-nav-item svg{ width: 20px; height: 20px; flex-shrink: 0; }
.nb-nav-item:hover{ background: var(--nb-surface-sunk); color: var(--nb-ink); text-decoration: none; }
.nb-nav-item.is-active{ background: var(--nb-ink); color: #fff; font-weight: 600; }
.nb-nav-item.is-active svg{ color: #fff; }

/* Табы */
.nb-tabs{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--nb-surface-sunk);
  border-radius: var(--nb-radius-pill);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.nb-tabs::-webkit-scrollbar{ display: none; }
.nb-tab{
  padding: 9px 20px;
  border: none;
  background: transparent;
  border-radius: var(--nb-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--nb-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nb-fast);
}
.nb-tab:hover{ color: var(--nb-ink); }
.nb-tab.is-active{ background: var(--nb-ink); color: #fff; }

/* Хлебные крошки */
.nb-breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-space-2);
  font-size: 14px;
  color: var(--nb-text-muted);
}
.nb-breadcrumbs a{ color: var(--nb-text-secondary); }
.nb-breadcrumbs li + li::before{ content: "/"; margin-right: var(--nb-space-2); color: var(--nb-text-muted); }
.nb-breadcrumbs li{ display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   12. ТАБЛИЦЫ
   -------------------------------------------------------------------------- */
.nb-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.nb-table th{
  text-align: left;
  padding: var(--nb-space-3) var(--nb-space-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nb-text-muted);
  border-bottom: 1px solid var(--nb-border);
  white-space: nowrap;
}
.nb-table td{
  padding: var(--nb-space-4);
  border-bottom: 1px solid var(--nb-border);
  vertical-align: top;
}
.nb-table tr:last-child td{ border-bottom: none; }
.nb-table tbody tr{ transition: background var(--nb-fast); }
.nb-table tbody tr:hover td{ background: var(--nb-surface-alt); }

/* Обёртка для горизонтальной прокрутки на узких экранах */
.nb-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   13. АЛЕРТЫ И ТОСТЫ
   -------------------------------------------------------------------------- */
.nb-alert{
  display: flex;
  align-items: flex-start;
  gap: var(--nb-space-3);
  padding: var(--nb-space-4) var(--nb-space-5);
  border-radius: var(--nb-radius-md);
  background: var(--nb-primary-soft);
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nb-ink);
}
.nb-alert svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--nb-primary); }
.nb-alert strong{ display: block; margin-bottom: 3px; }
.nb-alert a{ font-weight: 600; }

/* Уровни флеш-сообщений собираются в шаблоне как nb-alert-{level},
   поэтому info описан явно, а не только базовым видом .nb-alert. */
.nb-alert-info{ background: var(--nb-primary-soft); }
.nb-alert-info svg{ color: var(--nb-primary); }
.nb-alert-success{ background: var(--nb-success-soft); }
.nb-alert-success svg{ color: var(--nb-success); }
.nb-alert-warning{ background: var(--nb-yellow-soft); }
.nb-alert-warning svg{ color: var(--nb-warning); }
.nb-alert-danger{ background: var(--nb-danger-soft); }
.nb-alert-danger svg{ color: var(--nb-danger); }
.nb-alert-dark{ background: var(--nb-ink); color: #fff; }
.nb-alert-dark svg{ color: #fff; }

/* Всплывающее уведомление */
.nb-toast{
  position: fixed;
  right: var(--nb-space-5);
  bottom: var(--nb-space-5);
  z-index: 1100;
  max-width: 380px;
  padding: var(--nb-space-4) var(--nb-space-5);
  background: var(--nb-ink);
  color: #fff;
  border-radius: var(--nb-radius-md);
  box-shadow: var(--nb-shadow-lg);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   14. МОДАЛЬНЫЕ ОКНА
   -------------------------------------------------------------------------- */
.nb-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nb-space-5);
  background: rgba(26,26,26,.5);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.nb-modal{
  width: 100%;
  max-width: 460px;
  padding: var(--nb-space-6);
  background: var(--nb-surface);
  border-radius: var(--nb-radius-xl);
  box-shadow: var(--nb-shadow-lg);
  margin: auto;
}
.nb-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-3);
  margin-bottom: var(--nb-space-5);
}
.nb-modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: var(--nb-space-3);
  margin-top: var(--nb-space-6);
}

/* --------------------------------------------------------------------------
   15. ПРОГРЕСС И ИНДИКАТОРЫ
   -------------------------------------------------------------------------- */
.nb-progress{
  height: 10px;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-sunk);
  overflow: hidden;
}
.nb-progress-bar{
  height: 100%;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-primary);
  transition: width var(--nb-med);
}
.nb-progress-bar-dark{ background: var(--nb-ink); }

/* Заглушка загрузки */
.nb-skeleton{
  background: linear-gradient(90deg, var(--nb-surface-sunk) 25%, var(--nb-surface-alt) 50%, var(--nb-surface-sunk) 75%);
  background-size: 200% 100%;
  animation: nb-shimmer 1.4s infinite;
  border-radius: var(--nb-radius-sm);
}
@keyframes nb-shimmer{
  from{ background-position: 200% 0; }
  to{ background-position: -200% 0; }
}

/* Числовой показатель */
.nb-stat-value{
  font-family: var(--nb-font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--nb-ink);
}
.nb-stat-label{ font-size: 14px; color: var(--nb-text-secondary); margin-top: var(--nb-space-1); }

/* --------------------------------------------------------------------------
   16. ПАГИНАЦИЯ
   -------------------------------------------------------------------------- */
.nb-pagination{ display: inline-flex; flex-wrap: wrap; gap: var(--nb-space-2); }
.nb-page-item{
  min-width: 42px;
  height: 42px;
  padding: 0 var(--nb-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nb-radius-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-text-secondary);
  cursor: pointer;
  transition: all var(--nb-fast);
}
.nb-page-item:hover{ background: var(--nb-surface-sunk); color: var(--nb-ink); text-decoration: none; }
.nb-page-item.is-active{ background: var(--nb-ink); color: #fff; }

/* --------------------------------------------------------------------------
   17. АККОРДЕОН
   -------------------------------------------------------------------------- */
.nb-accordion{ display: flex; flex-direction: column; gap: var(--nb-space-3); }

.nb-accordion-item{
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md);
  overflow: hidden;
}
.nb-accordion-item[open]{ border-color: var(--nb-border-strong); }
.nb-accordion-item-accent{ background: var(--nb-yellow); border-color: var(--nb-yellow); }

.nb-accordion-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-4);
  padding: var(--nb-space-4) var(--nb-space-5);
  font-size: 16px;
  font-weight: 600;
  color: var(--nb-ink);
  cursor: pointer;
  list-style: none;
}
.nb-accordion-item summary::-webkit-details-marker{ display: none; }
.nb-accordion-item summary::after{
  content: "+";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--nb-ink);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--nb-fast);
}
.nb-accordion-item[open] summary::after{ content: "−"; }
.nb-accordion-body{
  padding: 0 var(--nb-space-5) var(--nb-space-5);
  color: var(--nb-text-secondary);
  font-size: 15px;
}
.nb-accordion-item-accent .nb-accordion-body{ color: rgba(26,26,26,.75); }

/* --------------------------------------------------------------------------
   18. КАЛЕНДАРЬ
   -------------------------------------------------------------------------- */
.nb-calendar{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.nb-calendar-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nb-text-muted);
  padding-bottom: var(--nb-space-2);
}
.nb-calendar-day{
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--nb-ink);
  cursor: pointer;
  transition: background var(--nb-fast);
}
.nb-calendar-day:hover{ background: var(--nb-surface-sunk); }
.nb-calendar-day.is-muted{ color: var(--nb-text-muted); }
.nb-calendar-day.is-today{ background: var(--nb-ink); color: #fff; font-weight: 700; }
.nb-calendar-day.is-selected{ background: var(--nb-primary); color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   19. УТИЛИТЫ
   -------------------------------------------------------------------------- */
.nb-text-secondary{ color: var(--nb-text-secondary); }
.nb-text-muted{ color: var(--nb-text-muted); }
.nb-text-primary{ color: var(--nb-primary); }
.nb-text-ink{ color: var(--nb-ink); }
.nb-text-danger{ color: var(--nb-danger); }
.nb-text-success{ color: var(--nb-success); }

.nb-text-sm{ font-size: 14px; }
.nb-text-xs{ font-size: 12.5px; }
.nb-text-lg{ font-size: 18px; }
.nb-text-center{ text-align: center; }

.nb-font-semibold{ font-weight: 600; }
.nb-font-bold{ font-weight: 700; }
.nb-uppercase{ text-transform: uppercase; letter-spacing: .08em; }
.nb-mono{ font-family: var(--nb-font-mono); font-size: 13px; }

.nb-mt-0{ margin-top: 0; }
.nb-mb-0{ margin-bottom: 0; }
.nb-mt-4{ margin-top: var(--nb-space-4); }
.nb-mb-4{ margin-bottom: var(--nb-space-4); }
.nb-mt-6{ margin-top: var(--nb-space-6); }
.nb-mb-6{ margin-bottom: var(--nb-space-6); }

.nb-w-full{ width: 100%; }
.nb-rounded-lg{ border-radius: var(--nb-radius-lg); }
.nb-rounded-pill{ border-radius: var(--nb-radius-pill); }
.nb-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-divider{ height: 1px; background: var(--nb-border); border: none; margin: var(--nb-space-6) 0; }
.nb-hidden{ display: none !important; }

/* Только для скринридеров */
.nb-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   20. АДАПТИВ
   Мобильный приоритет: увеличенные зоны нажатия, одноколоночные сетки,
   отсутствие горизонтальной прокрутки.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .nb-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  :root{
    --nb-space-10: 40px;
    --nb-space-12: 48px;
    --nb-control-h: 50px;      /* палец, а не курсор */
    --nb-control-h-lg: 56px;
    --nb-radius-lg: 18px;
    --nb-radius-xl: 22px;
  }

  body{ font-size: 16px; }

  .nb-container{ padding: 0 var(--nb-space-4); }

  .nb-grid-2,
  .nb-grid-3,
  .nb-grid-4{ grid-template-columns: 1fr; }
  .nb-grid{ gap: var(--nb-space-4); }

  .nb-card{ padding: var(--nb-space-5); border-radius: var(--nb-radius-lg); }
  .nb-card-media{ margin: calc(var(--nb-space-5) * -1) calc(var(--nb-space-5) * -1) var(--nb-space-4); }

  /* Кнопки на всю ширину — так по ним проще попасть */
  .nb-btn{ font-size: 15px; }
  .nb-btn-lg{ width: 100%; }

  .nb-modal{ padding: var(--nb-space-5); border-radius: var(--nb-radius-lg); }
  .nb-modal-footer{ flex-direction: column-reverse; }
  .nb-modal-footer .nb-btn{ width: 100%; }

  .nb-sidebar{ padding: var(--nb-space-3); }

  /* Таблицы прокручиваются, а не ломают вёрстку */
  .nb-table{ font-size: 14px; }
  .nb-table th,
  .nb-table td{ padding: var(--nb-space-3); }

  .nb-toast{
    left: var(--nb-space-4);
    right: var(--nb-space-4);
    bottom: var(--nb-space-4);
    max-width: none;
  }

  .nb-pagination{ justify-content: center; width: 100%; }
}

@media (max-width: 420px){
  .nb-btn{ --btn-px: 20px; }
  .nb-btn-lg{ --btn-px: 24px; }
  .nb-avatar-lg{ width: 56px; height: 56px; font-size: 18px; }
}

/* Печать */
@media print{
  body{ background: #fff; }
  .nb-btn, .nb-sidebar, .nb-tabs, .nb-pagination{ display: none !important; }
  .nb-card{ box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}