/* ═══════════════════════════════════════════════════════════════════════
   ОБЩИЙ СЛОЙ СТРАНИЦ ТРАВИНОВА — один файл на весь сайт-превью.
   Блоки библиотеки, которые повторяются на КАЖДОЙ странице: порог входа
   (SY-01), шапка с эфиром (HD-01), форма найма (AC-02A), футер (FT-01),
   Vee-навигатор и модалка детали (SY-03F).
   Правишь здесь — меняется везде. Копипаст этих правил на страницу = дефект.
   Разметка блоков остаётся статической в каждой странице (её читают боты),
   поведение и стиль — отсюда. Пара: _shared/shell.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── база: сброс, токены бумаги и чернил ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#fbf8f2;          /* лист / карточки */
  --ink:#16130f;            /* чернила */
  --bg:#f2eee6;             /* светлая тёплая бумага — фон страницы */
  --line:rgba(22,19,15,.14);
}
html,body{height:100%}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.caption{font-size:.72rem;letter-spacing:.14em;font-weight:500;text-transform:uppercase}
/* ЗАКОН ШВА: воздух между секциями задаёт САМА СЕКЦИЯ своим padding, а не пустой элемент
   между ними. Пустой спейсер не знает, что у него сверху и снизу: между двумя тёмными
   сценами он вставлял светлую полосу в 13vh, где не происходит ничего, — прибор мёртвой
   полосы намерил на этом шве 43% экрана (2026-07-23). Класс `.gap-spacer` снесён вместе с
   единственным применением; если снова захочется «просто воздуха» — это padding секции. */

/* ── SY-01 · порог входа ── */
/* ── b9 · SY-01 · прелоадер-порог (солнце → горизонт, механика 1:1) ── */
#b9 .preloader{position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:9999;
  overflow:hidden;transition:transform .8s cubic-bezier(.645,.045,.355,1)}
#b9 .preloader.is-done{transform:translateY(-100%)}
#b9 .preloader__horizon{position:absolute;top:0;left:0;right:0;bottom:calc(50% - 2.375rem);overflow:hidden}
#b9 .preloader__sun{position:absolute;bottom:0;left:50%;width:8.875rem;
  transform:translate(-50%) translateY(110%);
  transition:transform 1.6s cubic-bezier(.25,.46,.45,.94)}
#b9 .preloader.is-up .preloader__sun{transform:translate(-50%) translateY(6%)}
#b9 .preloader__sun svg{width:100%;height:auto;display:block;overflow:visible}
#b9 .preloader__horizon:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--paper);opacity:.9}
#b9 .preloader__caption{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);
  white-space:nowrap;color:var(--paper)}
#b9 .preloader__dot{display:inline-block;width:.25rem;height:.25rem;background:var(--paper);
  margin-right:.6875rem;vertical-align:.125rem;opacity:0}
#b9 .preloader__dot.is-on{opacity:1;animation:dot-blink 1.1s steps(1) infinite}
@keyframes dot-blink{50%{opacity:0}}

/* ── SY-03C · липкая шапка-сплит: марка слева, меню по центру, вход в ЛК справа ──
   ЗАМЕНА HD-01 (вердикт владельца 2026-07-22: «мне не нравится слева меню» + «хочу кнопки
   входа в ЛК/регистрации»; консилиум 3/3 подтвердил: вертикальное меню и прозрачная
   difference-шапка на текстовых страницах — антипаттерн). Механика взята из библиотеки:
   block_library/ai-system-variations.html, вариация C (sticky split header with CTA).
   Полоса чернильная и непрозрачная: контент уходит ПОД неё, а не сквозь. ── */
#b6 .topbar{position:fixed;top:0;left:0;right:0;z-index:150;background:var(--ink);
  color:var(--paper);border-bottom:1px solid rgba(251,248,242,.1)}
#b6 .topbar__in{max-width:1280px;margin:0 auto;padding:.75rem clamp(1rem,4vw,3rem);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
#b6 .topbar__mark{display:block;flex:0 0 auto}
#b6 .topbar__mark svg{display:block;width:clamp(6.5rem,5.5rem + 2vw,8.5rem);height:auto}
#b6 .topbar__nav{display:flex;gap:clamp(1rem,2vw,2rem);margin-right:auto}
#b6 .topbar__nav a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--paper);opacity:.75;transition:opacity .2s ease}
#b6 .topbar__nav a:hover{opacity:1}
/* без overflow:hidden — иначе бегущая строка обрезается ЖЁСТКО поверх собственной
   растушёвки и читается как баг рендера (поймал судья релиза 2026-07-22) */
#b6 .topbar__efir{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--paper)}
#b6 .topbar__efir .player__cassette{position:static;width:2.25rem;height:1.5rem;flex:0 0 auto;
  padding:0;border:0;background:none;cursor:pointer}
#b6 .topbar__efir .player__cassette svg{width:100%;height:100%;display:block}
#b6 .player__reel{transform-box:fill-box;transform-origin:center}
#b6 .player.is-playing .player__reel{animation:reel 1.6s linear infinite}
@keyframes reel{to{transform:rotate(360deg)}}
#b6 .player__marquee{display:flex;width:9.5rem;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#b6 .player__track{flex-shrink:0;font-size:.62rem;letter-spacing:.14em;font-weight:500;line-height:1.1;
  text-transform:uppercase;white-space:nowrap;color:rgba(251,248,242,.7);
  animation:marquee 12s linear infinite;animation-play-state:paused}
#b6 .player.is-playing .player__track{animation-play-state:running}
@keyframes marquee{to{transform:translateX(-100%)}}
#b6 .player__pp{display:none}
#b6 .topbar__acts{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
#b6 .topbar__btn{display:inline-flex;align-items:center;height:2.4rem;padding:0 .95rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
#b6 .topbar__btn--ghost{color:var(--paper);border:1px solid rgba(251,248,242,.3)}
#b6 .topbar__btn--ghost:hover{border-color:var(--paper)}
#b6 .topbar__btn--acc{background:#0093ac;color:#fff}
#b6 .topbar__btn--acc:hover{background:#00a6c2}
@media (max-width:1100px){#b6 .topbar__efir{display:none}}
@media (max-width:860px){
  #b6 .topbar__nav{display:none}
  #b6 .topbar__mark{margin-right:auto}
  #b6 .topbar__btn{height:2.1rem;padding:0 .7rem;font-size:.66rem}
}

/* ── AC-02A · тёмная форма найма ── */
/* ── b12 · AC-02A · тёмная форма с якорем срочности (механика 1:1, чернильный блок) ── */
/* ВЫСОТА ПО СОДЕРЖИМОМУ (тот же класс дефекта, что у блока-цитаты): было min-height:92vh —
   форма занимала почти экран при содержимом в половину, и под кнопкой зияло 300px пустой
   темноты. Прибор мёртвой полосы: 31-43% на шве «форма → следующая сцена». Блок общий для
   ВСЕХ страниц сайта, поэтому правка здесь чинит шов везде разом. */
#b12 .aA{position:relative;overflow:hidden;display:flex;align-items:center;
  padding:clamp(72px,8vw,112px) 4vw;background:var(--ink);color:var(--paper)}
#b12 .wrap{width:min(1240px,100%);margin:0 auto}
#b12 .eyebrow{font-size:11px;line-height:1;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(251,248,242,.55)}
#b12 h2{font-weight:800;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(30px,4.4vw,58px);margin:10px 0 6px}
#b12 .micro{font-size:12.5px;line-height:1.6;color:rgba(251,248,242,.55)}
#b12 .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
#b12 .anchor .num{font-weight:800;font-size:clamp(48px,6.4vw,92px);line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#0093ac}
#b12 .anchor .cap{color:rgba(251,248,242,.55);font-size:14px;max-width:30ch;margin-top:10px}
#b12 .fields{margin-top:20px}
#b12 .field{border-bottom:1px solid rgba(251,248,242,.22);padding:14px 0 10px}
#b12 .field label{display:block;font-size:10px;line-height:1;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.55);margin-bottom:7px}
#b12 .field input{width:100%;background:transparent;border:0;color:var(--paper);
  font-family:inherit;font-size:16px;line-height:1.3;font-weight:400;outline:none}
#b12 .field input::placeholder{color:rgba(251,248,242,.35)}
#b12 .field:focus-within{border-color:#0093ac}
#b12 .btn{display:inline-block;background:#0093ac;color:var(--ink);border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;line-height:1;letter-spacing:.12em;
  text-transform:uppercase;padding:17px 30px;border-radius:2px;margin-top:26px}
#b12 .btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
#b12 .btn:disabled{opacity:.5;cursor:default}
#b12 .done{margin-top:18px;font-size:14px;color:var(--paper)}
@media (max-width:860px){#b12 .grid{grid-template-columns:1fr;gap:32px}}

/* ── FT-01 · футер «Лист 1» ── */
/* ── b8 · FT-01 · футер «Лист 1» — чернильный блок (контраст-финал) ── */
#b8{--line:rgba(251,248,242,.14)}
#b8 .footer{background:var(--ink);color:var(--paper);padding-top:clamp(3rem,6vw,6rem)}
#b8 .footer__inner{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
#b8 .footer__body{display:grid;grid-template-columns:3fr 6fr 3fr;gap:1.25rem}
@media (max-width:1024px){#b8 .footer__body{grid-template-columns:1fr 1fr}}
@media (max-width:767px){#b8 .footer__body{grid-template-columns:1fr}}
#b8 .footer__contacts{width:100%;max-width:18.5rem;margin-top:clamp(2rem,-10.75rem + 14.7826086957vw,6.25rem)}
#b8 .contacts{--c-border:var(--paper);border:1px solid var(--c-border)}
#b8 .contacts__row{display:flex;align-items:stretch}
#b8 .contacts__row + .contacts__row{border-top:1px solid var(--c-border)}
#b8 .contacts__row a{flex:1 1 auto;display:flex;align-items:stretch;justify-content:space-between;
  color:var(--paper);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .2s,color .2s}
#b8 .contacts__row a:hover{animation:strobe-bg .36s steps(2) forwards}
@keyframes strobe-bg{
  0%{background:var(--paper);color:var(--ink)}
  49%{background:transparent;color:var(--paper)}
  100%{background:var(--paper);color:var(--ink)}
}
#b8 .contacts__row .txt{display:flex;align-items:center;padding:.6875rem .8125rem}
#b8 .contacts__row .ico{display:flex;align-items:center;justify-content:center;
  width:2.5rem;border-left:1px solid var(--c-border)}
#b8 .contacts__footer-link{display:flex;flex-direction:column;width:100%;
  font-weight:500;font-size:.9375rem;line-height:1.1;text-transform:uppercase}
#b8 .contacts__email{display:flex;align-items:center;justify-content:space-between}
#b8 .contacts__email .txt{padding:.6875rem .8125rem}
#b8 .contacts__meta{display:flex;align-items:end;gap:.5rem;padding:0 .6875rem .75rem .8125rem;opacity:.6}
#b8 .footer__logo{justify-self:center;align-self:center;
  max-width:clamp(35.375rem,-23.125rem + 67.8260869565vw,54.875rem);width:100%}
#b8 .footer__logo svg{width:100%;height:auto;display:block}
@media (max-width:1024px){#b8 .footer__logo{order:-1;grid-column:1/-1}}
#b8 .footer__nav{margin-top:clamp(2rem,-10.75rem + 14.7826086957vw,6.25rem)}
#b8 .footer__nav-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  justify-content:start;gap:.5rem clamp(1.5rem,.2224137931rem + 5.2413793103vw,6.25rem)}
#b8 .footer__nav-list a{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
#b8 .footer__nav-list a:hover{opacity:.5}
#b8 .footer__bottom{display:flex;justify-content:space-between;gap:1.5rem;
  margin-top:clamp(2.5rem,.625rem + 2.1739130435vw,3.125rem);
  border-top:1px solid var(--line);padding:1.5rem 0 2.5rem}
@media (max-width:767px){#b8 .footer__bottom{flex-direction:column;padding-bottom:3.5rem}}
#b8 .footer__docs{display:flex;align-items:start;gap:6.25rem;opacity:.6}
#b8 .footer__links{display:flex;flex-direction:column;gap:.5rem}
#b8 .footer__links a,#b8 .footer__links span{font-weight:400;
  font-size:clamp(.625rem,.0625rem + .652173913vw,.8125rem)}
#b8 .footer__graphics{display:flex;gap:3.4375rem}
#b8 .sheetbox{width:8.125rem;border:1px solid #b2b2b2;opacity:.7;align-self:flex-start;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
#b8 .sheetbox__top{padding:.375rem .625rem;border-bottom:1px solid #b2b2b2}
#b8 .sheetbox__bottom{display:flex;justify-content:space-between}
#b8 .sheetbox__side{display:flex;align-items:center;gap:.25rem;padding:.375rem .625rem}
#b8 .sheetbox__bullet{flex-shrink:0;width:.25rem;height:.25rem;background:var(--paper)}
#b8 .sheetbox__logo{display:flex;align-items:center;border-left:1px solid #b2b2b2;padding:0 .75rem}
#b8 .barcode{display:flex;flex-direction:column;align-items:end;row-gap:.375rem;max-width:8.75rem}
#b8 .barcode svg{height:2.2rem;width:auto}
#b8 .footer__cr{opacity:.6;font-size:.7rem;text-align:right}
#b8{position:relative}
#b8 .bottom-bar{position:absolute;bottom:1.5rem;left:0;right:0;z-index:130;
  pointer-events:none;mix-blend-mode:difference}
#b8 .bottom-bar__inner{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);
  display:flex;justify-content:space-between;color:#fff}


/* ── vee-nav · Vee на кромках секций ── */
/* ── vee-nav · Vee живёт на кромках секций (диегетический навигатор, не оверлей) ── */
.vee-spot{position:absolute;z-index:60;width:132px;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;transform:var(--vee-t,none);
  filter:drop-shadow(0 10px 18px rgba(22,19,15,.28))}
.vee-spot img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.vee-spot--flip img{transform:scaleX(-1)}
.vee-spot--static{cursor:default}
@media (prefers-reduced-motion: no-preference){
  .vee-spot{opacity:0;transform:var(--vee-t,none) translateY(14px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.25,.46,.45,.94)}
  .vee-spot.is-in{opacity:1;transform:var(--vee-t,none)}
}
@media (prefers-reduced-motion: reduce){.vee-spot{opacity:1}}
.vee-bubble{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:220px;background:var(--paper);color:var(--ink);
  border:1px solid rgba(22,19,15,.16);box-shadow:0 8px 22px rgba(22,19,15,.16);
  padding:.62rem .8rem;font-size:.78rem;line-height:1.45;font-weight:500;border-radius:2px;
  pointer-events:none;white-space:normal}
.vee-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--paper)}
.vee-spot--below .vee-bubble{bottom:auto;top:calc(100% + 12px)}
.vee-spot--below .vee-bubble:after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--paper)}
.vee-spot--edge-l .vee-bubble{left:0;transform:none}
.vee-spot--edge-l .vee-bubble:after{left:34px}
.vee-spot--edge-r .vee-bubble{left:auto;right:0;transform:none}
.vee-spot--edge-r .vee-bubble:after{left:auto;right:34px;transform:none}
.vee--b1{left:4vw;bottom:8px}
.vee--b2{top:0;right:7vw;--vee-t:translateY(-46%)}
.vee--b3{top:0;right:2%;--vee-t:translateY(-100%)}
.vee--b11{top:0;right:4vw;--vee-t:translateY(-100%)}
.vee--b12{top:0;right:1.5rem;--vee-t:translateY(-100%)}
.vee--b8{top:0;left:6vw;--vee-t:translateY(-52%)}
@media (max-width:767px){
  .vee-spot{width:96px}
  .vee-bubble{display:none}   /* на мобиле — только позы на кромках, без пузырей */
  .vee--b1{left:.75rem;bottom:4.4rem}  /* не перекрывает видимый H1-тэглайн */
}

/* ── SY-03F · модалка детали ── */
/* ── detail-modal · SY-03 вариация F · гейт-модалка над живым градиентом ──
   Донор: block_library/ai-system-variations.html, секция .yF (age-gate-modal-over-
   animated-gradient, hook.ava-case.com). Механика оверлея взята 1:1:
     • живой градиент .dm-grad — те же слои (два radial + conic from 190deg) и та же
       анимация swim 24s linear infinite с translate3d(3%,-2.5%) / scale 1.05→1.13;
     • словомарка позади размыта — .dm-ghost: SVG-текст, opacity + filter:blur(3px);
     • карточка-гейт по центру флексом, backdrop-filter:blur(14px), тонкая рамка,
       ряд действий .dm-acts (flex, gap 12, wrap);
     • reduced-motion глушит анимацию градиента — как в доноре.
   Адаптировано (data-adapted="content,assets"): палитра переведена в токены страницы
   (бумажная карточка var(--paper) на затемнённой подложке, акцент циан #0093ac),
   слой сделан переиспользуемым оверлеем поверх страницы (fixed) с появлением/уходом,
   крестиком, Esc и кликом по подложке; содержимое — услуга или задача расписания. */
#detail-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;
  justify-content:center;padding:clamp(1rem,4vw,2.5rem);overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .3s ease}
/* видимостью управляет JS (is-open → is-closing → снят), а не отложенный CSS-переход:
   так «закрыто» наступает детерминированно, а не «когда доедет транзишен» */
#detail-modal.is-open,#detail-modal.is-closing{visibility:visible}
#detail-modal.is-open{opacity:1}
#detail-modal .dm-scrim{position:absolute;inset:0;background:rgba(22,19,15,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#detail-modal .dm-grad{position:absolute;inset:-18%;pointer-events:none;opacity:.55;
  background:
    radial-gradient(42% 38% at 28% 32%,rgba(0,147,172,.55) 0%,transparent 62%),
    radial-gradient(46% 40% at 74% 68%,rgba(242,238,230,.30) 0%,transparent 64%),
    conic-gradient(from 190deg at 50% 50%,#16130f,#1b262b 28%,#24454d 48%,#191612 74%,#16130f);
  animation:dm-swim 24s linear infinite}
#detail-modal:not(.is-open) .dm-grad{animation-play-state:paused}
@keyframes dm-swim{0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(3%,-2.5%,0) scale(1.13)}
  100%{transform:translate3d(0,0,0) scale(1.05)}}
#detail-modal .dm-ghost{position:absolute;inset:0;pointer-events:none;opacity:.22;
  filter:blur(3px);
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="320"><text x="800" y="252" text-anchor="middle" font-family="Manrope,Arial" font-weight="800" font-size="230" letter-spacing="-12" fill="%23fbf8f2">ТРАВИНОВ</text></svg>') no-repeat 50% 50%/auto 44%}
#detail-modal .dm-gate{position:relative;z-index:2;width:min(34rem,92vw);
  max-height:calc(100vh - 3rem);overflow-y:auto;background:var(--paper);color:var(--ink);
  border:1px solid rgba(22,19,15,.16);border-radius:2px;padding:2.1rem 2rem 1.9rem;
  box-shadow:0 1.4rem 3.2rem rgba(22,19,15,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(1rem) scale(.985);transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
#detail-modal .dm-gate:focus{outline:none}   /* фокус уводим в диалог, рамку не рисуем */
#detail-modal.is-open .dm-gate{transform:none}
#detail-modal .dm-x{position:absolute;top:.55rem;right:.55rem;width:2.25rem;height:2.25rem;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:2px;
  background:none;color:var(--ink);opacity:.5;font:400 1.5rem/1 Manrope,system-ui,sans-serif;
  cursor:pointer;transition:opacity .2s ease}
#detail-modal .dm-x:hover{opacity:1}
#detail-modal .dm-kicker{font-size:.7rem;letter-spacing:.2em;font-weight:600;
  text-transform:uppercase;color:#0093ac}
#detail-modal .dm-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.06;margin:.7rem 0 .55rem;text-transform:uppercase;padding-right:2rem}
#detail-modal .dm-status{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;
  letter-spacing:.14em;font-weight:600;text-transform:uppercase;
  border:1px solid rgba(22,19,15,.2);border-radius:999px;padding:.3em .8em;opacity:.75}
#detail-modal .dm-status i{width:.4rem;height:.4rem;border-radius:50%;background:#0093ac;
  font-style:normal}
#detail-modal .dm-status[hidden]{display:none}
#detail-modal .dm-status.is-dev i{background:#16130f;opacity:.45}
#detail-modal .dm-lead{margin-top:1rem;font-size:.98rem;line-height:1.55;font-weight:400;
  opacity:.82}
#detail-modal .dm-meta{margin-top:1.15rem;border-top:1px solid var(--line)}
#detail-modal .dm-meta div{display:flex;justify-content:space-between;gap:1.2rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.8rem}
#detail-modal .dm-meta dt{letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.5}
#detail-modal .dm-meta dd{font-weight:600;text-align:right}
#detail-modal .dm-acts{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
#detail-modal .dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.75rem 1.3rem;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font:600 .78rem/1.25 Manrope,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  text-align:center}
#detail-modal .dm-btn--yes{background:#0093ac;color:#fbf8f2}
#detail-modal .dm-btn--yes:hover{background:#007d93}
#detail-modal .dm-btn--no{background:none;color:var(--ink);border-color:rgba(22,19,15,.24)}
#detail-modal .dm-btn--no:hover{border-color:var(--ink)}
#detail-modal .dm-x:focus-visible,#detail-modal .dm-btn:focus-visible{outline:2px solid #0093ac;
  outline-offset:3px}
@media (max-width:767px){
  #detail-modal .dm-gate{padding:1.6rem 1.25rem 1.4rem}
  #detail-modal .dm-btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #detail-modal .dm-grad{animation:none}
  #detail-modal .dm-gate{transition:none;transform:none}
}

/* ── БИЛЕТ КАК ДВЕРЬ · сцена перехода в кабинет (пара: _shared/bilet.js) ──

   ПОЧЕМУ МАСШТАБИРУЕТСЯ БИЛЕТ, А НЕ ЭКРАН (краш у владельца 2026-07-23).
   Первая версия вешала scale(16) + blur на полноэкранный слой (inset:0). Браузер обязан
   растеризовать слой в 16× вьюпорта — на FullHD это ~530 млн пикселей, да ещё с размытием
   и двумя drop-shadow внутри: GPU-процесс падал, вкладка крашилась. Теперь масштабируется
   ТОЛЬКО сам билет (≈700×390), blur убран совсем, тени снимаются на время наезда, кратность
   уменьшена до 7 — эффекта «нырка в точку» хватает, а слой остаётся посильным.

   ПОЧЕМУ БИЛЕТ ВСЕГДА ПО ЦЕНТРУ. Клон вставал по координатам оригинала, а оригинал в блоке
   расписания живёт под скраб-анимацией и часто наполовину за кадром — сцена открывалась
   обрезанной, а наезд целился мимо. Центр экрана предсказуем на любой странице и прокрутке. */
.bilet-scene{position:fixed;inset:0;z-index:400;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease;pointer-events:none}
.bilet-scene.is-on{opacity:1}

.bilet-fly{position:relative;width:min(88vw,44rem);
  transform-origin:26% 66%;              /* точка печати «ДОСТУП: ЛК» — куда ныряет камера */
  transform:rotate(-3deg);will-change:transform}
.bilet-fly.is-dive{animation:bilet-dive .62s cubic-bezier(.6,0,.85,.2) forwards}
@keyframes bilet-dive{to{transform:rotate(-3deg) scale(7);opacity:.12}}
.bilet-fly.is-dive .bilet-fly__half{filter:none}   /* тени на увеличенном слое — не тянуть */

.bilet-fly__base{display:block;width:100%;visibility:hidden}  /* держит высоту сцены */
.bilet-fly__base svg{width:100%;height:auto;display:block}
.bilet-fly__half{position:absolute;inset:0;display:block;
  filter:drop-shadow(.4rem .5rem 1.4rem rgba(22,19,15,.3))
         drop-shadow(1.6rem 1.8rem 2.4rem rgba(22,19,15,.18))}
.bilet-fly__half svg{width:100%;height:auto;display:block}
/* Обрезаем ВНУТРЕННИЙ svg, а тень вешаем на внешний span: filter применяется к уже
   обрезанной форме и повторяет контур куска. Когда clip-path и drop-shadow висели на одном
   элементе, тень рисовалась от ЦЕЛОГО прямоугольника и обрезалась вместе с ним — рядом с
   билетом стояла серая плашка-призрак (поймано на скриншоте сцены 2026-07-23). */
.bilet-fly__body svg{clip-path:inset(0 27.6% 0 0)}
.bilet-fly__stub svg{clip-path:inset(0 0 0 72.4%)}
.bilet-fly.is-torn .bilet-fly__stub{animation:bilet-tear .5s cubic-bezier(.34,1.2,.64,1) forwards}
.bilet-fly.is-torn .bilet-fly__body{animation:bilet-kick .5s cubic-bezier(.34,1.2,.64,1) forwards}
@keyframes bilet-tear{to{transform:translate(26%,-14%) rotate(13deg);opacity:.9}}
@keyframes bilet-kick{to{transform:translate(-2%,2%) rotate(-2deg)}}
.bilet-fly__perf{position:absolute;left:72.4%;top:6%;bottom:6%;width:2px;
  background:repeating-linear-gradient(180deg,rgba(22,19,15,.5) 0 6px,transparent 6px 16px)}
.bilet-fly.is-torn .bilet-fly__perf{opacity:0;transition:opacity .2s ease}

/* билет въезжает в сцену */
.bilet-fly--drop{animation:bilet-drop .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes bilet-drop{from{opacity:0;transform:translateY(-6%) rotate(-7deg) scale(.9)}}

@media (prefers-reduced-motion:reduce){
  .bilet-scene{display:none}
}