/* Бронирование на странице квеста (Савва 11.10): сверху — витрина режимов, как в утверждённом блоке 08.10 (.book: вкладки,
   карточка режима с персонажем, характеристики, фон режима; оформление наборов квестов — их style.css по тем же классам),
   под ней — форма по шагам (холст «Изоляция — форма бронирования»): Когда → Дополнительно → Контакты → Оплата → Готово.
   Окно формы одного размера (все шаги в одной ячейке сетки). Карточка формы всегда светлая, от режима — только акцент (data-th).
   Классы формы — с приставкой bk-: общие .day/.slot/.bar/.fl заняты шаблоном и страницей. Разметку формы строит book.js. */

/* ——— витрина режимов (перенос блока 08.10) ——— */
.book { --acc-txt: var(--y-text); position: relative; overflow: hidden; background: var(--bg); transition: background-color .5s ease; }
/* clip обрезает так же, но не мешает плашке «Дальше» прилипать к низу экрана (при hidden sticky не работает — Савва 13.10) */
@supports (overflow: clip) { .book { overflow: clip; } }
.bk-wrap { min-width: 0; }
.book[data-mode]:not([data-mode="std"]) { --acc-txt: #8C1015; background: #190705; }
.book .ext-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none;
  background: radial-gradient(75% 38% at 50% 0%, #5C0A0A 0%, rgba(92,10,10,0) 100%), radial-gradient(45% 30% at 92% 34%, rgba(130,14,14,0.45) 0%, rgba(130,14,14,0) 100%), radial-gradient(40% 30% at 0% 70%, rgba(98,10,10,0.4) 0%, rgba(98,10,10,0) 100%), linear-gradient(180deg, #170705 0%, #1F0907 50%, #190705 100%); }
.book .ext-bg img { position: absolute; left: 0; top: 0; width: 100%; height: 780px; object-fit: cover; opacity: 0.2; filter: grayscale(1) blur(2px); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); }
.book .ext-bg.on { opacity: 1; }
.book-in { position: relative; z-index: 2; padding-block: 96px; display: flex; flex-direction: column; gap: 48px; }
.duo .book-in { padding-top: calc(112px + 2 * var(--d-about-bot)); }
.book-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.book-head .eb { color: var(--acc-txt); }
.book[data-mode]:not([data-mode="std"]) .book-head .eb { color: #EE5E44; }
.book-head h2 { margin-top: 12px; font: 700 64px/0.95 var(--disp); text-transform: uppercase; color: var(--ink); transition: color .5s; }
.book[data-mode]:not([data-mode="std"]) .book-head h2 { color: #FFFFFF; }
.book-head p { width: 380px; max-width: 100%; font-size: 16px; line-height: 1.55; color: var(--muted); transition: color .5s; }
.book[data-mode]:not([data-mode="std"]) .book-head p { color: rgba(255,255,255,0.7); }
.mode-group { display: flex; flex-direction: column; gap: 20px; }
.book.single .mode-group { gap: 0; }
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tab { position: relative; height: 100px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #111114; text-align: left; cursor: pointer; box-shadow: 0 8px 20px rgba(20,20,30,0.10); transition: box-shadow .3s; }
.tab[hidden] { display: none; }
.tab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) brightness(0.9); transition: filter .4s; }
.tab .sh { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.62) 55%, rgba(10,10,12,0.15) 100%); }
.tab .tx { position: absolute; left: 18px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tab .nm { font: 700 24px/1 var(--disp); text-transform: uppercase; color: #FFFFFF; }
.tab .sb { align-self: flex-start; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); padding: 3px 0; border-radius: 6px; white-space: nowrap; }
.tab .mk { position: absolute; right: 12px; top: 12px; z-index: 3; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; }
.tab[aria-pressed="true"] img { filter: saturate(1.15); }
.tab[aria-pressed="true"] .mk { display: flex; }
/* обводка выбранного — внутрь (вкладки одного размера) */
.tab::after, .mcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .3s; }
.tab[data-k="std"][aria-pressed="true"] { box-shadow: 0 16px 34px rgba(246,200,73,0.38); }
.tab[data-k="std"][aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--y); }
.tab[data-k="std"][aria-pressed="true"] .sb, .tab[data-k="std"] .mk { background: var(--y); color: var(--ink); padding: 3px 8px; font-weight: 800; }
.tab:not([data-k="std"])[aria-pressed="true"] { box-shadow: 0 16px 34px rgba(168,20,25,0.45); }
.tab:not([data-k="std"])[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--blood); }
.tab:not([data-k="std"])[aria-pressed="true"] .sb, .tab:not([data-k="std"]) .mk { background: var(--blood); color: #FFFFFF; padding: 3px 8px; font-weight: 800; }
.tab .mk { padding: 0; }
.mode-row { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; }
/* видна карточка и характеристики выбранного режима (класс .on ставит book.js; без скрипта — «Стандарт») */
.book .mcard:not(.on), .book .chars:not(.on) { display: none !important; }
.book .mcard.on { display: block !important; }
.book .chars.on { display: flex !important; }
.mcard { position: relative; min-height: 340px; border-radius: 28px; overflow: hidden; background: #111114; box-shadow: 0 20px 44px rgba(20,20,30,0.16); }
.mcard:not(.std) { box-shadow: 0 26px 60px rgba(168,20,25,0.35); }
.mcard:not(.std)::after { box-shadow: inset 0 0 0 2px var(--blood); }
.mcard .bgp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(1.2); }
.mcard:not(.std) .bgp { filter: brightness(0.55) saturate(1.3) contrast(1.1); }
.mcard .mul { position: absolute; inset: 0; background: #6E0B0B; mix-blend-mode: multiply; opacity: 0.85; }
.mcard .sh1 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,14,0.95) 0%, rgba(12,12,14,0.75) 42%, rgba(12,12,14,0.15) 75%); }
.mcard:not(.std) .sh1 { background: radial-gradient(60% 80% at 85% 100%, rgba(168,20,25,0.55) 0%, rgba(168,20,25,0) 70%), linear-gradient(90deg, rgba(20,4,3,0.96) 0%, rgba(36,5,4,0.72) 45%, rgba(36,5,4,0) 80%); }
.mcard .drip { position: absolute; left: 0; top: 0; width: 100%; height: 110px; z-index: 2; }
.mcard .drip > img, .mcard .drip > svg { width: 100%; height: 100%; display: block; }
.mcard .cut { position: absolute; bottom: 0; z-index: 1; display: block; width: auto; }
.mcard .cut.std { right: 30px; height: 330px; }
.mcard .cut.ext { right: -60px; height: 340px; }
.mcard .cut.ext2 { right: -120px; height: 250px; }
.mcard .tx { position: absolute; left: 36px; top: 0; bottom: 0; width: min(470px, calc(100% - 72px)); display: flex; flex-direction: column; justify-content: center; gap: 16px; z-index: 3; }
.mcard .tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; background: var(--blood); padding: 5px 10px; border-radius: 7px; }
.mcard .nm { font: 700 64px/0.9 var(--disp); text-transform: uppercase; color: #FFFFFF; }
.mcard .ds { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.84); }
.mcard .pl { align-self: flex-start; display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }
.mcard:not(.std) .pl { background: rgba(168,20,25,0.28); border-color: rgba(232,96,72,0.55); }
.mcard .pl span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.mcard .pl div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mcard .pl b { font-size: 24px; font-weight: 800; color: #FFFFFF; white-space: nowrap; }
.mcard .pl small { font-size: 13px; color: rgba(255,255,255,0.72); }
.chars { display: flex; flex-direction: column; gap: 20px; padding: 26px; border-radius: 28px; background: #1B1B1E; box-shadow: 0 20px 44px rgba(20,20,30,0.18); color: #FFFFFF; }
.chars:not(.std) { background: linear-gradient(180deg, #260B08 0%, #150807 55%); box-shadow: inset 0 0 0 1px rgba(232,88,64,0.18), 0 20px 44px rgba(20,20,30,0.18); }
.chars h3 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.chars .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex-grow: 1; }
.tile { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.06); }
.tile.hl-ext { background: rgba(168,20,25,0.16); box-shadow: inset 0 0 0 1px rgba(232,88,64,0.35); }
.tile span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.tile b { font-size: 16px; font-weight: 800; }
.tile b.hl { align-self: flex-start; background: var(--y); color: var(--ink); padding: 2px 9px; border-radius: 6px; }
.tile b.hl.ext { background: var(--blood); color: #FFFFFF; }

/* ——— форма по шагам ——— */
.bk { --page: var(--bg); --card: #FFFFFF; --ink: #2F323F; --muted: #5F6270; --line: #E3E3E7; --tile: #FFFFFF; --tline: #E3E3E7; --soft: #F4F4F2;
  --acc: var(--y, #F6C849); --acc-t: #2F323F; --glow: rgba(246,200,73,0.42); --save: #1E8A3C; --save-bg: #EAF7EC; --save-line: #BFE6C7; --pill: #1E8A3C; --pill-t: #FFFFFF;
  --eb: #A87A06; --chip-on: #2F323F; --chip-on-t: #FFFFFF; --cardsh: 0 20px 50px rgba(20,20,30,0.07); --tape: var(--y, #F6C849);
  --rc-bg: #1B1B1E; --rc-ink: #FFFFFF; --rcm: rgba(255,255,255,0.6); --rcl: rgba(255,255,255,0.16); --rcs: rgba(255,255,255,0.07); --rcv: #7CE38B; --rc-num: #F6C849;
  color: var(--ink); }
/* акцент формы — цвет режима (карточка остаётся светлой: читается на любом фоне); лента под блоком — тоже в цвет режима */
.bk[data-th="blood"], .bk[data-th="saw"] { --acc: #A81419; --acc-t: #FFFFFF; --glow: rgba(168,20,25,0.3); --eb: #8C1015; --tape: #A81419; }
.bk[data-th="ice"] { --acc: #2FC7A0; --acc-t: #04201A; --glow: rgba(47,199,160,0.32); --eb: #11795F; --tape: #9BE7F5; }
.bk[data-th="hell"] { --acc: #FF7A1A; --acc-t: #1A0A00; --glow: rgba(255,122,26,0.32); --eb: #B44A00; --tape: #FF7A1A; }
.bk[data-th="show"] { --acc: #FFC23D; --acc-t: #2A1600; --glow: rgba(255,194,61,0.36); --eb: #A87A06; --tape: #FFC23D; }
.bk[data-th="nightmare"] { --acc: #8B5CF6; --acc-t: #FFFFFF; --glow: rgba(139,92,246,0.3); --eb: #6D3FD8; --tape: #B48CFF; }
.bk[data-th="trash"] { --acc: #FF4FA3; --acc-t: #1A0612; --glow: rgba(255,79,163,0.3); --eb: #C21F72; --tape: #FF4FA3; }
.book[data-mode]:not([data-mode="std"]) .bk-card { --cardsh: 0 30px 70px rgba(0,0,0,0.45); }
/* сброс кнопок — нулевой специфичностью, чтобы не перебивать фон и цвет кнопок формы */
:where(.bk) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
:where(.bk) button:disabled { cursor: default; }
:where(.bk) a { color: inherit; }
.bk.theme-saw.revving .bk-card { animation: sawRev .6s linear; }
/* карточка формы */
.bk-card { position: relative; display: flex; flex-direction: column; gap: 26px; min-height: 800px; padding: 36px 40px 40px; border-radius: 28px; background: var(--card); box-shadow: var(--cardsh); transition: background-color .5s, box-shadow .5s; }
.bk-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bk-prog { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk-prog li { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 30px; background: var(--soft); font-size: 14px; font-weight: 700; color: var(--muted); transition: background .3s, color .3s; }
.bk-prog i { width: 26px; height: 26px; border-radius: 50%; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); font-style: normal; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bk-prog li.done { color: var(--ink); cursor: pointer; }
.bk-prog li.done i { background: var(--ink); color: var(--page); box-shadow: none; }
.bk-prog li.on { background: var(--acc); color: var(--acc-t); }
.bk-prog li.on i { background: var(--acc-t); color: var(--acc); box-shadow: none; }
.bk-rate { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.bk-rate svg { color: #F6C849; }
.bk-seg { display: none; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; flex: 1; }
/* все шаги — в одной ячейке: высота окна = самому высокому шагу, переход — проявлением */
.bk-steps { display: grid; min-width: 0; }
.bk-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.bk-step.on { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease .05s, transform .3s ease .05s; }
.bk-load { padding: 22px; border-radius: 16px; background: var(--soft); color: var(--muted); font-size: 15px; line-height: 1.5; }
.bk-load a { font-weight: 700; color: var(--ink); }
/* блоки и заголовки внутри шага */
.bk-blk { display: flex; flex-direction: column; gap: 14px; }
.bk-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk-bh b { font-size: 19px; font-weight: 800; }
.bk-bh > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-align: right; }
.bk-bh > span i { width: 8px; height: 8px; border-radius: 50%; background: var(--save); }
/* шаг 1: игроки */
.bk-pl-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bk-pls { display: flex; gap: 8px; }
.bk-pl { width: 76px; height: 56px; border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); font: 600 24px/1 var(--disp); display: flex; align-items: center; justify-content: center; transition: background .2s, box-shadow .2s; }
.bk-pl:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.bk-pl[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-t); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
.bk-stp { display: flex; align-items: center; gap: 12px; }
.bk-stp button { width: 44px; height: 44px; border-radius: 50%; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bk-stp button:disabled { opacity: 0.35; }
.bk-stp output { font: 600 28px/1 var(--disp); min-width: 32px; text-align: center; }
.bk-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.bk-note b { color: var(--save); }
/* дни */
.bk-days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 8px; }
.bk-day { position: relative; height: 92px; border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background .2s, box-shadow .2s; }
.bk-day:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink); }
.bk-day .wd { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bk-day .dn { font-size: 24px; font-weight: 800; line-height: 1.1; }
.bk-day .pr { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.bk-day.g .pr { color: var(--save); }
.bk-day.g::after { content: ''; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--save); }
.bk-day[aria-pressed="true"] { background: var(--acc); color: var(--acc-t); box-shadow: 0 10px 24px var(--glow); }
.bk-day[aria-pressed="true"] .wd, .bk-day[aria-pressed="true"] .pr { color: var(--acc-t); }
.bk-day[aria-pressed="true"]::after { background: var(--acc-t); }
.bk-day:disabled { background: var(--soft); box-shadow: none; opacity: 0.55; }
.bk-day:disabled .dn { text-decoration: line-through; }
.bk-day.oth { background: var(--soft); box-shadow: none; gap: 6px; }
.bk-day.oth .wd { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.bk-day.oth[aria-expanded="true"] { background: var(--tile); box-shadow: inset 0 0 0 2px var(--ink); }
.bk-day.ph { background: var(--soft); box-shadow: none; animation: bkPulse 1.2s ease-in-out infinite alternate; }
@keyframes bkPulse { from { opacity: 0.5; } to { opacity: 1; } }
/* календарь «Другая дата» */
.bk-cal { position: absolute; right: 0; top: 100px; z-index: 20; width: 372px; max-width: calc(100vw - 32px); display: none; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px; background: #FFFFFF; color: #2F323F; box-shadow: 0 0 0 1px #E3E3E7, 0 30px 70px rgba(20,20,30,0.25); }
.bk-cal.open { display: flex; }
.bk-cal-h { display: flex; align-items: center; justify-content: space-between; }
.bk-cal-h b { font-size: 16px; font-weight: 800; }
.bk-cal-h button { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px #E3E3E7; display: flex; align-items: center; justify-content: center; }
.bk-cal-h button:disabled { opacity: 0.35; }
.bk-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal-g .wd { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5F6270; }
.bk-cal-g button { position: relative; height: 40px; border-radius: 11px; background: #F4F4F2; font-size: 14px; font-weight: 600; }
.bk-cal-g button:disabled { background: none; color: #C4C4CC; font-weight: 400; }
.bk-cal-g button.g::after { content: ''; position: absolute; bottom: 5px; left: 50%; margin-left: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #1E8A3C; }
.bk-cal-g button[aria-pressed="true"] { background: #F6C849; font-weight: 800; }
.bk-cal-n { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #E3E3E7; font-size: 12px; color: #5F6270; }
.bk-cal-n i { width: 6px; height: 6px; border-radius: 50%; background: #1E8A3C; }
/* время: зоны «Днём / Вечер / Ночь» */
.bk-zones { display: grid; gap: 12px; }
.bk-zone { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border-radius: 20px; background: var(--soft); }
.bk-zone.g { background: var(--save-bg); box-shadow: inset 0 0 0 1.5px var(--save-line); }
.bk-zh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-zh b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.bk-zone.g .bk-zh b { color: var(--save); }
.bk-save { padding: 5px 10px; border-radius: 20px; background: var(--pill); color: var(--pill-t); font-size: 12px; font-weight: 800; white-space: nowrap; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bk-slot { height: 76px; border-radius: 14px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background .2s, box-shadow .2s; }
.bk-slot:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink); }
.bk-slot .tm { font-size: 19px; font-weight: 800; }
.bk-slot .tp { font-size: 13px; font-weight: 800; }
.bk-slot .pc { font-size: 11px; color: var(--muted); }
.bk-zone.g .bk-slot .tp { color: var(--save); }
.bk-slot[aria-pressed="true"] { background: var(--acc); color: var(--acc-t); box-shadow: 0 10px 24px var(--glow); }
.bk-slot[aria-pressed="true"] .tp, .bk-slot[aria-pressed="true"] .pc, .bk-zone.g .bk-slot[aria-pressed="true"] .tp { color: var(--acc-t); }
.bk-slot:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--tline); opacity: 0.45; }
.bk-slot:disabled .tm { text-decoration: line-through; }
.bk-nudge { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: var(--save-bg); box-shadow: inset 0 0 0 1px var(--save-line); }
.bk-nudge .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--tile); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--save); }
.bk-nudge p { flex: 1; font-size: 15px; line-height: 1.45; }
.bk-nudge p b { color: var(--save); }
.bk-nudge button { flex-shrink: 0; padding: 10px 16px; border-radius: 12px; background: var(--pill); color: var(--pill-t); font-size: 14px; font-weight: 800; }
.bk-help { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.bk-help a { font-weight: 800; color: var(--ink); white-space: nowrap; }
.bk-rd { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; color: var(--acc-t); }
.bk-rd svg { opacity: 0; }
/* допуслуги: строкой, плитками, крупными карточками */
.bk-add { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; background: var(--soft); text-align: left; transition: background .2s, box-shadow .2s; }
.bk-add[aria-pressed="true"] { background: var(--tile); box-shadow: inset 0 0 0 2px var(--acc); }
.bk-ei { width: 44px; height: 44px; border-radius: 12px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-ei img { width: 26px; height: 26px; display: block; }
.bk-add .tt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-add .tt b { font-size: 15px; font-weight: 800; }
.bk-add .tt small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.bk-add .pr { font-size: 14px; font-weight: 800; white-space: nowrap; }
.bk-bx { width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--tline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--acc-t); }
.bk-bx svg { opacity: 0; }
[aria-pressed="true"] > .bk-bx, [aria-pressed="true"] .bk-bx { background: var(--acc); box-shadow: none; }
[aria-pressed="true"] > .bk-bx svg, [aria-pressed="true"] .bk-bx svg { opacity: 1; }
.bk-ots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-ots .bk-add { gap: 10px; padding: 10px 12px; border-radius: 14px; }
.bk-ots .bk-ei { width: 36px; height: 36px; border-radius: 10px; }
.bk-ots .bk-ei img { width: 22px; height: 22px; }
.bk-ots .tt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-ots .tt small { font-weight: 800; }
.bk-bos { display: grid; gap: 14px; }
.bk-bo { position: relative; border-radius: 22px; overflow: hidden; background: var(--soft); display: flex; flex-direction: column; text-align: left; transition: background .2s, box-shadow .2s; }
.bk-bo[aria-pressed="true"] { background: var(--tile); box-shadow: inset 0 0 0 2px var(--acc), 0 14px 30px var(--glow); }
.bk-bo-v { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--soft), var(--line)); }
.bk-bo[aria-pressed="true"] .bk-bo-v { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 30%, var(--soft)), color-mix(in srgb, var(--acc) 12%, var(--soft))); }
.bk-bo-ic { width: 84px; height: 84px; border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); display: flex; align-items: center; justify-content: center; }
.bk-bo-ic img { width: 44px; height: 44px; }
/* допуслуга с фото (бронь зала: Мафия, ведущий — как карточки макета «Гаража»): фото на всю верхнюю часть, плашка сверху */
.bk-bo.ph .bk-bo-v { overflow: hidden; background: #111114; }
.bk-bo.ph .bk-bo-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bk-bo.ph:hover .bk-bo-v img { transform: scale(1.04); }
.bk-bo.ph[aria-pressed="true"] .bk-bo-v { background: #111114; }
.bk-bo-eb { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 4px 9px; border-radius: 7px; background: var(--y); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.bk-bo .bk-bx { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 2px #C9C9D1; }
.bk-bo[aria-pressed="true"] .bk-bx { background: var(--acc); box-shadow: none; }   /* выбрана — галочка видна (белый фон выше перебивал общее правило — Савва 13.10) */
.bk-bo-b { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; }
.bk-bo-b b { font: 700 24px/1.1 var(--disp); text-transform: uppercase; }
.bk-bo-b small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.bk-bo-b em { margin-top: 4px; font-style: normal; font-size: 15px; font-weight: 800; }
/* одна допуслуга — карточкой в строку: значок слева, текст и цена справа */
.bk-bos.one .bk-bo { flex-direction: row; min-height: 168px; }
.bk-bos.one .bk-bo-v { width: 240px; height: auto; flex-shrink: 0; }
.bk-bos.one .bk-bo-b { justify-content: center; gap: 8px; padding: 22px 64px 22px 28px; }
.bk-bos.one .bk-bo-b b { font-size: 30px; }
.bk-bos.one .bk-bo-b small { max-width: 460px; font-size: 14px; }
/* шаг 3: поля, комментарий */
.bk-fls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bk-fl { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bk-fl > span { font-size: 13px; font-weight: 700; }
.bk-fl > span em { font-style: normal; font-weight: 500; color: var(--muted); }
.bk-fl input, .bk-fl textarea { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--tline); font: 500 16px/1.3 var(--sans); color: var(--ink); transition: box-shadow .2s, background .2s; }
.bk-fl textarea { height: 108px; padding: 14px 16px; line-height: 1.45; resize: none; }
.bk-fl input::placeholder, .bk-fl textarea::placeholder { color: var(--muted); opacity: 0.8; }
.bk-fl input:focus, .bk-fl textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.bk-fl.ok input { box-shadow: inset 0 0 0 1.5px var(--save-line); }
.bk-fl.err input { box-shadow: inset 0 0 0 2px #E0475A; }
.bk-fl .e { display: none; font-size: 12px; font-weight: 600; color: #E0475A; }
.bk-fl.err .e { display: block; }
/* лаунж */
.bk-lg { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--soft); transition: background .3s, box-shadow .3s; }
.bk-lg.on { background: var(--tile); box-shadow: inset 0 0 0 2px var(--acc); }
.bk-lg-h { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.bk-lg-i { width: 48px; height: 48px; border-radius: 14px; background: var(--acc); color: var(--acc-t); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-lg-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-lg-t b { font-size: 16px; font-weight: 800; }
.bk-lg-t small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.bk-tg { position: relative; width: 48px; height: 28px; flex-shrink: 0; border-radius: 14px; background: var(--line); transition: background .25s; }
.bk-tg i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: left .25s; }
.bk-lg.on .bk-tg { background: var(--acc); }
.bk-lg.on .bk-tg i { left: 23px; }
.bk-ths { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-thl { font-size: 12px; font-weight: 700; color: var(--muted); }
.bk-tm { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); }
.bk-tm img { width: 44px; height: 32px; border-radius: 8px; object-fit: cover; }
.bk-tm b { font-size: 13px; font-weight: 800; }
.bk-lgcs { display: grid; gap: 10px; }
.bk-lgc { position: relative; border-radius: 16px; overflow: hidden; background: var(--soft); display: flex; flex-direction: column; text-align: left; transition: background .2s, box-shadow .2s; }
.bk-lgc[aria-pressed="true"] { background: var(--tile); box-shadow: inset 0 0 0 2px var(--acc), 0 10px 24px var(--glow); }
.bk-lgc-ph { position: relative; height: 84px; display: flex; gap: 3px; background: var(--line); }
.bk-lgc-ph img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.bk-lgc .bk-rd { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 2px #C9C9D1; color: #16161A; }
.bk-lgc[aria-pressed="true"] .bk-rd { background: var(--acc); box-shadow: none; color: var(--acc-t); }
.bk-lgc[aria-pressed="true"] .bk-rd svg { opacity: 1; }
.bk-lgc.any .bk-lgc-ph { align-items: center; justify-content: center; background: var(--soft); box-shadow: inset 0 -1px 0 var(--tline); }
.bk-any { width: 48px; height: 48px; border-radius: 50%; background: var(--tile); display: flex; align-items: center; justify-content: center; }
.bk-lgc-b { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.bk-lgc-b b { font: 700 18px/1.1 var(--disp); text-transform: uppercase; }
.bk-lgc-b small { font-size: 11px; color: var(--muted); }
.bk-lgc-b em { font-style: normal; font-size: 13px; font-weight: 800; }
.bk-lgc.wide { flex-direction: row; align-items: stretch; }
.bk-lgc.wide .bk-lgc-ph { width: 420px; height: 116px; flex-shrink: 0; }
.bk-lgc.wide .bk-lgc-b { justify-content: center; gap: 5px; padding: 14px 22px; }
.bk-lgc.wide .bk-lgc-b b { font-size: 26px; }
.bk-lgc.wide .bk-lgc-b small { font-size: 13px; }
.bk-lgc.wide .bk-lgc-b em { font-size: 15px; }
.bk-lg-b { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.bk-lg-g { display: flex; align-items: center; gap: 10px; }
.bk-lg-g > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bk-lg-g > div { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-lc { height: 38px; padding: 0 12px; border-radius: 19px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--tline); display: flex; align-items: center; font-size: 13px; font-weight: 700; white-space: nowrap; }
.bk-lc[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-t); box-shadow: none; }
.bk-lg-b .bk-stp { gap: 8px; }
.bk-lg-b .bk-stp button { width: 38px; height: 38px; font-size: 18px; }
.bk-lg-b .bk-stp output { font-size: 22px; min-width: 26px; }
.bk-lg-n { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bk-lgs { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: var(--soft); }
.bk-lgs-ph { width: 76px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--line); }
.bk-lgs-ph img { width: 100%; height: 100%; object-fit: cover; }
.bk-lgs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-lgs-t b { font-size: 14px; font-weight: 800; }
.bk-lgs-t small { font-size: 12px; color: var(--muted); }
.bk-lgs button { flex-shrink: 0; padding-right: 4px; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* шторка выбора лаунжа (телефон) */
.bk-sh { position: fixed; inset: 0; z-index: 185; display: flex; align-items: flex-end; }
.bk-sh[hidden] { display: none; }
.bk-sh-bg { position: absolute; inset: 0; background: rgba(10,10,14,0.58); }
.bk-sh-box { position: relative; width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0; background: var(--sheet, #FFFFFF); color: var(--ink); box-shadow: 0 -12px 40px rgba(0,0,0,0.28); animation: bkUp .3s cubic-bezier(.2,.9,.3,1); }
@keyframes bkUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-sh-gr { align-self: center; width: 44px; height: 5px; flex-shrink: 0; border-radius: 3px; background: var(--line); }
.bk-sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bk-sh-h b { display: block; font: 700 24px/1.1 var(--disp); text-transform: uppercase; }
.bk-sh-h small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.bk-sh-x { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.bk-sh .bk-lgcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-sh .bk-lgc-ph { height: 116px; }
.bk-sh .bk-lg-b { flex-direction: column; align-items: stretch; gap: 12px; }
.bk-sh .bk-lg-g { flex-direction: column; align-items: flex-start; gap: 7px; }
/* шаг 4: оплата */
.bk-pm { display: flex; flex-direction: column; gap: 10px; }
.bk-pm-tabs { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.bk-pm-tabs button { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--muted); }
.bk-pm-tabs button[aria-pressed="true"] { background: var(--tile); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.bk-code { display: flex; gap: 8px; }
.bk-code input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--tline); font: 500 15px var(--sans); color: var(--ink); }
.bk-code input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.bk-code button { height: 52px; padding: 0 22px; border-radius: 14px; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 800; }
.bk-pm-n { font-size: 12px; color: var(--muted); }
.bk-pm-n.ok { color: var(--save); font-weight: 700; }
.bk-pm-n.err { color: #E0475A; font-weight: 700; }
.bk-tls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bk-tl { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--soft); }
.bk-tl-n { position: absolute; top: 12px; right: 12px; font: 700 20px/1 var(--disp); color: var(--line); }
.bk-tl-i { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tline); display: flex; align-items: center; justify-content: center; }
.bk-tl b { font-size: 14px; font-weight: 800; }
.bk-tl small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.bk-css { display: flex; flex-direction: column; gap: 10px; }
.bk .cs { color: var(--ink); }
.bk .cs a { color: var(--ink); }
.bk .cs input:checked + .bx { background: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }
.bk .cs input:checked + .bx svg { color: var(--acc-t); }
.bk-warn { padding: 12px 16px; border-radius: 14px; background: var(--soft); font-size: 13px; line-height: 1.5; }
.bk-warn b { margin-right: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eb); }
.bk-warn a { font-weight: 700; }
.bk-err { padding: 12px 16px; border-radius: 14px; background: rgba(224,71,90,0.12); color: #E0475A; font-size: 14px; font-weight: 600; line-height: 1.5; }
.bk-err[hidden] { display: none; }
.bk-err a { color: inherit; }
/* сводка «Ваша игра» (компьютер) */
.bk-rc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 13px; padding: 12px 12px 20px; border-radius: 24px; background: var(--rc-bg); color: var(--rc-ink); box-shadow: 0 24px 50px rgba(20,20,30,0.22); transition: background .5s, color .5s; }
.bk-rc-ph { position: relative; height: 140px; border-radius: 16px; overflow: hidden; background: #111; }
.bk-rc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; filter: brightness(0.72); }
.bk-rc-ph div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 14px 16px; background: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,0.88) 100%); color: #FFFFFF; }
.bk-rc-ph small { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.bk-rc-ph b { font: 700 32px/1 var(--disp); text-transform: uppercase; }
.bk-rc-ph em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; background: var(--acc); color: var(--acc-t); }
.bk-rc-rs { display: flex; flex-direction: column; gap: 13px; }
.bk-rc-r { display: flex; justify-content: space-between; gap: 12px; padding: 0 8px; font-size: 14px; }
.bk-rc-r span { color: var(--rcm); }
.bk-rc-r b { text-align: right; }
.bk-rc-r.v b { color: var(--rcv); }
.bk-rc-tot { position: relative; display: flex; justify-content: space-between; align-items: baseline; margin: 2px 8px 0; padding-top: 14px; border-top: 2px dashed var(--rcl); }
.bk-rc-tot span { font-size: 15px; font-weight: 700; }
.bk-rc-tot span small { display: block; font-size: 12px; font-weight: 500; color: var(--rcm); }
.bk-rc-tot b { font: 700 42px/1 var(--disp); color: var(--rc-num); }
.bk-rc-pre { margin: 0 8px; padding: 12px 14px; border-radius: 14px; background: var(--rcs); font-size: 13px; line-height: 1.45; color: var(--rcm); }
.bk-rc-pre b { color: var(--rc-ink); }
.bk-cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; margin: 0 8px; padding: 0 16px; border-radius: 16px; background: var(--acc); color: var(--acc-t); font-size: 17px; font-weight: 800; box-shadow: 0 14px 32px var(--glow); transition: background .4s, box-shadow .4s, opacity .2s; }
.bk .bk-cta { color: var(--acc-t); }
.bk-cta:hover { filter: brightness(1.05); }
.bk-cta[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.bk-back { align-self: center; display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 13px; font-weight: 700; color: var(--rcm); }
/* нижняя плашка (телефон) */
.bk-bar { display: none; }
/* киперная лента под блоком — в цвет режима (как у утверждённого блока брони) */
.bk-hz { position: relative; height: 40px; z-index: 3; background: repeating-linear-gradient(-45deg, var(--tape) 0, var(--tape) 29.4px, #16161A 30.6px, #16161A 59.4px, var(--tape) 60.6px); box-shadow: 0 -8px 24px rgba(0,0,0,0.25); transition: background .5s; }
/* шаг 5: готово */
.bk-done { display: none; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: end; }
.bk.is-done .bk-grid, .bk.is-done .bk-rate { display: none; }
.bk.is-done .bk-done { display: grid; animation: bkFade .5s ease; }
@keyframes bkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bk-done-l { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.bk-ok { display: flex; align-items: center; gap: 16px; }
.bk-okc { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--acc); color: var(--acc-t); display: flex; align-items: center; justify-content: center; animation: ppPop .45s cubic-bezier(.2,1.6,.4,1); }
.bk-ok > div { display: flex; flex-direction: column; gap: 6px; }
.bk-ok .eb { color: var(--eb); }
.bk-ok h3 { font: 700 44px/1 var(--disp); text-transform: uppercase; }
.bk-tkt { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-radius: 22px; overflow: hidden; background: var(--rc-bg); color: var(--rc-ink); }
.bk-tkt-l { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; }
.bk-tkt small { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.bk-tkt-l b { font: 700 40px/1 var(--disp); text-transform: uppercase; color: var(--rc-num); }
.bk-tkt-l span { font-size: 15px; opacity: 0.85; }
.bk-tkt-r { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 26px; border-left: 2px dashed rgba(127,127,127,0.35); }
.bk-tkt-r b { display: block; font: 700 26px/1 var(--disp); }
.bk-done-tx { font-size: 15px; line-height: 1.55; color: var(--muted); }
.bk-done-tx b { color: var(--ink); }
.bk-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-act { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 16px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--tline); font-size: 15px; font-weight: 800; text-decoration: none; }
.bk .bk-act.pri { background: var(--acc); color: var(--acc-t); box-shadow: none; }
.bk-xs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk-xs { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--soft); text-decoration: none; }
.bk-xs .bk-ei { width: 46px; height: 46px; border-radius: 14px; }
.bk-xs div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bk-xs b { font-size: 15px; font-weight: 800; }
.bk-xs small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.bk-pst { position: relative; height: 580px; border-radius: 24px; }
.bk-pst-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #0B0B0E; }
.bk-pst-clip img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.85); }
.bk-pst-clip span { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 40%, var(--glow), transparent 70%); }
.bk-pst-ch { position: absolute; left: 50%; bottom: 0; height: 630px; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 36px rgba(0,0,0,0.55)); }
.bk[data-th="light"] .bk-pst-ch { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22)); }
.bk-pst-fd { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, rgba(8,8,11,0), rgba(8,8,11,0.78) 45%, rgba(8,8,11,0.96)); }
.bk-pst-tag { position: absolute; top: 18px; left: 18px; padding: 7px 12px; border-radius: 12px; background: rgba(8,8,11,0.62); color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.bk-pst-q { position: absolute; left: 28px; right: 28px; bottom: 26px; font: 600 26px/1.15 var(--disp); text-transform: uppercase; color: #FFFFFF; }
.bk-ban { display: none; }

/* ——— телефон и планшет ——— */
@media (min-width: 900px) {
  /* карточка режима: размер вырезки из переменных набора квеста (на телефоне — общие правила ниже) */
  .mcard .cut.std, .mcard .cut.ext, .mcard .cut.ext2 { height: var(--cut-h, 330px); right: var(--cut-r, 30px); }
  .tabs:has(> .tab:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .mode-row { grid-template-columns: 1fr; }
  .bk-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .bk-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-tls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-fls { grid-template-columns: 1fr 1fr; }
  .bk-done { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 899px) {
  .book-in { padding-block: 64px 0; gap: 24px; }
  .duo .book-in { padding-top: calc(80px + 2 * var(--d-about-bot)); }
  .book-head { gap: 8px; }
  .book-head h2 { font-size: 40px; }
  .book-head p { display: none; }
  .tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 6px 16px 10px; scroll-padding-inline: 16px; }
  .tab { flex: 0 0 220px; height: 84px; }
  .tab .nm { font-size: 20px; }
  .mcard { min-height: 380px; }
  .mcard .tx { left: 20px; width: calc(100% - 40px); justify-content: flex-start; padding-top: 28px; gap: 12px; }
  .mcard .nm { font-size: 44px; }
  .mcard .ds { font-size: 14px; max-width: 70%; }
  .mcard .cut.std { right: -40px; height: 250px; }
  .mcard .cut.ext { right: -120px; height: 250px; }
  .mcard .pl { position: absolute; left: 0; bottom: 20px; }
  .chars { padding: 20px; }
  .bk-card { min-height: 0; gap: 20px; padding: 18px; border-radius: 22px; }
  .bk-top { display: none; }
  .bk-seg { display: flex; flex-direction: column; gap: 8px; }
  .bk-seg > div { display: grid; gap: 4px; }
  .bk-seg i { height: 4px; border-radius: 2px; background: var(--line); }
  .bk-seg i.on { background: var(--acc); }
  .bk-seg span { font-size: 12px; font-weight: 700; color: var(--muted); }
  .bk-seg span b { color: var(--ink); }
  .bk-grid { display: block; }
  .bk-rc { display: none; }
  .bk-step { gap: 20px; }
  .bk-bh b { font-size: 17px; }
  .bk-bh > span { font-size: 12px; }
  .bk-pl-row { gap: 10px; }
  .bk-pls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: 100%; }
  .bk-pls .bk-pl:first-child.two { grid-column: span 1; }
  .bk-pl { width: auto; height: 50px; font-size: 21px; }
  /* лента дат: отступ от края карточки и при прокрутке (scroll-padding), место под подсветку выбранного дня — сверху и снизу (Савва 13.10) */
  .bk-days { display: flex; gap: 6px; margin: -8px -18px -10px; padding: 8px 18px 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 18px; }
  .bk-day[aria-pressed="true"] { box-shadow: 0 6px 14px var(--glow); }
  .bk-days::-webkit-scrollbar { display: none; }
  .bk-day { flex: 0 0 70px; height: 86px; border-radius: 14px; scroll-snap-align: start; }
  .bk-day.oth { flex-basis: 92px; }
  .bk-day .dn { font-size: 21px; }
  .bk-day .pr { font-size: 11px; }
  .bk-cal { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; z-index: 190; }
  .bk-zone { padding: 12px; gap: 10px; border-radius: 18px; }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .bk-slot { height: 64px; border-radius: 13px; }
  .bk-slot .tm { font-size: 17px; }
  .bk-slot .tp { font-size: 12px; }
  .bk-slot .pc { display: none; }
  .bk-save { font-size: 11px; padding: 4px 9px; }
  .bk-nudge { gap: 10px; padding: 10px 12px; }
  .bk-nudge .ic { width: 32px; height: 32px; }
  .bk-nudge p { flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.4; }
  .bk-nudge button { padding: 8px 10px; border-radius: 10px; font-size: 12px; }
  .bk-help { font-size: 13px; align-items: flex-start; }
  .bk-help svg { flex-shrink: 0; margin-top: 2px; }
  .bk-add { gap: 12px; padding: 12px; align-items: flex-start; }
  .bk-add .tt small { font-size: 11px; }
  .bk-add > .pr { display: none; }
  .bk-add .tt .pr { display: block; margin-top: 4px; }
  .bk-ots { grid-template-columns: 1fr; }
  .bk-bos { grid-template-columns: 1fr !important; }
  .bk-bos.one .bk-bo { flex-direction: column; min-height: 0; }
  .bk-bos.one .bk-bo-v { width: auto; height: 96px; }
  .bk-bos.one .bk-bo-b { padding: 12px 14px 14px; }
  .bk-bos.one .bk-bo-b b { font-size: 19px; }
  .bk-bo-v { height: 96px; }
  .bk-bo-b { padding: 12px 14px 14px; }
  .bk-bo-b b { font-size: 19px; }
  .bk-fls { grid-template-columns: 1fr; gap: 14px; }
  .bk-fl textarea { height: 76px; font-size: 15px; }
  .bk-lg { padding: 12px 14px; gap: 12px; }
  .bk-lg-i { width: 40px; height: 40px; border-radius: 12px; }
  .bk-lg-t small { font-size: 12px; }
  .bk-tls { grid-template-columns: 1fr; gap: 6px; }
  .bk-tl { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .bk-tl-i { width: 32px; height: 32px; margin: 0; flex-shrink: 0; }
  .bk-tl b { flex: 0 0 auto; font-size: 13px; }
  .bk-tl small { font-size: 11px; }
  .bk-tl-n { display: none; }
  .bk-code button { padding: 0 16px; }
  .bk .cs { font-size: 13px; }
  /* нижняя плашка: итог и кнопка — пока форма на экране */
  .bk-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 12px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0;
    background: var(--rc-bg); color: var(--rc-ink); box-shadow: 0 -14px 34px rgba(20,20,30,0.22); transition: background .5s, color .5s; }
  .bk.is-done .bk-bar { display: none; }
  .bk-bar .bk-bk { width: 48px; height: 54px; flex-shrink: 0; border-radius: 15px; background: var(--rcs); display: flex; align-items: center; justify-content: center; }
  .bk-bar .bk-bk[hidden] { display: none; }
  .bk-bar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .bk-bar-t small { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rcm); white-space: nowrap; }
  .bk-bar-t b { font: 700 30px/1 var(--disp); color: var(--rc-num); }
  .bk-bar-t span, .bk-bar-t em { font-size: 12px; color: var(--rcm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bk-bar-t em { font-style: normal; font-weight: 800; color: var(--rcv); }
  .bk-bar .bk-cta { flex-shrink: 0; height: 54px; margin: 0; padding: 0 16px; font-size: 15px; gap: 8px; white-space: nowrap; }
  /* готово */
  .bk-done { grid-template-columns: 1fr; gap: 20px; }
  .bk-done .bk-pst, .bk-done .bk-ok { display: none; }
  .bk-ban { display: block; position: relative; height: 184px; margin-top: 26px; border-radius: 18px; }
  .bk-ban .bk-pst-clip img { filter: brightness(0.42) saturate(0.85); }
  .bk-ban .bk-pst-ch { left: auto; right: -10px; transform: none; height: 226px; }
  .bk-ban .bk-pst-fd { top: 0; height: auto; width: 72%; right: auto; border-radius: 18px 0 0 18px; background: linear-gradient(90deg, rgba(8,8,11,0.92) 0%, rgba(8,8,11,0.75) 60%, rgba(8,8,11,0)); }
  .bk-ban-ok { position: absolute; left: 18px; top: 18px; bottom: 18px; width: 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
  .bk-ban-ok .bk-okc { width: 44px; height: 44px; margin-bottom: auto; }
  .bk-ban-ok .eb { font-size: 10px; color: var(--acc); }
  .bk-ban-ok b { font: 700 26px/1.05 var(--disp); text-transform: uppercase; color: #FFFFFF; }
  .bk-done-l { gap: 20px; }
  .bk-tkt { grid-template-columns: 1fr; }
  .bk-tkt-l { padding: 18px 20px; }
  .bk-tkt-l b { font-size: 32px; }
  .bk-tkt-l span { font-size: 14px; }
  .bk-tkt-r { flex-direction: row; justify-content: space-between; padding: 14px 20px; border-left: 0; border-top: 2px dashed rgba(127,127,127,0.35); }
  .bk-done-tx { font-size: 14px; }
  .bk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bk-act { justify-content: center; height: 48px; padding: 0 6px; gap: 6px; font-size: 13px; white-space: nowrap; }
  .bk-xs-row { grid-template-columns: 1fr; }
  .bk-xs-row .bk-xs + .bk-xs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-step, .bk-step.on { transition: none; transform: none; }
}