/* «Кинематограф»: клиентские страницы студии. Эталон: docs/design/cinematic/studio.html.
 * Правила дизайна: docs/design/2026-10-07-cinematic-redesign.md.
 * Фото и секции без скругления, кнопки-пилюли, поля и плитки 12 px.
 */
:root {
  --cn-bg: #0a0b0d;
  --cn-surface: #121418;
  --cn-surface-2: #191c21;
  --cn-ink: #efeee9;
  --cn-soft: #c3c5ca;
  --cn-muted: #8d929a;
  --cn-line: rgb(255 255 255 / .12);
  --cn-accent: var(--brand);
  --cn-on-accent: var(--color-accent-ink);
  --cn-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
  --cn-gutter: 20px;
  --cn-nav: 64px;
  --cn-safe-b: env(safe-area-inset-bottom, 0px);
  --cn-safe-t: env(safe-area-inset-top, 0px);
  --cn-ease: cubic-bezier(.16, 1, .3, 1);
  --cn-glass: rgb(16 17 20 / .72);
  --cn-glass-edge: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .14);
}
html:has(.with-client-tabs) { background: var(--cn-bg); overflow-x: clip; }
.ui-v2.with-client-tabs { background: var(--cn-bg); color: var(--cn-ink); overflow-x: clip; font-feature-settings: "tnum" 1; }
.ui-v2.cn-page { padding-bottom: 0; background: var(--cn-bg); color: var(--cn-ink); overflow-x: clip; }
html:has(.cn-page) { background: var(--cn-bg); overflow-x: clip; }
.cn-page :is(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
.cn-page :is(a, button, summary):focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 3px; }
.cn-page svg.app-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Типографика */
.cn-page .cn-display { font-family: var(--cn-display); font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: -.005em; overflow-wrap: anywhere; }
.cn-display em { font-style: normal; color: var(--cn-accent); }
.cn-word { display: inline-block; white-space: nowrap; overflow-wrap: normal; overflow: hidden; vertical-align: top; padding: .1em 0 .04em; margin-top: -.1em; }
.cn-word > span { display: inline-block; }
.cn-hero .cn-split .cn-word:last-child { color: var(--cn-accent); }

/* Кнопки */
.cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; font: 700 16px/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color .25s, box-shadow .25s; }
.cn-btn:active { transform: scale(.97); }
.cn-btn-accent { background: var(--cn-accent); color: var(--cn-on-accent); }
.cn-btn-ghost { background: rgb(255 255 255 / .06); color: var(--cn-ink); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cn-btn .app-icon { width: 18px; height: 18px; }
.cn-glass { background: var(--cn-glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--cn-glass-edge); }

/* Шапка */
.cn-top { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + var(--cn-safe-t)) var(--cn-gutter) 14px; pointer-events: none; }
.cn-top > * { pointer-events: auto; }
.cn-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 11 13 / .82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 -1px 0 var(--cn-line); opacity: 0; transition: opacity .3s; pointer-events: none; }
.cn-top.is-scrolled::before { opacity: 1; }
.with-client-tabs:not(.cn-page) .cn-top::before { opacity: 1; }
.with-client-tabs:not(.cn-page, .has-booking-flow) > main { padding-top: calc(76px + var(--cn-safe-t)); }
.with-client-tabs > .messages { margin-top: calc(76px + var(--cn-safe-t)); position: relative; z-index: 1; }
.with-client-tabs > .messages ~ main { padding-top: 12px !important; }
.cn-mark { font: 600 22px/1.1 var(--cn-display); text-transform: uppercase; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-mark b, .cn-fit b { color: var(--cn-accent); font-weight: 600; }
.cn-login { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--font-body); flex: none; }
.cn-login .app-icon { width: 18px; height: 18px; }
.cn-preview { position: fixed; z-index: var(--z-sticky); top: calc(66px + var(--cn-safe-t)); left: var(--cn-gutter); right: var(--cn-gutter); padding: 8px 14px; border-radius: 12px; background: var(--cn-surface-2); color: var(--cn-soft); font-size: 13px; text-align: center; }

/* Начальные состояния входа: класс ставит static/motion-start.js до отрисовки */
html.cn-motion body.cn-page .cn-hero-media { clip-path: inset(49% 0 49% 0); }
html.cn-motion body.cn-page :is(.cn-top, .client-tabs, .cn-hero-copy) { visibility: hidden; }

/* Первый экран */
.cn-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; }
.cn-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--cn-surface); }
.cn-hero-media img { width: 100%; height: 112%; object-fit: cover; object-position: 58% 50%; }
.cn-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 11 13 / .55) 0%, transparent 20%, transparent 32%, rgb(10 11 13 / .82) 60%, var(--cn-bg) 100%); }
.cn-hero-copy { position: absolute; z-index: 1; left: var(--cn-gutter); right: var(--cn-gutter); bottom: calc(var(--cn-nav) + 36px + var(--cn-safe-b)); }
.cn-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px !important; font: 600 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #d9dade; }
.cn-kicker::before { content: ""; width: 22px; height: 1px; background: var(--cn-accent); }
.cn-hero .cn-display { font-size: clamp(3.4rem, 17.5vw, 10.5rem); }
.cn-hero .cn-display.cn-long { font-size: clamp(2.7rem, 12.5vw, 7.5rem); }
.cn-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 24px; font-size: 15px; color: #c9cbcf; }
.cn-meta > * { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.cn-status { color: var(--cn-ink); }
.cn-status i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgb(61 220 132 / .16); }
.cn-status.is-closed i { background: var(--cn-muted); box-shadow: none; }
.cn-hero-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
@media (max-width: 359px) { .cn-hero-actions { grid-template-columns: minmax(0, 1fr); } }
.cn-unavailable { color: var(--cn-soft); font-size: 15px; }

/* Своя запись */
.cn-return { padding: 28px 12px 0; }
.cn-return-card { padding: 22px; border-radius: 28px; display: grid; gap: 14px; justify-items: start; }
.cn-return-label { font: 600 13px/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--cn-accent); }
.cn-return .cn-display { font-size: clamp(2.6rem, 13vw, 5rem); }
.cn-return-service { color: var(--cn-soft); }
.cn-return-service strong { display: block; color: var(--cn-ink); font-size: 17px; }
.cn-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

/* Описание */
.cn-manifesto { padding: 120px var(--cn-gutter) 110px; }
.cn-words { font: 600 clamp(1.75rem, 7.4vw, 3.6rem)/1.16 var(--font-body); letter-spacing: -.02em; max-width: 22ch; }

/* Заголовки секций */
.cn-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--cn-gutter); margin-bottom: 28px; }
.cn-sh .cn-display { font-size: clamp(3.2rem, 16vw, 9rem); }
.cn-sh small { font: 600 14px/1.3 var(--font-body); color: var(--cn-muted); padding-bottom: 6px; white-space: nowrap; }

/* Услуги: стопка */
.cn-services { padding: 40px 0 0; }
.cn-stack { padding: 0 12px; display: grid; gap: 16px; }
.cn-card { position: sticky; top: calc(76px + var(--cn-safe-t)); min-height: min(calc(100svh - 76px - var(--cn-nav) - 44px - var(--cn-safe-b)), 560px); display: flex; flex-direction: column; padding: 22px; border-radius: 28px; overflow: hidden; transform-origin: 50% 0; background: radial-gradient(120% 70% at 100% 0%, rgb(255 255 255 / .07), transparent 55%), var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cn-card:nth-child(2n) { background: radial-gradient(120% 70% at 0% 0%, rgb(255 255 255 / .06), transparent 55%), var(--cn-surface-2); }
.cn-card.has-photo { min-height: min(calc(100svh - 76px - var(--cn-nav) - 44px - var(--cn-safe-b)), 640px); background: #050607; box-shadow: none; }
.cn-card .card-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cn-card .card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transform-origin: 50% 30%; }
.cn-card.has-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgb(5 6 7 / .55) 0%, transparent 24%, transparent 38%, rgb(5 6 7 / .78) 64%, rgb(5 6 7 / .97) 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.cn-card > :not(.card-media, .cn-card-shade) { position: relative; z-index: 1; }
.cn-card-shade { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }
.cn-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; font: 600 14px/1 var(--font-body); background: rgb(10 11 13 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.cn-chip .app-icon { width: 17px; height: 17px; }
.cn-card h3 { font-size: clamp(2.5rem, 12vw, 5.6rem); margin: auto 0 14px; padding-top: 40px; }
.cn-card-text { color: var(--cn-soft); max-width: 34ch; margin-bottom: 26px !important; }
.cn-card-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .16); }
.cn-price { font: 600 clamp(2.1rem, 9.6vw, 4.2rem)/.9 var(--cn-display); letter-spacing: -.01em; white-space: nowrap; }
.cn-price small { font: 600 15px/1 var(--font-body); color: var(--cn-muted); margin-right: 6px; letter-spacing: 0; }
.cn-card .cn-btn { min-height: 52px; padding: 0 22px; }
.cn-note { display: flex; align-items: center; gap: 10px; padding: 18px var(--cn-gutter) 0; color: var(--cn-muted); font-size: 14px; }
.cn-empty { padding: 24px var(--cn-gutter); color: var(--cn-soft); }

/* Бегущая строка */
.cn-marquee { overflow: hidden; margin-top: 56px; padding: 56px 0; border-block: 1px solid var(--cn-line); }
.cn-marquee-track { display: flex; width: max-content; }
.cn-marquee-track span { padding-right: .3em; font: 600 clamp(4.5rem, 24vw, 13rem)/.9 var(--cn-display); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgb(239 238 233 / .55); }
.cn-marquee-track span:nth-child(3n+2) { color: var(--cn-ink); -webkit-text-stroke: 0; }
.cn-marquee-track b { color: var(--cn-accent); font-weight: 600; -webkit-text-stroke: 0; }

/* Галерея */
.cn-gallery { position: relative; padding-top: 110px; }
:is(html:not(.cn-motion) .cn-gallery, .cn-gallery:not(.is-pan)) .cn-gallery-track { display: grid; width: auto; grid-template-columns: minmax(0, 1fr); }
:is(html:not(.cn-motion) .cn-gallery, .cn-gallery:not(.is-pan)) .cn-shot { height: auto; width: 100%; transform: none; }
:is(html:not(.cn-motion) .cn-gallery, .cn-gallery:not(.is-pan)) .cn-shot img { transform: none; }
html.cn-motion .cn-gallery.is-pan { min-height: 100svh; padding: calc(84px + var(--cn-safe-t)) 0 calc(var(--cn-nav) + 40px + var(--cn-safe-b)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.cn-gallery-track { display: flex; gap: 12px; width: max-content; padding: 0 var(--cn-gutter); }
.cn-shot { flex: none; height: min(58svh, 620px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--cn-surface); }
.cn-shot:nth-child(2n) { transform: translateY(32px); }
.cn-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }

/* Контакты */
.cn-contacts { padding: 120px 0 0; }
.cn-rows { padding: 0 var(--cn-gutter); }
.cn-rows > div { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--cn-line); }
.cn-rows > div:last-child { border-bottom: 1px solid var(--cn-line); }
.cn-rows dt { font: 600 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cn-muted); }
.cn-rows dd { font: 500 clamp(1.6rem, 7.6vw, 3rem)/1.08 var(--cn-display); text-transform: uppercase; overflow-wrap: anywhere; }
.cn-rows dd a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cn-rows dd .app-icon { width: 26px; height: 26px; color: var(--cn-accent); }

/* Финал */
.cn-finale { position: relative; margin-top: 40px; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.cn-finale-media { position: absolute; inset: 0; z-index: -1; }
.cn-finale-media img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 40%; }
.cn-finale::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cn-bg) 0%, rgb(10 11 13 / .2) 30%, rgb(10 11 13 / .55) 62%, var(--cn-bg) 100%); }
.cn-finale-copy { position: relative; z-index: 1; width: 100%; padding: 0 var(--cn-gutter) 70px; }
.cn-finale .cn-display { font-size: clamp(3.4rem, 17vw, 9.5rem); margin-bottom: 28px; }
.cn-finale .cn-btn { width: 100%; }

/* Подвал */
.cn-footer { padding: 40px var(--cn-gutter) calc(var(--cn-nav) + 48px + var(--cn-safe-b)); }
.cn-fit { width: max-content; margin: 0 0 28px; font: 600 100px/.8 var(--cn-display); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.cn-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; color: var(--cn-muted); font-size: 14px; }
.cn-footer-row nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.cn-footer-row a { min-height: 44px; display: inline-flex; align-items: center; }
.cn-install { margin-top: 12px; color: var(--cn-muted); font-size: 14px; }
.cn-install summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.cn-install summary::-webkit-details-marker { display: none; }
.cn-install summary .app-icon { width: 16px; height: 16px; }
.cn-install p { max-width: 46ch; }
.cn-install button[hidden] { display: none; }

/* Нижнее меню клиента (web-приближение стекла) */
.with-client-tabs .client-tabs { left: 12px; right: 12px; bottom: calc(10px + var(--cn-safe-b)); max-width: 440px; min-height: 0; height: var(--cn-nav); padding: 6px; gap: 4px; border-radius: 999px; border: 0; background: var(--cn-glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: var(--cn-glass-edge), 0 18px 50px rgb(0 0 0 / .45); }
.with-client-tabs .client-tabs > :is(a, span) { min-height: 0; gap: 3px; padding: 0 2px; border-radius: 999px; color: #a9adb3; font: 600 11px/1.1 var(--font-body); }
.with-client-tabs .client-tabs .app-icon { width: 21px; height: 21px; }
.with-client-tabs .client-tabs > a[aria-current="page"]:not(.client-book-tab) { color: var(--cn-accent); background: none; box-shadow: none; }
.with-client-tabs .client-tabs .client-tab-indicator { display: none; }
.with-client-tabs.has-booking-flow .client-tabs { display: none; }
.with-client-tabs .client-tabs > .client-book-tab { color: var(--cn-on-accent); background: var(--cn-accent); box-shadow: none; }
.with-client-tabs .client-tabs > .client-book-tab:hover, .with-client-tabs .client-tabs > .client-book-tab[aria-current="page"] { background: var(--cn-accent); filter: brightness(1.08); }
.with-client-tabs .client-tabs .client-tab-indicator { border-radius: 999px; }

/* Запись: шаги, услуги, дни и время. Логика в React (booking.tsx), здесь только вид. */
.with-client-tabs.has-booking-flow .booking-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; padding: calc(12px + var(--cn-safe-t)) var(--cn-gutter) 8px; background: transparent; border: 0; }
.with-client-tabs.has-booking-flow .booking-header > a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cn-glass); box-shadow: var(--cn-glass-edge); }
.with-client-tabs.has-booking-flow .booking-header > div { text-align: center; }
.with-client-tabs.has-booking-flow .booking-header h1 { font: 600 20px/1 var(--cn-display); text-transform: uppercase; letter-spacing: .02em; }
.with-client-tabs.has-booking-flow .booking-header p { margin-top: 4px; font-size: 12px; color: var(--cn-muted); text-transform: uppercase; letter-spacing: .08em; }
.with-client-tabs.has-booking-flow .booking-page { max-width: 680px; padding-inline: var(--cn-gutter); }
.with-client-tabs.has-booking-flow .booking-progress { gap: 6px; border: 0; }
.with-client-tabs.has-booking-flow .booking-progress button { min-height: 44px; padding: 10px 0 0; border: 0; border-top: 2px solid rgb(255 255 255 / .14); border-radius: 0; background: transparent; color: var(--cn-muted); font: 600 13px/1.2 var(--font-body); justify-content: flex-start; }
.with-client-tabs.has-booking-flow .booking-progress button > span { background: transparent; color: inherit; border: 0; width: auto; height: auto; font-family: var(--cn-display); }
.with-client-tabs.has-booking-flow .booking-progress :is([aria-current="step"], [data-complete="true"]) { color: var(--cn-ink); border-top-color: var(--cn-accent); }
.with-client-tabs.has-booking-flow .step-heading { display: block; margin: 34px 0 22px; }
.with-client-tabs.has-booking-flow .step-heading .step-number { display: none; }
.with-client-tabs.has-booking-flow .step-heading h2 { font: 600 clamp(2.6rem, 12vw, 4rem)/.95 var(--cn-display); text-transform: uppercase; letter-spacing: -.005em; }
.with-client-tabs.has-booking-flow .step-heading p { margin-top: 10px; color: var(--cn-muted); font-size: 15px; }
.with-client-tabs.has-booking-flow .service-options { display: grid; gap: 10px; }
.with-client-tabs.has-booking-flow .service-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "thumb copy" "thumb price"; align-items: center; column-gap: 14px; row-gap: 6px; min-height: 96px; padding: 12px; border-radius: 16px; border: 0; background: var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); transition: box-shadow .25s var(--cn-ease), background-color .25s; cursor: pointer; }
.with-client-tabs.has-booking-flow .service-option:not(:has(.service-thumb)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "price"; padding: 18px; }
.with-client-tabs.has-booking-flow .service-option > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.with-client-tabs.has-booking-flow .service-thumb { grid-area: thumb; width: 72px; height: 88px; object-fit: cover; border-radius: 12px; }
.with-client-tabs.has-booking-flow .service-option > span { grid-area: copy; align-self: end; }
.with-client-tabs.has-booking-flow .service-option strong { display: block; font: 700 17px/1.2 var(--font-body); }
.with-client-tabs.has-booking-flow .service-option small { display: block; margin-top: 6px; color: var(--cn-muted); font-size: 13px; line-height: 1.35; }
.with-client-tabs.has-booking-flow .service-option > b { grid-area: price; align-self: start; font: 700 16px/1 var(--font-body); color: var(--cn-ink); }
.with-client-tabs.has-booking-flow .service-option > b > small { display: inline; margin: 0 0 0 6px; font: 500 13px/1 var(--font-body); color: var(--cn-muted); }
.with-client-tabs.has-booking-flow .service-option:has(input:checked) { background: var(--cn-surface-2); box-shadow: inset 0 0 0 2px var(--cn-accent); }
.with-client-tabs.has-booking-flow .service-option:has(input:focus-visible) { outline: 2px solid var(--cn-accent); outline-offset: 3px; }
.with-client-tabs.has-booking-flow .booking-date-toolbar > strong { font: 600 22px/1 var(--cn-display); text-transform: uppercase; }
.with-client-tabs.has-booking-flow .booking-days { gap: 8px; }
.with-client-tabs.has-booking-flow .booking-days button { min-width: 64px; min-height: 76px; border-radius: 16px; border: 0; background: var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); color: var(--cn-muted); }
.with-client-tabs.has-booking-flow .booking-days strong { font: 600 24px/1 var(--cn-display); color: var(--cn-ink); }
.with-client-tabs.has-booking-flow .booking-days .is-selected { background: var(--cn-accent); color: var(--cn-on-accent); box-shadow: none; }
.with-client-tabs.has-booking-flow .booking-days .is-selected :is(strong, span) { color: var(--cn-on-accent); }
.with-client-tabs.has-booking-flow .available-times { gap: 8px; }
.with-client-tabs.has-booking-flow .available-times [data-slot="button"] { min-height: 52px; border-radius: 12px; border: 0; background: var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); font: 600 18px/1 var(--cn-display); color: var(--cn-ink); }
.with-client-tabs.has-booking-flow .available-times [data-slot="button"][aria-pressed="true"], .with-client-tabs.has-booking-flow .available-times [data-slot="button"][data-state="on"] { background: var(--cn-accent); color: var(--cn-on-accent); box-shadow: none; }
.with-client-tabs.has-booking-flow .contact-fields input, .cn-form input:not([type="checkbox"]) { min-height: 52px; font-size: 16px; border-radius: 12px; border: 0; background: var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); color: var(--cn-ink); }
.with-client-tabs.has-booking-flow .contact-fields input:focus-visible { box-shadow: inset 0 0 0 2px var(--cn-accent); outline: 0; }
.with-client-tabs.has-booking-flow .reservation-summary { border-radius: 24px; border: 0; background: var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); }
.with-client-tabs.has-booking-flow .reservation-summary h3 { font: 600 28px/1 var(--cn-display); text-transform: uppercase; }
.with-client-tabs.has-booking-flow .reservation-price strong { font-family: var(--cn-display); font-weight: 600; }
.with-client-tabs.has-booking-flow .booking-actionbar { border: 0; border-radius: 26px; background: var(--cn-glass); box-shadow: var(--cn-glass-edge), 0 18px 50px rgb(0 0 0 / .45); bottom: calc(10px + var(--cn-safe-b)); }
.with-client-tabs.has-booking-flow .booking-action-meta strong { font: 700 17px/1.2 var(--font-body); }
.with-client-tabs.has-booking-flow .booking-action-buttons [data-slot="button"] { min-height: 52px; border-radius: 999px; font: 700 16px/1 var(--font-body); }
.with-client-tabs.has-booking-flow :is(.booking-continue, .booking-confirm) { background: var(--cn-accent); color: var(--cn-on-accent); }
.with-client-tabs.has-booking-flow :is(.booking-continue, .booking-confirm):disabled { background: transparent; color: var(--cn-muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-accent) 45%, transparent); opacity: 1; }
.ui-v2.with-client-tabs.has-booking-flow { padding-bottom: calc(150px + var(--cn-safe-b)); }

/* Подтверждение и аккаунт */
.ui-v2.with-client-tabs:is(.studio-receipt, .account-page) h1 { font: 600 clamp(2.8rem, 13vw, 4.6rem)/.95 var(--cn-display); text-transform: uppercase; letter-spacing: -.005em; }
.ui-v2.with-client-tabs:is(.studio-receipt, .account-page) h2 { font: 600 26px/1 var(--cn-display); text-transform: uppercase; }
.ui-v2.with-client-tabs .confirmation-mark { color: var(--cn-accent); }
.ui-v2.with-client-tabs .detail-list > div { border-color: var(--cn-line); }
.ui-v2.with-client-tabs .detail-list dd { font: 600 17px/1.3 var(--font-body); }
.ui-v2.with-client-tabs .button { min-height: 52px; border-radius: 999px; font-weight: 700; }
.ui-v2.with-client-tabs .button.primary { background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-on-accent); }
.ui-v2.with-client-tabs .button.secondary { background: rgb(255 255 255 / .06); border-color: var(--cn-line); color: var(--cn-ink); }
.ui-v2.with-client-tabs .visit-save { border-radius: 24px; border-color: var(--cn-line); background: var(--cn-surface); }

/* Главная Автопоры */
.cn-top-links { display: flex; align-items: center; gap: 6px; }
.cn-top-links > a:not(.cn-login) { display: none; min-height: 44px; align-items: center; padding: 0 14px; font: 600 14px/1 var(--font-body); color: var(--cn-soft); }
.cn-meta-price { font: 600 18px/1 var(--cn-display); color: var(--cn-ink); }
.cn-sh-stack { display: block; }
.cn-sh-stack p { max-width: 34ch; margin-top: 18px !important; color: var(--cn-soft); font-size: 16px; }
.cn-sh-stack .cn-display { font-size: clamp(2.9rem, 13.5vw, 7.5rem); }
.cn-pricing { padding: 120px 0 0; }
.cn-price-card { margin: 0 12px; padding: 28px 22px; border-radius: 28px; background: radial-gradient(120% 70% at 100% 0%, rgb(255 106 26 / .16), transparent 55%), var(--cn-surface); box-shadow: inset 0 0 0 1px var(--cn-line); display: grid; gap: 14px; }
.cn-price-label { font: 600 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cn-muted); }
.cn-price-big { font: 600 clamp(5rem, 28vw, 10rem)/.85 var(--cn-display); letter-spacing: -.02em; }
.cn-price-big span { font-size: .4em; margin-left: .12em; color: var(--cn-accent); }
.cn-price-next { color: var(--cn-soft); }
.cn-checks { list-style: none; margin: 8px 0; padding: 18px 0 0; display: grid; gap: 12px; border-top: 1px solid var(--cn-line); }
.cn-checks li { display: flex; align-items: center; gap: 12px; }
.cn-checks .app-icon { width: 18px; height: 18px; color: var(--cn-accent); }
.cn-price-card .cn-btn { width: 100%; }
.cn-trial { text-align: center; color: var(--cn-muted); font-size: 14px; }
.cn-faq { padding: 120px 0 0; }
.cn-faq-list { padding: 0 var(--cn-gutter); }
.cn-faq-list details { border-top: 1px solid var(--cn-line); }
.cn-faq-list details:last-child { border-bottom: 1px solid var(--cn-line); }
.cn-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; padding: 18px 0; cursor: pointer; list-style: none; font: 500 clamp(1.3rem, 6vw, 2rem)/1.1 var(--cn-display); text-transform: uppercase; }
.cn-faq-list summary::-webkit-details-marker { display: none; }
.cn-faq-list summary .app-icon { width: 24px; height: 24px; color: var(--cn-accent); transition: transform .3s var(--cn-ease); }
.cn-faq-list details[open] summary .app-icon { transform: rotate(45deg); }
.cn-faq-list details p { padding: 0 0 22px; color: var(--cn-soft); max-width: 52ch; }
.cn-faq-list .cn-text-link { margin-bottom: 18px; color: var(--cn-accent); }
.cn-footer-platform { padding-bottom: calc(110px + var(--cn-safe-b)); }
.cn-dock { position: fixed; z-index: var(--z-sticky); left: 12px; right: 12px; bottom: calc(10px + var(--cn-safe-b)); max-width: 520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; }
.cn-dock strong { display: block; font: 600 22px/1 var(--cn-display); }
.cn-dock span { font-size: 12px; color: var(--cn-muted); }
.cn-dock .cn-btn { min-height: 52px; padding: 0 22px; }
html.cn-motion .cn-dock { transform: translateY(160%); visibility: hidden; transition: transform .5s var(--cn-ease), visibility 0s .5s; }
html.cn-motion .cn-dock.is-shown { transform: none; visibility: visible; transition: transform .5s var(--cn-ease); }
.platform-public .cn-hero-copy { bottom: calc(110px + var(--cn-safe-b)); }

@media (prefers-reduced-transparency: reduce) {
  .cn-glass, .with-client-tabs .client-tabs, .cn-chip, .with-client-tabs.has-booking-flow .booking-actionbar, .cn-top::before { background: #16181c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cn-glass, .with-client-tabs .client-tabs, .with-client-tabs.has-booking-flow .booking-actionbar, .cn-top::before { background: #16181c; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-btn, .cn-top::before { transition: none; }
}

@media (min-width: 900px) {
  :root { --cn-gutter: 48px; }
  .cn-hero-copy { right: auto; width: min(92vw, 1100px); bottom: 64px; }
  .cn-hero .cn-display { font-size: clamp(6rem, 10.5vw, 11rem); }
  .cn-hero-actions { display: flex; }
  .cn-return { max-width: 760px; margin: 0 auto; }
  .cn-manifesto { padding: 200px var(--cn-gutter) 180px; }
  .cn-words { margin-left: 28vw !important; }
  .cn-stack { max-width: 1040px; margin: 0 auto; }
  .cn-card { padding: 40px 48px; min-height: min(calc(100svh - 76px - var(--cn-nav) - 44px), 520px); }
  .cn-card h3 { font-size: clamp(4rem, 7vw, 6.5rem); }
  .cn-shot { height: min(66svh, 720px); }
  .cn-contacts { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; max-width: 1400px; margin: 0 auto; }
  .cn-top-links > a:not(.cn-login) { display: inline-flex; }
  .cn-price-card { max-width: 760px; margin: 0 auto; padding: 48px; }
  .cn-faq { max-width: 1100px; margin: 0 auto; }
  .platform-public .cn-hero-copy { bottom: 120px; }
  .cn-contacts .cn-rows { padding: 0 var(--cn-gutter) 0 0; }
  :is(html:not(.cn-motion) .cn-gallery, .cn-gallery:not(.is-pan)) .cn-gallery-track { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1200px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .with-client-tabs.has-booking-flow .booking-actionbar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Lenis: плавную прокрутку ведёт библиотека, не браузер */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: hidden; }