/* «Малахит» — дизайн-система сервиса (описание: DESIGN.md).
   Холодный почти белый фон с мятным отливом, белые карточки с крупным скруглением и мягкой
   тенью, один насыщенный малахитовый зелёный: главная кнопка, кольцо, узлы пути, галочки.
   Узкий техно-капс Tektur — заголовки, мелкие подписи с разрядкой и крупные цифры; Onest — текст.
   Путь документа — дорожная карта из пронумерованных кругов. */

/* =========================================================================
   Шрифты (свои файлы, лицензия SIL OFL — fonts/*.OFL.txt)
   ========================================================================= */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/tektur-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/tektur-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Токены
   ========================================================================= */

:root {
  /* поверхности */
  --ground: #f0f4f1;          /* фон страницы: почти белый, мятный отлив */
  --ground-deep: #e4ebe6;     /* дорожка кольца и полос, подложка кнопок-призраков */
  --surface: #ffffff;         /* карточки */
  --paper: var(--surface);
  --surface-2: #f6f9f7;       /* заливка полей, шапки таблиц */
  --surface-hover: #f2f8f4;   /* строка и пункт под курсором */

  /* текст и линии */
  --ink: #14201a;
  --ink-2: #56635b;           /* вторичный текст, подписи — 6.3:1 к белому */
  --placeholder: #6b7770;     /* 4.7:1 к белому */
  --line: #e1e9e4;            /* рамка карточек */
  --line-soft: #ebf1ed;       /* разделители строк */
  --line-strong: #cbd6cf;     /* рамки кнопок, пустые узлы пути */
  --line-input: #86948c;      /* рамка поля ввода, 3.2:1 к белому */

  /* акцент: малахит */
  --accent: #00864f;          /* главная кнопка, кольцо, узлы; белый текст на нём 4.6:1 */
  --accent-hover: #00744a;
  --accent-press: #006640;
  --accent-bright: #19c37d;   /* блик кольца, свечение текущего шага — только графика */
  --accent-soft: #e2f6ea;     /* активная таблетка, пройденный шаг, плашки */
  --accent-soft-2: #c9ecd7;
  --accent-ink: #0a6640;      /* текст на бледно-зелёном — 6.2:1 */
  --focus: #00864f;
  --link: #0a6a43;
  --link-hover: #00502f;

  /* состояния */
  --ok: var(--accent);
  --ok-ink: var(--accent-ink);
  --ok-soft: var(--accent-soft);
  --ok-edge: var(--accent-soft-2);
  --warn: #b45309;            /* частичная оплата: текст 5:1 */
  --warn-bright: #f59e0b;     /* частичная оплата: графика */
  --warn-ink: #92400e;
  --warn-soft: #fdf1dc;
  --warn-edge: #f5d39a;
  --danger: #c2412d;
  --danger-ink: #a8301d;
  --danger-soft: #fdecea;
  --danger-edge: #f3b9b0;
  --info: #0b6e86;            /* «акцентная» плашка: статус УПД — бирюза рядом с малахитом */
  --info-soft: #e0f2f6;
  --info-edge: #b4dfe9;

  /* путь документа */
  --rail: var(--line-strong);
  --rail-done: var(--accent);

  /* типографика: Onest — текст и данные, Tektur — заголовки, подписи капсом, крупные цифры */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Tektur", "Onest", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 23px;
  --fs-2xl: 30px;

  /* отступы: шаг 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* форма */
  --r-xs: 6px;              /* галочки, код */
  --r-sm: 12px;             /* пункты меню, строки подсказок, поля редактора позиций */
  --r-ctl: 14px;            /* поля ввода, пункты навигации */
  --r-inner: 16px;          /* внутренние панели: сообщения, меню, заметки, строки «Обзора» */
  --r-card: 22px;           /* карточки */
  --r-float: 28px;          /* плавающий каркас: боковая панель, нижняя панель, вход */
  --r-pill: 999px;          /* кнопки, таблетки, плашки */
  --radius: var(--r-ctl);
  --radius-sm: var(--r-sm);
  --control-h: 40px;
  --control-h-sm: 32px;
  --shadow-card: 0 1px 2px rgba(20, 52, 36, 0.04), 0 10px 28px -14px rgba(20, 52, 36, 0.16);
  --shadow-pop: 0 18px 40px -12px rgba(20, 52, 36, 0.28), 0 2px 8px rgba(20, 52, 36, 0.06);
  --shadow-float: 0 14px 34px -10px rgba(20, 52, 36, 0.26), 0 2px 6px rgba(20, 52, 36, 0.06);
  --shadow-accent: 0 8px 18px -6px rgba(0, 134, 79, 0.5);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* каркас */
  --sidebar-w: 248px;
  --tabbar-h: 64px;
  --tabbar-gap: 12px;
  --above-tabbar: calc(var(--tabbar-h) + var(--tabbar-gap) + 44px + env(safe-area-inset-bottom, 0px));

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 3.75 4-3.75' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-sm: 36px; }
}

/* =========================================================================
   Основа и поверхности браузера
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  margin: 0;
  font: var(--fs-base)/1.5 var(--font);
  font-feature-settings: "tnum" 0;
  color: var(--ink);
  background: var(--ground);
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft-2); color: var(--ink); }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--link-hover); text-decoration: underline; }

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  font-stretch: 82%;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hl { color: var(--accent); }
h2 { font-size: var(--fs-md); line-height: 1.3; margin: 0 0 var(--sp-3); font-weight: 600; }
h3 { font-size: var(--fs-md); line-height: 1.35; margin: var(--sp-6) 0 var(--sp-3); font-weight: 600; }
p { margin: 0 0 var(--sp-2); }
strong { font-weight: 600; }
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

.muted { color: var(--ink-2); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
table, .items-totals, .payment-list, .doc-sum, .legend, .recent-sum { font-variant-numeric: tabular-nums; }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: -3px;
  fill: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}
.skip-link:focus, .skip-link:hover { top: var(--sp-3); text-decoration: none; color: #fff; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* =========================================================================
   Каркас: боковая панель (ноутбук), верхняя строка и нижняя панель (телефон)
   ========================================================================= */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  min-height: 100vh;
  padding: var(--sp-4) var(--sp-8) 0 var(--sp-4);
}

.sidebar {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2 * var(--sp-4));
  padding: 20px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-float);
  box-shadow: var(--shadow-card);
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 14px;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 6px rgba(0, 134, 79, 0.28)); }
.brand-name {
  font: 700 16px/1 var(--font-display);
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-amp { color: var(--accent); }

.mainnav { display: flex; flex-direction: column; gap: 2px; }
.nav-group {
  padding: 16px 12px 6px;
  font: 600 10.5px/1.2 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--placeholder);
}
.mainnav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border-radius: var(--r-ctl);
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.mainnav a .icon { width: 18px; height: 18px; color: var(--placeholder); transition: color 160ms var(--ease); }
.mainnav a:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.mainnav a:hover .icon { color: var(--ink-2); }
.mainnav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mainnav a.active .icon { color: var(--accent); }
.mainnav a.active::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--accent);
  -webkit-mask: var(--chevron-right) center / contain no-repeat;
  mask: var(--chevron-right) center / contain no-repeat;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: grid;
  gap: 4px;
}
.logout { margin: 0; }
.nav-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.nav-logout .icon { width: 18px; height: 18px; color: var(--placeholder); }
.nav-logout:hover { background: var(--danger-soft); color: var(--danger-ink); }
.nav-logout:hover .icon { color: var(--danger-ink); }

/* переключатель организации */
.menu.orgswitch > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-height: 52px;
  width: 100%;
  padding: 8px 32px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--surface-2);
  box-shadow: none;
  font-weight: 500;
  text-align: left;
}
.menu.orgswitch > summary:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.menu.orgswitch[open] > summary { border-color: var(--accent); background: var(--surface); }
.orgswitch-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.orgswitch-text { display: grid; min-width: 0; line-height: 1.25; }
.orgswitch-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.orgswitch .menu-body { min-width: 280px; }
.orgswitch-side .menu-body { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

.topbar { display: none; }
.tabbar { display: none; }

/* =========================================================================
   Выпадающие меню <details class="menu">
   ========================================================================= */

.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 34px 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 52, 36, 0.06);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--ink-2);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transition: transform 200ms var(--ease);
}
.menu > summary:hover { background: var(--surface-hover); border-color: var(--line-input); }
.menu[open] > summary { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-ink); }
.menu[open] > summary::after { transform: rotate(180deg); background: var(--accent-ink); }

.menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  max-width: 360px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-pop);
  z-index: 30;
  color: var(--ink);
  white-space: normal;
  animation: menu-in 180ms var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.menu-body form { margin: 0; }
.menu-caption {
  padding: 8px 12px 6px;
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--placeholder);
}
.menu-item {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px 8px 34px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.menu-item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.menu-item.current { font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
.menu-item.current::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--accent);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}
.menu-item-icon { display: flex; align-items: center; gap: 12px; padding-left: 12px; }
.menu-item-icon .icon { width: 18px; height: 18px; color: var(--placeholder); }
.menu-item-icon.current::before { display: none; }
.menu-item-icon.current .icon { color: var(--accent); }
.menu-item-link { color: var(--link); border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 4px; }
.menu-item-link:hover { color: var(--link-hover); }
.menu-item-danger { color: var(--danger-ink); }
.menu-item-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.menu-note { display: block; padding: 8px 12px; color: var(--ink-2); font-size: var(--fs-sm); }

/* =========================================================================
   Страница
   ========================================================================= */

.page { max-width: 1240px; width: 100%; padding: var(--sp-2) 0 64px; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  flex-wrap: wrap;
  margin: 10px 0 var(--sp-6);
}
.page-title { min-width: 0; }
.page-header .subtitle, .subtitle { color: var(--ink-2); margin-top: 8px; font-size: var(--fs-base); }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.page-header .actions:not(:has(*)) { display: none; }
.actions form { margin: 0; }

/* Карточка — главная поверхность: белая, крупное скругление, мягкая тень со смещением. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 24px;
  margin-bottom: var(--sp-5);
}
/* Заголовок карточки — мелкая подпись капсом с широкой разрядкой. */
.card > h2:first-child, .card > :first-child > h2:first-child, .card-head h2 {
  margin: 0 0 18px;
  font: 600 12px/1.3 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 18px; }
.card-head h2 { margin: 0 !important; }
.card.narrow { max-width: 560px; }
.card > :last-child { margin-bottom: 0; }

.toolbar { display: flex; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-4); }
.toolbar form { margin: 0; }

.note-line { color: var(--ink-2); font-size: var(--fs-sm); margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }
.note { margin-top: var(--sp-4); }

.facts { margin: 0 0 var(--sp-2); display: grid; gap: var(--sp-2); }
.facts > div { display: flex; gap: var(--sp-3); align-items: baseline; }
.facts dt { color: var(--ink-2); font-size: var(--fs-sm); min-width: 80px; }
.facts dd { margin: 0; }

.link-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: var(--fs-sm); }

/* --- пустой раздел ---------------------------------------------------------- */

.empty {
  padding: 48px var(--sp-6) 44px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.empty-badge {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 10px rgba(226, 246, 234, 0.55);
}
.empty-icon { width: 28px; height: 28px; }
.empty-text { max-width: 48ch; margin: 0 auto; font-size: var(--fs-md); color: var(--ink); text-wrap: pretty; }
.empty-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.empty-crystal { width: 72px; height: 72px; margin-bottom: var(--sp-4); filter: drop-shadow(0 12px 14px rgba(0, 134, 79, 0.28)); }
.empty-title { margin: 0 0 var(--sp-2); font: 600 24px/1.1 var(--font-display); font-stretch: 82%; letter-spacing: 0.02em; text-transform: uppercase; }
.empty .roadmap { max-width: 720px; margin: 32px auto 0; }

/* =========================================================================
   Вкладки настроек и таблетки-фильтры
   ========================================================================= */

.tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--sp-5);
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.tabs a:hover { color: var(--ink); background: var(--surface-hover); text-decoration: none; }
.tabs a.active { color: var(--accent-ink); background: var(--accent-soft); }
.tabs a:focus-visible { outline-offset: -2px; }
.tab-body { min-width: 0; }

/* Прокручиваемая полоса (вкладки, таблетки): затухает край, за которым есть ещё пункты. */
.more-right { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent); }
.more-left { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 36px); mask-image: linear-gradient(to right, transparent, var(--ink) 36px); }
.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 36px, var(--ink) calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) 36px, var(--ink) calc(100% - 36px), transparent); }

.pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 52, 36, 0.05);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--line-strong); text-decoration: none; }
.pill.active { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-ink); }

/* =========================================================================
   Сообщения
   ========================================================================= */

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-inner);
  margin-bottom: var(--sp-4);
  border: 1px solid transparent;
  font-weight: 500;
}
.flash-icon { width: 18px; height: 18px; margin-top: 1px; }
.flash-ok { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-ink); }
.flash-error { background: var(--danger-soft); border-color: var(--danger-edge); color: var(--danger-ink); }

/* =========================================================================
   Таблицы
   ========================================================================= */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
}
/* таблица внутри карточки — без второй рамки и тени: вложенных карточек нет */
.card .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0 -8px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  text-align: left;
}
.table thead th { vertical-align: bottom; }
.table-top td, .table-top th { vertical-align: top; }
.table th.num, .table td.num { text-align: right; }
.table thead th {
  padding-top: 14px;
  padding-bottom: 10px;
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.table tbody tr { transition: background-color 140ms var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
.table .check { width: 48px; padding-left: 18px; padding-right: 4px; }
.table input[type="checkbox"] { vertical-align: middle; }

/* Реквизиты: подписи слева, без шапки. */
.table.requisites th, .table.requisites td { vertical-align: top; }
.table.requisites th { width: 140px; color: var(--ink-2); font-weight: 400; padding-left: 8px; }
.table.requisites td { padding-right: 8px; }
.table.requisites tr:hover { background: none; }

/* =========================================================================
   Формы
   ========================================================================= */

.stack > * + * { margin-top: var(--sp-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field .req { color: var(--danger); }
.field-check label { font-weight: 500; display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: var(--fs-base); }
.field-check input { flex: none; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input:not([type]), select, textarea {
  font: inherit;
  color: inherit;
  height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-ctl);
  background: var(--surface);
  width: 100%;
  min-width: 0;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms var(--ease);
}
textarea { height: auto; min-height: var(--control-h); padding: 9px 14px; resize: vertical; line-height: 1.45; }
select {
  appearance: none;
  padding-right: 36px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 3.75 4-3.75' fill='none' stroke='%2356635b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center / 14px no-repeat;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
::placeholder { color: var(--placeholder); opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 134, 79, 0.16);
}
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }

/* Галочки и переключатели — свои: квадрат со скруглением, залитый малахитом с белой галочкой. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line-input);
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
  transform: scale(0);
  transition: transform 160ms var(--ease);
}
input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 160ms var(--ease);
}
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked,
input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate::before { -webkit-mask: none; mask: none; width: 9px; height: 2px; border-radius: var(--r-pill); transform: scale(1); }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* выбор строк в списках — круглые галочки, как отметки задач */
input[data-bulk-item], input[data-bulk-all] { width: 20px; height: 20px; border-radius: 50%; }

.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--danger); background-color: #fffafa; }
.has-error input:focus, .has-error select:focus, .has-error textarea:focus { box-shadow: 0 0 0 4px rgba(194, 65, 45, 0.16); border-color: var(--danger); }
.error { color: var(--danger-ink); font-size: 12px; font-weight: 600; }
.hint { color: var(--ink-2); font-size: 12px; line-height: 1.45; }

/* =========================================================================
   Кнопки
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 52, 36, 0.06);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--line-input); color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Главная кнопка — одна на экран: следующий шаг пути. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-press); }

.btn-strong { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-strong:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn-danger { color: var(--danger-ink); border-color: var(--danger-edge); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }

.btn-quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn-quiet:hover { background: var(--ground-deep); border-color: transparent; color: var(--ink); }

.btn-small { height: var(--control-h-sm); padding: 0 14px; font-size: var(--fs-sm); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-small.btn-icon { width: var(--control-h-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled,
.btn[disabled]:hover, .btn:disabled:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: #8a968f;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Кнопка-таблетка со стрелкой в круге — переход к следующему шагу миссии. */
.btn-pill-cta {
  height: 46px;
  padding: 0 6px 0 20px;
  gap: 14px;
  border: 1.5px solid var(--accent);
  color: var(--accent-ink);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn-pill-cta:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.cta-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform 200ms var(--ease);
}
.btn-pill-cta:hover .cta-arrow { transform: translateX(3px); }

/* Ссылка-команда: действие словом. */
.link-button {
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  line-height: 1.25;
}
.link-button:hover { color: var(--link-hover); border-bottom-style: solid; }

/* =========================================================================
   Плашки состояния — таблетки с точкой
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 9px;
  border-radius: var(--r-pill);
  background: var(--ground-deep);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: 1px;
}
.badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge-muted { background: var(--ground-deep); color: var(--ink-2); }
.badge-accent { background: var(--info-soft); color: var(--info); }
a > .badge-accent:hover, a:hover > .badge-accent { box-shadow: inset 0 0 0 1px var(--info-edge); }

/* Плашка-уровень: число шага рядом с заголовком карточки. */
.level {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.12em;
}

/* =========================================================================
   Вход
   ========================================================================= */

body.auth {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.auth-box {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-float);
  box-shadow: var(--shadow-float);
}
.auth-head { display: grid; justify-items: center; gap: 14px; margin-bottom: 6px; text-align: center; }
.auth-head .brand-mark { width: 64px; height: 64px; filter: drop-shadow(0 10px 14px rgba(0, 134, 79, 0.3)); }
.auth-head h1 { letter-spacing: 0.06em; }
.auth-body .subtitle { margin: 0 0 var(--sp-6); text-align: center; }
.auth-body .btn-block { margin-top: var(--sp-6); height: 46px; }

/* =========================================================================
   Поиск с подсказками (data-picker)
   ========================================================================= */

.picker { position: relative; }
.picker-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 25;
}
.picker-option {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.picker-option:hover { background: var(--surface-hover); }
.picker-option.active { background: var(--accent-soft); color: var(--accent-ink); }
.picker-title { min-width: 0; overflow-wrap: anywhere; }
.picker-note { color: var(--ink-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-empty { padding: 9px 12px; color: var(--ink-2); }

/* =========================================================================
   Редактор позиций (_items_editor.html)
   ========================================================================= */

.items-table { min-width: 760px; }
.items-table td { vertical-align: top; padding: 8px 6px; }
.items-table thead th { padding: 10px 6px; }
.items-table input, .items-table select { height: 36px; border-radius: var(--r-sm); padding: 0 10px; }
.items-table select { padding-right: 30px; background-position: right 10px center; }
.items-table textarea { min-height: 36px; max-height: 180px; padding: 7px 10px; border-radius: var(--r-sm); field-sizing: content; resize: none; }
.items-table tbody tr:hover { background: none; }
.item-pos { width: 40px; padding-top: 16px !important; color: var(--ink-2); font: 600 13px var(--font-display); }
.item-name { min-width: 240px; }
.item-qty { width: 92px; }
.item-unit { width: 108px; }
.item-vat { width: 100px; }
.item-price { width: 136px; }
.item-amount { width: 132px; padding-top: 16px !important; font-weight: 600; }
.item-remove { width: 48px; text-align: right; }
.item-remove .btn { color: var(--ink-2); width: 36px; height: 36px; }
.item-remove .btn:hover { color: var(--danger-ink); border-color: var(--danger-edge); background: var(--danger-soft); }
.items-table .error { margin-top: 4px; }

.items-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.items-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.items-picker { width: 320px; max-width: 100%; }
.items-picker input { height: var(--control-h-sm); border-radius: var(--r-pill); }
.items-totals { margin: 0; display: grid; gap: var(--sp-1); min-width: 280px; padding: 14px 18px; background: var(--surface-2); border-radius: var(--r-inner); }
.items-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); }
.items-totals dt { color: var(--ink-2); }
.items-totals dd { margin: 0; font-weight: 600; }
.items-totals .items-grand { order: -1; padding-bottom: var(--sp-1); }
.items-totals .items-grand dt { color: var(--ink); font: 600 12px/1.6 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.items-totals .items-grand dd { font: 500 26px/1.1 var(--font-display); font-stretch: 85%; color: var(--ink); }

/* =========================================================================
   Отбор над списком: таблетки состояний и карточка фильтров
   ========================================================================= */

.filter-bar {
  margin-bottom: var(--sp-4);
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  gap: var(--sp-3);
}
.filter-bar .field > label {
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.filter-bar .filter-search { flex: 1 1 260px; max-width: 440px; }
.filter-bar .filter-client { flex: 1 1 180px; max-width: 300px; }
.filter-bar .filter-date { flex: 0 1 158px; }
.filter-bar > .field-check { align-self: center; padding-top: 18px; }
.filter-bar .field-check label { font-size: var(--fs-sm); }
.filter-flags { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-self: center; }
.filter-actions { display: flex; gap: var(--sp-2); }
.filter-search input { padding-left: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%2356635b' stroke-width='1.5'/%3E%3Cpath d='M10.4 10.4l3.1 3.1' stroke='%2356635b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 14px center / 16px no-repeat; }
/* «Ещё фильтры»: редкие поля под кнопкой (скрипт ставит data-filter-collapse → .is-collapsible) */
.filter-extra, .filter-more { display: contents; }
.filter-toggle { display: none; }
.filter-bar.is-collapsible .filter-toggle { display: inline-flex; }
.filter-bar.is-collapsible:not(.is-open) .filter-extra { display: none; }
.filter-bar.is-open .filter-toggle { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-ink); }
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.filter-count-narrow { display: none; }

.invoice-filters .filter-search { flex: 2 1 240px; max-width: none; }
.invoice-filters .filter-client { max-width: 260px; }
.invoice-filters .field:not(.filter-search):not(.filter-client):not(.filter-date):not(.field-check) { flex: 0 1 150px; }
.invoice-filters .filter-actions { margin-left: auto; }
.invoice-filters .filter-extra-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; flex-basis: 100%; padding-top: var(--sp-3); border-top: 1px dashed var(--line); }

/* =========================================================================
   Список счетов: строки
   ========================================================================= */

.invoice-table td { vertical-align: middle; height: 60px; }
.invoice-table thead th:nth-child(2) { padding-left: 42px; text-align: left; }
.invoice-table td.doc-no { text-align: left; font-weight: 600; width: 96px; }
.invoice-table .doc-no a { color: var(--ink); font: 600 16px var(--font-display); font-stretch: 85%; letter-spacing: 0.02em; }
.invoice-table .doc-no a:hover { color: var(--accent); text-decoration: none; }
.invoice-table .doc-date { width: 110px; color: var(--ink-2); }
.invoice-table .doc-client { min-width: 180px; font-weight: 500; }
.invoice-table .doc-sum { width: 128px; font-weight: 600; }
.invoice-table tbody tr:has(input[data-bulk-item]:checked) { background: var(--accent-soft); }
.invoice-table tbody tr:has(input[data-bulk-item]:checked) td { border-bottom-color: var(--accent-soft-2); }

.glyph { width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; }
.glyph-open { color: var(--placeholder); }
.glyph-closed { color: var(--accent); }
.glyph-cancelled { color: var(--danger); }

.row-cancelled td { color: var(--ink-2); }
.row-cancelled .stop-label .badge { vertical-align: 0; }
.row-cancelled .doc-no a, .row-cancelled .doc-client, .row-cancelled .doc-sum {
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- путь в строке: оплата → УПД → отправка ---------------------------------------- */

.stop-cell { padding-left: 0 !important; padding-right: 0 !important; width: 1%; }
.invoice-table .stop-cell:nth-of-type(6) { min-width: 166px; }
.invoice-table .stop-cell:nth-of-type(7) { min-width: 176px; }
.invoice-table .stop-cell:nth-of-type(8) { min-width: 168px; padding-right: 18px !important; }

.stop { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.stop-cell .stop:not([class*="from-"]) { padding-left: 14px; }
.stop-cell .stop::before, .stop-cell .stop::after { content: ""; height: 0; border-top: 2px dashed var(--rail); }
.stop-cell .stop:not([class*="from-"])::before, .stop-cell .stop-last::after { display: none; }
.stop-cell .stop::before { flex: 0 0 4px; margin-right: -2px; }
.stop-cell .stop::after { flex: 1 1 12px; min-width: 12px; margin-left: -2px; }
.stop-cell .stop.from-done::before, .stop-cell .stop.to-done::after { border-top: 2px solid var(--rail-done); }
.stop-label { min-width: 0; font-size: var(--fs-sm); white-space: nowrap; }
.stop-done > .stop-label { color: var(--ink); font-weight: 500; }
.stop-label .share { color: var(--warn); font-weight: 700; }

/* Частичная оплата: участок «оплата → УПД» — тонкая полоса, залитая ровно на долю оплаченного
   (--share на станции); даже 1 % — заметный штрих не тоньше 3px. */
.stop-part { --fill-color: var(--warn-bright); --fill-dir: to right; }
.stop-cell .stop.stop-part::after {
  height: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--fill-dir), var(--fill-color) max(3px, var(--share, 0%)), var(--ground-deep) 0);
  flex: 1 1 32px;
  min-width: 32px;
  margin-left: 0;
}

.node {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.node-done { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.node-part {
  border-color: var(--warn-bright);
  background: conic-gradient(var(--warn-bright) var(--share, 0%), var(--surface) 0);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

/* --- путь в карточке: четыре пронумерованных шага --------------------------------- */

.route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.route .stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0 6px;
  text-align: center;
}
/* линия к следующему шагу — от края узла до края следующего */
.route .stop::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 0;
  border-top: 2px dashed var(--rail);
}
.route .stop.to-done::after { border-top: 2px solid var(--rail-done); }
.route .stop.stop-part::after {
  height: 4px;
  top: 18px;
  border-top: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--warn-bright) max(3px, var(--share, 0%)), var(--ground-deep) 0);
}
.route .stop-last::after { display: none; }
.route .node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-width: 2px;
  box-shadow: none;
  color: var(--ink-2);
  font: 600 16px/1 var(--font-display);
}
.route .node .icon { width: 18px; height: 18px; }
.route .node-done { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: none; }
.route .node-part {
  border: 0;
  color: var(--warn-ink);
  background:
    radial-gradient(closest-side, var(--surface) calc(100% - 4px), transparent calc(100% - 3.5px)),
    conic-gradient(var(--warn-bright) var(--share, 0%), var(--ground-deep) 0);
}
.route .stop-current .node-todo { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(25, 195, 125, 0.18), var(--shadow-accent); }
.route .stop-current .node-part { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.16); }
.route .stop-text { display: grid; gap: 3px; }
.route .stop-name {
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.route .stop-current .stop-name { color: var(--accent-ink); }
.route .stop-label { font-size: var(--fs-base); font-weight: 600; white-space: normal; color: var(--ink); }
.route .stop-todo .stop-label { font-weight: 500; color: var(--ink-2); }
/* Отменённый счёт: путь серый, но текст остаётся читаемым (ink-2, 6.3:1 к белому). */
.route-cancelled, .row-cancelled { --rail-done: var(--line-strong); }
.route-cancelled .stop-part, .row-cancelled .stop-part { --fill-color: var(--line-input); }
.route-cancelled .stop-label, .route-cancelled .stop-label a { color: var(--ink-2); font-weight: 500; }
.route-cancelled .node-done, .row-cancelled .node-done { border-color: var(--line-input); background: var(--ground-deep); color: var(--ink-2); box-shadow: none; }
.row-cancelled .node-done { background: var(--line-input); }
.route-cancelled .stop.stop-part::after { background: linear-gradient(to right, var(--line-input) max(3px, var(--share, 0%)), var(--ground-deep) 0); }
.route-cancelled .node-part { background: radial-gradient(closest-side, var(--surface) calc(100% - 4px), transparent calc(100% - 3.5px)), conic-gradient(var(--line-input) var(--share, 0%), var(--ground-deep) 0); color: var(--ink-2); }
.row-cancelled .node-part { border-color: var(--line-input); background: conic-gradient(var(--line-input) var(--share, 0%), var(--surface) 0); box-shadow: none; }
.route-cancelled .share, .row-cancelled .share { color: var(--ink-2); }

/* --- мини-путь: четыре точки и слово состояния («Обзор») -------------------------- */

.minipath { display: flex; align-items: center; gap: 14px; padding-left: 12px; }
.minipath-dots { position: relative; display: flex; gap: 10px; }
.minipath-dots::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-soft); }
.dot { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.dot-done { border-color: var(--accent); background: var(--accent); }
.dot-part { border-color: var(--warn-bright); background: linear-gradient(to right, var(--warn-bright) 50%, var(--surface) 50%); }
.minipath.is-cancelled .dot-done, .minipath.is-cancelled .dot-part { border-color: var(--line-input); background: var(--line-input); }

/* =========================================================================
   Выделение и панель массовых действий
   ========================================================================= */

.bulk-select-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin-top: var(--sp-3);
  padding: 10px 16px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--r-inner);
  font-weight: 500;
}
.bulk-select-filter[hidden] { display: none; }

.bulk-bar {
  position: sticky;
  bottom: var(--sp-4);
  z-index: 10;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: 10px 12px 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
.bulk-count { margin-right: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.bulk-count strong {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: var(--r-pill);
  background: var(--ground-deep);
  color: var(--ink-2);
  font-family: var(--font-display);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.bulk-form.has-selection .bulk-bar { border-color: var(--accent-soft-2); }
/* Главная кнопка одна: пока выделены строки или открыто меню панели, живое действие — там,
   а «Создать счёт» в шапке становится обычной. */
body:has(.bulk-form.has-selection) .page-header .btn-primary,
body:has(.bulk-menu[open]) .page-header .btn-primary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 52, 36, 0.06);
}
body:has(.bulk-form.has-selection) .page-header .btn-primary:hover,
body:has(.bulk-menu[open]) .page-header .btn-primary:hover { background: var(--surface-hover); }
.bulk-form.has-selection .bulk-count { color: var(--ink); }
.bulk-form.has-selection .bulk-count strong { background: var(--accent); color: #fff; }
.bulk-sep { width: 1px; height: 24px; background: var(--line); margin: 0 var(--sp-1); }
.bulk-menu-body {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  right: auto;
  width: 310px;
  display: grid;
  gap: var(--sp-3);
  padding: 16px;
}
.bulk-mode { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.bulk-mode legend { font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.bulk-mode label { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; }
.bulk-menu-body .hint { margin: 0; }
/* короткая подпись — только на телефоне */
.label-short { display: none; }

.pager { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.pager .muted { margin-right: auto; font-size: var(--fs-sm); }

/* =========================================================================
   Форма счёта
   ========================================================================= */

.invoice-head {
  grid-template-columns: minmax(150px, 220px) minmax(150px, 190px) minmax(0, 1fr) minmax(0, 1fr);
}
.invoice-head .f-number { grid-column: 1; }
.invoice-head .f-date { grid-column: 2; }
.invoice-head .f-client { grid-column: 3 / span 2; }
.invoice-head .f-contract { grid-column: 1 / span 2; }
.invoice-head .f-basis { grid-column: 3 / span 2; }
.invoice-head .f-comment { grid-column: 1 / -1; }

.command-bar {
  position: sticky;
  bottom: var(--sp-4);
  z-index: 10;
  margin-top: var(--sp-5);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}

/* =========================================================================
   Карточка счёта
   ========================================================================= */

.doc-state {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  gap: var(--sp-5) 48px;
  align-items: center;
  margin-bottom: var(--sp-5);
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.doc-state-head { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.doc-state-head .glyph { width: 26px; height: 26px; margin: 0; }
.doc-state .doc-sum { font: 500 40px/1.05 var(--font-display); font-stretch: 85%; letter-spacing: 0; white-space: nowrap; }
.doc-state .doc-sum .unit { display: inline-block; font: 500 var(--fs-base) var(--font); color: var(--ink-2); letter-spacing: 0; }
.doc-state.is-cancelled .doc-sum { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.doc-state-head .muted { flex-basis: 100%; font-size: var(--fs-sm); }

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-5);
  align-items: start;
}
.doc-side .card { padding: 22px 22px 22px; }
.doc-main > .card:last-child, .doc-side > .card:last-child { margin-bottom: 0; }
.side-form { display: grid; gap: var(--sp-3); }
.side-form .btn-block { margin-top: var(--sp-1); }
/* прилипшая кнопка следующего шага — только на телефоне (ниже) */
.next-step-dock { display: none; }
.items-view tfoot .total-row td { font-size: var(--fs-md); }
.payment-summary { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.payment-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.payment-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px 4px 8px 12px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border-radius: var(--r-ctl);
}
.payment-list form { margin: 0; }
.payment-list .num { font-weight: 600; }
.payment-doc { min-width: 0; overflow-wrap: anywhere; }
.doc-side h3 { margin-top: var(--sp-5); font: 600 12px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }

/* =========================================================================
   Обзор: кольцо месяца, быстрые действия, миссия, последние счета
   ========================================================================= */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: var(--sp-5);
}
.overview > .card { margin: 0; }
.mission-card, .recent-card { grid-column: 1 / -1; }

.month-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.month-empty { margin: 0; color: var(--ink-2); font-size: var(--fs-md); max-width: 46ch; }

.ring { position: relative; width: 200px; height: 200px; flex: none; }
.ring-svg { display: block; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--ground-deep); stroke-width: 11; }
.ring-fill {
  fill: none;
  stroke: url(#ring-gradient);
  stroke-width: 11;
  stroke-linecap: round;
  animation: ring-draw 900ms var(--ease) both;
}
@keyframes ring-draw { from { stroke-dasharray: 0 100; } }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.ring-value { font: 400 54px/1 var(--font-display); font-stretch: 78%; color: var(--ink); }
.ring-unit { font-size: 0.5em; font-weight: 500; margin-left: 3px; color: var(--accent); }
.ring-caption { font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }

.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; }
.legend-item dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.legend-item dd { margin: 8px 0 0; }
.legend-value { font: 400 26px/1.05 var(--font-display); font-stretch: 85%; color: var(--ink); }
.legend-item .unit { color: var(--ink-2); font-size: var(--fs-sm); }
.legend-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.legend-mark { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.mark-track { background: var(--ground-deep); box-shadow: inset 0 0 0 2px var(--line-strong); }
.mark-fill { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.legend-glyph { width: 14px; height: 14px; color: var(--ink-2); }
.legend-glyph-ok { color: var(--accent); }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
.quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-radius: var(--r-inner);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.25;
  text-align: center;
}
.quick:hover { color: var(--ink); text-decoration: none; }
.quick-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.quick-circle .icon { width: 24px; height: 24px; }
.quick:hover .quick-circle { transform: translateY(-3px); background: var(--accent-soft-2); box-shadow: 0 10px 18px -10px rgba(0, 134, 79, 0.55); }
.quick-main .quick-circle { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.quick-main:hover .quick-circle { background: var(--accent-hover); }
.quick-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--warn);
  color: #fff;
  font: 700 12px/20px var(--font);
  text-align: center;
}
.quick-note { margin: 22px 0 0; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-inner); color: var(--ink-2); font-size: var(--fs-sm); }

.mission-goal { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: 16px; }
.mission-score { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.card > .mission-goal > h2.mission-name, .mission-name {
  margin: 0;
  color: var(--ink);
  font: 600 24px/1.1 var(--font-display);
  font-stretch: 80%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mission-percent { font: 400 40px/0.9 var(--font-display); font-stretch: 78%; white-space: nowrap; }
.meter-svg { display: block; width: 100%; height: 12px; overflow: visible; }
.meter-track { fill: var(--ground-deep); }
.meter-fill { fill: var(--accent); animation: meter-grow 900ms var(--ease) both; }
@keyframes meter-grow { from { width: 0; } }
.mission-note { margin: 12px 0 28px; color: var(--ink-2); font-size: var(--fs-sm); }

.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roadmap-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; text-align: center; }
.roadmap-step::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 0;
  border-top: 2px dashed var(--rail);
}
.roadmap-step:last-child::after { display: none; }
.roadmap-step.is-done::after { border-top: 2px solid var(--accent); }
.roadmap-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 16px/1 var(--font-display);
}
.roadmap-node .icon { width: 18px; height: 18px; }
.is-done .roadmap-node { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.is-current .roadmap-node { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(25, 195, 125, 0.18), var(--shadow-accent); }
.roadmap-name { font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.is-current .roadmap-name { color: var(--accent-ink); }
.roadmap-value { font-weight: 600; color: var(--ink); }
.mission-card .btn-pill-cta { margin-top: 28px; }

.recent-list { list-style: none; margin: 0 -12px; padding: 0; }
.recent-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto 236px;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px;
  border-radius: var(--r-inner);
  color: var(--ink);
  transition: background-color 140ms var(--ease);
}
.recent-list li + li .recent-row { box-shadow: 0 -1px 0 var(--line-soft); }
.recent-row:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.recent-no { font: 600 16px/1.2 var(--font-display); font-stretch: 85%; letter-spacing: 0.02em; white-space: nowrap; }
.recent-main { display: grid; min-width: 0; }
.recent-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recent-date { font-size: 12px; color: var(--ink-2); }
.recent-sum { font-weight: 600; text-align: right; white-space: nowrap; }
.recent-row.is-cancelled .recent-no, .recent-row.is-cancelled .recent-client, .recent-row.is-cancelled .recent-sum { color: var(--ink-2); text-decoration: line-through; }

/* =========================================================================
   Остальные разделы на той же системе
   ========================================================================= */

/* --- общее: действия в строке, архивные строки, подписи-факты ------------------ */

.page-header .actions { position: relative; }
.row-actions { display: flex; gap: var(--sp-1); justify-content: flex-end; flex-wrap: nowrap; }
.row-actions form { margin: 0; }
.cell-actions { width: 1%; white-space: nowrap; }
.row-muted td { color: var(--ink-2); }
.row-muted td a:not(.btn) { color: var(--ink-2); }
.cell-title { font-weight: 600; }
.cell-title .badge { margin-left: var(--sp-2); }
.cell-sub { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.dash { color: var(--ink-2); }
.cell-wrap { overflow-wrap: anywhere; }
.error-text { color: var(--danger-ink); }
.state-on { color: var(--ink); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.btn-quiet-danger { color: var(--danger-ink); }
.btn-quiet-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.table.placeholders th { width: 150px; }

.table-wrap + .hint, .table-wrap + p, .table-wrap + .pager { margin-top: var(--sp-3); }
.table-wrap + .card, .bulk-form + .card, .pager + .card, .form-actions + .card { margin-top: var(--sp-6); }
.card .table-wrap + h3 { margin-top: var(--sp-6); }

/* Подпись над значением: реквизиты в боковой панели и строки УПД. */
.facts-stack { margin: 0; display: grid; gap: 0; }
.facts-stack > div { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.facts-stack > div:first-child { padding-top: 0; }
.facts-stack > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts-stack dt { color: var(--ink-2); font-size: var(--fs-xs); margin-bottom: 2px; }
.facts-stack dd { margin: 0; overflow-wrap: anywhere; }

/* Состояние документа в одну строку: «Статус», «Отгрузка», «Клиенту» под суммой. */
.state-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.state-facts dt { font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.state-facts dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.state-facts dd.is-todo { font-weight: 500; color: var(--ink-2); }
.state-facts dd a { font-weight: 600; }

/* Подзаголовок со ссылкой. */
.subtitle a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.subtitle a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.subtitle .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.doc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-5); }
.doc-pair > .card { margin-bottom: 0; }
.related { display: flex; gap: var(--sp-1) var(--sp-4); flex-wrap: wrap; margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); font-size: var(--fs-sm); }

/* --- поле выбора файла --------------------------------------------------------- */

input[type="file"] { font: inherit; font-size: var(--fs-sm); color: var(--ink-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  height: var(--control-h-sm);
  margin-right: var(--sp-3);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }
.image-preview {
  display: inline-block;
  padding: var(--sp-2);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-inner);
}
.image-preview img { display: block; height: 90px; width: auto; max-width: 100%; }

/* --- формы справочников ---------------------------------------------------------- */

.form-page { max-width: 940px; }
.form-grid .span-2 { grid-column: span 2; }

/* --- раскрывающаяся справка ------------------------------------------------------ */

.disclosure { margin-top: var(--sp-4); border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); }
.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--link);
  font-weight: 600;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { transition: transform 200ms var(--ease); }
.disclosure[open] > summary .icon { transform: rotate(90deg); }
.disclosure > summary:hover { color: var(--link-hover); }
.disclosure > :not(summary) { margin-top: var(--sp-2); }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-1); color: var(--ink-2); font-size: var(--fs-sm); }

/* --- сообщение о неудаче: что случилось, что сделать ------------------------------ */

.notice { display: flex; gap: var(--sp-3); align-items: flex-start; }
.notice-icon { width: 24px; height: 24px; color: var(--danger); margin-top: 1px; }
.notice-text { margin: 0 0 var(--sp-1); font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.notice-body { min-width: 0; }
.notice-body .form-actions { margin-top: var(--sp-4); }

/* --- папки клиентов и журнал УПД ------------------------------------------------ */

.folder-name { display: inline-flex; align-items: flex-start; gap: var(--sp-2); }
.folder-name .icon { margin-top: 2px; color: var(--accent); }
.folder-name a { font-weight: 600; }
.journal-table td { vertical-align: middle; height: 56px; }
.journal-table td.doc-no { font-weight: 600; white-space: nowrap; width: 96px; }
.journal-table .doc-no a { color: var(--ink); font: 600 16px var(--font-display); font-stretch: 85%; }
.journal-table .doc-no a:hover { color: var(--accent); text-decoration: none; }
.journal-table .doc-date { width: 110px; color: var(--ink-2); }
.journal-table .doc-sum { width: 136px; font-weight: 600; }
.journal-table thead th:nth-child(2) { padding-left: 42px; }
.journal-table .doc-pdf { width: 1%; text-align: right; }
.journal-table .doc-pdf a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.journal-table tbody tr:has(input[data-bulk-item]:checked) { background: var(--accent-soft); }
.journal-table tbody tr:has(input[data-bulk-item]:checked) td { border-bottom-color: var(--accent-soft-2); }
.sent-mark { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: var(--fs-sm); }
.sent-mark .node { width: 12px; height: 12px; }

/* --- акт сверки: две половины ------------------------------------------------------ */

.act-table :not(.half-client) + .half-client { border-left: 1px solid var(--line); }
.act-table tbody .half-client, .act-table tfoot .half-client { background: var(--surface-2); color: var(--ink-2); }
.act-table tfoot td { font-weight: 600; }
.act-debt { margin: var(--sp-5) 0 var(--sp-2); font: 600 var(--fs-lg)/1.3 var(--font-display); font-stretch: 85%; }

/* =========================================================================
   Этап 2: папки-плитки, профили, итоги пачек, настройки
   ========================================================================= */

/* --- подзаголовки ------------------------------------------------------------------ */

/* Подраздел внутри карточки («Добавить договор», «Смена пароля») — мелкий капс, как подпись. */
.subhead, .card h3.subhead {
  margin: var(--sp-6) 0 var(--sp-3);
  font: 600 12px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Заголовок страницы вкладки настроек («Свои организации», «Журнал писем») — лозунг поменьше h1. */
.section-title {
  margin: 0;
  font: 600 20px/1.1 var(--font-display);
  font-stretch: 80%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.tab-body > .page-header { margin-top: var(--sp-2); }
.grid-caption { margin: 0 0 var(--sp-3); color: var(--ink-2); font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.note-line-flat { margin-top: 0; }
.filter-bar .field-check > label { font: 500 var(--fs-sm)/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* --- монограмма и профиль ------------------------------------------------------------ */

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 600 16px/1 var(--font-display);
  font-stretch: 85%;
  text-transform: uppercase;
}
/* Крупная — «аватар в кольце» карточки профиля: белый зазор и малахитовое кольцо. */
.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 26px;
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent), 0 10px 20px -8px rgba(0, 134, 79, 0.45);
}
.who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.who-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.people-table td.cell-title { min-width: 240px; }
.profile { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.profile .page-title { min-width: 0; }
.profile h1 { overflow-wrap: anywhere; }
.profile-card { margin-bottom: var(--sp-2); }
.profile-facts { display: grid; gap: 4px; min-width: 0; }
.profile-facts p { margin: 0; }
.profile-name { font: 600 24px/1.1 var(--font-display); font-stretch: 82%; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.profile-note { color: var(--ink-2); font-size: var(--fs-sm); }
/* профиль клиента: три колонки чисел Tektur с подписью под ними и плашка-уровень */
.profile-client { align-items: flex-start; }
.profile-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) 28px; margin-top: 14px; }
.stat { display: grid; gap: 2px; margin: 0; }
.stat-value { font: 400 26px/1.05 var(--font-display); font-stretch: 85%; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.stat-label { color: var(--ink-2); font-size: 12px; }
.contracts-table tbody tr:first-child td { padding-top: 4px; }
/* в узкой боковой колонке круги — два на два, подписи не наезжают друг на друга */
.doc-side .quick-card .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
/* карточка УПД: сумма и плашка — в узкой колонке, путь из четырёх шагов — во всю оставшуюся ширину */
.doc-state-upd { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.doc-state-upd .route .stop-label { overflow-wrap: anywhere; }

/* --- папки клиентов — плитки ------------------------------------------------------------ */

.folder-grid {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--sp-4);
}
.folder-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.folder-tile:hover { transform: translateY(-3px); border-color: var(--accent-soft-2); box-shadow: 0 1px 2px rgba(20, 52, 36, 0.04), 0 18px 34px -16px rgba(20, 52, 36, 0.28); }
.folder-tile:has(.folder-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.folder-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.folder-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.folder-badge .icon { width: 22px; height: 22px; }
.folder-badge-lg { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-soft-2); }
.folder-badge-lg .icon { width: 28px; height: 28px; }
/* кнопка архива стоит над растянутой ссылкой плитки */
.folder-zip { position: absolute; top: 18px; right: 18px; z-index: 1; color: var(--ink-2); }
.folder-zip:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft-2); }
.folder-title { margin: 0; font-size: var(--fs-md); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.folder-link { color: var(--ink); }
.folder-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.folder-link:hover { color: var(--ink); text-decoration: none; }
.folder-link:focus-visible { outline: none; }
.folder-tile:hover .folder-link { color: var(--accent-ink); }
.folder-inn { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.folder-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--sp-3);
  margin: auto 0 0;
  padding-top: 14px;
}
.folder-count { color: var(--ink-2); font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.folder-num { margin-right: 4px; font: 400 32px/1 var(--font-display); font-stretch: 80%; letter-spacing: 0; color: var(--ink); }
.folder-last { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.period-card .toolbar { margin-bottom: var(--sp-2); }
.period-card .toolbar .field { flex: 0 1 180px; }

/* --- итог пачки (УПД, письма) ---------------------------------------------------------- */

.result-card .mission-goal { align-items: center; }
.result-card .mission-note { margin-bottom: 0; }
.card-warn { border-color: var(--warn-edge); }
.card-warn > h2:first-child { color: var(--warn-ink); }
.glyph-warn { color: var(--warn); }
.cell-reason { color: var(--ink); min-width: 220px; }
.pending-card { display: flex; align-items: center; gap: var(--sp-4); }
.pending-card p { margin: 0; color: var(--ink-2); }

/* --- сообщение о неудаче ------------------------------------------------------------------ */

.notice-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--danger-soft);
  box-shadow: 0 0 0 6px rgba(253, 236, 234, 0.6);
}
.notice-badge .notice-icon { margin: 0; }
.notice-card .notice { gap: var(--sp-4); }
.notice-card .notice-text { text-wrap: pretty; }

/* --- настройки: две колонки, состояние почты, шаблоны ------------------------------------- */

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-5);
  align-items: start;
  max-width: 1080px;
}
.settings-grid > .card, .settings-side > .card { margin-bottom: 0; }
.settings-side { display: grid; gap: var(--sp-5); }
.settings-grid + .card { margin-top: var(--sp-5); max-width: 1080px; }
.state-line { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.state-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ground-deep);
  color: var(--ink-2);
}
.state-dot .icon { width: 20px; height: 20px; }
.state-card.is-on .state-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(25, 195, 125, 0.16); }
.state-text { display: grid; gap: 2px; min-width: 0; }
.state-text .muted { font-size: var(--fs-sm); }
.state-card .btn-block { justify-content: space-between; }
.templates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }
.templates-form > .subhead:first-child { margin-top: var(--sp-2); }
.placeholders-panel { padding: 16px 18px; background: var(--surface-2); border-radius: var(--r-inner); }
.placeholders-panel .subhead { margin-top: 0; }
.placeholders { margin: 0; display: grid; gap: var(--sp-3); }
.placeholders dt { margin-bottom: 2px; }
.placeholders dd { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.log-error { margin-top: 6px; color: var(--danger-ink); font-size: 12px; line-height: 1.45; max-width: 36ch; }
.lead-row { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-4); }
.lead-row p { margin: 0; }
.lead-badge { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.lead-badge .icon { width: 22px; height: 22px; }

/* --- подпись и печать — плитки с рамкой-превью --------------------------------------------- */

.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-4); }
.image-tile { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: 18px; background: var(--surface-2); border-radius: var(--r-inner); }
.image-tile .subhead { margin: 0; }
.image-tile .image-preview { display: grid; place-items: center; min-height: 118px; background: var(--surface); }
.image-preview.is-empty { gap: 6px; padding: 16px; color: var(--ink-2); font-size: var(--fs-sm); text-align: center; }
.image-empty-icon { width: 22px; height: 22px; color: var(--placeholder); }
.image-upload { display: grid; gap: var(--sp-3); }
.image-upload .field > label { font-size: var(--fs-sm); }
.image-actions, .image-delete { margin: 0; }
.icon-up { transform: rotate(180deg); }

/* --- первый вход ---------------------------------------------------------------------------- */

.onboarding-card { margin-bottom: var(--sp-5); max-width: 940px; }
.onboarding-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 28px; }
.onboarding-crystal { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 10px 12px rgba(0, 134, 79, 0.28)); }
.onboarding-text { margin: 0; max-width: 60ch; font-size: var(--fs-md); text-wrap: pretty; }

/* --- повторяющиеся: день месяца — круг календаря ------------------------------------------- */

.day-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 500 16px/1 var(--font-display);
  font-stretch: 85%;
  box-shadow: 0 6px 12px -6px rgba(0, 134, 79, 0.6);
}
.day-circle.is-paused { background: var(--surface); color: var(--ink-2); border: 2px dashed var(--line-strong); box-shadow: none; }

/* --- акт сверки: итог одной строкой -------------------------------------------------------- */

.act-title { margin: -6px 0 var(--sp-5); font-weight: 600; font-size: var(--fs-md); text-wrap: balance; max-width: 80ch; }
.act-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 18px 20px;
  background: var(--surface-2);
  border-radius: var(--r-inner);
}
.act-summary dt { font: 600 10.5px/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.act-summary dd { margin: 6px 0 0; font: 400 26px/1.05 var(--font-display); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.act-side { display: block; margin-top: 4px; font: 500 12px/1.3 var(--font); color: var(--ink-2); }
.act-card .act-debt { margin: var(--sp-4) 0 var(--sp-5); }

/* =========================================================================
   Средние экраны
   ========================================================================= */

@media (max-width: 1280px) {
  .doc-state { grid-template-columns: minmax(0, 1fr); }
  .recent-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .recent-row .minipath { grid-column: 2 / -1; padding-left: 0; }
}

@media (max-width: 1180px) {
  .overview { grid-template-columns: minmax(0, 1fr); }
  .doc-layout, .doc-pair { grid-template-columns: minmax(0, 1fr); }
  .settings-grid, .templates-layout { grid-template-columns: minmax(0, 1fr); }
  /* карточка клиента в одну колонку: быстрые действия и контакты — сразу под шапкой */
  .client-layout .doc-side { order: -1; }
  /* шаблоны писем: подстановки — перед полями, а не после них */
  .placeholders-panel { order: -1; }
  .client-layout .doc-side .quick-card .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doc-state-upd { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Планшет и телефон: верхняя строка и плавающая нижняя панель
   ========================================================================= */

@media (max-width: 1023px) {
  .shell { display: block; padding: 0; }
  .sidebar { display: none; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 12px 0 16px;
    background: rgba(240, 244, 241, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(225, 233, 228, 0.7);
  }
  .topbar .brand { padding: 0; }
  .topbar .brand-mark { width: 32px; height: 32px; }
  .orgswitch-top { flex: 1 1 auto; min-width: 0; }
  .orgswitch-top > summary { min-height: 42px; padding: 4px 30px 4px 5px; border-radius: var(--r-pill); background: var(--surface); }
  .orgswitch-top .orgswitch-badge { width: 32px; height: 32px; }
  .orgswitch-top .orgswitch-label { font-size: var(--fs-sm); }
  .orgswitch-top .menu-body { left: 0; right: auto; max-width: calc(100vw - 32px); }
  .topbar .logout .btn { width: 42px; height: 42px; }

  .page { padding: var(--sp-3) var(--sp-4) calc(var(--above-tabbar) + 24px); max-width: none; }
  /* «Создать счёт» на телефоне — круглая кнопка в нижней панели; в шапке списка она не дублируется */
  .page-header .hide-with-tabbar { display: none; }

  .tabbar {
    position: fixed;
    left: var(--tabbar-gap);
    right: var(--tabbar-gap);
    bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    max-width: 520px;
    height: var(--tabbar-h);
    margin: 0 auto;
    padding: 0 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-float);
    box-shadow: var(--shadow-float);
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 52px;
    border-radius: var(--r-card);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    transition: background-color 160ms var(--ease), color 160ms var(--ease);
  }
  .tab .icon { width: 21px; height: 21px; }
  .tab:hover { color: var(--ink); text-decoration: none; }
  .tab.active, .tab-more.active > .tab { color: var(--accent-ink); background: var(--accent-soft); }
  .tab.active .icon, .tab-more.active > .tab .icon { color: var(--accent); }
  .tab-create {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-top: -30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 6px var(--ground), var(--shadow-accent);
    transition: transform 200ms var(--ease), background-color 200ms var(--ease);
  }
  .tab-create .icon { width: 26px; height: 26px; }
  .tab-create:hover { background: var(--accent-hover); color: #fff; }
  .tab-create:active { transform: scale(0.95); }
  .tab-more { position: static; }
  .tab-more > summary.tab { width: 100%; height: 52px; padding: 0; border: 0; border-radius: var(--r-card); background: none; box-shadow: none; font-weight: 600; display: flex; }
  .tab-more > summary.tab::after { display: none; }
  .tab-more[open] > summary.tab { background: var(--accent-soft); color: var(--accent-ink); }
  .tab-more .menu-body { top: auto; bottom: calc(100% + 44px); right: 6px; left: auto; min-width: 230px; }
}

/* =========================================================================
   Узкие экраны
   ========================================================================= */

@media (max-width: 760px) {
  h1 { font-size: 24px; }
  .page-header { margin: 4px 0 var(--sp-4); }
  .card { padding: 18px 16px 18px; border-radius: var(--r-card); }
  .card .table-wrap { margin: 0; }

  .menu-body { max-width: calc(100vw - 32px); }

  /* действия страницы — своя строка; меню «Ещё» раскрывается под ней во всю ширину */
  .page-header .actions { flex-basis: 100%; }
  .page-header .actions .menu { position: static; }
  .page-header .actions .menu-body { left: 0; right: 0; max-width: none; }

  /* таблетки — одна прокручиваемая строка */
  .pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); padding: 2px var(--sp-4) 4px; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }

  /* отбор: поиск во всю ширину, остальное — под «Ещё фильтры» */
  .filter-bar { padding: 14px; border-radius: var(--r-card); }
  .filter-bar .field { flex: 1 1 calc(50% - var(--sp-3)) !important; max-width: none !important; }
  .filter-bar .field.filter-search, .filter-bar .field.filter-client, .filter-bar > .field-check { flex: 1 1 100% !important; }
  .filter-bar > .field-check { padding-top: 0; }
  .filter-flags { flex-basis: 100%; }
  .filter-actions { margin-left: 0 !important; flex-basis: 100%; }
  .filter-actions .btn { flex: 1; }
  .filter-bar.is-collapsible:not(.is-open) .filter-more { display: none; }
  .filter-count-wide { display: none; }
  .filter-count-narrow { display: inline-grid; }
  .invoice-filters .filter-extra-row { padding-top: 0; border-top: 0; }
  .filter-bar > .btn { flex: 1 1 auto; }
  .toolbar:not(.filter-bar) > .field { flex: 1 1 160px; }

  /* список счетов — строки-блоки */
  .invoice-table, .invoice-table tbody { display: block; }
  .invoice-table thead { display: block; }
  .invoice-table thead tr { display: flex; align-items: center; }
  .invoice-table thead th { display: none; }
  .invoice-table thead th.check { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; font: 500 var(--fs-sm) var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .invoice-table thead th.check::after { content: "Выделить все на странице"; }
  /* 12 равных долей: галочка — одна, путь — три станции во всю ширину строки */
  .invoice-table tbody tr {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "check no no no date date date date sum sum sum sum"
      "check client client client client client client client client client client client"
      "pay pay pay pay upd upd upd sent sent sent sent sent";
    row-gap: 4px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .invoice-table tbody tr:last-child { border-bottom: 0; }
  .invoice-table tbody td { display: block; border: 0; padding: 0; width: auto; min-width: 0 !important; height: auto; }
  .invoice-table td.check { grid-area: check; padding: 2px 0 0; }
  .invoice-table .doc-no { grid-area: no; width: auto; }
  .invoice-table .doc-date { grid-area: date; width: auto; }
  .invoice-table .doc-sum { grid-area: sum; width: auto; font-size: var(--fs-md); }
  .invoice-table .doc-client { grid-area: client; overflow-wrap: anywhere; }
  .invoice-table .stop-cell:nth-of-type(6) { grid-area: pay; margin-top: 8px; }
  .invoice-table .stop-cell:nth-of-type(7) { grid-area: upd; margin-top: 8px; }
  .invoice-table .stop-cell:nth-of-type(8) { grid-area: sent; margin-top: 8px; padding-right: 0 !important; }
  .invoice-table .stop-cell .stop:not([class*="from-"]) { padding-left: 0; }
  .invoice-table .stop { gap: 6px; }
  .invoice-table .stop-label { white-space: nowrap; font-size: var(--fs-xs); line-height: 1.3; }
  .invoice-table .stop-cell .stop.stop-part::after { flex-basis: 24px; min-width: 24px; }
  /* слово «частично» на узкой строке говорят полоска и цвет доли; для чтения с экрана оно остаётся */
  .invoice-table .share-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .glyph { margin-right: 6px; }

  /* панель массовых действий — над нижней панелью, две строки, все команды на виду */
  /* пока ничего не выбрано, панель не занимает экран (скрипт ставит .bulk-ready; без него видна) */
  .bulk-form.bulk-ready:not(.has-selection) .bulk-bar { display: none; }
  .bulk-bar {
    bottom: var(--above-tabbar);
    gap: var(--sp-2);
    padding: 10px;
    border-radius: var(--r-card);
    animation: menu-in 200ms var(--ease);
  }
  .bulk-count { flex: 1 0 auto; order: 0; padding-left: 6px; }
  .bulk-bar > .btn { order: 1; height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
  .bulk-sep { display: none; }
  .bulk-menu { order: 2; flex: 1 1 calc(50% - var(--sp-1)); min-width: 0; position: static; }
  .bulk-menu > summary { width: 100%; padding: 0 28px 0 12px; font-size: var(--fs-sm); }
  .bulk-menu > summary::after { right: 9px; }
  .bulk-menu-body { left: 0; right: 0; bottom: calc(100% + 8px); width: auto; max-width: none; }
  .label-long { display: none; }
  .label-short { display: inline; }

  /* форма счёта */
  .invoice-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .invoice-head .f-number { grid-column: 1; }
  .invoice-head .f-date { grid-column: 2; }
  .invoice-head .f-client, .invoice-head .f-contract, .invoice-head .f-basis, .invoice-head .f-comment { grid-column: 1 / -1; }

  /* редактор позиций — строки-блоки с подписями */
  .items-editor .table-wrap { border: 0; background: none; overflow: visible; box-shadow: none; margin: 0; }
  .items-table { min-width: 0; display: block; }
  .items-table thead { display: none; }
  .items-table tbody { display: block; }
  .items-table tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px;
    grid-template-areas:
      "pos name name rm"
      "pos qty unit ."
      "pos price amount .";
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .items-editor[data-vat-payer="1"] .items-table tr {
    grid-template-areas:
      "pos name name rm"
      "pos qty unit ."
      "pos vat price ."
      "pos amount amount .";
  }
  .items-table td { display: block; padding: 0 !important; border: 0; width: auto !important; min-width: 0 !important; }
  .items-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 3px; }
  .items-table .item-pos { grid-area: pos; padding-top: 22px !important; text-align: left; }
  .items-table .item-name { grid-area: name; }
  .items-table .item-qty { grid-area: qty; }
  .items-table .item-unit { grid-area: unit; }
  .items-table .item-vat { grid-area: vat; }
  .items-table .item-price { grid-area: price; }
  .items-table .item-amount { grid-area: amount; text-align: left; padding-top: 0 !important; font-size: var(--fs-md); }
  .items-table .item-remove { grid-area: rm; padding-top: 18px !important; }
  .items-totals { width: 100%; min-width: 0; }
  .items-picker { width: 100%; }
  .items-add { width: 100%; }

  /* карточка: реквизиты в столбик, позиции строками */
  .table.requisites, .table.requisites tbody, .table.requisites tr, .table.requisites th, .table.requisites td { display: block; width: auto; }
  .table.requisites tr { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .table.requisites tr:last-child { border-bottom: 0; }
  .table.requisites th, .table.requisites td { padding: 0; border: 0; }
  .table.requisites th { font-size: var(--fs-xs); margin-bottom: 2px; }

  .items-view, .items-view tbody, .items-view tfoot { display: block; }
  .items-view thead { display: none; }
  .items-view tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-soft);
  }
  .items-view tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .items-view tbody td:nth-child(1) { flex: 0 0 24px; text-align: right; }
  .items-view tbody td:nth-child(2) { flex: 1 1 calc(100% - 30px); }
  .items-view tbody td:nth-child(3) { margin-left: 30px; }
  .items-view tbody td:nth-child(n+3):not(:last-child) { color: var(--ink-2); font-size: var(--fs-sm); }
  .items-view tbody td:nth-last-child(2)::before { content: "× "; }
  .items-view tbody td:last-child { margin-left: auto; font-weight: 600; }
  .items-view tfoot tr { display: flex; justify-content: space-between; padding: 10px 4px; }
  .items-view tfoot td { padding: 0; border: 0; }
  .items-view tfoot tr + tr td { font-weight: 400; color: var(--ink-2); }

  /* путь в карточке — вертикально: узел слева, подписи справа */
  .route { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .route .stop { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; padding: 0; text-align: left; }
  .route .stop::after { top: 46px; bottom: -14px; left: 19px; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed var(--rail); }
  .route .stop.to-done::after { border-left: 0; width: 2px; background: var(--rail-done); }
  .route .stop.stop-part::after { top: 46px; left: 18px; width: 4px; height: auto; border-left: 0; background: linear-gradient(to bottom, var(--warn-bright) max(3px, var(--share, 0%)), var(--ground-deep) 0); }
  .doc-state { padding: 20px 18px; gap: 22px; border-radius: var(--r-card); }
  .doc-state .doc-sum { font-size: 32px; }
  .payment-list li { grid-template-columns: minmax(0, 1fr) auto auto; }

  .command-bar { bottom: var(--above-tabbar); border-radius: var(--r-card); }
  .command-bar .btn { flex: 1; }

  /* карточка счёта: главное действие следующего шага прилипает над нижней панелью, но только
     ведёт к форме (ссылка-якорь): записывает оплату или УПД кнопка формы, под полями. Когда
     кнопка формы на виду, прилипшая уходит вниз (.is-away, app.js) — главная на экране одна */
  .next-step-dock {
    display: block;
    position: fixed;
    left: var(--tabbar-gap);
    right: var(--tabbar-gap);
    bottom: var(--above-tabbar);
    z-index: 15;
    max-width: 520px;
    margin: 0 auto;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), visibility 0s linear 0s;
  }
  .next-step-dock .btn { height: 50px; font-size: var(--fs-md); }
  .next-step-dock.is-away {
    transform: translateY(16px);
    opacity: 0;
    visibility: hidden;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), visibility 0s linear 220ms;
  }
  body:has(.next-step-dock) .page { padding-bottom: calc(var(--above-tabbar) + 80px); }
  /* без скрипта якорь ставит форму под верхнюю строку — оставляем место и для её заголовка */
  .side-form[id] { scroll-margin-top: 120px; }

  /* Обзор */
  .month-body { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
  .ring { width: 184px; height: 184px; }
  .legend { width: 100%; gap: 18px 16px; }
  .legend-value { font-size: var(--fs-xl); }
  /* круги — два на два: подписи целиком, между соседними не меньше 8px */
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
  .quick-circle { width: 56px; height: 56px; }
  .mission-goal { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .mission-score { width: 100%; justify-content: space-between; }
  .card > .mission-goal > h2.mission-name, .mission-name { font-size: 20px; }
  .mission-percent { font-size: 32px; }
  .roadmap-step { padding: 0 2px; }
  .roadmap-node { width: 34px; height: 34px; font-size: 14px; }
  .roadmap-step::after { top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); }
  .roadmap-name { font-size: 10.5px; letter-spacing: 0.1em; }
  .roadmap-value { font-size: var(--fs-sm); }
  .mission-card .btn-pill-cta { width: 100%; justify-content: space-between; }
  .recent-list { margin: 0 -8px; }
  .recent-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no main sum" "path path path"; gap: 8px 12px; padding: 12px 8px; }
  .recent-no { grid-area: no; align-self: start; padding-top: 1px; }
  .recent-main { grid-area: main; }
  .recent-sum { grid-area: sum; align-self: start; }
  .recent-row .minipath { grid-area: path; grid-column: 1 / -1; padding-left: 0; justify-content: space-between; }

  /* списки (клиенты, услуги, папки, шаблоны…) — строки-блоки без горизонтальной прокрутки */
  .table-stack, .table-stack tbody, .table-stack tfoot { display: block; }
  .table-stack thead { display: none; }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { display: block; padding: 0; border: 0; text-align: left; width: auto; }
  .table-stack td:first-child { flex: 1 1 100%; }
  .table-stack td.num { text-align: left; }
  .table-stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); font-size: var(--fs-xs); }
  .table-stack td.cell-empty { display: none; }
  .table-stack td.cell-actions { flex: 1 1 100%; width: auto; margin-top: var(--sp-1); }
  .table-stack .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .table-stack td.cell-end { margin-left: auto; }

  /* журнал УПД в папке клиента — как список счетов */
  .journal-table, .journal-table tbody { display: block; }
  .journal-table thead { display: block; }
  .journal-table thead tr { display: flex; align-items: center; }
  .journal-table thead th { display: none; }
  .journal-table thead th.check { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; font: 500 var(--fs-sm) var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .journal-table thead th.check::after { content: "Выделить все на странице"; }
  .journal-table tbody tr {
    display: grid;
    grid-template-columns: 40px repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "check no date sum"
      "check inv inv inv"
      "check sent sent pdf";
    row-gap: 4px;
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .journal-table tbody tr:last-child { border-bottom: 0; }
  .journal-table tbody td { display: block; border: 0; padding: 0; width: auto !important; min-width: 0; height: auto; }
  .journal-table td.check { grid-area: check; padding: 2px 0 0 14px; }
  .journal-table .doc-no { grid-area: no; }
  .journal-table .doc-date { grid-area: date; }
  .journal-table .doc-sum { grid-area: sum; font-size: var(--fs-md); }
  .journal-table .doc-invoices { grid-area: inv; font-size: var(--fs-sm); }
  .journal-table .doc-sent { grid-area: sent; margin-top: 2px; }
  .journal-table .doc-pdf { grid-area: pdf; text-align: right; margin-top: 2px; }

  /* позиции УПД — строки с подписями вместо девяти столбцов */
  .upd-items, .upd-items tbody, .upd-items tfoot { display: block; }
  .upd-items thead { display: none; }
  .upd-items tbody tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
  .upd-items tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: var(--fs-sm); color: var(--ink-2); }
  .upd-items tbody td:nth-child(1) { flex: 0 0 18px; }
  .upd-items tbody td:nth-child(2) { flex: 1 1 calc(100% - 30px); font-size: var(--fs-base); color: var(--ink); }
  .upd-items tbody td:nth-child(3) { margin-left: 28px; }
  .upd-items tbody td[data-label]::before { content: attr(data-label) " "; }
  .upd-items tbody td:last-child { flex: 1 1 100%; margin-left: 28px; color: var(--ink); font-weight: 600; font-size: var(--fs-base); }
  .upd-items.no-vat tbody td:nth-child(6), .upd-items.no-vat tbody td:nth-child(7), .upd-items.no-vat tbody td:nth-child(8) { display: none; }
  .upd-items tfoot tr { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 4px; }
  .upd-items tfoot td { padding: 0; border: 0; }
  .upd-items tfoot td:not(:first-child):not(:last-child) { display: none; }

  /* акт сверки: на экране — своя половина строками (дата и документ слева, сумма с подписью
     «Дебет» или «Кредит» справа); половина клиента пустая, она есть в PDF */
  .act-table, .act-table tbody, .act-table tfoot { display: block; }
  .act-table thead, .act-table .half-client { display: none; }
  .act-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
  .act-table tbody tr:last-child { border-bottom: 1px solid var(--line-soft); }
  .act-table tfoot tr:last-child { border-bottom: 0; }
  .act-table td { display: block; padding: 0; border: 0; font-size: var(--fs-sm); }
  .act-table td:not(.num) { grid-column: 1; }
  .act-table td.nowrap { color: var(--ink-2); font-size: 12px; }
  .act-table td.num { grid-column: 2; text-align: right; }
  .act-table td.num:empty { display: none; }
  .act-table td.num[data-label]::before { content: attr(data-label); display: block; color: var(--ink-2); font-size: 11px; font-weight: 500; }
  .act-table tfoot td { border-top: 0; }
  .result-card .mission-goal { align-items: flex-start; }

  /* этап 2: плитки папок по две, профиль компактнее, итоги в две колонки */
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .folder-tile { padding: 14px 14px 12px; gap: 4px; }
  .folder-zip { top: 14px; right: 14px; }
  .folder-badge { width: 38px; height: 38px; }
  .folder-badge .icon { width: 18px; height: 18px; }
  .folder-title { font-size: var(--fs-base); }
  .folder-inn { font-size: 12px; }
  .folder-foot { flex-direction: column; align-items: flex-start; padding-top: 10px; gap: 2px; }
  .folder-num { font-size: 26px; }
  .folder-badge-lg { width: 52px; height: 52px; }
  .profile { gap: var(--sp-4); }
  .client-layout .doc-side .quick-card .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-lg { width: 52px; height: 52px; font-size: 20px; }
  .profile-stats { gap: var(--sp-2) 20px; margin-top: 12px; }
  .stat-value { font-size: 20px; }
  .people-table td.cell-title { min-width: 0; }
  .avatar { width: 32px; height: 32px; font-size: 14px; }
  .day-circle { width: 34px; height: 34px; font-size: 14px; }
  .image-grid { grid-template-columns: minmax(0, 1fr); }
  .act-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; gap: var(--sp-4) var(--sp-3); }
  .act-summary dd { font-size: 20px; }
  .cell-reason { min-width: 0; flex: 1 1 100%; }
  .onboarding-head { align-items: flex-start; margin-bottom: 22px; }
  .onboarding-crystal { width: 40px; height: 40px; }
  .onboarding-text { font-size: var(--fs-base); }
  .pending-card { align-items: flex-start; }
  .period-card .toolbar .field { flex: 1 1 140px; }
  .period-card .toolbar > .btn { flex: 1 1 auto; }

  .form-grid .span-2 { grid-column: 1 / -1; }
  .state-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .state-facts > div:first-child { grid-column: 1 / -1; }
  .notice { gap: var(--sp-2); }
  .auth-box { padding: 28px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

@media print {
  .sidebar, .topbar, .tabbar, .actions, .form-actions, .tabs, .bulk-bar, .items-add, .item-remove, .skip-link, .next-step-dock { display: none !important; }
  .shell { display: block; padding: 0; }
  body { background: #fff; }
  .card, .table-wrap, .doc-state, .empty { box-shadow: none; border-color: var(--line-input); }
}