/* Solar Bills — дашборд бухгалтерии. Специфика страницы поверх общей дизайн-системы
   (/assets/theme.css: токены, шрифт Inter, свет+тёмная, базовые компоненты).
   Здесь — только то, что уникально для дашборда; палитра и типографика — из theme.css. */

/* ===== Шапка ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-active));
  box-shadow: var(--shadow-sm);
  flex: none;
}

.brand h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 680;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Верхний уровень: сегмент-контейнер (фон/рамку даёт .tabs из theme.css —
   осознанно совмещаем, получается pill-панель разделов). */
.tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}

.tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-weight: 550;
  font-size: 13.5px;
  color: var(--muted-fg);
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.tab:hover {
  color: var(--fg);
  background: var(--surface);
}

.tab:active {
  transform: scale(0.97);
}

.tab.is-active {
  color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.topbar .theme-toggle {
  margin-left: 4px;
}

/* ===== Под-вкладки раздела (второй уровень навигации) =====
   Underline-стиль: визуально подчинён pill-разделам верхнего уровня. */
.subnav {
  border-top: 1px solid var(--border);
}

.subtabs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.subtab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-weight: 550;
  font-size: 13px;
  color: var(--muted-fg);
  padding: 10px 2px 8px;
  margin-bottom: -1px; /* подчёркивание ложится на нижнюю границу шапки */
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.subtab:hover {
  color: var(--fg);
}

.subtab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ===== Панели, тулбар ===== */
.panel {
  padding: 24px 0 56px;
}

/* Мягкое появление панели при переключении раздела/под-вкладки
   (перезапускается сменой display у [hidden]) */
@media (prefers-reduced-motion: no-preference) {
  .panel {
    animation: panel-in 0.18s ease-out;
  }

  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-grow {
  flex: 1 1 220px;
}

.field-label {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--muted-fg);
}

select,
input[type='search'],
input[type='text'],
input[type='number'],
input[type='time'],
input[type='email'] {
  appearance: none;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 38px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.toolbar select,
.toolbar input[type='search'] {
  min-width: 170px;
}

select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

.field-grow input {
  width: 100%;
}

select:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.tab:focus-visible,
.subtab:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.toolbar-meta {
  margin-left: auto;
  color: var(--muted-fg);
  padding-bottom: 9px;
  font-size: 13px;
}

/* Свежесть данных + «Обновить данные» в шапке «Аналитики ФОТ» */
.an-cache-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  align-self: center;
}

/* ===== Статусы: загрузка / пусто / ошибка ===== */
.status {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted-fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.status.is-error {
  color: var(--danger);
}

.status .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ===== Тайлы (метрики) ===== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

.tile-label {
  font-size: 12px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
}

.tile-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Плитка: под значением — строка сравнения с прошлым периодом или пояснение.
   Рост расхода красный, снижение зелёное: это отчёт о тратах, а не о выручке. */
.tile-delta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 550;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.tile-delta.is-up { color: var(--danger); }
.tile-delta.is-down { color: var(--success); }
.tile-delta.is-flat,
.tile-delta.muted-note { color: var(--muted-fg); font-weight: 500; }

.tile-value.pos { color: var(--success); }
.tile-value.neg { color: var(--danger); }

/* ===== Карточки ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 640;
  color: var(--heading);
}

/* Шапка карточки: заголовок + пояснение, что именно показано и как это читать.
   Отбита линией — иначе на длинной странице карточки сливаются в один поток. */
.card-head {
  margin: -4px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-head .card-title {
  margin: 0;
}

.card-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-fg);
  max-width: 88ch;
}

/* Две колонки на широком экране, одна — на узком */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Круговая диаграмма долей ===== */
.donut-wrap {
  position: relative;
  height: 240px;
}

.donut-legend {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.donut-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

.donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.donut-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

.donut-legend-val,
.donut-legend-share {
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
  text-align: right;
}

.donut-legend-share {
  font-weight: 600;
  color: var(--fg);
}

/* Доля прямо в ячейке таблицы: полоса + число, читается быстрее голого процента */
.share-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.share-bar {
  flex: 0 0 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
  overflow: hidden;
}

.share-bar i {
  display: block;
  height: 100%;
  background: var(--primary);
}

.share-num {
  min-width: 46px;
  text-align: right;
}

/* Тепловая заливка сводной «группа × месяц»: интенсивность задаётся в --heat
   инлайном при рендере, цвет — токеном темы, поэтому работает и в тёмной. */
.heat-table td.heat {
  background: color-mix(in srgb, var(--heat-hue, var(--primary)) calc(var(--heat, 0) * 100%), transparent);
}

.exp-bar-sub {
  color: var(--muted-fg);
  font-weight: 450;
  font-size: 11.5px;
}

/* Сводные «План/факт»: 13–16 колонок, и инпуты по 112px выносили таблицу за край
   карточки. Ячейка месяца — это максимум «-1 145 703», больше ей не нужно. */
.pivot .edit-input {
  width: 74px;
  padding: 5px 6px;
  font-size: 12.5px;
  text-align: right;
}

.pivot th,
.pivot td {
  padding: 9px 8px;
}

/* ===== Чарт ===== */
.chart {
  overflow-x: auto;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .chart svg { min-width: 640px; }
}

.chart .gridline {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart .baseline {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart .tick-label,
.chart .x-label {
  fill: var(--muted-fg);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.chart .bar path {
  fill: var(--chart-bar);
  transition: fill 0.12s;
}

.chart .bar:hover path {
  fill: var(--chart-bar-hover);
}

.chart .bar .hit {
  fill: transparent;
}

.chart-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted-fg);
}

/* ===== Таблицы ===== */
/* Только горизонтальный скролл для широких таблиц (Сводная). Вертикально таблица
   тянется по контенту — скроллит страница, без «двойного скролла». */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted-fg);
  font-weight: 580;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background 0.1s;
}

tbody tr:hover {
  background: var(--surface-2);
}

th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.nowrap {
  white-space: nowrap;
}

td.muted,
.muted {
  color: var(--muted-fg);
}

/* Сравнение сумм: цвет — дополнение к символу (✅/❌/❗️) */
.cmp-ok {
  color: var(--success);
  white-space: nowrap;
}

.cmp-bad {
  color: var(--danger);
  white-space: nowrap;
}

.cmp-warn {
  color: var(--muted-fg);
  white-space: nowrap;
}

/* ===== Данные чека (раскрываемые) ===== */
details.vision {
  max-width: 360px;
}

details.vision summary {
  cursor: pointer;
  color: var(--primary);
  user-select: none;
  white-space: nowrap;
}

details.vision[open] summary {
  margin-bottom: 6px;
}

details.vision pre {
  margin: 0;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted-fg);
}

/* ===== Tooltip графиков ===== */
.chart-tip {
  position: fixed;
  z-index: 100;
  min-width: 168px;
  max-width: 270px;
  padding: 11px 13px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  pointer-events: none;
}

.chart-tip-head {
  font-weight: 680;
  color: var(--heading);
  margin-bottom: 7px;
}

.chart-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
  color: var(--muted-fg);
}

.chart-tip-row b {
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-tip-total {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  color: var(--fg);
}

/* ===== Кнопки ===== */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 560;
  font-size: 13px;
  line-height: 1;
  min-height: 34px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}

.btn:hover {
  background: var(--muted);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-toolbar {
  min-height: 38px;
  padding: 0 14px;
}

.btn-row {
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

.btn-ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.btn-ok:hover {
  background: var(--success-wash);
}

.btn-bad {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.btn-bad:hover {
  background: var(--danger-wash);
}

/* Колонка действий: кнопки столбиком */
.row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 112px;
}

#receipts-body.is-busy .btn {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Бейджи статуса чека ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-ok {
  color: var(--success);
  background: var(--success-wash);
}

.badge-bad {
  color: var(--danger);
  background: var(--danger-wash);
}

.badge-pending {
  color: var(--muted-fg);
  background: var(--muted);
}

/* ===== Inline-редактирование строки чека ===== */
.edit-input {
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  width: 112px;
}

.edit-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.edit-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-wash);
}

td.num .edit-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Реестр вывода: 12 колонок с адресом кошелька (42 символа) и тремя inline-инпутами
   по 112px раздували таблицу за правый край окна. Раскладку задаёт colgroup, а не
   контент: ширины в процентах, длинные значения обрезаются многоточием (полное —
   в title). min-width оставляет горизонтальный скролл только на узких экранах. */
.wd-table {
  table-layout: fixed;
  /* Ниже этой ширины 7%-колонки перестают вмещать дату «28.07.2026» и сумму — тогда
     лучше горизонтальный скролл, чем обрезанные даты и цифры. */
  min-width: 1360px;
}

.wd-table th,
.wd-table td {
  padding: 9px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-table td .edit-input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
}

.wd-table code.mask {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Реестр вывода: итоговая сумма разошлась с той, что пришла из БД Солара — значит её
   поправил казначей (в листе это колонки J и правка F). Не ошибка, но должна быть видна. */
td.is-edited {
  color: var(--primary);
}

/* План/факт: строки не из расходного реестра — вычет пополнений и вывод средств.
   Отделяем их визуально, потому что считаются они из других источников. */
.pivot tr.row-deposits td,
.pivot tr.row-withdrawals td {
  color: var(--muted-fg);
  font-style: italic;
}

.pivot th:first-child,
.pivot td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

/* Подпись под тулбаром: объясняет соглашения таблицы, а не статус загрузки */
.hint {
  margin: 0 0 12px;
  color: var(--muted-fg);
  font-size: 13px;
  max-width: 92ch;
}

/* ===== Сводная: sticky первая колонка ===== */
.svodnaya thead th {
  z-index: 2;
}

.svodnaya th.sticky-col,
.svodnaya td.sticky-col {
  position: sticky;
  left: 0;
  background-color: var(--surface);
  white-space: nowrap;
}

.svodnaya td.sticky-col {
  z-index: 1;
}

.svodnaya thead th.sticky-col {
  z-index: 3;
}

.svodnaya tr.row-total td {
  background-color: var(--primary-wash);
  font-weight: 680;
  color: var(--heading);
}

.svodnaya tr.row-total td.sticky-col {
  background-color: var(--surface);
  background-image: linear-gradient(var(--primary-wash), var(--primary-wash));
}

.svodnaya tbody tr:hover td.sticky-col {
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
}

/* ===== Сводная: переключатель видов, сортировка ===== */
.seg {
  display: inline-flex;
  flex-wrap: wrap; /* 5 режимов аналитики не должны давать всей странице горизонтальный скролл на мобильном */
  gap: 3px;
  padding: 4px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-self: flex-end;
}

.seg-btn {
  padding: 8px 15px;
  font: inherit;
  font-weight: 560;
  font-size: 13.5px;
  color: var(--muted-fg);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.seg-btn:hover {
  color: var(--fg);
}

.seg-btn.is-active {
  color: var(--heading);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.panel-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted-fg);
}

.hint-pending {
  color: var(--danger);
  font-weight: 600;
}

.svodnaya th.sortable {
  cursor: pointer;
  user-select: none;
}

.svodnaya th.sortable:hover {
  color: var(--primary);
}

/* Есть загруженные, но не принятые чеки */
.svodnaya td.cell-pending {
  background: var(--danger-wash);
  box-shadow: inset 2px 0 0 var(--danger);
}

/* ===== Мелкие экраны ===== */
@media (max-width: 640px) {
  .topbar-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .tabs {
    margin-left: 0;
    width: 100%;
    order: 3;
  }

  .toolbar-meta {
    margin-left: 0;
  }

  .tile-value {
    font-size: 22px;
  }
}

/* ===== Кнопка primary + textarea (для форм новостей/настроек) ===== */
.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-primary:active {
  background: var(--primary-active);
}

textarea,
.textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
  width: 100%;
}
textarea:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ===== Новости (админка) ===== */
.news-layout {
  display: grid;
  grid-template-columns: minmax(360px, 460px) 1fr;
  gap: 20px;
  align-items: start;
}
.news-composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.news-composer .field {
  gap: 6px;
}
.news-aud {
  width: 100%;
}
.news-aud .seg-btn {
  flex: 1;
  text-align: center;
}
.news-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
}
.picker-search {
  width: 100%;
}
.picker-search .input {
  width: 100%;
}
.picker-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.picker-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.picker-item:hover {
  background: var(--muted);
}
.picker-item input {
  margin: 0;
  accent-color: var(--primary);
  flex: none;
  align-self: center;
}
.picker-item-main {
  font-weight: 500;
  color: var(--fg);
}
.picker-item-sub {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted-fg);
}
.picker-meta {
  font-size: 12.5px;
  color: var(--muted-fg);
  font-weight: 550;
}
.news-tg-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
}
.news-tg-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  flex: none;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.news-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.news-item-title {
  font-size: 15px;
  font-weight: 640;
  color: var(--heading);
}
.news-item-meta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted-fg);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.news-item-body {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.badge-info {
  color: var(--primary);
  background: var(--primary-wash);
}
.badge-info::before {
  display: none;
}

/* ===== Настройки ===== */
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  gap: 20px;
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.settings-row .field {
  flex: 1 1 160px;
}
.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
}
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s;
  position: relative;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track {
  background: var(--primary);
}
.switch input:checked + .switch-track::after {
  transform: translateX(17px);
}
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px var(--ring);
}

@media (max-width: 820px) {
  .news-layout {
    grid-template-columns: 1fr;
  }
  .news-composer {
    position: static;
  }
}

/* ===== Ставка «к выплате» в таблице сотрудников ===== */
.rate-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rate-input {
  width: 72px;
  min-height: 32px;
  padding: 5px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rate-msg {
  font-size: 12px;
  min-width: 14px;
  color: var(--muted-fg);
}
.rate-msg.is-ok { color: var(--success); font-weight: 700; }
.rate-msg.is-err { color: var(--danger); }

/* ===== Рассылка / запуски / логи / кеш (домен ЗП) ===== */

/* Чекбоксы выбора сотрудников */
.col-check {
  width: 40px;
  text-align: center;
}
.col-check input,
.mailing-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}

.mailing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mailing-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mailing-force {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
}
.mailing-force input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  flex: none;
}

.mailing-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mailing-run-head .card-title {
  margin: 0;
}

/* Счётчики запуска (sent/errors/skipped/total) */
.run-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.counter-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.counter-label {
  font-size: 11.5px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
}
.counter-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  margin-top: 4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.clickable-row {
  cursor: pointer;
}

.panel-hint code,
.mailing-run code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* Кеш: строки состояния */
.cache-info {
  display: flex;
  flex-direction: column;
}
.cache-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.cache-row:last-child {
  border-bottom: none;
}
.cache-k {
  color: var(--muted-fg);
  font-size: 13.5px;
}
.cache-v {
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ===== Аналитика ===== */
.analytics-filters {
  margin-top: -6px;
}
.an-chart-wrap {
  position: relative;
  height: 340px;
}
.an-chart-wrap canvas {
  max-width: 100%;
}
.an-rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.an-rule-head .card-title {
  margin: 0;
}
.an-rule-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-fg);
  background: var(--muted);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.an-emp-actions {
  margin-bottom: 14px;
}

/* Широкие таблицы аналитики: sticky-первая-колонка наследуется от .svodnaya;
   здесь только страховка минимальной ширины числовых колонок. */
.analytics-table td.num,
.analytics-table th.num {
  min-width: 88px;
}

/* ===== Настройки: подсекции и предпросмотр письма ===== */
.settings-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.settings-sub-title {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
}
/* Выбор получателей авто-рассылки (режим «только выбранным») */
.rcp-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.rcp-toolbar input[type='search'] {
  flex: 1 1 240px;
  min-width: 200px;
}
.rcp-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.rcp-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13.5px;
}
.rcp-item:last-child { border-bottom: none; }
.rcp-item:hover { background: var(--surface-2); }
.rcp-item input { cursor: pointer; }
.rcp-item-fio { font-weight: 500; }
.rcp-item-meta { color: var(--muted-fg); font-size: 12.5px; }
.rcp-item-meta + .rcp-item-meta::before { content: '·'; margin-right: 6px; }

.email-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
}
.email-preview-label {
  font-size: 11.5px;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
  margin-bottom: 8px;
}
.email-preview-subject {
  font-weight: 640;
  color: var(--heading);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.email-preview-body {
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.5;
}
.email-preview-body p {
  margin: 0 0 10px;
}
.email-preview-body hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ===== Доступность: уважение к prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==============================================================
   Платежи — новые компоненты поверх дизайн-системы (theme.css).
   Ничего нового в токенах, только раскладки.
   ============================================================== */

/* Строка действий над таблицей (кнопки экспорта/синхронизации/новой заявки) */
.exp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Подпись под значением тайла + цветовые модификаторы KPI-тайлов */
.tile-sub {
  margin-top: 5px;
  font-size: 12px;
  color: var(--subtle-fg);
  font-variant-numeric: normal;
}
.tile-warn .tile-value,
.tile-value.tile-warn { color: var(--warning); }
.tile-bad .tile-value,
.tile-value.tile-bad { color: var(--danger); }

/* Переключатель охвата «что считаем расходом» (Реестр платежей) */
.scope-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
}
.scope-label { font-weight: 600; color: var(--heading); }
.scope-chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--fg);
}
.scope-chk input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
  flex: none;
}
.scope-chk input:disabled + span { color: var(--muted-fg); }
.scope-hint {
  margin-left: auto;
  color: var(--subtle-fg);
  font-size: 12.5px;
  max-width: 44ch;
}

/* Маскированные реквизиты получателя */
code.mask {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-fg);
  background: var(--muted);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Сумма заявки/черновика в реестре — курсивом, в отличие от проведённого платежа */
.pay-amt-request { font-style: italic; color: var(--muted-fg); }

/* Бейдж «не в листе» и т.п. */
.badge-warn {
  color: var(--warning);
  background: var(--warning-wash);
}

/* Подсветка строк реестра по состоянию */
tr.row-conflict td:first-child { box-shadow: inset 2px 0 0 var(--danger); }
tr.row-draft td:first-child { box-shadow: inset 2px 0 0 var(--border-strong); }
tr.row-internal td { color: var(--muted-fg); }
tr.row-internal td:first-child { box-shadow: inset 2px 0 0 var(--border-strong); }
tr.row-noarticle td:first-child { box-shadow: inset 2px 0 0 var(--warning); }

/* ===== Платежи: фильтры колонок (реестр) ===== */
/* Сортируемые заголовки — как .svodnaya th.sortable, но не только там: реестр платежей
   использует ту же клик-по-тексту семантику */
#payr-thead th.sortable {
  cursor: pointer;
  user-select: none;
}
#payr-thead th.sortable:hover .th-label { color: var(--primary); }
.th-sort-ind {
  display: inline-block;
  min-width: 10px;
  color: var(--primary);
}

/* Кнопка-«воронка» в заголовке — открывает поповер фильтра колонки */
.th-filter-btn {
  border: none;
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
  font-size: 11px;
  margin-left: 4px;
  padding: 1px 3px;
  border-radius: 4px;
  vertical-align: middle;
  position: relative;
}
.th-filter-btn:hover { background: var(--surface); color: var(--fg); }
.th-filter-btn.is-active { color: var(--primary); }
.th-filter-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 9.5px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
}

/* Поповер фильтра — один общий контейнер (см. #payr-filter-pop в index.html), позиционируется
   в JS через position:fixed от кнопки-триггера — не зависит от overflow у .table-wrap */
.col-filter-pop {
  position: fixed;
  z-index: 50;
  width: 260px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  gap: 8px;
}
.col-filter-head {
  font-weight: 640;
  font-size: 12.5px;
  color: var(--heading);
}
.col-filter-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  font-size: 12.5px;
}
.col-filter-list {
  overflow-y: auto;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.col-filter-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 4px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.col-filter-item:hover { background: var(--surface-2); }
.col-filter-item input { flex: none; }
.col-filter-empty { padding: 6px 4px; font-size: 12.5px; }
.col-filter-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.col-filter-actions .btn-primary { margin-left: auto; }

/* Итоговая строка в обычных (не «Сводная») таблицах аналитики платежей */
tr.row-total td {
  background-color: var(--primary-wash);
  font-weight: 640;
  color: var(--heading);
}
tbody tr.row-total:hover td { background-color: var(--primary-wash); }

/* Дельты в таблице сверки (качество данных) */
.cell-ok { color: var(--success); font-weight: 600; }
.cell-warn { color: var(--warning); font-weight: 600; }

/* Горизонтальные бары структуры расходов (Аналитика → Структура) */
.exp-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.exp-bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr 116px 56px;
  align-items: center;
  gap: 14px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  transition: background 0.1s;
}
.exp-bar-row:hover { background: var(--surface-2); }
.exp-bar-name {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-bar-track {
  height: 10px;
  background: var(--muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 60px;
}
.exp-bar-track i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--chart-bar);
}
.exp-bar-rest .exp-bar-track i { background: var(--border-strong); }
.exp-bar-rest .exp-bar-name { color: var(--muted-fg); }
.exp-bar-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  color: var(--heading);
  white-space: nowrap;
}
.exp-bar-share {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
  font-size: 12.5px;
}

/* Объяснение трёх режимов синхронизации */
.mode-seg { margin-bottom: 18px; }
.mode-explain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.mode-explain-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.mode-explain-item.is-current {
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: var(--primary-soft);
}
.mode-explain-item b {
  color: var(--heading);
  font-weight: 620;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mode-explain-item p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted-fg);
  line-height: 1.5;
}
.mode-step {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 640;
}
.mode-explain-item.is-current .mode-step {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-fg);
}

/* Карточка конфликта синхронизации */
.conflict {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-2);
  margin-top: 14px;
}
.conflict:first-child { margin-top: 0; }
.conflict-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.conflict-head b { color: var(--heading); font-weight: 620; }
.conflict-head .muted { font-size: 12.5px; margin-top: 2px; }
.conflict-head code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 5px;
}
.conflict .table-wrap { background: var(--card); border: 1px solid var(--border); }
.conflict-a { color: var(--warning); font-weight: 560; }
.conflict-b { color: var(--primary); font-weight: 560; }
.conflict .row-actions { flex-direction: row; min-width: 0; flex-wrap: wrap; }
.conflict-manual {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.conflict-manual input {
  width: 140px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: 12.5px;
}

/* Модалки заявки/оплаты */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 5vh;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.modal-head .card-title { margin: 0; }

/* Сводка заявки в модалке оплаты */
.req-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13.5px;
}
.req-summary b { color: var(--heading); }
.req-summary .badge { align-self: flex-start; }

/* Счётчик заявок на под-вкладке */
.subtab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 5px;
  border-radius: var(--radius-pill);
  background: var(--primary-wash);
  color: var(--primary);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 820px) {
  .exp-bar-row { grid-template-columns: 1fr 92px; }
  .exp-bar-track, .exp-bar-share { display: none; }
  .scope-hint { margin-left: 0; }
}

/* ===== RBAC: блок пользователя в шапке ===== */
.user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  font-size: 13px;
}

.user-name {
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
}

/* ===== RBAC: экран входа (оверлей поверх приложения — 401 или после logout) ===== */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}

.login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 32px 28px;
}

.login-card .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin: 0 auto 14px;
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.login-sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--muted-fg);
}

.login-card .field {
  text-align: left;
  margin-bottom: 12px;
}

.login-actions .btn-primary {
  width: 100%;
}

.login-hint {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted-fg);
}

/* ===== RBAC: раздел «Пользователи» ===== */
.roles-check {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.roles-check label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.roles-check-inline {
  flex-direction: column;
  gap: 5px;
}

.roles-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.usr-basic-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Предупреждение вкладки «План/факт»: часть пополнений ещё не разнесена по статьям,
   а значит в куб они не попали. Тон между info и danger — это не ошибка, а незавершённая
   работа бухгалтерии (в теме отдельного класса для warning не было). */
.alert--warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 26%, transparent);
  color: color-mix(in srgb, var(--warning) 72%, var(--fg));
}

/* Пояснение под рядом плиток */
.tiles-note {
  margin-top: -6px;
}

/* Зеркала БД Солара на вкладке синхронизации: два одинаковых блока рядом */
.solar-mirrors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.solar-mirror {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface-2);
}

.solar-mirror-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.solar-mirror p {
  margin: 0 0 10px;
  font-size: 12.5px;
}

.switch-row--inline {
  margin: 0;
  font-size: 12.5px;
}