/* ============================================================================
   Dojeem — дизайн-система
   Один файл, без сборки. Порядок: токены → база → примитивы → компоненты →
   оболочка кабинета → публичные страницы → адаптив.
   ========================================================================= */

/* --- Шрифты ---------------------------------------------------------------
   Manrope — переменный, 400–700, подмножество latin + cyrillic + ₸ (30 КБ).
   Unbounded — только 700, он используется исключительно в дисплейных
   заголовках и крупных числах (27 КБ). Оба лежат в репозитории: на странице
   с персональными данными внешних CDN быть не должно (§7).                 */

@font-face {
  font-family: 'Manrope';
  src: url('/static/10e803d7d9/fonts/manrope.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/static/10e803d7d9/fonts/unbounded.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Основа */
  --ink:           #15171B;   /* тёмная подложка и основной текст */
  --ink-raised:    #212327;   /* активный пункт меню на тёмном */
  --ink-line:      #2E3034;
  --ink-line-2:    #3A3B3E;
  --scrim:         #2A2B2E;

  --paper:         #F5F3EF;   /* фон страницы */
  --surface:       #FFFFFF;   /* карточки и панели */
  --surface-alt:   #EFEBE2;   /* плашки-пояснения */
  --surface-warm:  #FBF7EE;   /* акцентные плашки */

  /* Текст на светлом */
  --text:          #15171B;
  --text-body:     #33322E;
  --text-note:     #3A3833;
  --text-muted:    #5F5C56;
  --text-dim:      #7A756C;
  --text-faint:    #B4AEA2;

  /* Текст на тёмном */
  --on-dark:       #F5F3EF;
  --on-dark-muted: #A8A399;
  --on-dark-dim:   #8E897F;
  --on-dark-faint: #6B665E;

  /* Границы */
  --line:          #DCD8D0;
  --line-soft:     #E2DED6;
  --line-strong:   #C9C4B9;

  /* Акцент */
  --accent:        #E4A11B;
  --accent-ink:    #15171B;   /* текст на акценте */
  --accent-deep:   #6B4E10;
  --accent-shade:  #3A2E13;

  /* Смысловые */
  --danger:        #B3452F;
  --danger-deep:   #8F3524;
  --danger-soft:   #F6E3DE;
  --success:       #2F6F52;
  --success-deep:  #1E4C38;
  --success-soft:  #DFEBE4;
  --info:          #3A6EA5;
  --info-deep:     #274B72;
  --info-soft:     #DFE7F2;
  --warn-soft:     #F7EBD3;

  /* Геометрия */
  --r-chip:        6px;
  --r-sm:          8px;
  --r-md:          10px;
  --r-lg:          12px;
  --r-xl:          14px;
  --r-sheet:       18px;

  /* Типографика */
  --font:          'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Unbounded', 'Manrope', system-ui, sans-serif;

  /* Оболочка */
  --sidebar-w:     244px;
  --topbar-h:      68px;

  /* Движение.
     Правило одно: анимируется то, что появилось, исчезло или
     изменилось по действию человека. Ни появлений секций при
     загрузке, ни подъёма карточек по наведению — это тихий журнал
     поверх чужой работы, а не витрина.

     Кривые разные на вход и на выход не для красоты: появляющееся
     должно быстро набрать скорость и мягко встать на место, чтобы
     глаз успел его поймать, а исчезающее — уйти без раздумий. */
  --ease-out:  cubic-bezier(.2, 0, 0, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --dur-tap:   120ms;   /* отклик на нажатие */
  --dur-in:    200ms;   /* элемент появился или изменился */
  --dur-sheet: 300ms;   /* шторка и модальное окно */
}

/* --- База ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

img, svg { max-width: 100%; }

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

/* Видимый фокус нужен всем: кабинет в основном клавиатурный у директора. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Типографика --------------------------------------------------------- */

.display        { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }
.display-xl     { font-family: var(--font-display); font-weight: 700; font-size: 50px; line-height: 1.15; }
.display-lg     { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.2; }
.display-md     { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; }
.display-sm     { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.25; }
.display-xs     { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; }

/* Надзаголовок: разрядка, верхний регистр, приглушённый. Размечает секции
   везде — и в кабинете, и на странице КП. */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.eyebrow--tight   { letter-spacing: 0.06em; }
.eyebrow--wide    { letter-spacing: 0.14em; font-weight: 600; }
.eyebrow--ink     { color: var(--text); }
.eyebrow--on-dark { color: var(--on-dark-dim); }
.eyebrow--accent  { color: var(--accent); }
.eyebrow--faint   { color: var(--text-faint); font-size: 10px; letter-spacing: 0.14em; }

.lede      { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.prose     { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.muted     { color: var(--text-muted); }
.dim       { color: var(--text-dim); }
.hint      { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.note-text { font-size: 13px; line-height: 1.5; color: var(--text-note); }
.strong    { font-weight: 700; }

/* Символ тенге живёт в Manrope: в Unbounded он тянет за собой отдельный
   блок латиницы-extended, а это 100+ КБ на страницу, которую открывают
   с телефона по мобильному интернету. */
.cur { font-family: var(--font); font-weight: 600; }

/* --- Раскладка ----------------------------------------------------------- */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow    { flex-grow: 1; }
.wrap    { flex-wrap: wrap; }
.baseline{ align-items: baseline; }
.start   { align-items: flex-start; }
.end     { align-items: flex-end; }

.g-2  { gap: 2px; }   .g-4  { gap: 4px; }   .g-6  { gap: 6px; }
.g-8  { gap: 8px; }   .g-10 { gap: 10px; }  .g-12 { gap: 12px; }
.g-14 { gap: 14px; }  .g-16 { gap: 16px; }  .g-18 { gap: 18px; }
.g-20 { gap: 20px; }  .g-22 { gap: 22px; }  .g-24 { gap: 24px; }
.g-26 { gap: 26px; }  .g-28 { gap: 28px; }  .g-32 { gap: 32px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
              border-color var(--dur-tap) var(--ease-out),
              color var(--dur-tap) var(--ease-out);
}

.btn--primary  { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn--primary:hover  { background: #D2930F; }
.btn--ink      { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover      { background: #24262B; }
.btn--outline  { border-color: var(--ink); color: var(--text); }
.btn--outline:hover  { background: rgba(21,23,27,.05); }
.btn--quiet    { border-color: var(--line-strong); color: var(--text-muted); }
.btn--quiet:hover    { background: rgba(21,23,27,.04); color: var(--text-body); }
.btn--dashed   { border: 1px dashed var(--text-faint); color: var(--text-muted); font-size: 14px; }
.btn--dashed:hover   { border-color: var(--text-dim); color: var(--text-body); }
.btn--danger   { border-color: var(--line-strong); color: var(--danger-deep); font-size: 13px; }
.btn--danger:hover   { background: var(--danger-soft); border-color: var(--danger); }

.btn--lg    { height: 56px; font-size: 16px; font-weight: 700; padding: 0 30px; }
.btn--sm    { height: 44px; font-size: 14px; padding: 0 18px; }
.btn--xs    { height: 40px; font-size: 13px; padding: 0 16px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Квадратная кнопка под одну иконку. 44px — нижняя граница попадания пальцем. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}
.icon-btn:hover       { background: rgba(21,23,27,.04); }
.icon-btn--sm         { width: 40px; height: 40px; border-radius: var(--r-sm); }
.icon-btn--on-dark    { border-color: var(--ink-line-2); }
.icon-btn--on-dark:hover { background: rgba(245,243,239,.06); }
.icon-btn--field      { background: var(--surface); border-color: var(--line-strong); width: 52px; height: 52px; }

/* Двухстрочная кнопка действия: подпись объясняет последствие нажатия. */
.btn-duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-grow: 1;
  min-height: 52px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  font-family: var(--font);
  cursor: pointer;
}
.btn-duo:hover  { background: rgba(21,23,27,.05); }
.btn-duo__main  { font-size: 14px; font-weight: 600; color: var(--text); }
.btn-duo__sub   { font-size: 11px; color: var(--text-muted); }
.btn-duo[disabled] { opacity: .4; pointer-events: none; }

/* --- Поля ---------------------------------------------------------------- */

.field       { display: flex; flex-direction: column; gap: 6px; }
.field__label{ font-size: 13px; font-weight: 600; color: var(--text-body); }
.field__hint { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.field__error{ font-size: 12px; font-weight: 600; color: var(--danger-deep); }

.input, .textarea, .select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 16px;   /* ниже 16px мобильный Safari зумит форму при фокусе */
  color: var(--text);
}
.textarea {
  height: auto;
  min-height: 104px;
  padding: 14px;
  line-height: 1.55;
  font-size: 15px;
  resize: vertical;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink); outline: none; }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.input--filled  { border-color: var(--ink); }
.input--tall    { height: 52px; }
.input--compact { height: 44px; font-size: 15px; padding: 0 12px; border-radius: var(--r-sm); }
.input--num     { font-variant-numeric: tabular-nums; }
.input--w-sm    { width: 120px; }
.input--w-md    { width: 220px; }
.input--money   { width: 106px; }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* Выбор из нескольких крупных вариантов — статус карточки, исход сделки. */
.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font);
  cursor: pointer;
}
.choice:hover               { border-color: var(--line-strong); }
.choice[aria-pressed="true"],
.choice.is-selected         { border: 2px solid var(--ink); padding: 11px 15px; }
.choice__title { font-size: 16px; font-weight: 700; color: var(--text); }
.choice__sub   { font-size: 12px; color: var(--text-muted); }

.choice--tile {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  text-align: center;
}
.choice--tile .choice__title { font-size: 15px; }

/* Радио-строка: крупная зона нажатия, сам инпут — нативный. */
.radio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text-body);
  cursor: pointer;
}
.radio-row:hover { border-color: var(--line-strong); }
.radio-row input[type="radio"],
.radio-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; }
.radio-row--plain { background: transparent; border: 0; min-height: 0; padding: 0; font-size: 14px; color: var(--text-muted); }

/* Переключатель дней недели. */
.daypick { display: flex; gap: 7px; flex-wrap: wrap; }
.daypick__day {
  min-width: 48px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
}
.daypick__day.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }

/* --- Чипы и индикаторы --------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.chip--thinking { background: var(--warn-soft);    color: var(--accent-deep); }
.chip--credit   { background: var(--success-soft); color: var(--success-deep); }
.chip--testdrive{ background: var(--info-soft);    color: var(--info-deep); }
.chip--alarm    { background: var(--danger-soft);  color: var(--danger-deep); font-weight: 700; }
.chip--ok       { background: var(--success-soft); color: var(--success-deep); }
.chip--neutral  { background: var(--paper); border: 1px solid var(--line); color: var(--text-body); font-weight: 400; font-size: 14px; padding: 8px 13px; border-radius: var(--r-sm); }

/* Состояние карточки — точка плюс подпись. Цвет точки один и тот же
   в списке менеджера, в таблице директора и в шапке карточки. */
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-body); }
.state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.state--active    .state__dot { background: var(--text-muted); }
.state--in_dialog .state__dot { background: var(--info); }
.state--closed_won  .state__dot { background: var(--success); }
.state--closed_lost .state__dot { background: var(--danger); }
.state--on-dark { color: var(--on-dark-muted); }
.state--on-dark .state__dot { background: var(--on-dark-dim); }

.due      { font-size: 13px; font-weight: 700; color: var(--danger); }
.due--soon{ font-weight: 600; color: var(--text-body); }
.due--none{ font-weight: 400; color: var(--text-dim); }
.due--info{ font-weight: 600; color: var(--info-deep); }

/* --- Панели и плашки ----------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.panel--pad     { padding: 20px; }
.panel--pad-lg  { padding: 22px; }
.panel--flush   { overflow: hidden; }
.panel--ink     { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.panel--accent  { background: var(--surface-warm); border-color: var(--accent); }
.panel--marked  { border: 2px solid var(--ink); }
.panel--dashed  { background: transparent; border: 1px dashed var(--line-strong); }
.panel--drop    { background: var(--surface); border: 2px dashed var(--text-faint); }

/* Плашка-пояснение. Её задача — объяснить ограничение продукта словами,
   а не спрятать его: «мы не забираем базу», «суммы — оценка», «данные в РК». */
.note {
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-note);
}
.note--accent  { background: var(--surface-warm); border: 1px solid var(--accent); padding: 16px 20px; }
.note--bordered{ background: transparent; border: 1px solid var(--line); }
.note--ok      { background: var(--success-soft); color: var(--success-deep); }

/* Числовой идентификатор — не текст, а данные: табличные цифры не
   пляшут по ширине, и номер можно сверить глазом с тем, что показывает
   Telegram. */
.num-id {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.note--icon    { display: flex; gap: 10px; align-items: flex-start; }
.note--icon > svg { flex-shrink: 0; margin-top: 2px; }
.note__title   { font-size: 15px; font-weight: 700; color: var(--text); }

.divider     { height: 1px; background: var(--line-soft); border: 0; }

/* Имя в подвале меню — вход в профиль, а не подпись. Наводя курсор,
   человек должен увидеть, что сюда можно нажать: без этого профиль
   не найдут вовсе. */
.sidebar__me {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px 2px;
  border-radius: var(--r-md);
  transition: background-color var(--dur-tap) var(--ease-out);
}
.sidebar__me:hover,
.sidebar__me:focus-visible { background: rgba(255, 255, 255, .07); }
.sidebar__me.is-active     { background: rgba(255, 255, 255, .1); }
.divider--md { background: var(--line); }

/* --- Строка «ключ → значение» -------------------------------------------- */

.rows { display: flex; flex-direction: column; }
.rows > .kv + .kv { border-top: 1px solid var(--line-soft); }

.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.kv__key   { font-size: 13px; color: var(--text-muted); }
.kv__val   { font-size: 15px; font-weight: 600; color: var(--text); }
.kv--stack { flex-direction: column; align-items: flex-start; gap: 5px; }
.kv--stack .kv__val { font-size: 14px; font-weight: 400; color: var(--text-body); line-height: 1.45; }

/* Разбивка цены на странице КП — свой ритм, поэтому отдельный компонент. */
.breakdown { display: flex; flex-direction: column; gap: 4px; }
.breakdown__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.breakdown__line:last-child { border-bottom: 0; }
.breakdown__name  { font-size: 14px; color: var(--text-body); }
.breakdown__value { font-size: 15px; font-weight: 600; color: var(--text); }
.breakdown__value--minus { color: var(--success); }
.breakdown__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 0 0; border-bottom: 0;
}
.breakdown__total .breakdown__name  { font-weight: 700; color: var(--text); }
.breakdown__total .breakdown__value { font-size: 17px; font-weight: 700; }

/* --- Карточка клиента в списке (мобильный) ------------------------------- */

.client-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}
.client-card:hover { border-color: var(--line-strong); }
/* Левая полоса — «сегодня»: единственный визуальный приоритет в списке. */
.client-card--due   { border-left: 4px solid var(--accent); }
.client-card__name  { font-size: 17px; font-weight: 700; color: var(--text); }
.client-card__model { font-size: 13px; color: var(--text-muted); }
.client-card__rule  { height: 1px; background: var(--line-soft); }
.client-card__foot  { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Компактный вариант — «завтра» и «позже»: имя и срок, без деталей. */
.client-card--compact {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-color: var(--line-soft);
}
.client-card--compact .client-card__name { font-size: 16px; }
/* «Позже»: карточка сжимается до имени и срока — детали на этом
   горизонте менеджеру не нужны и только удлиняют список. */
.client-card--ghost {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: transparent;
  border-color: var(--line-soft);
}
.client-card--ghost .client-card__name { font-size: 15px; font-weight: 600; color: var(--text-body); }

/* --- Таблица (десктоп директора) ----------------------------------------- */

.table { display: flex; flex-direction: column; }
.table__head,
.table__row { display: grid; gap: 14px; align-items: center; padding: 15px 20px; }
.table__head {
  padding: 13px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.table__row       { border-bottom: 1px solid var(--line-soft); }
.table__row:last-child { border-bottom: 0; }
.table__row--link { text-decoration: none; color: inherit; }
.table__row--link:hover { background: var(--paper); }
.table__row--flag { background: var(--surface-warm); }
.table__cell-title { font-size: 15px; font-weight: 700; color: var(--text); }
.table__cell-sub   { font-size: 12px; color: var(--text-muted); }
.table__cell       { font-size: 14px; color: var(--text-body); }
.table__cell--num  { font-size: 15px; }
.table__cell--muted{ color: var(--text-muted); }
.table__cell--dim  { color: var(--text-dim); }
.table__actions    { display: flex; gap: 8px; justify-self: end; }
.table__foot       { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.cols-cards    { grid-template-columns: 1.6fr 1.3fr 1.1fr 1fr 1.2fr 1fr; }
.cols-managers { grid-template-columns: 1.3fr 1.3fr .9fr .9fr 1.9fr; }
.cols-perf     { grid-template-columns: 1.2fr 1fr .9fr 1.1fr 1.1fr 1fr .9fr 1.5fr; }
.cols-banks    { grid-template-columns: 2fr 1fr 1.2fr 60px; }
.cols-rejects  { grid-template-columns: 90px 1.4fr 1.2fr 2fr; }

/* Информационная метка вместо недоступного действия. Не кнопка по виду
   и не ошибка по цвету: она сообщает состояние и объясняет его по клику. */
.badge-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.badge-info:hover { color: var(--text-body); border-color: var(--line-strong); }

.pager { display: flex; gap: 6px; }
.pager__item {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  text-decoration: none;
  color: var(--text-body);
}
.pager__item:hover { background: var(--surface); }
.pager__item.is-current { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }

/* --- Показатели ---------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.stat__label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--text); }
.stat__value--sm { font-size: 32px; }
.stat__foot  { font-size: 14px; font-weight: 600; color: var(--text-body); }
.stat__foot--loss { color: var(--danger-deep); }
.stat--ink   { background: var(--ink); border-color: var(--ink); }
.stat--ink .stat__label { color: var(--on-dark-muted); }
.stat--ink .stat__value { color: var(--accent); }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Полоса полноты внесения: заведено против незаведённого. Красное здесь —
   не ошибка интерфейса, а показатель, ради которого блок и существует. */
.bar      { display: flex; height: 44px; gap: 2px; }
.bar__in  { background: var(--ink); border-radius: var(--r-chip) 0 0 var(--r-chip); min-width: 4px; }
.bar__out { background: var(--danger); border-radius: 0 var(--r-chip) var(--r-chip) 0; flex-grow: 1; min-width: 4px; }
.bar-key  { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-body); }
.bar-key__swatch { width: 10px; height: 10px; border-radius: 2px; }
.bar-key--out { font-weight: 700; color: var(--danger-deep); }

/* --- Таймлайн ------------------------------------------------------------ */

.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: 14px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot  { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); flex-shrink: 0; }
.timeline__line { width: 2px; flex-grow: 1; background: var(--line); }
.timeline__body { display: flex; flex-direction: column; gap: 3px; padding-bottom: 18px; }
.timeline__what { font-size: 14px; color: var(--text-body); }
.timeline__when { font-size: 12px; color: var(--text-dim); }
/* Открытие КП клиентом — единственное событие в журнале, которое исходит
   не от менеджера. Поэтому оно и выделено. */
.timeline__item--highlight .timeline__dot  { background: var(--accent); border-color: var(--accent); }
.timeline__item--highlight .timeline__what { font-weight: 700; color: var(--text); }
.timeline__item--future .timeline__dot  { border-style: dashed; border-color: var(--text-faint); background: transparent; }
.timeline__item--future .timeline__what { color: var(--text-dim); }
.timeline__item:last-child .timeline__line { display: none; }
.timeline__item:last-child .timeline__body { padding-bottom: 0; }

/* --- Шаги-инструкция ----------------------------------------------------- */

.steps { display: flex; flex-direction: column; gap: 13px; }
.step  { display: flex; gap: 12px; align-items: flex-start; }
.step__num {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.step__text { font-size: 15px; line-height: 1.4; color: var(--text-body); }
.step__num--lg { width: 34px; height: 34px; font-size: 15px; color: var(--accent); }

/* --- Пустые состояния ---------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.empty__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.empty__text  { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.empty__next  {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; margin-top: 4px; padding: 12px 14px;
  background: var(--paper); border-radius: var(--r-md);
}

/* --- Модалка / нижний лист ----------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(42, 43, 46, .72);
}
.sheet {
  background: var(--paper);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 92vh;
  overflow-y: auto;
}
.sheet__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); }

/* --- Оболочка кабинета --------------------------------------------------- */

.shell { display: flex; min-height: 100vh; background: var(--paper); }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--ink);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Своя высота в один экран, а не высота самой длинной страницы.
     Без этого меню как flex-элемент растягивается по соседу, а подвал
     с margin-top:auto уезжает на дно трёхметровой колонки: на коротких
     страницах он случайно оказывается внизу экрана, а на дашборде
     пропадает совсем. Прокрутка своя — на ноутбуке в 800 px список
     разделов и служебные ссылки вместе могут не поместиться. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar__brand {
  padding: 0 22px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  text-decoration: none;
}
.sidebar__group {
  padding: 22px 22px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--on-dark-faint);
  text-transform: uppercase;
}
.sidebar__link {
  padding: 12px 22px;
  font-size: 14px;
  color: var(--on-dark-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar__link:hover { color: var(--on-dark); background: rgba(245,243,239,.04); }
.sidebar__link.is-active {
  font-weight: 700;
  color: var(--on-dark);
  background: var(--ink-raised);
  border-left-color: var(--accent);
}
.sidebar__foot { margin-top: auto; padding: 18px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.sidebar__who  { font-size: 13px; font-weight: 600; color: var(--on-dark); }
.sidebar__role { font-size: 12px; color: var(--on-dark-dim); }
.sidebar__exit { font-size: 13px; color: var(--on-dark-muted); text-decoration: none; margin-top: 6px; }

/* Служебные ссылки: они нужны, но не должны конкурировать с разделами.
   Отсюда и размер, и приглушённый цвет, и отбивка сверху. */
.sidebar__links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
}
.sidebar__link-sm { font-size: 12px; color: var(--on-dark-dim); text-decoration: none; }
.sidebar__link-sm:hover { color: var(--on-dark-muted); }
.sidebar__version { font-size: 11px; color: var(--on-dark-faint); margin-top: 2px; }

.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* Рамка без рельса: разделов столько, что навигировать нечего.
   Тёмная полоса остаётся — она и есть опознавательный знак кабинета, —
   но меняет ось: сверху, а не слева. */
.appbar { background: var(--ink); }
/* Отступ внутри меры, а не снаружи: у страницы он устроен так же
   (.screen__body), и только при этом название продукта встаёт ровно
   над заголовком страницы. Снаружи меры оно уезжало левее на
   величину этого самого отступа. */
.appbar__inner {
  height: 58px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.appbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  text-decoration: none;
}
.appbar__me {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  padding: 6px 12px;
  margin-right: -12px;
  border-radius: var(--r-md);
  transition: background-color var(--dur-tap) var(--ease-out);
}
.appbar__me:hover,
.appbar__me:focus-visible { background: rgba(255, 255, 255, .08); }
.appbar__me.is-active     { background: rgba(255, 255, 255, .12); }
.appbar__who  { font-size: 14px; font-weight: 600; color: var(--on-dark); }
.appbar__role { font-size: 12px; color: var(--on-dark-dim); }

/* Служебные ссылки в конце страницы. Их читают один раз, а не по
   десять раз на дню, поэтому тихо и мелко. */
.appfoot {
  margin-top: auto;
  padding-bottom: 28px;
}
.appfoot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 36px 0;
  border-top: 1px solid var(--line-soft);
}
.appfoot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.appfoot__links a,
.appfoot__exit {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.appfoot__links a:hover,
.appfoot__exit:hover { color: var(--text); text-decoration: underline; }

.page { padding: 32px 36px; display: flex; flex-direction: column; gap: 30px; }
.page--tight { gap: 22px; }
.page__head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page__title { display: flex; flex-direction: column; gap: 5px; }
.page__sub   { font-size: 14px; color: var(--text-muted); }
.section     { display: flex; flex-direction: column; gap: 14px; }

/* Мобильная шапка кабинета. На десктопе её заменяет боковое меню. */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: 0 18px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--on-dark);
}
.topbar__link { font-size: 14px; color: var(--on-dark-muted); text-decoration: none; }
.topbar__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-dark-muted); text-decoration: none; }

/* Тёмная шапка карточки и калькулятора: имя клиента на тёмном фоне. */
.hero-dark {
  background: var(--ink);
  color: var(--on-dark);
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-dark__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--on-dark); }
.hero-dark__sub  { font-size: 14px; color: var(--on-dark-muted); }
.hero-dark__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 14px;
  color: var(--on-dark-muted);
  text-decoration: none;
}
.hero-dark__back:hover { color: var(--on-dark); }

/* Детальный экран карточки.
   Слева — что верно сейчас: контакты, срок, действия или панель
   наблюдателя. Справа — что произошло: журнал. Разные типы сведений,
   и рядом они читаются лучше, чем стопкой.
   Ширина ограничена: строка «ключ — значение» с выключкой вправо
   на всю ширину монитора распадается на две колонки с полуметром
   пустоты между ними, и глазу нечем их связать. */
.screen__body.card-detail { max-width: 1240px; }
.card-detail__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.card-detail__log  { min-width: 0; }

/* Десктопная рамка этого экрана. Ниже 1100 px он остаётся
   одноколоночным — тем же, что на телефоне. */
@media (min-width: 1100px) {
  .hero-dark { padding: 26px 36px 30px; gap: 20px; }
  .hero-dark__name { font-size: 30px; }

  .screen__body.card-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 36px;
    align-items: start;
    padding: 28px 36px 40px;
  }
  /* Журнал получает ту же материальность, что и панели слева: рядом
     с ними голый текст на фоне читается как незаверстанный остаток.
     На телефоне он остаётся без панели — там он идёт под содержимым,
     а не рядом с ним, и сравнивать не с чем. */
  .card-detail__log {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    /* Лента растёт; закрепляем, чтобы при прокрутке левой половины
       она не уезжала из поля зрения. */
    position: sticky;
    top: 28px;
  }
}

/* Высоту в экран задаёт .shell, а не эта колонка.
   Со своим min-height:100vh она занимала целый экран сама, и подвал
   страницы оказывался под сгибом: на списке из трёх строк за ним
   приходилось скроллить пустоту. */
.screen { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
.screen__body { flex-grow: 1; padding: 18px; display: flex; flex-direction: column; gap: 22px; }

/* Предел меры.
   Без него кабинет на широком мониторе растягивается во всю ширину, и
   страдают оба типа страниц, но по-разному. В таблице шесть колонок
   расползаются так, что имя клиента и срок напоминания оказываются на
   разных концах монитора, и связать их глазом уже нечем. В форме поле
   ввода уезжает от своей подписи на полметра.

   Отсюда две меры, а не одна: у страниц кабинета две разные работы.
   measure-wide — «окинуть взглядом много строк»: список клиентов,
   менеджеры, дашборд. measure-read — «сделать одно дело»: форма,
   расчёт, импорт, профиль.

   Центрируем, а не прижимаем влево: сайдбар и так держит левый край,
   а при 2560 px прижатая влево колонка оставляет справа пустое поле
   шире себя самой, и страница читается как незагрузившаяся. */
.measure-wide,
.measure-read { width: 100%; margin-inline: auto; }
.measure-wide { max-width: 1240px; }
.measure-read { max-width: 780px; }

/* Шапка страницы на десктопе. Здесь же живут действия самой страницы:
   «новый клиент» и «импорт» — это способы пополнить список клиентов,
   и место им рядом со списком, а не в меню разделов. */
.page__actions { display: flex; align-items: center; gap: 10px; }

/* Ссылка-действие, которой не нужна кнопка: редкое дело, не мешающее
   основному. Подчёркивание появляется по наведению, чтобы в спокойном
   состоянии она не спорила с кнопкой рядом. */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.link-quiet:hover,
.link-quiet:focus-visible { color: var(--text); text-decoration: underline; }

/* Ответ «сегодня никого». Не плашка-предупреждение и не пустой экран:
   это нормальный рабочий день, и выглядеть он должен спокойно. */
.today-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-body);
  padding: 2px 0 4px;
}
.today-clear > svg { flex-shrink: 0; }

/* --- Расчёты на карточке -------------------------------------------------
   Расчётов на клиента бывает несколько, и они не равны между собой:
   свежий отправляют, прежние сверяют. Отсюда и порядок сверху вниз,
   и приглушённый вид истёкших — видеть их нужно, отправлять нет. */
.quote-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.quote-row:first-of-type { border-top: 0; padding-top: 0; }
.quote-row__title { font-size: 15px; font-weight: 700; color: var(--text); }
.quote-row__sum   { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.quote-row__of    { font-weight: 500; color: var(--text-muted); }

/* Истёкший не прячем и не перечёркиваем: цифры в нём по-прежнему
   верны для своей даты, и через месяц по ним сверяют, что обещали. */
.quote-row--expired .quote-row__title,
.quote-row--expired .quote-row__sum { color: var(--text-muted); }
.quote-row--expired .input { color: var(--text-dim); }

/* Только что собранный — единственное, что менеджер сейчас ищет
   на странице. Одна тонкая линия слева, без заливки: рядом с ним
   остальные расчёты должны остаться читаемыми. */
.quote-row--new {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  margin-left: -14px;
}

.input--sm { height: 38px; font-size: 13px; padding: 0 10px; }
/* Действие, которое должно оставаться под большим пальцем.
   Нижний отступ учитывает полоску жестов: в webview Telegram и в Safari
   на iPhone кнопка без этого уезжает под неё и просто не нажимается.
   --tg-bottom заполняет шим значением от Telegram, env() — браузер. */
.screen__foot {
  padding: 12px 18px calc(18px + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--paper);
  position: sticky;
  bottom: 0;
}
.screen__foot--ink {
  background: var(--ink);
  border-top: 0;
  padding: 16px 18px calc(18px + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
  gap: 14px;
}
.screen__foot--ink .hint { color: var(--on-dark-dim); }

/* --- Мобильное меню кабинета --------------------------------------------- */

.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(21,23,27,.6); }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 71;
  width: min(300px, 86vw);
  background: var(--ink);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 18px; }

/* --- Оболочка внутри Telegram ---------------------------------------------
   Кабинет внутри Telegram выглядит ровно так же, как в браузере: те же
   шаблоны, та же палитра, тот же макет. Своя шапка остаётся на месте —
   в ней живут меню и «назад», а в шапке Telegram их нет, и убрать нашу
   значило бы отнять навигацию, а не убрать дубль.

   Отличие здесь одно и оно не про вид: безопасные зоны. Вырез сверху
   и полоска жестов снизу в webview есть, а env() внутри него заполнен
   не всегда, поэтому значения приходят от самого Telegram.               */

.topbar--tg {
  padding-top: var(--tg-top, 0px);
  height: calc(var(--topbar-h) + var(--tg-top, 0px));
}

/* --- Публичная страница КП ----------------------------------------------- */

.quote { max-width: 480px; margin: 0 auto; background: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

/* Логотип салона приходит любого качества, поэтому под него отведена
   фиксированная светлая полоса — на ней прилично выглядит любой файл. */
.quote__bar {
  min-height: 84px;
  padding: 18px 20px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.quote__logo {
  width: 148px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  object-fit: contain;
}
.quote__logo--placeholder {
  border: 1px dashed var(--text-faint);
  border-radius: var(--r-chip);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--text-muted);
  text-align: center;
}
.quote__salon { font-size: 13px; font-weight: 600; color: #1A1A18; }
.quote__date  { font-size: 12px; color: var(--text-muted); }

.quote__hero { padding: 26px 20px 30px; display: flex; flex-direction: column; gap: 22px; }
.quote__model { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--on-dark); }
.quote__trim  { font-size: 14px; color: var(--on-dark-muted); }
/* Главное число страницы. Всё остальное — его обоснование. */
.quote__payment { font-family: var(--font-display); font-weight: 700; font-size: 50px; line-height: 1; color: var(--accent); }
.quote__payment--wide { font-size: 46px; }
.quote__terms { font-size: 14px; color: var(--on-dark-muted); }

.quote__body {
  flex-grow: 1;
  padding: 24px 20px 28px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote__today {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quote__today-label { font-size: 13px; color: var(--text-muted); }
.quote__today-value { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--text); }
.quote__today-parts { font-size: 12px; color: var(--text-muted); }

.quote__expired { padding: 40px 24px 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.quote__expired-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--on-dark); }
.quote__expired-text  { font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); max-width: 300px; }

/* --- Публичная шапка и лендинг ------------------------------------------- */

.site-head {
  height: 76px;
  padding: 0 56px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-head__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--accent); text-decoration: none; }
.site-nav  { display: flex; align-items: center; gap: 28px; }
.site-nav__link { font-size: 14px; color: var(--on-dark-muted); text-decoration: none; }
.site-nav__link:hover { color: var(--on-dark); }

.hero { background: var(--ink); padding: 0 0 72px; }
.hero__inner { padding: 56px 56px 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: 50px; line-height: 1.15; color: var(--on-dark); }
.hero__text  { font-size: 18px; line-height: 1.6; color: var(--on-dark-muted); }

/* Заглушка под скриншот. Оставлена явной: подставлять «красивый рендер»
   вместо настоящего экрана на лендинге продукта про честность — плохо. */
.shot {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--on-dark-dim);
}
.shot--light { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font-size: 12px; }

.band       { padding: 64px 56px; display: flex; flex-direction: column; gap: 28px; }
.band--dark { background: var(--ink); color: var(--on-dark); }
.band--dark .display-lg { color: var(--on-dark); }
.band--tight-top { padding-top: 0; }
.band__title { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--text); }

.feature { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.feature__title { font-size: 19px; font-weight: 700; color: var(--text); }
.feature__text  { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.feature__title--sm { font-size: 17px; }

.tick { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--on-dark); }
.tick__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.plan { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.plan__name  { font-size: 18px; font-weight: 700; color: var(--text); }
.plan__price { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--text); }
.plan__text  { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.plan .btn   { margin-top: auto; }
.plan--ink   { background: var(--ink); border-color: var(--ink); }
.plan--ink .plan__name  { color: var(--accent); }
.plan--ink .plan__price { color: var(--on-dark); }
.plan--ink .plan__text  { color: var(--on-dark-muted); }

.faq { display: flex; flex-direction: column; max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0;
  background: transparent; border: 0;
  font-family: var(--font); font-size: 17px; text-align: left; color: var(--text);
  cursor: pointer;
}
.faq__sign { font-size: 20px; color: var(--text-dim); flex-shrink: 0; }
.faq__a { padding: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-body); max-width: 760px; }

.cta-band {
  background: var(--accent);
  padding: 52px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cta-band__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--accent-ink); }
.cta-band__text  { font-size: 16px; color: var(--accent-shade); }

.site-foot {
  background: var(--ink);
  padding: 40px 56px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.site-foot__link { font-size: 14px; color: var(--on-dark-muted); text-decoration: none; }
.site-foot__meta { font-size: 13px; color: var(--on-dark-dim); }

/* --- Вход ---------------------------------------------------------------- */

.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--ink); }
.login__pitch { padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.login__brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--accent); }
.login__claim { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.2; color: var(--on-dark); max-width: 480px; }
.login__facts { display: flex; gap: 28px; flex-wrap: wrap; }
.login__fact-k{ font-size: 13px; color: var(--on-dark-dim); }
.login__fact-v{ font-size: 14px; font-weight: 600; color: var(--on-dark); }
.login__panel {
  background: var(--paper);
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  /* Самолётик выходит за угол панели, поэтому он обрезается ею,
     а не страницей: иначе на широком экране он повиснет в пустоте. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Свечение — отдельный слой, а не часть картинки: так оно тянется
   на любой размер панели, не весит ни байта и не мылится при
   масштабировании. В PNG остался только сам объект. */
.login__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Одним радиусом такого не собрать: маленький даёт жёлтое пятно на
     сером листе, большой заливает янтарём всю панель вместе с текстом.
     Поэтому слоёв четыре, и каждый отвечает за своё.
     Порядок в списке — порядок отрисовки: первый оказывается сверху. */
  background:
    /* 1. Пересвет под корпусом. Насыщенность тут не поможет — на макете
          фон рядом с самолётиком не желтее бумаги, а белее её. */
    radial-gradient(
      ellipse 38% 24% at 60% 88%,
      rgba(255, 251, 236, 0.92) 0%,
      rgba(255, 248, 226, 0.36) 50%,
      rgba(255, 246, 218, 0) 80%
    ),
    /* 2. Источник света — он за самолётиком справа, отсюда и самый
          плотный янтарь у правого края. */
    radial-gradient(
      ellipse 46% 44% at 94% 60%,
      rgba(255, 195, 62, 0.50) 0%,
      rgba(255, 199, 78, 0.23) 45%,
      rgba(255, 203, 92, 0) 80%
    ),
    /* 3. Разлив вниз и вправо: даёт тёплую лужу под самолётиком. */
    radial-gradient(
      ellipse 82% 58% at 74% 90%,
      rgba(255, 193, 64, 0.34) 0%,
      rgba(255, 198, 84, 0.15) 45%,
      rgba(255, 205, 105, 0) 78%
    ),
    /* 4. Общая диагональ. Держит верхний левый угол — тот, где текст, —
          холодным, а правый нижний тёплым. */
    linear-gradient(
      315deg,
      rgba(255, 202, 96, 0.26) 0%,
      rgba(255, 210, 128, 0.09) 42%,
      rgba(255, 216, 150, 0) 72%
    );
  pointer-events: none;
}

/* Сам объект. Фоном, а не <img>, ровно по одной причине: медиазапрос
   ниже не даёт браузеру запросить файл на узком экране, где картинки
   всё равно нет. Скрытый через display:none тег <img> успел бы
   скачаться — у него другой порядок: сначала загрузка, потом стили. */
.login__plane {
  position: absolute;
  z-index: -1;
  /* Оба отступа отрицательные, но работают по-разному. По горизонтали
     -10% реально уводят правое крыло за обрез панели. По вертикали
     -2% лишь дотягивают корпус до нижнего края: в самой картинке снизу
     6% прозрачного поля, и без этого самолётик заметно висел бы. */
  right: -10%;
  bottom: -2%;
  /* Три ограничителя сразу. 94% — доля панели, по ней самолётик растёт
     вместе с окном; жёсткий пиксель оставлял его болтаться в углу на
     широких экранах. 760px — потолок, выше пришлось бы тянуть картинку
     за пределы 1200-пиксельного исходника. 78vh — защита от низкого
     окна: там панель широкая, но короткая, и без этого самолётик
     подпирал бы кнопку «Написать в поддержку». */
  width: min(760px, 94%, 78vh);
  aspect-ratio: 3 / 2;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  pointer-events: none;
}

.qr {
  width: 132px; height: 132px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
  font-size: 11px; color: var(--text-dim);
}
.qr--lg { width: 178px; height: 178px; border-radius: var(--r-lg); font-size: 12px; padding: 10px; }

/* Тёмный верх + светлый лист снизу: общий каркас всех мобильных экранов
   входа и подключения. */
.onboard { min-height: 100vh; background: var(--ink); display: flex; flex-direction: column; }
.onboard__top  { padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.onboard__kicker { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); }
.onboard__title  { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.25; color: var(--on-dark); }
.onboard__text   { font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); }
.onboard__sheet  {
  flex-grow: 1;
  background: var(--paper);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 20px;
}

/* --- Политика ПД --------------------------------------------------------- */

.doc { padding: 48px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
.doc__toc  { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 24px; }
.doc__toc-link { font-size: 14px; color: var(--text-muted); text-decoration: none; }
.doc__toc-link.is-current { font-weight: 700; color: var(--text); }
.doc__body { display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
.doc__h    { font-size: 19px; font-weight: 700; color: var(--text); }
/* Незаполненные юристом абзацы намеренно видны, а не спрятаны. */
.doc__todo { font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* --- Служебное ----------------------------------------------------------- */

.ink-band { background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg); padding: 28px 32px; }
.ink-band .display-sm { color: var(--on-dark); }

.logo-preview {
  width: 190px; height: 68px;
  background: var(--surface);
  border: 1px dashed var(--text-faint);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-dim);
  object-fit: contain;
}

.code-line {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  overflow-x: auto;
}

/* Превью шаблона — так текст увидит клиент в WhatsApp. */
.preview-dark { background: var(--ink); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.preview-dark__label { font-size: 11px; color: var(--on-dark-dim); }
.preview-dark__bubble { background: var(--paper); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; line-height: 1.5; color: var(--text); }

.picklist { display: flex; flex-direction: column; }
.picklist__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  font-family: var(--font); font-size: 15px; color: var(--text-body);
  text-align: left; width: 100%; cursor: pointer;
}
.picklist__item:last-child { border-bottom: 0; }
.picklist__item:hover { background: var(--paper); }
.picklist__item.is-current { background: var(--ink); color: var(--on-dark); font-weight: 700; }
.picklist__item.is-current .picklist__meta { color: var(--accent); }
.picklist__meta { font-size: 12px; color: var(--text-muted); }
.picklist__meta--empty { color: var(--danger); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .input { flex-grow: 1; min-width: 200px; }

.segment { display: flex; gap: 8px; flex-wrap: wrap; }
.segment__item {
  height: 40px; padding: 0 18px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-muted);
  text-decoration: none; background: transparent;
  font-family: var(--font); cursor: pointer;
}
.segment__item.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }

/* Индикатор фонового запроса HTMX. */
.htmx-indicator { opacity: 0; transition: opacity var(--dur-in) var(--ease-out); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: .5; }

[x-cloak] { display: none !important; }

/* --- Двухколонники --------------------------------------------------------
   Раскладки экранов директора заданы классами, а не инлайновым style:
   инлайн перебивает медиазапрос, и страница, открытая с телефона,
   уезжает вбок вместо того, чтобы схлопнуться в одну колонку.          */

.split          { display: grid; gap: 26px; align-items: start; }
.split--wide    { grid-template-columns: 1.15fr 1fr; }
.split--form    { grid-template-columns: minmax(0, 640px) 300px; gap: 40px; }
.split--preview { grid-template-columns: minmax(0, 1fr) 330px; }
.split--list    { grid-template-columns: 400px minmax(0, 1fr); gap: 28px; }
.split--even    { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* Пара денежных полей. Две колонки держатся и на телефоне: цена и скидка,
   trade-in и взнос, срок и ставка читаются парами, а в одну колонку
   калькулятор растягивается на два экрана прокрутки. */
.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Ставки банков на телефоне не переносятся, а прокручиваются вбок:
   перенос съедает треть экрана калькулятора. */
.segment--rates { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.segment--rates .segment__item { flex-shrink: 0; }

@media (max-width: 1023px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .split--form, .split--list, .split--even { gap: 20px; }
}

/* --- Адаптив -------------------------------------------------------------
   Кабинет директора нарисован под 1280, кабинет менеджера — под 390.
   Ниже 1024 боковое меню уезжает в выдвижную панель, а таблицы
   перестают быть сетками и становятся списком строк.                       */

@media (max-width: 1100px) {
  .site-head, .band, .cta-band, .site-foot, .hero__inner { padding-left: 32px; padding-right: 32px; }
  .hero__title { font-size: 40px; }
}

@media (max-width: 1023px) {
  .sidebar { display: none; }
  .page { padding: 20px 18px; gap: 24px; }
  .page__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 18px; }
  .doc__toc { position: static; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__pitch { display: none; }
  .login__panel { padding: 28px 20px; min-height: 100vh; }
  /* На телефоне панель занимает весь экран. Самолётик остаётся —
     это единственный экран продукта, который человек видит до входа,
     и пустая светлая половина там выглядит незаконченной. Но он
     уходит в угол и мельчает: текст выключен по центру, и объект
     не должен под него подлезать. */
  .login__plane {
    /* За обрез уходит немного: на узком экране сильный вынос оставляет
       в кадре одно крыло, и объект перестаёт читаться самолётом. */
    width: min(360px, 76%);
    right: -6%;
    bottom: 2%;
  }

  /* Свечение тоже слабее: на широком экране четыре слоя с пересветом
     оправданы размером объекта, а на телефоне читались бы как яркое
     пятно поперёк текста. */
  .login__panel::before {
    background: radial-gradient(
      ellipse 90% 45% at 80% 100%,
      rgba(255, 197, 78, 0.22) 0%,
      rgba(255, 203, 96, 0.09) 45%,
      rgba(255, 209, 120, 0) 78%
    );
  }

  /* Таблица → список. Заголовок сетки скрывается, каждая ячейка получает
     подпись из data-label. Иначе на телефоне колонки схлопываются в кашу. */
  .table__head { display: none; }
  .table__row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .table__row > * { justify-self: start !important; }
  .table__row > [data-label]::before {
    content: attr(data-label) " · ";
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-dim);
    text-transform: uppercase;
  }
  .table__actions { flex-wrap: wrap; justify-self: start; }
}

@media (max-width: 767px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 18px 0; }
  .hero { padding-bottom: 40px; }
  .hero__title { font-size: 32px; }
  .hero__text  { font-size: 16px; }
  .site-head { height: auto; padding: 14px 18px; flex-wrap: wrap; gap: 12px; }
  .site-nav  { gap: 16px; flex-wrap: wrap; }
  .band, .cta-band, .site-foot { padding: 40px 18px; }
  .band__title, .display-lg { font-size: 26px; }
  .cta-band { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-band__title { font-size: 24px; }
  .site-foot { flex-direction: column; gap: 24px; }
  .ink-band { flex-direction: column; align-items: flex-start !important; gap: 20px; padding: 22px; }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .display-md { font-size: 24px; }

  /* Плашка с кнопкой справа: на узком экране кнопка не ужимается
     и выталкивает плашку за край — поэтому она уходит под текст. */
  .note--accent.between { flex-direction: column; align-items: flex-start; }
  .note--accent.between .btn { width: 100%; }
  .quote__payment { font-size: 42px; }
  .quote__payment--wide { font-size: 38px; }
}

@media (min-width: 1024px) {
  .topbar, .only-mobile { display: none !important; }

  /* Воздух по краям: на десктопе страница начинается не от кромки
     сайдбара, иначе первая колонка таблицы прилипает к тёмному полю. */
  .screen__body { padding: 28px 36px 40px; gap: 26px; }
}

@media (max-width: 1023px) {
  .only-desktop { display: none !important; }
}

@media print {
  .sidebar, .topbar, .screen__foot, .btn { display: none !important; }
  body { background: #fff; }
}

/* --- Декоративный самолётик на странице входа --------------------------
   Подключается на всех ширинах: на телефоне это единственный экран
   продукта, который человек видит до входа, и пустая светлая половина
   там выглядит незаконченной.

   Фоном, а не тегом <img>, ради одного: медиазапрос ниже может снять
   картинку целиком, и тогда файл не будет запрошен вовсе. Скрытый
   <img> успел бы скачаться — у него порядок обратный: сначала
   загрузка, потом стили.

   Плотность и формат выбирает сам браузер. Меньший файл — 700 px,
   25 КБ — достаётся и телефону, и обычному десктопу без ретины.      */

.login__plane {
  background-image: image-set(
    url("/static/10e803d7d9/img/plane-700.avif") type("image/avif") 1x,
    url("/static/10e803d7d9/img/plane-1200.avif") type("image/avif") 2x,
    url("/static/10e803d7d9/img/plane-700.webp") type("image/webp") 1x,
    url("/static/10e803d7d9/img/plane-1200.webp") type("image/webp") 2x
  );
  /* Safari до 17 понимает только префиксную форму и игнорирует
     type() — ему достаётся WebP, который он умеет с 14-й версии. */
  background-image: -webkit-image-set(
    url("/static/10e803d7d9/img/plane-700.webp") 1x,
    url("/static/10e803d7d9/img/plane-1200.webp") 2x
  );
  background-image: image-set(
    url("/static/10e803d7d9/img/plane-700.avif") type("image/avif") 1x,
    url("/static/10e803d7d9/img/plane-1200.avif") type("image/avif") 2x,
    url("/static/10e803d7d9/img/plane-700.webp") type("image/webp") 1x,
    url("/static/10e803d7d9/img/plane-1200.webp") type("image/webp") 2x
  );
}

/* Экономия трафика включена в системе — декоративная картинка первой
   и должна отключаться. */
@media (prefers-reduced-data: reduce) {
  .login__plane { background-image: none; }
}

/* --- Движение ------------------------------------------------------------
   Появление модального окна и шторки — единственное движение в кабинете,
   которое человек замечает. Оно отвечает на его же нажатие и показывает,
   откуда пришло окно: на телефоне снизу, где стоял палец, на десктопе —
   из центра, где оно и живёт.

   Подложка и само окно анимируются порознь: затемнение должно опередить
   содержимое, иначе окно появляется на светлом фоне и «прыгает». */

@keyframes sheet-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sheet-in-bottom {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

@keyframes sheet-in-center {
  /* Масштаб мелкий намеренно: окно должно собраться, а не выпрыгнуть.
     Заметный зум читается как реклама, а здесь подтверждают удаление
     сотрудника. */
  from { transform: scale(.985); opacity: 0; }
  to   { transform: none;        opacity: 1; }
}

.sheet-backdrop { animation: sheet-backdrop-in var(--dur-in) var(--ease-out) both; }
.sheet          { animation: sheet-in-bottom var(--dur-sheet) var(--ease-out) both; }

@media (min-width: 1024px) {
  .sheet { animation-name: sheet-in-center; }
}

/* Выдвижное меню телефона. Alpine показывает его через x-show, поэтому
   переход навешивается на атрибуты x-transition в разметке, а здесь
   только кривая и длительность — чтобы они были теми же, что у всего
   остального. */
.drawer          { transition: transform var(--dur-sheet) var(--ease-out); }
.drawer-backdrop { transition: opacity var(--dur-in) var(--ease-out); }
.drawer--off     { transform: translateX(100%); }
.drawer--on      { transform: none; }

/* Строка, которую только что подменил HTMX. Не подсветка ради подсветки:
   после «выдать ссылку повторно» меняется одна строка в таблице из
   десяти, и без отметки непонятно, сработало ли вообще. */
@keyframes row-settled {
  from { background-color: var(--surface-warm); }
  to   { background-color: transparent; }
}
.htmx-settling.table__row,
.htmx-settling .table__row { animation: row-settled 900ms var(--ease-out); }

/* Отклик на нажатие. Смещение на один пиксель — ровно столько, чтобы
   палец почувствовал ответ, и недостаточно, чтобы это заметил глаз
   соседа по столу. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn { transition: background-color var(--dur-tap) var(--ease-out),
                   border-color var(--dur-tap) var(--ease-out),
                   color var(--dur-tap) var(--ease-out),
                   transform var(--dur-tap) var(--ease-out); }

/* Человек попросил систему не двигаться — значит не двигается ничего.
   Не «помедленнее» и не «только самое важное»: для части людей это
   вопрос тошноты и головокружения, а не вкуса.

   Переходы не отключаем в ноль, а сводим к 1 мс: нулевая длительность
   в части браузеров не вызывает событие transitionend, и код, который
   его ждёт, зависает навсегда. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active:not(:disabled) { transform: none; }
}