/* Собрано по design/tokens.json. Правила и причины - в DESIGN.md.
   В страницах используются роли, не сырьё.

   Решения по вид-уровня-студии.md (МОДУЛЬ 7/kit-sayt):
   - стекло только на плавающем слое: меню. На карточках стекла нет;
   - тень только у плавающего слоя, один токен. У карточек тени нет,
     глубину даёт тон фона и тонкая рамка;
   - один акцентный цвет, без градиентов и свечений;
   - движение только при наведении. */

:root {
  /* роли */
  --fon-stranicy: #F1F4F9;
  --fon-stranicy-niz: #E8EDF6;
  --fon-karty: #FFFFFF;
  --fon-karty-tihiy: #F7F9FC;
  --fon-menyu: rgba(255,255,255,.62);
  --kromka-menyu: rgba(255,255,255,.75);
  --fon-menyu-aktivnyy: #EDE8FF;
  --tekst-osnovnoy: #1C2538;
  --tekst-tusklyy: #55627A;
  --tekst-podskazka: #8B96AC;
  --tekst-na-temnom: #FFFFFF;
  --tekst-na-temnom-tusklyy: rgba(255,255,255,.62);
  --ramka: #DDE3ED;
  --akcent: #7C4DFF;
  --akcent-navedenie: #6B38F5;
  --akcent-fon: #F4F0FF;
  --karta-temnaya: #222C42;
  --fon-tihiy-polosa: #EBEFF6;
  --fon-plashki: #DAE9FC;
  --karta-akcentnaya: #2B3A57;

  /* применение */
  --radius-karty: 24px;
  --radius-knopki: 999px;
  --radius-polya: 14px;
  --radius-pilyuli: 999px;
  --otstup-xs: 4px;
  --otstup-s: 8px;
  --otstup-m: 16px;
  --otstup-l: 24px;
  --otstup-xl: 32px;
  --otstup-xxl: 40px;
  /* Поле внутри карточки меняется ступенью: прыжок с 40 сразу на 24
     видно глазом - карточка «сжимается» на границе. */
  --pole-karty: 40px;
  --vysota-plashki: 230px;
  --shrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --razmer-zagolovok: 40px;
  --razmer-zagolovok-geroy: 52px;
  --razmer-podzagolovok: 18px;
  --razmer-tekst: 15px;
  --razmer-polya: 16px;
  --razmer-melkiy: 13px;
  --vysota-stroki-zagolovka: 1.14;
  --vysota-stroki-teksta: 1.55;
  --bukvy-zagolovka: -.02em;
  --bukvy-kapsom: .1em;
  --bukvy-vrazryadku: .04em;
  --ten-plavayushchego: 0 8px 24px rgba(28,37,56,.1);
  --razmytie-stekla: 20px;
  --perehod: .15s ease;
  --shirina-menyu: 216px;
  --shirina-soderzhimogo: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--shrift);
  font-size: var(--razmer-tekst);
  line-height: var(--vysota-stroki-teksta);
  color: var(--tekst-osnovnoy);
  background: var(--fon-stranicy);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Фон: глубина ступенью тона - вверху светлее, книзу плотнее.
   Не свечение и не ореол: цвет один, меняется только светлота. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--fon-stranicy) 0%,
                                         var(--fon-stranicy-niz) 100%);
}

/* Мелочи, которые по умолчанию остаются браузерными: выделение,
   курсор в поле, полоса прокрутки. */
::selection { background: var(--akcent-fon); color: var(--tekst-osnovnoy); }
input, textarea, select { caret-color: var(--akcent); }
html { scrollbar-color: var(--ramka) transparent; }

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

.ramka-stranicy { display: flex; min-height: 100vh; }

/* Меню - плавающий слой. Единственное место со стеклом и тенью. */
.menyu {
  width: var(--shirina-menyu);
  flex-shrink: 0;
  padding: var(--otstup-xl) var(--otstup-m) var(--otstup-l);
  margin: var(--otstup-m) 0 var(--otstup-m) var(--otstup-m);
  background: var(--fon-menyu);
  backdrop-filter: blur(var(--razmytie-stekla));
  -webkit-backdrop-filter: blur(var(--razmytie-stekla));
  border: 1px solid var(--kromka-menyu);
  border-radius: var(--radius-karty);
  box-shadow: var(--ten-plavayushchego);
  align-self: flex-start;
  position: sticky;
  top: var(--otstup-m);
}

/* Браузер без размытия или просьба понизить прозрачность: сплошная
   панель. Текст на ней читается так же. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menyu { background: var(--fon-karty); }
}
@media (prefers-reduced-transparency: reduce) {
  .menyu { background: var(--fon-karty);
           backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .menyu { background: var(--fon-karty); border-color: var(--ramka); }
}

.menyu .nazvanie {
  font-weight: 700;
  font-size: var(--razmer-melkiy);
  line-height: 1.5;
  letter-spacing: var(--bukvy-kapsom);
  text-transform: uppercase;
  color: var(--tekst-tusklyy);
  padding: 0 var(--otstup-m) var(--otstup-xl);
}

.menyu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px var(--otstup-m);
  margin-bottom: var(--otstup-xs);
  border-radius: var(--radius-knopki);
  color: var(--tekst-tusklyy);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--perehod), color var(--perehod);
}
.menyu a:hover { background: var(--fon-karty); color: var(--tekst-osnovnoy); }
.menyu a.aktiven {
  background: var(--fon-menyu-aktivnyy);
  color: var(--tekst-osnovnoy);
  font-weight: 600;
}
.menyu a .schetchik { margin-left: auto; }

/* Значки одного набора, одной толщины линии. */
.znachok {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.znachok-krupnyy { width: 40px; height: 40px; stroke-width: 1.2; }

.pravaya-chast { flex: 1; min-width: 0; overflow-x: hidden;
                 padding: var(--otstup-l) var(--otstup-l) 48px var(--otstup-l); }

.shapka {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--otstup-m);
  font-size: var(--razmer-melkiy);
  color: var(--tekst-tusklyy);
  padding-bottom: var(--otstup-l);
}
.shapka a { color: var(--tekst-osnovnoy); }

main { max-width: var(--shirina-soderzhimogo); width: 100%; }

/* ---------- карточки: без стекла и без тени ---------- */

.karta {
  background: var(--fon-karty);
  border: 1px solid var(--ramka);
  border-radius: var(--radius-karty);
  padding: var(--pole-karty);
}

.karta-temnaya {
  background: var(--karta-temnaya);
  border: 1px solid var(--karta-temnaya);
  color: var(--tekst-na-temnom);
  border-radius: var(--radius-karty);
  padding: calc(var(--pole-karty) + 8px) var(--pole-karty);
}
.karta-temnaya .tusklo { color: var(--tekst-na-temnom-tusklyy); }

.karta-akcentnaya {
  background: var(--karta-akcentnaya);
  border: 1px solid var(--karta-akcentnaya);
  color: #fff;
  border-radius: var(--radius-karty);
  padding: var(--pole-karty);
}
.karta-akcentnaya .tusklo { color: rgba(255,255,255,.78); }

h1 {
  /* Плавно от узкого экрана к широкому: 28 → 38. В rem, иначе
     увеличение текста в браузере перестаёт работать. */
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem);
  font-weight: 700;
  line-height: var(--vysota-stroki-zagolovka);
  letter-spacing: var(--bukvy-zagolovka);
  text-wrap: balance;
  margin: 0 0 var(--otstup-m);
}
.geroy h1 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.875rem); }
h2 { font-size: var(--razmer-podzagolovok); font-weight: 700;
     line-height: 1.25; letter-spacing: -.01em;
     margin: 0 0 var(--otstup-s); }
p { text-wrap: pretty; }
.tusklo { color: var(--tekst-tusklyy); font-size: 14px; }

.plitka { display: grid; gap: var(--otstup-m); }
.plitka-3 { grid-template-columns: repeat(3, 1fr); }
.plitka-2 { grid-template-columns: 1.6fr 1fr; }
.plitka-2-ravnye { grid-template-columns: 1fr 1fr; }

/* ---------- поля и кнопки ---------- */

label { display: block; font-size: var(--razmer-melkiy); font-weight: 600;
        color: var(--tekst-tusklyy); margin: var(--otstup-l) 0 var(--otstup-s); }

input, select, textarea {
  width: 100%;
  padding: 13px 16px;
  /* 16 пикселей: при меньшем Safari на iPhone увеличивает страницу
     при касании поля и сам обратно не возвращает. */
  font-size: var(--razmer-polya);
  font-family: inherit;
  border: 1px solid var(--ramka);
  border-radius: var(--radius-polya);
  background: var(--fon-karty);
  color: var(--tekst-osnovnoy);
  transition: border-color var(--perehod), box-shadow var(--perehod);
}
input:hover, select:hover { border-color: var(--tekst-podskazka); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--akcent-fon);
}

.knopka {
  display: inline-flex;
  align-items: center;
  gap: var(--otstup-s);
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--akcent);
  border-radius: var(--radius-knopki);
  background: var(--akcent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--perehod), border-color var(--perehod);
}
.knopka:hover { background: var(--akcent-navedenie);
                border-color: var(--akcent-navedenie); }
/* Кнопка, которая уже работает: нажимать второй раз нечего. */
.knopka:disabled, .knopka[disabled] {
  background: var(--tekst-podskazka);
  border-color: var(--tekst-podskazka);
  cursor: default;
}
.knopka.vo-vsyu-shirinu { width: 100%; justify-content: center; }
.knopka.svetlaya {
  background: var(--fon-karty);
  color: var(--tekst-osnovnoy);
  border-color: var(--ramka);
}
.knopka.svetlaya:hover { background: var(--fon-karty-tihiy);
                         border-color: var(--tekst-podskazka); }
/* На тёмной и акцентной карточке светлая кнопка остаётся белой. */
.karta-temnaya .knopka.svetlaya,
.karta-akcentnaya .knopka.svetlaya {
  background: #fff; border-color: #fff; color: var(--tekst-osnovnoy);
}
.karta-temnaya .knopka.svetlaya:hover,
.karta-akcentnaya .knopka.svetlaya:hover { background: var(--fon-karty-tihiy);
                                           border-color: var(--fon-karty-tihiy); }

.knopka-obvodkoy {
  background: transparent;
  color: var(--tekst-osnovnoy);
  border: 1px solid var(--ramka);
}
.knopka-obvodkoy:hover {
  background: var(--akcent-fon);
  border-color: var(--akcent);
  color: var(--akcent);
}

/* ---------- таблица ---------- */

.karta-tablica {
  background: var(--fon-karty);
  border: 1px solid var(--ramka);
  border-radius: var(--radius-karty);
  padding: var(--otstup-l) var(--pole-karty) var(--pole-karty);
}
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--bukvy-kapsom);
  text-transform: uppercase;
  color: var(--tekst-podskazka);
  padding: 0 var(--otstup-m) 12px;
  border-bottom: 1px solid var(--ramka);
}
/* Строка не ниже 44 пикселей: по ней нажимают пальцем. */
td { padding: 18px var(--otstup-m); min-height: 44px;
     border-bottom: 1px solid var(--ramka); }
tr:last-child td { border-bottom: 0; }
.summa { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
         font-weight: 700; font-size: 17px;
         letter-spacing: var(--bukvy-zagolovka); }
th.summa { text-align: right; font-size: 11px; font-weight: 600;
           letter-spacing: var(--bukvy-kapsom); }

/* Дата - служебное, читается последней. */
td.data-zayavki { color: var(--tekst-tusklyy); font-size: 14px; }
td.data-zayavki a { color: inherit; }
/* Колонка сразу за датой несёт главный смысл строки:
   у финансиста это сотрудник, у сотрудника - назначение. */
td.data-zayavki + td a { font-weight: 600; color: var(--tekst-osnovnoy); }

/* ---------- пилюли ---------- */

.pilyulya {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--ramka);
  border-radius: var(--radius-pilyuli);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--bukvy-vrazryadku);
  text-transform: uppercase;
  white-space: nowrap;
}

.status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pilyuli);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--bukvy-vrazryadku);
  text-transform: uppercase;
  white-space: nowrap;
}
.status.prinyat   { background: #D6F5F1; color: #0E7C70; }
.status.v-rabote  { background: #EAE4FF; color: #5B35C9; }
.status.chernovik { background: #EBEFF6; color: #55627A; }
.status.vnimanie  { background: #FEE2E2; color: #B42318; }
.status.zhdet     { background: #FEF3C7; color: #92400E; }

/* ---------- сообщения и пустые экраны ---------- */

.oshibka {
  margin-top: var(--otstup-m);
  padding: 12px 16px;
  font-size: 14px;
  color: #B42318;
  background: #FEE2E2;
  border-radius: var(--radius-polya);
}
.soobshchenie {
  margin-bottom: var(--otstup-m);
  padding: 14px 18px;
  font-size: 14px;
  background: var(--akcent-fon);
  color: var(--tekst-osnovnoy);
  border-radius: var(--radius-polya);
}

.pusto { text-align: center; padding: 64px var(--otstup-l); }
.pusto p { color: var(--tekst-tusklyy); margin: 0 0 var(--otstup-l); max-width: 460px;
           margin-left: auto; margin-right: auto; }
.pusto .znachok-krupnyy { color: var(--tekst-podskazka);
                          margin-bottom: var(--otstup-m); }

/* короткий список людей на главной финансиста */
.spisok-lyudey { list-style: none; margin: 12px 0 0; padding: 0; }
.spisok-lyudey li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ramka);
}
.spisok-lyudey li:last-child { border-bottom: none; }

/* метка статуса: ровно одна мысль, читается с расстояния */
.metka {
  display: inline-block;
  padding: 4px 12px;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--bukvy-vrazryadku);
  text-transform: uppercase;
  border-radius: var(--radius-pilyuli);
  background: var(--akcent-fon);
  color: var(--akcent);
}
.karta-temnaya .metka { background: rgba(255,255,255,.14); color: #fff; }

/* тревога: срок прошёл, нужно вмешаться */
.metka-trevoga { background: #FEE2E2; color: #B42318; }
.karta-temnaya .metka-trevoga { background: #B42318; color: #fff; }

/* требует внимания: ход за тем, кто смотрит. Не тревога, но заметно */
.metka-vnimanie { background: var(--tekst-osnovnoy); color: #fff; }
.karta-temnaya .metka-vnimanie { background: #fff; color: var(--tekst-osnovnoy); }

/* строка заявки в списке */
tr.stroka-zayavki td { transition: background var(--perehod); }
tr.stroka-zayavki:hover td { background: var(--fon-karty-tihiy); }
.stroka-zayavki a { color: inherit; text-decoration: none; display: block; }
td.summa { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* строка чека: снимок, поля, сумма */
.chek { display: flex; gap: 14px; align-items: flex-start;
        padding: 16px 0; border-bottom: 1px solid var(--ramka); }
.chek:last-of-type { border-bottom: none; }
.chek-snimki { display: flex; gap: 4px; flex-shrink: 0; }
.chek-snimok { width: 44px; height: 56px; border-radius: 8px;
               background: var(--fon-karty-tihiy); border: 1px solid var(--ramka);
               display: flex; align-items: center;
               justify-content: center; font-size: 10px; font-weight: 600;
               color: var(--tekst-podskazka); text-decoration: none; }
.chek-snimok:hover { border-color: var(--akcent); }
.chek-telo { flex: 1; min-width: 0; }
.chek-summa { font-weight: 700; white-space: nowrap;
              font-variant-numeric: tabular-nums; }
.knopka-tihaya { background: none; border: 0; padding: 0; cursor: pointer;
                 font-family: inherit; font-size: 14px;
                 color: var(--tekst-tusklyy); text-decoration: underline; }
.knopka-tihaya:hover { color: #B42318; }
.chek-snimok { background: var(--fon-karty-tihiy); }

/* сомнение модели: не ошибка, но посмотреть надо */
.vopros { background: #FEF3C7; border-radius: var(--radius-polya);
          padding: 14px 16px; font-size: 14px; margin-top: 12px; }

/* счёт по заявке: выдано, потрачено, остаток */
.schet { margin-top: var(--otstup-l); padding-top: var(--otstup-l);
         border-top: 1px solid var(--ramka); }
.schet-stroka { display: flex; justify-content: space-between;
                align-items: baseline; padding: 7px 0;
                font-variant-numeric: tabular-nums; }
.schet-itog { margin-top: var(--otstup-s); padding-top: var(--otstup-m);
              border-top: 1px solid var(--tekst-osnovnoy); font-size: 17px; }
.schet-itog b { font-size: 24px; letter-spacing: var(--bukvy-zagolovka); }

/* отбор заявок: вкладки сверху списка */
.otbory { display: flex; flex-wrap: wrap; gap: var(--otstup-s);
          align-items: center; margin-bottom: var(--otstup-m); }
.otbor {
  padding: 9px 18px;
  font-size: 14px;
  border-radius: var(--radius-pilyuli);
  background: var(--fon-karty);
  color: var(--tekst-tusklyy);
  text-decoration: none;
  border: 1px solid var(--ramka);
  transition: border-color var(--perehod), color var(--perehod);
}
.otbor:hover { border-color: var(--tekst-podskazka); color: var(--tekst-osnovnoy); }
.otbor.aktiven {
  background: var(--akcent);
  color: #fff;
  border-color: var(--akcent);
}
.otbor-kto { margin-left: auto; }
.otbor-kto select { width: auto; padding: 9px 14px; font-size: 14px; }

/* подробный отбор: сотрудник и даты в одну строку */
.otbor-podrobnee { display: flex; flex-wrap: wrap; gap: var(--otstup-s);
                   align-items: center; margin-bottom: var(--otstup-m); }
.otbor-podrobnee label { margin: 0; white-space: nowrap; }
.otbor-podrobnee select, .otbor-podrobnee input { width: auto;
                                                  padding: 9px 14px;
                                                  font-size: 14px; }
.otbor-podrobnee .knopka-obvodkoy { padding: 9px 20px; }

/* Чем кончилась заявка: доплатить, вернуть или сошлось.
   Мельче суммы - это пояснение к ней, а не вторая цифра. */
.raschet {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tekst-tusklyy);
  white-space: nowrap;
}

/* дата заявки: узкая колонка, цифры в столбик ровно */
td.data-zayavki, th:first-child { white-space: nowrap;
                                  font-variant-numeric: tabular-nums; }

/* назад: первое, что видно на внутренней странице */
.nazad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--otstup-m);
  padding: 8px 16px;
  font-size: 14px;
  border-radius: var(--radius-pilyuli);
  background: var(--fon-karty);
  border: 1px solid var(--ramka);
  color: var(--tekst-tusklyy);
  text-decoration: none;
  transition: border-color var(--perehod), color var(--perehod);
}
.nazad:hover { border-color: var(--tekst-podskazka);
               color: var(--tekst-osnovnoy); }

/* выключенный сотрудник: виден, но приглушён */
tr.vyklyuchen td { opacity: .55; }
tr.vyklyuchen td:first-child { opacity: 1; }

/* счётчик в меню: сколько заявок ждёт этого человека */
.schetchik {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: var(--akcent);
  color: #fff;
}
.menyu a.aktiven .schetchik { background: var(--akcent); color: #fff; }

/* ---------- телефон ---------- */

@media (max-width: 1100px) {
  :root { --pole-karty: 32px; --vysota-plashki: 200px; }
  .plitka-3 { grid-template-columns: 1fr 1fr; }
  .plitka-2, .plitka-2-ravnye { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .ramka-stranicy { flex-direction: column; }
  /* Три пункта со значками должны уместиться в ширину телефона:
     иначе последний уезжает за край и кажется, что его нет. */
  .menyu { width: auto; display: flex; gap: 4px;
           flex-wrap: wrap;
           margin: var(--otstup-s) var(--otstup-m) 0;
           padding: 8px;
           position: static; }
  .menyu .nazvanie { display: none; }
  .menyu a { white-space: nowrap; margin: 0; gap: 7px;
             padding: 9px 12px; font-size: 13px; }
  .menyu .znachok { width: 16px; height: 16px; }
  .menyu .schetchik { margin-left: 4px; }
  .pravaya-chast { padding: 0 var(--otstup-m) var(--otstup-xl); }

  /* Шапка с именем прижата к правому краю и висит отдельной строкой.
     На телефоне она короче и ближе к содержимому. */
  .shapka { padding: 10px 0 var(--otstup-m); font-size: 12px; }

  /* В столбик кнопка растягивается во всю ширину и становится
     похожа на поле ввода. */
  .otbor-podrobnee .knopka-obvodkoy {
    align-self: flex-start;
    background: var(--akcent-fon);
    border-color: var(--akcent);
    color: var(--akcent);
  }
  .plitka-3, .plitka-2, .plitka-2-ravnye { grid-template-columns: 1fr; }
  /* Высота по самой высокой плашке: у «Сотрудников» длиннее текст
     и есть кнопка. Так разделы не прыгают при переходе. */
  :root { --pole-karty: 24px; --vysota-plashki: 250px; }
  .karta-tablica { padding: var(--otstup-m) var(--pole-karty)
                            var(--pole-karty); }
  table { font-size: 14px; }
  td, th { padding: 12px var(--otstup-s); }
}

/* На телефоне таблица не помещается: колонки режут суммы.
   Разворачиваем каждую заявку в карточку - читается без прокрутки вбок. */
@media (max-width: 640px) {
  .karta-tablica { padding: var(--otstup-m); }
  .karta-tablica thead { display: none; }
  .karta-tablica table, .karta-tablica tbody,
  .karta-tablica tr, .karta-tablica td { display: block; width: 100%; }

  tr.stroka-zayavki {
    padding: var(--otstup-m) 0;
    border-bottom: 1px solid var(--ramka);
    display: flex; flex-direction: column;
  }
  tr.stroka-zayavki:last-child { border-bottom: none; }
  tr.stroka-zayavki td { border: none; padding: 2px 0; }

  /* сумма крупно и первой: с неё начинают читать */
  td.summa {
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    order: -1;
  }
  td.summa a { display: inline; }
  td.summa::after { content: " ₽"; font-size: 15px; font-weight: 400;
                    color: var(--tekst-tusklyy); }
  tr.stroka-zayavki td:first-child { color: var(--tekst-tusklyy); font-size: 13px; }
  td.data-zayavki { color: var(--tekst-tusklyy); font-size: 13px; }

  .chek { flex-wrap: wrap; gap: 10px; }
  .chek-snimki { flex-wrap: wrap; }
  .chek-telo { flex: 1 1 100%; order: 2; }
  .chek-summa { order: 1; font-size: 20px; margin-left: auto; }
  .chek form { order: 3; margin-left: 0 !important; }
  .schet-stroka { font-size: 15px; }
  .schet-itog b { font-size: 20px; }

  .otbor-kto { margin-left: 0; width: 100%; }
  .otbor-kto select { width: 100%; }
  .otbor-podrobnee { flex-direction: column; align-items: stretch; }
  .otbor-podrobnee select, .otbor-podrobnee input { width: 100%; }
}

/* ---------- вход: одно полотно ---------- */

.vhod-ekran {
  max-width: 880px;
  margin: 64px auto;
  padding: 0 var(--otstup-m);
}

.vhod-karta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--fon-karty);
  border: 1px solid var(--ramka);
  border-radius: var(--radius-karty);
  overflow: hidden;
  min-height: 420px;
}

.vhod-levaya { position: relative; }
.vhod-levaya img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадр поднят: внизу лежит надпись. */
  object-position: 50% 34%;
}

/* Подложка под надписью: не украшение, а условие читаемости -
   белый текст лежит на фотографии. */
.vhod-nadpis {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--otstup-xl);
  color: #fff;
  background: linear-gradient(to top,
              rgba(28,37,56,.92) 0%,
              rgba(28,37,56,.72) 55%,
              rgba(28,37,56,0) 100%);
}
.vhod-nadpis h1 { margin: 0 0 6px; font-size: 34px; }
.vhod-nadpis p { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }

.vhod-pravaya {
  padding: var(--otstup-xxl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vhod-pravaya label:first-of-type { margin-top: 0; }

/* На узком экране картинка становится полосой сверху: форма должна
   быть видна без прокрутки. */
@media (max-width: 760px) {
  .vhod-ekran { max-width: 440px; margin: 24px auto; }
  .vhod-karta { grid-template-columns: 1fr; min-height: 0; }
  .vhod-levaya { height: 180px; }
  .vhod-nadpis { padding: var(--otstup-l); }
  .vhod-nadpis h1 { font-size: 26px; }
  .vhod-pravaya { padding: var(--otstup-l); }
}

/* ---------- карточка с картинкой ---------- */

.karta-s-kartinkoy {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--otstup-xl);
  align-items: center;
}
.karta-telo { min-width: 0; }
.karta-kartinka img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-polya);
}

/* На узком экране картинка уходит: место нужно форме. */
@media (max-width: 820px) {
  .karta-s-kartinkoy { grid-template-columns: 1fr; }
  .karta-kartinka { display: none; }
}

/* ---------- плашка раздела с картинкой ---------- */

/* Плашка раздела светлая: её фон совпадает с фоном картинки,
   поэтому стыка между ними не видно. */
.geroy-s-kartinkoy {
  display: grid;
  /* Картинка квадратная, поэтому ширина колонки задаёт высоту
     плашки. 240 - ровно та высота, что нужна под заголовок,
     подпись и кнопку. */
  grid-template-columns: 1fr 240px;
  background: var(--fon-plashki);
  border-radius: var(--radius-karty);
  overflow: hidden;
  color: var(--tekst-osnovnoy);
  min-height: var(--vysota-plashki);
}
.geroy-s-kartinkoy .geroy-telo {
  padding: var(--pole-karty);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.geroy-s-kartinkoy .tusklo { color: var(--tekst-tusklyy); max-width: 52ch; }
/* Плашка светлая, поэтому главное действие на ней - акцентная кнопка. */
/* Кнопка внутри плашки прижата плотнее: иначе содержимое
   не помещается в общую высоту и раздел с кнопкой выше остальных. */
.geroy-s-kartinkoy .knopka.svetlaya {
  align-self: flex-start;
  margin-top: var(--otstup-m) !important;
  background: var(--akcent);
  border-color: var(--akcent);
  color: #fff;
}
.geroy-s-kartinkoy .knopka.svetlaya:hover {
  background: var(--akcent-navedenie); border-color: var(--akcent-navedenie);
}
/* Фон блока совпадает с фоном самой картинки, поэтому шва не видно,
   а люди помещаются целиком. */
/* Левый край картинки растворяется: у каждой картинки свой свет,
   и без этого на стыке с плашкой виден прямоугольник. */
.geroy-kartinka {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.geroy-kartinka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
/* Люди стоят на полу, поэтому их кадр прижат к низу. */
.geroy-kartinka img.vnizu { object-position: 50% 100%; }

/* На узком экране картинка остаётся, но небольшая и сбоку:
   высоту она почти не отнимает, а раздел остаётся узнаваемым. */
@media (max-width: 860px) {
  .geroy-s-kartinkoy { grid-template-columns: 1fr 104px; }
  /* На телефоне картинка ниже плашки, поэтому у неё виден
     прямоугольный край. Растворяем со всех сторон, а не только слева. */
  .geroy-kartinka {
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%,
                        #000 52%, transparent 96%);
            mask-image: radial-gradient(closest-side at 50% 50%,
                        #000 52%, transparent 96%);
  }
  .geroy-kartinka img { object-position: 50% 50%; }
  .geroy-kartinka img.vnizu { object-position: 50% 70%; }
}

/* Совсем узкий экран: картинка мешала бы кнопке. */
@media (max-width: 420px) {
  :root { --pole-karty: 20px; --vysota-plashki: 250px; }
  .geroy-s-kartinkoy { grid-template-columns: 1fr 84px; }
}