/* =====================================================================
   Платформа FBT — базовые стили страниц (поверх style.css v001)
   Только токены из :root v001; светлая и тёмная темы — через них.
   Префикс pf- — чтобы не задеть классы главной и чата из v001.
   ===================================================================== */
:root { --r-card: 24px; --r-in: 16px; --r-ctl: 12px; --pf-gap: 20px; --ok-bar: #4ebc73; --mid-bar: #9ccc65; --warn-bar: #ff9500; }

html, body { margin: 0 }
/* фон: главная белая, остальные страницы — серые с белыми карточками (как кабинет в проде) */
body[data-page]:not([data-page="home"]) { background: var(--page) }
.pf-main { min-height: calc(100vh - 64px) }
a.btn { text-decoration: none }
.pf-root { padding-bottom: 64px }
.pf-pg { padding-top: 24px; display: flex; flex-direction: column; gap: var(--pf-gap) }
.pf-lock, .pf-lock body { overflow: hidden }
.num, .pf-num { font-variant-numeric: tabular-nums }

/* шапка: кнопка кабинета и ошибки поиска */
.hbtn.cab-btn .chev { color: var(--text-2); margin-left: -2px }
.hbtn.cab-btn.cur { background: var(--brand-light); color: var(--brand-ink) }
.hbtn.sel .co-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px }
.hbtn.wal { cursor: pointer }
.hbtn.wal:hover, .hbtn.cab-btn:hover { background: var(--neutral-hover) }
.fld.err { box-shadow: inset 0 0 0 2px var(--neg) }
.fld input[readonly] { cursor: pointer }
.fld.emp .v { color: var(--text) }
@media (max-width: 760px) { .hbtn.cab-btn .cab-t, .hbtn.cab-btn .chev { display: none } .hbtn.cab-btn { width: 36px; padding: 0; justify-content: center } }

/* упрощение прототипа: эти элементы видны, но не кликаются */
.tab.inert { cursor: default } .tab.inert:hover { background: rgba(255, 255, 255, .1) }
#aiBtn, #tryLine { cursor: pointer } /* «Режим ИИ» открывает окно демо-режима */

/* типографика */
.pf-h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em }
.pf-h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600 }
.pf-h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600 }
.pf-sub { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 18px }
.pf-muted { color: var(--text-2) }
.pf-small { font-size: 14px }
.neg { color: var(--neg-ink) } .ok { color: var(--brand-ink) } .warn { color: var(--warn) }
.pf-link { color: var(--brand-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer }
.pf-link:hover { text-decoration: underline }
.pf-link.info { color: var(--info); font-weight: 400; font-size: 12px }
.pf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.pf-row.end { justify-content: flex-end }
.pf-grow { flex: 1; min-width: 0 }
.pf-sp { justify-content: space-between }

/* карточки */
.pf-card { background: var(--surface); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.pf-card.flush { padding: 0; gap: 0; overflow: hidden }
.pf-card.tight { padding: 16px; gap: 12px; border-radius: 20px }
.pf-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.pf-card-h .pf-row { margin-left: auto }
.pf-card.flush > .pf-card-h { padding: 20px 24px 16px }
.pf-box { background: var(--surface-2); border-radius: var(--r-in); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.pf-sep { height: 1px; background: var(--line-2); border: 0; margin: 0 }

/* кнопки (дополнения к .btn v001) */
.btn[disabled], .btn.dis { opacity: .45; pointer-events: none }
.btn.lg { height: 48px; padding: 0 20px; border-radius: var(--r-in); font-size: 16px }
.btn.danger { background: var(--neg); color: #fff } .btn.danger:hover { background: var(--neg-ink) }
.btn.ghost { background: transparent; color: var(--text) } .btn.ghost:hover { background: var(--neutral) }
.btn.wide { width: 100% }
.btn.neg-line { background: var(--surface); border: 1px solid var(--line-3); color: var(--neg-ink) }
.btn .ico { width: 18px; height: 18px }
.iconbtn[disabled] { opacity: .35; pointer-events: none }

/* поля формы — серые, подпись сверху мелко (как в проде) */
.pf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.pf-form.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.pf-form.c1 { grid-template-columns: 1fr }
.pf-form .full { grid-column: 1 / -1 }
.pf-in { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-ctl); background: var(--field); border: 1.5px solid transparent; min-width: 0; transition: border-color .15s, background .15s }
.pf-in:focus-within { border-color: var(--brand); background: var(--surface) }
.pf-in > span { font-size: 12px; line-height: 16px; color: var(--text-2) }
.pf-in > span i { color: var(--neg); font-style: normal }
.pf-in input, .pf-in select, .pf-in textarea { border: 0; outline: 0; background: transparent; font-size: 16px; line-height: 20px; color: var(--text); width: 100%; min-width: 0; padding: 0 }
.pf-in input::placeholder, .pf-in textarea::placeholder { color: var(--text-3) }
.pf-in input:disabled { color: var(--text-2) }
.pf-in.sel select { appearance: none; -webkit-appearance: none; padding-right: 22px; cursor: pointer }
.pf-in.sel > .ico { position: absolute; right: 12px; bottom: 12px; color: var(--text-2); pointer-events: none }
.pf-in.area textarea { resize: vertical; min-height: 60px }
.pf-in small { font-size: 12px; color: var(--text-2) }
.pf-in.err { border-color: var(--neg) }
.pf-in.err small { color: var(--neg-ink) }
.pf-in.ro { background: var(--surface-2) }
.pf-in.btnlike { cursor: pointer; text-align: left }
.pf-in.btnlike b { font-weight: 400; font-size: 16px; color: var(--text) }
.pf-in.btnlike b.ph { color: var(--text-3) }

.pf-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r-ctl); background: var(--field); color: var(--text-2); min-width: 0 }
.pf-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); background: var(--surface) }
.pf-search input { border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--text); flex: 1; min-width: 0 }

/* переключатель, чекбокс, радио */
.pf-tg { display: flex; align-items: flex-start; gap: 12px; cursor: pointer }
.pf-tg input { position: absolute; opacity: 0; pointer-events: none }
.pf-tg i { flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-3); position: relative; transition: background .15s; margin-top: 1px }
.pf-tg i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s }
.pf-tg input:checked + i { background: var(--brand) }
.pf-tg input:checked + i::after { transform: translateX(16px) }
.pf-tg input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px }
.pf-tg span, .pf-rd span { display: flex; flex-direction: column; gap: 2px; font-size: 14px }
.pf-tg b, .pf-rd b { font-weight: 500 }
.pf-tg small, .pf-rd small { color: var(--text-2); font-size: 12px }
.pf-check { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-3); background: var(--surface); flex: none; display: grid; place-items: center; cursor: pointer; margin: 0 }
.pf-check:checked { background: var(--brand); border-color: var(--brand) }
.pf-check:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) }
.pf-ck { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; min-height: 32px }
.pf-rd { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--field); border: 1.5px solid transparent }
.pf-rd:has(input:checked) { border-color: var(--brand); background: var(--brand-light) }
.pf-rd input { position: absolute; opacity: 0; pointer-events: none }
.pf-rd i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-3); background: var(--surface); margin-top: 1px; display: grid; place-items: center }
.pf-rd input:checked + i { border-color: var(--brand) }
.pf-rd input:checked + i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand) }
.pf-rds { display: grid; gap: 8px }

/* фильтры-чипы (как в выдаче прода и макете отеля) */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.pf-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-in); background: var(--neutral); color: var(--text); font-weight: 500; font-size: 14px; white-space: nowrap }
.pf-chip:hover { background: var(--neutral-hover) }
.pf-chip.on { background: var(--text); color: var(--surface) }
.pf-chip .ico { width: 18px; height: 18px }
.pf-chip .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; display: inline-grid; place-items: center }
.pf-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--neutral); flex-wrap: wrap }
.pf-seg button { height: 32px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--text-2); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center }
.pf-seg button:hover { color: var(--text) }
.pf-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06) }
.pf-seg .n { font-size: 12px; color: var(--text-3) }
.pf-seg button.on .n { color: var(--brand-ink) }

/* таблица */
.pf-tbl-w { overflow-x: auto; margin: 0 -24px; padding: 0 24px }
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.pf-tbl th { text-align: left; font-weight: 400; font-size: 12px; color: var(--text-2); padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--line-2) }
.pf-tbl td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.pf-tbl tr:last-child td { border-bottom: 0 }
.pf-tbl tbody tr:hover td { background: var(--surface-2) }
.pf-tbl .r { text-align: right; white-space: nowrap }
.pf-tbl small { display: block; color: var(--text-2); font-size: 12px }
.pf-tbl .act { width: 1%; white-space: nowrap; text-align: right }
.pf-tbl b { font-weight: 600 }

/* аватар */
.pf-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-light); color: var(--brand-ink); display: inline-grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; text-transform: uppercase }
.pf-ava.sm { width: 28px; height: 28px; font-size: 12px }
.pf-ava.lg { width: 48px; height: 48px; font-size: 16px }

/* хлебные крошки */
/* Хлебные крошки — одинаково на всех страницах, как в проде: белая полоса 64 px на всю ширину, 14 px, «/», текущая страница — тёмная полужирная */
.pf-crumbs { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 64px; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; font-size: 14px; line-height: 20px; color: var(--text); background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax) }
.pf-crumbs a { color: var(--text); text-decoration: none } .pf-crumbs a:hover { color: var(--brand-ink) }
.pf-crumb-sep { font-style: normal; color: var(--text-3) }
.pf-crumbs span[aria-current] { color: var(--text); font-weight: 600 }
.pf-pg:has(> .pf-crumbs:first-child) { padding-top: 0 }

/* пустое состояние и загрузка */
.pf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 16px; color: var(--text-2) }
.pf-empty-i { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--neutral); color: var(--text-2) }
.pf-empty b { color: var(--text); font-size: 18px; font-weight: 600 }
.pf-empty p { margin: 0; max-width: 46ch; font-size: 14px }
.pf-empty .pf-row { justify-content: center; margin-top: 6px }
.pf-load { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-2) }
.pf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--brand); animation: spin .7s linear infinite }
.pf-skel { background: linear-gradient(90deg, var(--neutral) 25%, var(--neutral-hover) 50%, var(--neutral) 75%); background-size: 200% 100%; animation: pfsk 1.2s infinite; border-radius: 12px }
@keyframes pfsk { to { background-position: -200% 0 } }

/* заметка (инфо, предупреждение, ошибка) */
.pf-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface-2); font-size: 14px; line-height: 19px }
.pf-note .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-2) }
.pf-note b { font-weight: 600 }
.pf-note.info { background: var(--info-light) } .pf-note.info .ico { color: var(--info) }
.pf-note.warn { background: var(--warn-light) } .pf-note.warn .ico { color: var(--warn) }
.pf-note.neg { background: var(--neg-light) } .pf-note.neg .ico { color: var(--neg-ink) }
.pf-note.ok { background: var(--brand-light) } .pf-note.ok .ico { color: var(--brand-ink) }
.pf-note > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }

/* «ключ — значение» */
.pf-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; font-size: 14px; margin: 0 }
.pf-kv dt { color: var(--text-2) } .pf-kv dd { margin: 0; min-width: 0 }
.pf-sum { display: flex; flex-direction: column; gap: 10px; font-size: 14px }
.pf-sum > div { display: flex; justify-content: space-between; gap: 12px }
.pf-sum span { color: var(--text-2) }
.pf-sum > .tot { padding: 12px 0 0; border-top: 1px solid var(--line-2); font-size: 16px; font-weight: 600; background: none; border-radius: 0 }
.pf-sum > .tot b { font-size: 18px }
.pf-sum .tot span { color: var(--text) }

/* всплывающая панель */
.pf-pop { position: absolute; z-index: 60; background: var(--surface); border-radius: 20px; box-shadow: 0 12px 48px rgba(10, 14, 12, .18), 0 0 0 1px var(--line); padding: 12px; max-height: min(560px, calc(100vh - 32px)); overflow: auto; animation: pfin .14s ease-out }
@keyframes pfin { from { opacity: 0; transform: translateY(-4px) } }
.pf-pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto !important; border-radius: 24px 24px 0 0; max-height: 86vh; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); animation: pfsheet .2s ease-out }
@keyframes pfsheet { from { transform: translateY(40px); opacity: 0 } }
.pf-sheet-h { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; margin-bottom: 4px }
.pf-sheet-h b { font-size: 18px; font-weight: 600 }
.pf-scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 59; animation: pffade .2s }
@keyframes pffade { from { opacity: 0 } }

/* меню кабинета и компании */
.pf-cm { padding: 8px; max-height: calc(100vh - 80px) }
.pf-pop.sheet.pf-cm { max-height: 86vh }
.pf-cm-u { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px }
.pf-cm-u span { display: flex; flex-direction: column; min-width: 0 }
.pf-cm-u b { font-weight: 600 } .pf-cm-u small { color: var(--text-2); font-size: 12px }
.pf-cm-g { padding: 4px 0 }
.pf-cm-h { font-size: 12px; color: var(--text-2); padding: 8px 10px 4px }
.pf-cm-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; text-align: left }
.pf-cm-i:hover { background: var(--neutral) }
.pf-cm-i .ico { color: var(--text-2) }
.pf-cm-i.dis { color: var(--text-3); pointer-events: none } .pf-cm-i em { margin-left: auto; font-style: normal; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--neutral); color: var(--text-2) }
.pf-cm-i.out { border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px; margin-top: 4px; color: var(--neg-ink) } .pf-cm-i.out .ico { color: var(--neg-ink) }
.pf-co-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 12px; text-align: left; color: var(--text); text-decoration: none }
.pf-co-row:hover { background: var(--neutral) }
.pf-co-row span { display: flex; flex-direction: column; flex: 1; min-width: 0 } .pf-co-row b { font-weight: 600; font-size: 14px } .pf-co-row small { color: var(--text-2); font-size: 12px }
.pf-co-row.on > .ico:last-child { color: var(--brand) }
.pf-co-row.off { cursor: default } .pf-co-row.off:hover, .pf-co-row.on:hover { background: none }
.btn.inert { cursor: default; pointer-events: none }
.pf-co-row.add .ico { color: var(--brand-ink) }

/* календарь */
.pf-cal { padding: 16px 16px 12px; width: auto }
.pf-cal-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 8px; font-weight: 600; font-size: 14px; min-height: 28px }
.pf-cal-hd .pf-link { font-weight: 500; font-size: 12px; color: var(--text-2); background: var(--neutral); padding: 4px 10px; border-radius: 8px }
.pf-cal-nav { position: relative; height: 0 }
.pf-cal-nav .iconbtn { position: absolute; top: -2px; width: 32px; height: 32px; z-index: 1 } .pf-cal-nav .iconbtn:first-child { left: 0 } .pf-cal-nav .iconbtn:last-child { right: 0 }
.pf-cal-ms { display: flex; gap: 28px }
.pf-cal-m > b { display: block; text-align: center; font-weight: 600; font-size: 14px; line-height: 28px; margin-bottom: 6px }
.pf-cal-g { display: grid; grid-template-columns: repeat(7, 44px); gap: 2px 0 }
.pf-cal-g i { font-style: normal; text-align: center; font-size: 12px; color: var(--text-3); padding: 4px 0 }
.pf-cd { height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.1; position: relative }
.pf-cd:hover:not(.off) { background: var(--neutral) }
.pf-cd.we span { color: var(--neg-ink) }
.pf-cd small { font-size: 10px; color: var(--text-3); font-weight: 500; margin-top: 2px }
.pf-cd small.low { color: var(--brand-ink); font-weight: 700 }
.pf-cd.off { color: var(--text-3); cursor: default } .pf-cd.off span { color: var(--text-3) }
.pf-cd.in { background: var(--brand-light); border-radius: 0 }
.pf-cd.sel { background: var(--brand); color: #fff } .pf-cd.sel span, .pf-cd.sel small { color: #fff }
.pf-cd.a { border-radius: 12px 0 0 12px } .pf-cd.b { border-radius: 0 12px 12px 0 }
.pf-pop.sheet .pf-cal-g { grid-template-columns: repeat(7, 1fr) }
.pf-pop.sheet.pf-cal { padding: 0 12px 16px }

/* выбор сотрудников */

/* города */
.pf-cities { padding: 6px }
.pf-cl { display: flex; flex-direction: column }
.pf-cl-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-align: left }
.pf-cl-row:hover, .pf-cl-row:focus-visible { background: var(--neutral) }
.pf-cl-row > .ico { color: var(--text-2) }
.pf-cl-row span { flex: 1; display: flex; flex-direction: column; min-width: 0 } .pf-cl-row b { font-weight: 500; font-size: 14px } .pf-cl-row small { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-cl-row code { font: 600 12px/16px var(--font); color: var(--text-2) }
.pf-cl-h { font-size: 12px; color: var(--text-2); padding: 10px 10px 4px }

/* шторка и диалог */
.pf-lscrim { position: fixed; inset: 0; background: var(--overlay); z-index: 70; opacity: 0; transition: opacity .2s }
.pf-lscrim.on { opacity: 1 }
.pf-drawer, .pf-modal { position: fixed; z-index: 71; background: var(--surface); display: flex; flex-direction: column; box-shadow: var(--shadow-lg) }
.pf-drawer { top: 0; right: 0; bottom: 0; width: min(560px, 100%); transform: translateX(100%); transition: transform .22s ease-out }
.pf-drawer.wide { width: min(760px, 100%) }
.pf-drawer.on { transform: none }
.pf-modal { top: 50%; left: 50%; width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 48px); border-radius: var(--r-card); transform: translate(-50%, -46%); opacity: 0; transition: transform .2s ease-out, opacity .2s }
.pf-modal.wide { width: min(760px, calc(100% - 32px)) }
.pf-modal.on { transform: translate(-50%, -50%); opacity: 1 }
.pf-l-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px 24px }
.pf-l-t h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600 }
.pf-l-t p { margin: 4px 0 0; color: var(--text-2); font-size: 14px }
.pf-l-b { flex: 1; overflow: auto; padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 16px }
.pf-l-f { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line-2); flex-wrap: wrap }
.pf-l-f .btn { min-width: 120px }
.pf-ctext { margin: 0; color: var(--text-2); font-size: 16px; line-height: 22px }
.pf-lsec { display: flex; flex-direction: column; gap: 12px }
.pf-lsec > h3 { margin: 0; font-size: 16px; font-weight: 600 }
.pf-lsec + .pf-lsec { padding-top: 16px; border-top: 1px solid var(--line-2) }
@media (max-width: 640px) {
  .pf-modal { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(30px) } .pf-modal.on { transform: none }
  .pf-modal.wide { width: 100% }
  .pf-l-f { padding-bottom: calc(16px + env(safe-area-inset-bottom)) } .pf-l-f .btn { flex: 1 }
}

/* кабинет: меню разделов слева */
.pf-cab { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding-top: 24px; align-items: start }
.pf-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 104px); overflow: auto; padding-bottom: 12px }
.pf-sg { display: flex; flex-direction: column; gap: 2px }
.pf-sg + .pf-sg { margin-top: 12px }
.pf-sg-h { font-size: 12px; color: var(--text-2); padding: 4px 12px 6px }
.pf-si { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px }
.pf-si .ico { width: 18px; height: 18px; color: var(--text-2) }
.pf-si:hover { background: var(--neutral) }
.pf-si.on { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04) }
.pf-si.on .ico { color: var(--brand) }
.pf-si.dis { color: var(--text-3); cursor: default } .pf-si.dis:hover { background: none } .pf-si.dis .ico { color: var(--text-3) }
.pf-si em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 8px; background: var(--neutral); color: var(--text-2) }
.pf-side-m { display: none }
.pf-cab-main { display: flex; flex-direction: column; gap: var(--pf-gap); min-width: 0 }
@media (max-width: 1000px) {
  .pf-cab { grid-template-columns: 1fr; gap: 12px; padding-top: 12px }
  .pf-side { display: none }
  .pf-side-m { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px }
  .pf-side-m::-webkit-scrollbar { display: none }
  .pf-side-m a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap }
  .pf-side-m a .ico { color: var(--text-2) }
  .pf-side-m a.on { background: var(--text); color: var(--surface) } .pf-side-m a.on .ico { color: var(--surface) }
}

/* адаптив: телефон 390 */
@media (max-width: 760px) {
  .pf-card { padding: 16px; border-radius: 20px }
  .pf-card.flush > .pf-card-h { padding: 16px 16px 12px }
  .pf-tbl-w { margin: 0 -16px; padding: 0 16px }
  .pf-form, .pf-form.c3 { grid-template-columns: 1fr }
  .pf-h1 { font-size: 24px; line-height: 30px }
  .pf-h2 { font-size: 20px; line-height: 26px }
  .pf-l-h { padding: 16px 16px 8px 16px } .pf-l-b { padding: 4px 16px 20px } .pf-l-f { padding: 12px 16px }
  .pf-kv { grid-template-columns: 1fr; gap: 2px } .pf-kv dd { margin-bottom: 8px }
  /* таблица превращается в карточки строк */
  .pf-tbl.cards thead { display: none }
  .pf-tbl.cards, .pf-tbl.cards tbody, .pf-tbl.cards tr, .pf-tbl.cards td { display: block; width: 100% }
  .pf-tbl.cards tr { padding: 12px 0; border-bottom: 1px solid var(--line-2) }
  .pf-tbl.cards tr:last-child { border-bottom: 0 }
  .pf-tbl.cards td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right }
  .pf-tbl.cards td::before { content: attr(data-l); color: var(--text-2); font-size: 12px; text-align: left; flex: none }
  .pf-tbl.cards td.lead { text-align: left; display: block; padding-bottom: 6px } .pf-tbl.cards td.lead::before { content: none }
  .pf-tbl.cards td.act { justify-content: flex-start; padding-top: 6px; width: 100% } .pf-tbl.cards td.act::before { content: none }
  .pf-tbl.cards tbody tr:hover td { background: none }
}
/* превью страницы без шапки (дизайн-система) */
body[data-story="page"] > header { display: none }

/* окно «Ограничение демо-режима» */
.pf-modal.pf-demo { width: min(480px, calc(100% - 32px)) }
.pf-demo-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--brand-light); color: var(--brand-ink); font-size: 12px; font-weight: 600 }
.pf-demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px }
.pf-demo-list li { display: flex; gap: 10px; align-items: flex-start } .pf-demo-list .ico { color: var(--brand); flex: none; margin-top: 2px }
#trips .tc { cursor: pointer }
.pf-modal.pf-demo { width: min(540px, calc(100% - 32px)) }
.pf-modal.pf-demo .pf-l-f { flex-wrap: nowrap }
@media (max-width: 640px) { .pf-modal.pf-demo .pf-l-f { flex-direction: column-reverse } .pf-modal.pf-demo .pf-l-f .btn { width: 100% } }

/* поиск как в проде: активное поле, список городов, выбор сотрудников, календарь */
.pf-pop.pf-cities { border-radius: 24px; padding: 8px; box-shadow: 0 12px 40px rgba(10, 14, 12, .16) }
.pf-cl-row { gap: 12px; padding: 8px 12px; border-radius: 16px; align-items: center }
.pf-cl-row.on, .pf-cl-row:hover { background: var(--neutral) }
.pf-cl-row .pf-cl-pin { color: var(--text-2); flex: none }
.pf-cl-row b { font-size: 16px; line-height: 22px; font-weight: 600 }
.pf-cl-row b i { font-style: normal; font-weight: 400; color: var(--text-3); margin-left: 6px }
.pf-cl-row small { font-size: 12px; line-height: 16px }
.pf-cal-hd { padding: 0 4px 12px; margin: 0 -16px 12px; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid var(--line-2) }
.pf-cal-hd .pf-link { font-weight: 500; font-size: 12px; color: var(--text-2); background: var(--neutral); padding: 6px 12px; border-radius: 10px; text-decoration: none }
.pf-cal-hd .pf-link[disabled] { color: var(--text-3); background: var(--surface-2); cursor: default }
.pf-cal-g { grid-template-columns: repeat(7, 48px) }
.pf-cd { height: 48px }

/* Шапка как в проде fbt.kz/cabinet: логотип 235×24, меню через 24 px, пункты через 32 px, без счётчика у «Поездок»;
   выбор компании — серая кнопка 12 px; баланс одной строкой с иконкой кошелька */
.logo svg { height: 24px }
.hl { gap: 24px }
.nav { gap: 32px; font-size: 14px; line-height: 18px }
.nav .cnt { display: none }
.hbtn.sel { background: var(--neutral); border-radius: 12px; min-width: 254px; padding: 0 12px }
.hbtn.sel:hover { background: var(--neutral-hover) }
.hbtn.wal .wal-cr, .hbtn.wal small { display: none }
.hbtn.wal .wal-v { display: flex; align-items: center }
@media (max-width: 1100px) { .hbtn.sel { min-width: 0 } }
@media (max-width: 760px) { .logo svg { height: 20px } }
.ico.fill { fill: currentColor; stroke: none }
.hbtn.cab-btn .chev { width: 14px; height: 14px }

/* Поиск на главной — сегменты как в b2b-fbt (src/assets/segmented-search.css):
   серые разделители 1 px, наведение — фон #f4f5f5, активное или открытое поле — кольцо 1 px #4ebc73
   поверх разделителя и по форме самого сегмента (скругление только у крайних полей), ошибка — красное кольцо */
:root { --seg-line: #eaeced; --seg-hover: #f4f5f5 }
:root[data-theme="dark"] { --seg-line: #2a2d31; --seg-hover: #1d1f22 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seg-line: #2a2d31; --seg-hover: #1d1f22 } }
.hero .fields { background: var(--seg-line) }
.hero .fields .fld { transition: background-color .15s ease }
.hero .fields .fld::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid transparent; border-radius: inherit; pointer-events: none; opacity: 0; transition: border-color .15s ease, opacity .15s ease }
@media (hover: hover) { .hero .fields .fld:not(.err):hover { background: var(--seg-hover) } }
.hero .fields .fld:focus-within, .hero .fields .fld[aria-expanded="true"] { z-index: 2 }
.hero .fields .fld:focus-within::after, .hero .fields .fld[aria-expanded="true"]::after { border-color: var(--brand); opacity: 1 }
.hero .fields .fld.err { box-shadow: none; z-index: 3 }
.hero .fields .fld.err::after { border-color: var(--neg); opacity: 1 }
.hero .fields .fld input { font-size: 14px }
.hero .fields .fld input::placeholder { color: #8b8e94 }
.hero .fields .fld.emp { font-size: 14px; line-height: 20px; font-weight: 500 }
.hero .fields .fld.emp .v.ph { color: var(--text) }
@media (min-width: 1181px) {
  .hero .fields { overflow: visible }
  .hero .fields .fld::after { inset: -1px }
  .hero .fields .fld:first-child { border-radius: 16px 0 0 16px }
  .hero .fields .fld:last-child { border-radius: 0 16px 16px 0 }
  .hero .fields .fld.emp { flex: 0 0 270px }
}
/* «Найти» — текстом, 140×56, как .search-button в b2b-fbt */
.find { width: 140px; padding: 0 24px; font-size: 18px; font-weight: 600; line-height: 28px; display: flex; align-items: center; justify-content: center }
@media (max-width: 1180px) { .find { flex: 1 1 140px } }

/* Выбор сотрудников — по EmployeeSelect.vue / EmployeeSelectContent.vue из b2b-fbt (ширина 400, секции через линии #eaeced) */
.pf-pop.pf-ep { padding: 0; width: 400px; max-height: min(536px, calc(100vh - 160px)); display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: 0 10px 40px rgba(0, 0, 0, .12); overflow: hidden }
.esc { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; background: var(--surface) }
.esc-cabin { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line-2); flex: none }
.esc-cabin-t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text) }
.esc-cabin-o { display: flex; gap: 8px }
.esc-cabin-o button { flex: 1 1 0; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); padding: 8px; transition: border-color .12s, background-color .12s }
.esc-cabin-o button span { padding: 0 4px; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text-2) }
.esc-cabin-o button.on { border-color: #4ebc73; background: rgba(78, 188, 115, .08) }
.esc-cabin-o button.on span { color: #4ebc73 }
.esc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 24px; border-bottom: 1px solid var(--line-2); max-height: 104px; overflow: hidden; flex: none }
.esc-chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; max-width: 160px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface) }
.esc-chip.more { justify-content: center; min-width: 44px; font-size: 14px; font-weight: 600; color: var(--text-2) }
.esc-chip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text-2) }
.esc-chip-ed { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 6px; color: var(--text-2) }
.esc-chip-ed:hover { background: var(--seg-hover); color: var(--text) }
.esc-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text-2) }
.esc-chip-x:hover { color: var(--text) }
.esc-search { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line-2); flex: none }
.esc-max { margin: 0; font-size: 12px; line-height: 16px; color: #92400e }
.esc-sf { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 16px; background: var(--seg-hover); color: var(--text-3) }
.esc-sf:focus-within { outline: 1px solid #4ebc73 }
.esc-si { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; padding: 0; font-size: 16px; line-height: 22px; color: var(--text) }
.esc-si::placeholder { color: var(--text-3) }
.esc-sx { width: 24px; height: 24px; border-radius: 50%; font-size: 20px; line-height: 24px; color: var(--text-2) }
.esc-list { display: flex; flex-direction: column; gap: 12px; padding: 10px 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto }
.esc-emp { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 70px; padding: 16px; border-radius: 12px; text-align: left; transition: background-color .12s; flex: none }
.esc-emp:hover:not(:disabled) { background: var(--surface-2) }
.esc-emp:disabled { cursor: not-allowed; opacity: .45 }
.esc-emp-i { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.esc-emp-n { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); overflow-wrap: anywhere }
.esc-emp-s { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.esc-cb { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: 2px solid #d4d4d8; border-radius: 6px; background: var(--surface); transition: background-color .12s, border-color .12s }
.esc-cb.on { border-color: #4ebc73; background: #4ebc73 }
.esc-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; text-align: center; font-size: 14px; color: var(--text-2) }
.esc-state p { margin: 0 }
.esc-state-a { color: #4ebc73; font-weight: 600 }
.esc-foot { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line-2); flex: none }
.esc-fb { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 36px; border-radius: 12px; background: var(--neutral); padding: 0 12px; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text) }
.esc-fb:hover { background: var(--neutral-hover) }
.pf-pop.sheet.pf-ep { width: auto; max-height: 86vh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom) }
.pf-pop.sheet.pf-ep .pf-sheet-h { padding: 14px 24px 10px; margin: 0 }
.pf-pop.sheet.pf-ep .esc-cabin, .pf-pop.sheet.pf-ep .esc-chips, .pf-pop.sheet.pf-ep .esc-search, .pf-pop.sheet.pf-ep .esc-list, .pf-pop.sheet.pf-ep .esc-foot { padding-left: 16px; padding-right: 16px }
/* общие строки и секции «как в выборе сотрудников» — окно пополнения и состав поездки */
.pf-ep-sec { display: flex; flex-direction: column; gap: 6px } .pf-ep-l { font-size: 12px; font-weight: 600 }
.pf-ep-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; cursor: pointer }
.pf-ep-row:hover { background: var(--surface-2) }
.pf-ep-t { flex: 1; min-width: 0; display: flex; flex-direction: column }
.pf-ep-t b { font-weight: 500; font-size: 14px }
.pf-ep-t small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-ep-empty { padding: 20px 8px; text-align: center; color: var(--text-2); font-size: 14px }

/* «Вау-момент» после оплаты */
.pf-win-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; animation: pf-win-pop .45s cubic-bezier(.2, 1.4, .4, 1) both }
.pf-win-ic .ico { width: 28px; height: 28px; stroke-width: 2.6 }
.pf-win-lead { font-size: 16px; line-height: 24px; color: var(--text) }
@keyframes pf-win-pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pf-win-ic { animation: none } }

/* Демо-сценарий: чек-лист в правом нижнем углу */
.tour { position: fixed; right: 16px; bottom: 16px; z-index: 70; font-size: 14px } /* справа внизу — не закрывает меню кабинета */
.tour-pill { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgba(10, 14, 12, .16), 0 0 0 1px var(--line-2) }
.tour-pill b { font-weight: 600 }
.tour-c { font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums }
.tour-ring { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 360deg), var(--line-2) 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px) }
.tour.on { width: 320px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 16px 48px rgba(10, 14, 12, .18), 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 12px }
.tour-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px }
.tour-h > div { display: flex; flex-direction: column; gap: 2px }
.tour-h b { font-size: 16px; line-height: 22px; font-weight: 600 }
.tour-h span { font-size: 12px; color: var(--text-2) }
.tour-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2) }
.tour-x:hover { background: var(--surface-2) }
.tour-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden }
.tour-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .5s ease }
.tour-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.tour-l li { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 12px }
.tour-l li.cur { background: var(--brand-light) }
.tour-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1.5px solid var(--line-3); color: var(--text-2) }
.tour-l li.cur .tour-n { border-color: var(--brand); color: var(--brand-ink) }
.tour-l li.ok .tour-n { background: var(--brand); border-color: var(--brand); color: #fff }
.tour-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px }
.tour-t b { font-weight: 500 }
.tour-l li.ok .tour-t b { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--line-3) }
.tour-t small { font-size: 12px; line-height: 17px; color: var(--text-2) }
.tour-go { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 28px; padding: 0 6px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 14px }
.tour-l li.cur .tour-go { color: var(--brand-ink); padding: 0 10px; background: var(--surface) }
.tour-go:hover { background: var(--surface-2) }
.tour-cta { justify-content: center; text-decoration: none }
.tour-f { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-3); text-align: center }
.tour.flash .tour-pill, .tour.flash.on { animation: tour-flash 1.4s ease }
@keyframes tour-flash { 0%, 100% { box-shadow: 0 16px 48px rgba(10, 14, 12, .18), 0 0 0 1px var(--line-2) } 30% { box-shadow: 0 16px 48px rgba(10, 14, 12, .18), 0 0 0 4px var(--brand) } }
@media (prefers-reduced-motion: reduce) { .tour.flash .tour-pill, .tour.flash.on { animation: none } .tour-bar i { transition: none } }
@media (max-width: 760px) { .tour { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)) } .tour.on { width: auto; left: 12px } }
@media print { .tour { display: none } }
/* пикер чуть аккуратнее прода: строки ниже, аватар, одна строка «Взрослый · документ», выбранная строка подсвечена */
.esc-list { gap: 2px; padding: 8px 12px }
.esc-emp { min-height: 0; align-items: center; padding: 10px 12px; gap: 12px }
.esc-emp.on { background: var(--brand-light) }
.esc-emp.on:hover:not(:disabled) { background: var(--brand-light) }
.esc-ava { width: 36px; height: 36px; flex: none; font-size: 12px }
.esc-emp-n { line-height: 20px }
.esc-emp-s { margin-top: 2px }
.esc-cb { margin-top: 0 }
.esc-cabin-o button { height: 36px }
.esc-chip { border-radius: 999px; padding: 0 6px 0 12px; background: var(--surface-2) }
.esc-emp.on .esc-ava { background: var(--surface) }
/* выбор языка — как в проде: «Рус» 76×36, открытая — зелёная рамка, список шириной с кнопку */
.hbtn.lang { min-width: 76px; justify-content: space-between; padding: 0 8px 0 12px; font-weight: 400 }
.hbtn.lang .chev { color: var(--text-2); transition: transform .2s }
.hbtn.lang[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--brand) }
.hbtn.lang[aria-expanded="true"] .chev { transform: rotate(180deg) }
.pf-pop.pf-lang-pop { padding: 8px; border-radius: 16px; min-width: 76px }
.pf-lang { display: flex; flex-direction: column }
.pf-lang button { height: 40px; padding: 0 12px; border-radius: 10px; text-align: left; font-size: 16px; color: var(--text) }
.pf-lang button:hover { background: var(--surface-2) }
@media (max-width: 760px) { .hbtn.lang { display: none } }
/* воздух внизу страниц — контент не прилипает к нижнему краю (и не прячется под кнопкой демо-сценария) */
#home > .wrap { padding-bottom: 96px }
.pf-main { padding-bottom: 96px }
@media (max-width: 760px) { #home > .wrap, .pf-main { padding-bottom: 88px } }

/* Окна на телефоне: шторка на всю ширину по центру, кнопки друг под другом во всю ширину и нормальной высоты */
@media (max-width: 640px) {
  .pf-modal, .pf-modal.wide, .pf-modal.pf-demo { left: 0; right: 0; width: 100% }
  .pf-l-t h2 { font-size: 20px; line-height: 26px }
  .pf-l-f { flex-direction: column-reverse; gap: 8px; flex-wrap: nowrap }
  .pf-l-f .btn, .pf-modal.pf-demo .pf-l-f .btn { flex: none; width: 100%; min-width: 0; height: 48px; justify-content: center }
  .pf-win-ic { width: 48px; height: 48px }
}
/* продающие окна: кнопки равной ширины на всю строку; у окна после оплаты галочка над заголовком */
@media (min-width: 641px) { .pf-modal.pf-demo .pf-l-f .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap } }
.pf-modal.pf-win .pf-l-t { display: flex; flex-direction: column; gap: 16px }
/* «Демо-сценарий» на телефоне — компактная кнопка: только кольцо прогресса и счётчик, не закрывает кнопки */
@media (max-width: 760px) {
  .tour-pill { height: 48px; padding: 0 12px 0 10px; gap: 6px }
  .tour-pill b { display: none }
}
/* календарь в шторке на телефоне — месяц на всю ширину, клетки ровной сеткой */
.pf-pop.sheet .pf-cal-ms { display: block }
.pf-pop.sheet .pf-cal-m { width: 100% }
.pf-pop.sheet .pf-cal-g { grid-template-columns: repeat(7, minmax(0, 1fr)) }
/* пока открыта шторка, окно или панель — кнопка демо-сценария не мешает */
body:has(.pf-pop.sheet, .pf-modal.on, .pf-drawer.on, .pf-scrim) .tour { display: none }
/* в шторке заголовок уже есть сверху — в календаре не повторяем; остаётся только «Обратный билет не нужен» */
.pf-pop.sheet .pf-cal-hd > span:first-child { display: none }
.pf-pop.sheet .pf-cal-hd { justify-content: flex-end }
.pf-pop.sheet .pf-cal-hd:not(:has(button)) { display: none }
/* окно после оплаты: галочка, заголовок и подпись — по центру; крестик не сдвигает центр */
.pf-modal.pf-win .pf-l-h { position: relative; justify-content: center; padding-left: 48px; padding-right: 48px }
.pf-modal.pf-win .pf-l-h > .iconbtn { position: absolute; top: 16px; right: 16px }
.pf-modal.pf-win .pf-l-t { width: 100%; align-items: center; text-align: center }
.pf-modal.pf-win .pf-win-lead { text-align: center }