/* NFC Leaders — парсер клиентов v6. Светлый рабочий интерфейс: телефон — главный экран. */
:root {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --ink: #141418;
  --muted: #66656c;
  --line: #e3e1db;
  --line-2: #eeece7;
  --accent: #2340ff;
  --accent-ink: #1a30cc;
  --accent-soft: #e9ecff;
  --hot: #2340ff;
  --warm: #e08a00;
  --cold: #a3a29b;
  --ok: #15633f;
  --ok-bg: #e5f4ec;
  --warn: #8a4b00;
  --warn-bg: #fbefdc;
  --r: 10px;
  --pw: 460px;
  --top: 60px;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body.no-scroll { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.pad { padding: 14px 4px; }
.link.tap { position: relative; } /* зона нажатия 44 px без раздувания строки */
.link.tap::after { content: ''; position: absolute; inset: -12px -6px; }
#catAll { position: relative; } #catAll::after { content: ''; position: absolute; inset: -11px -6px; } /* зона нажатия 44 px у «Выбрать все» */
.m-note.ok { color: #1f6b3a; } /* «цена забронирована» в окне подписки */
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; z-index: 60; height: var(--top); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-logo { height: 30px; width: auto; flex: none; }
.brand-sub { color: var(--muted); font-size: 13.5px; padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.top-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.top-nav a, .help-btn { text-decoration: none; padding: 0 12px; height: 44px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; color: var(--muted); border: 0; background: none; cursor: pointer; white-space: nowrap; }
.top-nav a:hover, .help-btn:hover { color: var(--ink); background: var(--bg); }
.help-btn { color: var(--accent); }

/* ---------- раскладка: слева панель, справа карта (на компьютере) ---------- */
.ws { min-height: calc(100vh - var(--top)); }
.panel { width: var(--pw); background: var(--surface); border-right: 1px solid var(--line); }
.p-head { padding: 18px 24px 22px; }
.p-body { padding: 0 24px 28px; min-height: calc(100vh - var(--top)); }
body:not([data-step="3"]) .p-head { min-height: calc(100vh - var(--top)); }
.mapwrap { position: fixed; left: var(--pw); top: var(--top); right: 0; bottom: 0; background: #e8e6e0; }
#map { position: absolute; inset: 0; }

/* шаги */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 18px; padding: 4px; background: var(--bg); border-radius: var(--r); counter-reset: st; }
.steps li { counter-increment: st; }
.steps button, .steps span { width: 100%; height: 44px; border: 0; background: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--muted); }
.steps button { cursor: pointer; }
.steps button:disabled { cursor: default; }
.steps button::before, .steps span::before { content: counter(st) '.'; font-weight: 800; }
.steps li.is-on button, .steps li.is-on span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,24,.12); }
.steps li.is-done button, .steps li.is-done span { color: var(--accent); }

/* шаг 1 */
.step h1 { font-size: 27px; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 10px; font-weight: 800; }
.step h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; font-weight: 800; }
.lead { margin: 0 0 20px; color: #3d3c43; font-size: 15px; }
.field { display: block; font-size: 13.5px; font-weight: 700; margin: 0 0 7px; }
.where { position: relative; margin-bottom: 18px; }
.where-row { display: flex; gap: 8px; }
.where-row input { flex: 1; min-width: 0; height: 52px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0 14px; font-size: 16px; font-weight: 600; background: #fff; outline: none; }
.where-row input:focus { border-color: var(--accent); }
.me-btn { flex: none; height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.me-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.where-note { margin: 7px 0 0; font-size: 13px; color: var(--muted); }
.where-note.err { color: #b3261e; font-weight: 600; }
.sugg { position: absolute; z-index: 30; left: 0; right: 0; top: 56px; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 40px -20px rgba(20,20,24,.45); max-height: 340px; overflow: auto; }
.sugg li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; min-height: 48px; }
.sugg li.is-on, .sugg li:hover { background: var(--bg); }
.sugg li.muted, .sugg li.smart-note { cursor: default; font-size: 13px; }
.sugg li.smart-note { color: var(--accent); background: none; }
.sugg li > span:nth-child(2) { flex: 1; min-width: 0; }
.sugg b { display: block; font-size: 14.5px; }
.sugg small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.s-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; flex: none; }
.s-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.seg { display: inline-flex; background: var(--bg); border-radius: var(--r); padding: 4px; gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; border-radius: 7px; min-height: 44px; padding: 0 12px; cursor: pointer; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg button.is-on { background: var(--ink); color: #fff; }
.seg.big { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg.big button { min-height: 48px; font-size: 15.5px; }
.hint { margin: 7px 0 16px; font-size: 13px; color: var(--muted); }

.more { border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 18px; }
.more summary { cursor: pointer; padding: 13px 14px; min-height: 48px; font-size: 14px; color: var(--muted); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: 'Изменить'; color: var(--accent); font-weight: 700; flex: none; }
.more[open] summary::after { content: 'Свернуть'; }
.more summary b { color: var(--ink); }
.more.warn summary b { color: #b3261e; }
.more-body { padding: 0 14px 14px; display: grid; gap: 8px; }
.more-body .seg { margin-bottom: 8px; }
.cats { display: grid; gap: 10px; }
.cat-group > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.cat-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip em { font-style: normal; font-size: 12px; opacity: .75; }

.go { width: 100%; min-height: 56px; border: 0; border-radius: var(--r); background: var(--accent); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; padding: 0 18px; text-align: center; transition: background .2s; }
.go:hover { background: var(--accent-ink); }
.go:disabled { opacity: .5; cursor: default; }
.go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ghost { min-height: 48px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; cursor: pointer; text-decoration: none; }
.ghost:hover { border-color: var(--ink); }

.hist { margin-top: 22px; }
.hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist button { width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 9px 12px; cursor: pointer; min-height: 48px; }
.hist button:hover { border-color: var(--ink); }
.hist b { display: block; font-size: 14px; }
.hist small { color: var(--muted); font-size: 12.5px; }

/* шаг 2 */
.scan-num { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 10px; }
.scan-num b { font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: var(--accent); }
.scan-num span { color: var(--muted); font-size: 15px; }
.sbar { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.sbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s; }
#sText { margin: 8px 0 18px; font-size: 14px; }
.sieve { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.sieve li { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.sieve li span::before { content: ''; display: inline-block; width: 16px; height: 2px; background: #c8c6bf; vertical-align: middle; margin-right: 10px; }
.sieve b { font-size: 18px; font-weight: 800; min-width: 3ch; text-align: right; }
.sieve-note { color: var(--muted); font-size: 13.5px; margin: 12px 0 0; }

/* шаг 3 */
.res-place { margin: 0 0 4px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.res-sub { margin: 0 0 16px; color: #3d3c43; }
.res-act { display: grid; gap: 8px; }
.removed { margin: 14px 0 0; font-size: 13px; color: var(--muted); padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.removed b { color: var(--warn); }

/* вкладки и список */
.tabs { position: sticky; top: var(--top); z-index: 20; display: flex; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); margin: 0 -24px 6px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: none; min-height: 50px; padding: 0 12px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.tab em { font-style: normal; color: var(--accent); margin-left: 2px; }
.lsearch { display: grid; gap: 8px; margin: 10px 0; }
.lsearch input[type=search] { height: 46px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0 12px; font-size: 15px; outline: none; }
.lsearch input[type=search]:focus { border-color: var(--accent); }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.groups { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; padding-bottom: 2px; }
.stops { list-style: none; margin: 0; padding: 0; }
.leg { padding: 12px 0 6px; font-size: 13px; color: var(--muted); }
.leg span { display: flex; align-items: center; gap: 8px; }
.leg span::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-left: 13px; margin-right: 12px; }
.leg b { display: block; color: var(--ink); font-size: 13.5px; margin: 6px 0 0 0; }
.leg.parts { display: grid; gap: 6px; }
.leg.parts a { color: var(--accent); font-weight: 700; }
.leg.note { font-size: 12px; padding-top: 14px; }
.stop { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.stop .n { width: 32px; height: 32px; border-radius: 50%; background: var(--c, var(--accent)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; line-height: 1; }
#tab-route .stop .n { background: var(--accent); }
#tab-places .stop .n { width: 10px; height: 10px; margin: 8px 11px; }
.stop .n small { font-size: 9px; display: block; }
#tab-installs .stop .n { background: var(--ink); display: flex; flex-direction: column; }
.stop.is-active { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.st-main { min-width: 0; }
.st-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.st-top h3 { margin: 4px 0 0; font-size: 16.5px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rc { flex: none; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.1; }
.rc b { display: block; font-size: 20px; color: var(--ink); font-weight: 900; }
.st-meta { margin: 3px 0 6px; font-size: 13px; color: var(--muted); }
.flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.fl { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.fl.ok { background: var(--ok-bg); color: var(--ok); }
.fl.mid { background: var(--accent-soft); color: var(--accent-ink); }
.fl.warn { background: var(--warn-bg); color: var(--warn); }
.fl.st { background: var(--ink); color: #fff; }
.say { margin: 0 0 10px; font-size: 14px; line-height: 1.4; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; }
.st-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.st-act > * { justify-content: center; white-space: nowrap; min-width: 0; }
.st-act select { width: 100%; text-overflow: ellipsis; }
#route .stop .n { background: var(--accent); }
.st-act > * { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.st-act > *:hover { border-color: var(--ink); }
.st-act .b-main { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-act .pick.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.st-act select { padding-right: 28px; max-width: 100%; }
select.st-done { background: var(--ok-bg); color: var(--ok); border-color: #b5dfc8; }
select.st-no { color: var(--muted); }
select.st-visit, select.st-later { background: var(--warn-bg); color: var(--warn); }
.list-title { margin: 18px 0 2px; }
.list-title b { display: block; font-size: 15.5px; font-weight: 800; }
.list-title span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
/* строка «Карточек нет? Мы поставщик» — заметная, но не кричит */
.sup-line { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 0 14px; border-radius: var(--r); background: #e8f4fb; color: #0f6a97; font-weight: 700; font-size: 14px; text-decoration: none; }
.sup-line::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #229ed9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.6 7.3 5.9 11.8c-.8.3-.8.8-.1 1l3 .9 1.1 3.5c.1.4.3.5.6.5.3 0 .4-.1.6-.3l1.5-1.4 3 2.2c.6.3 1 .2 1.1-.5l2-9.4c.2-.8-.3-1.2-1.1-1z'/%3E%3C/svg%3E") center/22px no-repeat; }
.sup-line:hover { background: #dcedf7; }
#stopScan { width: 100%; margin-top: 16px; }
.stop.in-bld .st-meta { margin-top: 2px; }
.extra { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; }
.extra summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 14.5px; list-style: none; }
.extra summary::-webkit-details-marker { display: none; }
.extra summary::after { content: 'Показать'; color: var(--accent); flex: none; }
.extra[open] summary::after { content: 'Скрыть'; }
.extra[open] { padding-bottom: 8px; }
.tools button em { font-style: normal; color: var(--accent); }
.brand { flex: none; }
.top-nav .tg-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 8px; background: #229ed9; color: #fff !important; font-weight: 700; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.top-nav .tg-btn:hover { background: #1c8cc2; }
.top-nav .tg-btn svg { width: 22px; height: 22px; }
/* блок поставщика: две карточки-образца, текст и ссылки на наши каналы */
.supplier { margin-top: 22px; padding: 16px; border-radius: 12px; background: #0f1222; color: #fff; display: grid; gap: 14px; }
.sup-cards { display: flex; gap: 10px; }
.sc { width: 132px; aspect-ratio: 1.586; border-radius: 9px; padding: 10px 11px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; font-weight: 700; position: relative; box-shadow: 0 10px 22px -12px rgba(0,0,0,.7); }
.sc i { font-style: normal; font-size: 15px; font-weight: 800; line-height: 1.1; }
.sc::after { content: ''; position: absolute; right: 10px; bottom: 10px; width: 14px; height: 14px; border: 2.5px solid currentColor; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); opacity: .6; }
.sc.y { background: #fff; color: #141418; }
.sc.y::before { content: ''; position: absolute; right: 11px; top: 10px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #fc3f1d; }
.sc.b { background: var(--accent); color: #fff; transform: rotate(-4deg); margin-top: 6px; }
.sup-text b { display: block; font-size: 18px; margin-bottom: 4px; }
.sup-text p { margin: 0; color: #c9cbe0; font-size: 14px; }
.sup-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sup-act .go { grid-column: 1 / -1; background: #229ed9; min-height: 52px; font-size: 16px; }
.sup-act .go:hover { background: #1c8cc2; }
.sup-act .go svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.sup-act .ghost { background: transparent; color: #fff; border-color: #3a3e57; gap: 7px; }
.sup-act .ghost:hover { border-color: #fff; }
.sup-act .ghost svg { width: 18px; height: 18px; }
/* приложение в Telegram: полоса доступа, тарифы, водяная метка «для кого» */
#keyGo { width: auto; padding: 0 18px; }
/* соцсети своими цветами, чтобы находили сразу: Instagram — розовый, TikTok — чёрный, Telegram — синий */
.top-nav a.nav-link.ig, .sup-act .ghost.ig { background: #E1306C; border-color: #E1306C; color: #fff; }
.top-nav a.nav-link.tt, .sup-act .ghost.tt { background: #000; border-color: #000; color: #fff; }
.sup-act .ghost.tt { border-color: #fff; }
.top-nav a.nav-link.ig:hover { background: #c92a60; color: #fff; }
.top-nav a.nav-link.tt:hover { background: #222; color: #fff; }
.sup-act .ghost.ig:hover { background: #c92a60; border-color: #c92a60; }
.sup-act .ghost.tt:hover { background: #222; }
.top-nav a.nav-link { margin-left: 6px; }
/* плавная смена шагов (один раз, без дёрганья) */
.step:not([hidden]), .p-body:not([hidden]) { animation: stepIn .28s cubic-bezier(.25, 1, .5, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }
/* нижнее меню — только на телефоне */
.tabbar { display: none; }
.me-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--bg); }
.me-st b { display: block; font-size: 14px; }
.me-st small { display: block; color: var(--muted); font-size: 12px; }
.me-st.ok b { color: var(--ok); }
.ghost.sm { min-height: 44px; padding: 0 12px; font-size: 14px; flex: none; }
.plans { display: grid; gap: 8px; margin: 14px 0 4px; }
.plan { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: var(--r); padding: 12px 14px; cursor: pointer; min-height: 56px; }
.plan:hover { border-color: var(--accent); }
.plan b { font-size: 16px; }
.plan span { grid-row: 2; color: var(--muted); font-size: 13px; }
.plan em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-weight: 800; color: var(--accent); }
.plan em s { display: block; text-align: right; font-weight: 600; font-size: 13px; color: var(--muted); }
.m-kicker.hot { color: #e0440e; }
/* страница оплаты */
.pay-h s { font-size: .62em; color: var(--muted); font-weight: 600; margin-left: 6px; }
.pay-links { margin: 14px 0 4px; display: grid; gap: 8px; }
.pay-box { margin-top: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px; display: grid; gap: 8px; }
.pay-t { margin: 0 0 2px; font-weight: 800; font-size: 16px; }
.pay-step { font-size: 14px; color: var(--ink); margin-top: 4px; }
.pay-req { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.35; }
.pay-req span { min-width: 0; overflow-wrap: anywhere; }
.pay-req.code b { font-size: 20px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.pay-box .go { margin-top: 6px; width: 100%; }
.pay-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
.ghost.sm.hot { border-color: #ff5a1f; color: #e0440e; background: #fff6f1; font-weight: 800; }
.plan.hot { border-color: #ff5a1f; background: #fff6f1; }
.plan.hot em { color: #e0440e; font-size: 20px; }
.plan.hot span { color: #b6400f; font-weight: 600; }
/* полоска «осталось мест»: заполнена долей свободных */
.plan .seats { grid-column: 1 / -1; height: 4px; margin-top: 8px; background: #ffd9c7; border-radius: 2px; overflow: hidden; }
.plan .seats::before { content: ''; display: block; height: 100%; width: calc(var(--f) * 100%); background: #ff5a1f; }
.p-body { position: relative; }
.wm { position: absolute; inset: 0; pointer-events: none; opacity: .07; z-index: 5; background-repeat: repeat; }
.mapwrap .wm { z-index: 450; }
.tools .b-main { background: var(--accent); color: #fff; border-color: var(--accent); }
body.in-tg .top { display: none; }
body.in-tg { --top: 0px; }
body.in-tg .supplier .go { background: #229ed9; }
.inst-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; }
.inst-head p { margin: 0; font-size: 14px; }
.tools { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.tools button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; }
.tools button:hover { border-color: var(--ink); }

/* ---------- карта ---------- */
.tiles { filter: saturate(.75) contrast(1.02); }
.leaflet-container { font-family: var(--font); background: #e8e6e0; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
.map-hint { position: absolute; z-index: 500; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; background: rgba(20,20,24,.82); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; pointer-events: none; white-space: nowrap; }
.here-btn { position: absolute; z-index: 500; left: 50%; top: 54px; transform: translateX(-50%); min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(35,64,255,.6); }
.mk { position: relative; transform-origin: 50% 100%; animation: mkIn .4s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes mkIn { from { transform: scale(.2); opacity: 0; } }
.mk-pin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(15,18,34,.35)); }
.mk-pin path { fill: var(--c); stroke: #fff; stroke-width: 2; }
.mk-ico { position: absolute; left: 50%; top: 38%; width: 46%; height: 46%; transform: translate(-50%, -50%); fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mk-num svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-num.wide { right: -22px; min-width: 38px; font-size: 10.5px; }
.map-legend { position: absolute; z-index: 500; left: 10px; bottom: 10px; margin: 0; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--muted); }
.map-legend .lg-pin { width: 11px; height: 14px; background: var(--accent); clip-path: path('M5.5 14s5-4.3 5-8.3A5 5 0 0 0 .5 5.7c0 4 5 8.3 5 8.3z'); }
.map-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; background: #9a9890; border: 2px solid #fff; margin-left: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.mk-num { position: absolute; right: -10px; top: -8px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--c); border: 2px solid var(--c); font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.mk-num.st-done { background: #1f9d5f; border-color: #1f9d5f; color: #fff; }
.mk-num.st-no { background: #8a8990; border-color: #8a8990; color: #fff; }
.mk.st-no { opacity: .45; }
.mk.owner .mk-pin path { stroke: #1f9d5f; stroke-width: 3; }
.mk-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); animation: mkIn .35s ease both; }
.leaflet-tooltip.mk-tip { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; box-shadow: 0 6px 16px -10px rgba(15,18,34,.5); font: 12px/1.25 var(--font); color: var(--ink); }
.leaflet-tooltip.mk-tip b { display: block; font-size: 12.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaflet-tooltip.mk-tip span { color: var(--muted); }
.center-wrap { position: relative; width: 22px; height: 22px; }
.center-pin { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.25); }
.ripple { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.is-scanning .ripple { animation: ripple 1.8s ease-out infinite; }
.is-scanning .ripple:nth-child(2) { animation-delay: .9s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(9); opacity: 0; } }

/* ---------- окна ---------- */
.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(15,18,34,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow: auto; }
.modal-box { position: relative; width: min(600px, 100%); background: #fff; border-radius: 14px; padding: 22px 24px 24px; box-shadow: 0 30px 80px -30px rgba(15,18,34,.6); }
.modal-x { position: absolute; right: 12px; top: 12px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.m-kicker { margin: 0 0 4px; color: var(--accent); font-weight: 700; font-size: 13.5px; }
.modal-box h3 { margin: 0 110px 4px 0; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.modal-box h4 { margin: 18px 0 8px; font-size: 15px; }
.script { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.script li::marker { font-weight: 800; color: var(--accent); }
.script b { display: block; font-size: 14.5px; }
.script p { margin: 2px 0 0; color: #3d3c43; font-size: 14px; }
.objs { margin: 0; display: grid; gap: 4px; }
.objs dt { font-weight: 700; font-size: 14px; margin-top: 6px; }
.objs dd { margin: 0; color: #3d3c43; font-size: 14px; }
.m-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.m-note a { color: var(--accent); font-weight: 700; }
.m-act { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 18px; }
.verdict { margin: 14px 0 10px; padding: 12px 14px; border-radius: var(--r); }
.verdict b { display: block; font-size: 17px; }
.verdict.yes { background: var(--ok-bg); color: var(--ok); }
.verdict.no { background: var(--warn-bg); color: var(--warn); }
.toast { position: fixed; z-index: 2100; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r); font-size: 14px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.toast .link { color: #b9c3ff; margin-left: 6px; }

.rview { position: fixed; inset: 0; z-index: 1900; background: #f4f3ef; display: flex; flex-direction: column; }
.rv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.rv-bar button { min-height: 44px; padding: 0 14px; border-radius: 8px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: #fff; }
.rv-bar .rv-pdf { background: var(--accent); color: #fff; border-color: var(--accent); }
.rv-sp { flex: 1; }
#rvFrame { flex: 1; border: 0; background: #fff; margin: 16px auto; width: min(900px, calc(100% - 32px)); border-radius: 8px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }

/* ---------- телефон и планшет: одна колонка, карта между шагом и списком ---------- */
@media (max-width: 959px) {
  :root { --top: 56px; }
  .top { padding: 0 12px; gap: 8px; }
  .brand-logo { height: 24px; }
  .brand-sub { display: none; }
  .top-nav .nav-link { display: none; }
  /* шаг 1 на телефоне: только «где будем ходить», карта появляется с поиском (Костя, 31.10) */
  body[data-step="1"] .mapwrap { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px -14px rgba(20,20,24,.35); }
  .tabbar > * { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font: 600 11.5px/1.1 var(--font); text-decoration: none; border-radius: 10px; cursor: pointer; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .is-on { color: var(--accent); background: var(--accent-soft); }
  .tabbar button:disabled { opacity: .4; cursor: default; }
  .tabbar .tb-tg { color: #0f6a97; }
  .tabbar .tb-tg svg circle { fill: #229ed9; stroke: none; }
  .tabbar .tb-tg svg .pl { fill: #fff; stroke: none; }
  /* нижняя панель 65 px + запас: последняя кнопка формы должна прокручиваться выше панели, иначе нажатие уходит в панель */
  body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* главная кнопка «Найти места» прилипает над нижней панелью: всегда видна и никогда не перекрыта ею */
  #scanBtn { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 8px 22px -10px rgba(20,20,24,.45); }
  /* кнопки и поля не должны прятаться под нижней панелью, когда страница подкручивается к ним (фокус, scrollIntoView) */
  main button, main input, main .plan, main .step { scroll-margin-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .help-btn { display: none !important; } /* на телефоне «Как это работает» — ссылкой под заголовком: в шапке места нет */
  .top-nav .tg-btn { padding: 0 12px; }
  .panel { width: auto; border-right: 0; }
  .p-head { padding: 14px 16px 18px; }
  body:not([data-step="3"]) .p-head { min-height: 0; }
  .p-body { padding: 0 16px 24px; min-height: 0; }
  .tabs { margin: 0 -16px 6px; padding: 0 8px; }
  .mapwrap { position: relative; left: auto; top: auto; height: 36vh; min-height: 240px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body[data-step="2"] .mapwrap { height: 42vh; }
  body[data-step="3"] .mapwrap { height: 44vh; }
  #map { touch-action: pan-x pan-y; }
  .step h1 { font-size: 23px; }
  .step h2 { font-size: 21px; }
  .lead { font-size: 14.5px; margin-bottom: 16px; }
  .me-btn span { display: none; }
  .me-btn { width: 52px; justify-content: center; padding: 0; }
  .scan-num b { font-size: 52px; }
  .modal { padding: 0; align-items: flex-start; }
  .modal-box { border-radius: 0; min-height: 100dvh; height: auto; padding: 18px 16px 32px; }
  .mapwrap { z-index: 0; isolation: isolate; }
  .m-act { grid-template-columns: 1fr; }
  .modal-box h3 { margin-right: 100px; font-size: 20px; }
  #rvFrame { margin: 0; width: 100%; border-radius: 0; }
  .leaflet-control-attribution { font-size: 10px; }
}
@media (max-width: 380px) {
  .seg.big button { font-size: 14.5px; padding: 0 6px; }
  .st-act > * { padding: 0 10px; font-size: 13.5px; }
  .stop { grid-template-columns: 28px 1fr; gap: 8px; }
  .stop .n { width: 28px; height: 28px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* пометка о данных: коротко и на виду (152-ФЗ: согласие должно быть информированным) */
.privacy-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.privacy-note a { color: var(--accent); font-weight: 600; }
.privacy-note a { position: relative; } .privacy-note a::after { content: ''; position: absolute; inset: -12px -4px; }