/* ==========================================================================
   babakteam CRM — Екран входу (design_handoff_login)

   Це НЕ окрема сторінка, а шар поверх застосунку. Так зроблено навмисно:
   поки шар угорі, під ним уже вантажиться черга — і користувач жодного
   разу не бачить ні скелета, ні порожнього екрана. Коли дані приїхали,
   шар їде вниз, а застосунок проявляється з легким зумом.

   Числа, кольори й криві — зі специфікації хендофу.
   ========================================================================== */

/* Місце під смугу прокрутки тримаємо ЗАВЖДИ.

   Без цього виходило так: поки шар входу вгорі, сторінка ще порожня й
   смуги немає; коли приїхали дані, смуга вже потрібна — і поява застосунку
   зсувала весь вміст убік. Компенсувати шириною поля не годиться: у мить
   показу шару міряти ще нічого. Тому резервуємо жолоб один раз і назавжди —
   тоді ширина вмісту не міняється взагалі. */
html { scrollbar-gutter: stable; }

/* Поки шар живий, сторінка під ним не гортається. */
body.lg-lock { overflow: hidden; }

.lg {
  position: fixed; inset: 0; z-index: 900;
  background: #F7F1E9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  /* Їде тільки вниз — і НЕ гасне: прозорість тут була зайвою, від неї
     рух читався як зникнення, а не як від'їзд.

     Крива з розгоном: рушає м'яко, далі пришвидшується й іде за край.
     Попередня (.7,0,.28,1) гальмувала в кінці — рівно там, де екрана вже
     не видно, тому рух здавався рівним і мертвим. */
  /* Приїзд (повернення на екран входу) — навпаки, з гальмуванням. */
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lg.gone {
  transform: translateY(100%); pointer-events: none;
  transition: transform .58s cubic-bezier(.36, 0, .66, -.05);
}

/* Світлова пляма зверху — картка тримається на ній, а не на тіні. */
.lg::before {
  content: ''; position: absolute; top: -160px; left: 50%; margin-left: -320px;
  width: 640px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 253, 250, .9), rgba(247, 241, 233, 0));
}

/* Заставка: той самий екран, але без форми — лише фон і знак. Показується
   при звичайному відкритті, коли входити не треба, і тримається, доки не
   завантажиться вся черга. */
/* Ховаємо вміст лише ДО того, як скрипт узяв керування.

   Спершу правило діяло весь час, поки заставка в розмітці, — і коли вона
   вже їхала вниз, вміст під нею лишався невидимим: анімації не було видно
   взагалі. Тепер щойно скрипт вішає свій клас (lg-wait / lg-shown), далі
   працюють тільки його правила. */

/* ─────────── Смуга під вікном ───────────

   На айфоні в застосунку з іконки вікно буває коротшим за екран. Учора ми
   не зафарбовували цей залишок, а прибрали його: док став fixed і рахується
   від вікна, тож панель меню стоїть біля самого краю.

   Заставка робить те саме — заходить за нижню межу вікна, тому під нею
   нічого не лишається. Жодних кольорових латок. */

/* ─────────── Полотно запуску ───────────
   Тільки фон. Знака, вордмарка й смужки тут навмисно немає: на запуску
   вони встигали блимнути, а між сторінкою-переходом і застосунком ще й
   стояли на різній висоті — знак «переставлявся». */

/* ─────────── Екран запуску ───────────
   Геометрія й кольори заставки описані ПРЯМО в orders-v2.html: вони мають
   приїхати разом із розміткою, інакше знак устигає стрибнути. Тут лишається
   тільки те, що потрібне вже під час руху. */
.lg-splash::before { content: none; }        /* світлова пляма тут зайва */
/* Геометрію не чіпаємо: вона задана в самому документі й тримається на
   100vh. Будь-яке bottom/inset тут поверне стрибок. */
/* Поки заставка на екрані, вміст під нею прихований. Док теж: він живе в
   body, поза оболонкою, і під загальні правила не підпадає. */
body:has(#lgBoot):not(.lg-shown) .page,
body:has(#lgBoot):not(.lg-shown) #mApp,
body:has(#lgBoot):not(.lg-shown) .hdr-wrap,
body:has(#lgBoot):not(.lg-shown) .bulk-wrap,
body:has(#lgBoot):not(.lg-shown) #mTabs { opacity: 0; }

/* ─────────── Знак і вордмарк ─────────── */
.lg-mark {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
/* Поява грає ЛИШЕ раз. Клас знімається після першого показу: інакше вона
   перезапускалась на кожній перемальовці (а перемальовка йде на будь-який
   дотик по формі) — і виглядало так, ніби екран входу з'являється знову. */
.lg.first .lg-mark { animation: lg-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
.lg-mark svg { width: 34px; height: 34px; display: block; }
.lg-wm { font: 500 17px 'IBM Plex Sans', sans-serif; color: #2B231D; letter-spacing: -.01em; }
.lg-wm i { font-style: normal; font-weight: 400; color: #9C8B7C; }

@keyframes lg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ─────────── Картка ─────────── */
.lg-card {
  position: relative; width: 452px; max-width: 92vw;
  padding: 44px 44px 36px; border-radius: 26px;
  background: #FFFDFA;
}
.lg.first .lg-card { animation: lg-rise .8s cubic-bezier(.16, 1, .3, 1) .1s both; }
.lg-h1 {
  font: 300 34px/1.05 var(--font-display); letter-spacing: -.015em; color: #2B231D;
  margin-bottom: 26px;
}

/* Здригання картки на невдалому паролі. */
.lg-card.shake { animation: lg-shake .42s ease both; }
@keyframes lg-shake {
  0% { transform: translateX(0); } 25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); } 75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* ─────────── Поля ─────────── */
.lg-lab {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  font: 400 11.5px 'Jost', sans-serif; letter-spacing: .06em; color: #6B5C50;
}
.lg-lab a { color: #9C8B7C; text-decoration: none; cursor: pointer; }
.lg-lab a:hover { color: #6B5C50; }

.lg-fld { position: relative; margin-bottom: 18px; }

/* Кнопка вибору людини. */
.lg-pick {
  width: 100%; height: 56px; padding: 0 14px;
  display: flex; align-items: center; gap: 12px;
  background: #FFFDFA; border: 1px solid #E7DAC9; border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lg-pick:hover { border-color: #DCCDB9; }
.lg-pick.on { border-color: #DCC49B; box-shadow: 0 0 0 3px #F6EEE4; background: #FFFFFF; }
.lg-av {
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  font: 500 11px 'Jost', sans-serif; letter-spacing: .02em;
}
.lg-pick-t { flex: 1; min-width: 0; }
.lg-pick-n { display: block; font: 400 15px 'Jost', sans-serif; color: #2B231D; }
.lg-pick-r { display: block; font: 400 11.5px 'Jost', sans-serif; color: #B3A493; margin-top: 2px; }
.lg-chev {
  flex: 0 0 auto; color: #B3A493; display: grid; place-items: center;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.lg-pick.on .lg-chev { transform: rotate(180deg); }

/* Випадний список (веб). */
.lg-dd {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; padding: 8px;
  border-radius: 16px; background: #FFFDFB; border: 1px solid #EFE3D4;
  box-shadow: 0 3px 8px rgba(58, 44, 32, .06), 0 26px 52px -26px rgba(58, 44, 32, .55);
  transform-origin: top center; transform: scale(.96) translateY(-6px);
  opacity: 0; pointer-events: none; max-height: 268px; overflow-y: auto; scrollbar-width: none;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.lg-dd::-webkit-scrollbar { width: 0; }
.lg-dd.on { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.lg-it {
  height: 52px; padding: 0 12px; border-radius: 11px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: background .14s ease;
}
.lg-it + .lg-it { margin-top: 2px; }
.lg-it:hover { background: #F5EFE8; }
.lg-it.sel { background: #F7F3EE; }
.lg-it.sel .lg-it-n { font-weight: 500; }
.lg-it-t { flex: 1; min-width: 0; }
.lg-it-n { display: block; font: 400 15px 'Jost', sans-serif; color: #2B231D; }
.lg-it-r { display: block; font: 400 11.5px 'Jost', sans-serif; color: #B3A493; margin-top: 1px; }
.lg-it-ok { color: #6E5343; opacity: 0; flex: 0 0 auto; }
.lg-it.sel .lg-it-ok { opacity: 1; }

/* Поле пароля. */
.lg-in-wrap { position: relative; }
.lg-in {
  width: 100%; height: 52px; padding: 0 46px 0 14px;
  background: #FFFDFA; border: 1px solid #E7DAC9; border-radius: 12px;
  font: 400 15px 'Jost', sans-serif; color: #2B231D; outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lg-in::placeholder { color: #B3A493; }
.lg-in:hover { border-color: #DCCDB9; }
.lg-in:focus { border-color: #DCC49B; background: #FFFFFF; box-shadow: 0 0 0 3px #F6EEE4; }
.lg-eye {
  position: absolute; right: 12px; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; border: none; background: none; padding: 0; cursor: pointer;
  color: #B3A493; display: grid; place-items: center;
  transition: color .16s ease;
}
.lg-eye:hover { color: #6B5C50; }

/* Помилка: межі полів теплішають. */
.lg.err .lg-in, .lg.err .lg-pick { border-color: #E3CFA4; }

/* Поле пошти згортається сіткою — тим самим прийомом, що й плашка
   помилки. Воно потрібне лише тим, для кого адреса ще невідома. */
.lg-mail { display: grid; grid-template-rows: 0fr;
           transition: grid-template-rows .34s cubic-bezier(.16, 1, .3, 1); }
.lg-mail.on { grid-template-rows: 1fr; }
.lg-mail-in { overflow: hidden; }

/* ─────────── Плашка помилки ───────────
   Розкривається сіткою, а не height: так не треба знати висоту тексту. */
.lg-err { display: grid; grid-template-rows: 0fr;
          transition: grid-template-rows .34s cubic-bezier(.16, 1, .3, 1); }
.lg-err.on { grid-template-rows: 1fr; }
.lg-err-in { overflow: hidden; }
.lg-err-b {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 18px; padding: 12px 14px;
  background: #FDF9F1; border: 1px solid #EFDDBC; border-radius: 12px;
  font: 400 12.5px/1.5 'Jost', sans-serif; color: #8A6428;
}
.lg-err-b svg { flex: 0 0 auto; color: #A9762B; margin-top: 1px; }

/* ─────────── Чекбокс ─────────── */
.lg-rem {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  cursor: pointer; user-select: none;
  font: 400 12.5px 'Jost', sans-serif; color: #6B5C50;
}
.lg-box {
  width: 17px; height: 17px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid #E7DAC9; background: #FFFDFA;
  display: grid; place-items: center; color: transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.lg-rem.on .lg-box { background: #6E5343; border-color: #6E5343; color: #FBF7F2; }

/* ─────────── Кнопка ─────────── */
.lg-btn {
  width: 100%; height: 52px; border: none; border-radius: 12px;
  background: #2B231D; color: #F7F1EA; cursor: pointer;
  font: 500 14.5px 'Jost', sans-serif; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .18s ease, transform .18s ease;
}
.lg-btn:hover { background: #463629; }
.lg-btn:active { transform: scale(.99); }
.lg-btn[disabled] { cursor: default; }
.lg-spin { width: 15px; height: 15px; animation: lg-spin .85s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ─────────── Кроки завантаження ───────────
   Розкриваються тим самим прийомом, що й помилка. */
.lg-load { display: grid; grid-template-rows: 0fr;
           transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1); }
.lg-load.on { grid-template-rows: 1fr; }
.lg-load-in { overflow: hidden; }
.lg-load-b { padding-bottom: 18px; }
.lg-load-h {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px;
  font: 400 12.5px 'Jost', sans-serif; color: #6B5C50;
}
.lg-load-n { color: #B3A493; font-size: 11.5px; }
.lg-track { height: 3px; border-radius: 999px; background: #EFE6DA; overflow: hidden; }
.lg-run { height: 100%; width: 34%; border-radius: 999px; background: #B4894F;
          animation: lg-run 1.4s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes lg-run { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

/* ─────────── Примітка й магазини ─────────── */
.lg-note {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid #F4EFE9;
  font: 400 11.5px/1.55 'Jost', sans-serif; color: #9C8B7C;
}
.lg-shops {
  position: relative; margin-top: 22px;
  display: flex; align-items: center; gap: 10px;
  font: 400 11.5px 'Jost', sans-serif; color: #9C8B7C;
}
.lg.first .lg-shops { animation: lg-rise .8s cubic-bezier(.16, 1, .3, 1) .18s both; }
.lg-shops i { width: 3px; height: 3px; border-radius: 999px; background: #CDBBA6; }

/* ─────────── Шар застосунку ───────────
   Живе під екраном входу й рушає трохи раніше, ніж той піде вниз, — тоді
   перехід читається як один рух, а не як заміна екрана. */
/* Масштаб — ТІЛЬКИ вмісту сторінки.

   Шапку й нижню панель раніше теж масштабували, і це давало стрибок:
   у шапки position: sticky, а transform створює для неї новий контекст —
   вона перестає липнути, а коли трансформацію знімають, стрибає на місце.
   Тому їм лишається сама прозорість. */
/* Початковий стан ставиться МИТТЄВО, без переходу.

   Раніше клас lg-wait ніс і transition — тому масштаб спершу плавно
   з'їжджав з 1 до .965 (цього ніхто не бачив, шар був згори), а потім їхав
   назад. Два рухи замість одного збивали тайминг, і в кінці перехід
   обривався на півдорозі — це й був стрибок. */
body.lg-wait .page, body.lg-wait #mApp {
  /* Трохи глибший зум — на телефоні 0.965 майже не читався. */
  opacity: 0; transform: scale(.94);
  transform-origin: 50% 0;      /* від верхньої кромки — інакше шари розходяться */
  transition: none;
}
/* Док теж ховаємо. Він живе в body, поза оболонкою застосунку, і тому не
   підпадав під жодне з правил вище — панель меню стояла на екрані з
   першого ж кадру, ще поки згори була заставка. */
body.lg-wait .hdr-wrap, body.lg-wait .bulk-wrap,
body.lg-wait #mTabs { opacity: 0; transition: none; }

/* І тільки поява має рух.

   Клас називається lg-shown, а НЕ lg-in: lg-in — це поле вводу в самій
   формі. Коли стан вішали на body під тим самим ім'ям, сторінка діставала
   стилі поля — padding 0 46px 0 14px — і звужувалась на 60px. Саме це й
   був той стрибок, який ніяк не ловився: він виглядав як зсув, а насправді
   мінялась розкладка. */
body.lg-shown .page, body.lg-shown #mApp {
  opacity: 1; transform: scale(1);
  /* Довше за від'їзд шару (.58s) і з помітною затримкою.

     Раніше рух устигав закінчитись ЩЕ ЗА екраном входу: коли той нарешті
     їхав униз, таблиця вже стояла на місці — і здавалося, що ніякої появи
     немає. Тепер вона доїжджає вже на видноті. */
  /* Із затримкою: спершу заставка встигає піти вниз, і аж потім таблиця
     починає рости. Без паузи обидва рухи йшли одночасно — і зум губився
     за екраном, який ще перекривав пів кадру.

     .2s пауза + .9s рух: заставка зникає на .58s, тобто дві третини
     появи видно вже на чистому екрані. */
  transition: opacity .66s ease .2s, transform .9s cubic-bezier(.16, 1, .3, 1) .2s;
}
body.lg-shown .hdr-wrap, body.lg-shown .bulk-wrap,
body.lg-shown #mTabs {
  opacity: 1; transition: opacity .66s ease .2s;
}

/* ─────────── Мобільна композиція ───────────
   Без картки: вміст просто на фоні, поля більші — щоб iOS не зумив
   сторінку при фокусі (16px — його поріг). */
@media (max-width: 720px) {
  /* Композиція з мобільного прототипу: знак і заголовок ПО ЦЕНТРУ, поля
     на 34px від країв, картки немає — вміст просто на полотні. */
  .lg { justify-content: flex-start; padding: 0 34px; }
  /* Заставка лишається ПО ЦЕНТРУ й на телефоні: правило вище стосується
     форми входу, а не її. Саме через нього знак їхав кудись за верхній
     край екрана. */
  .lg::before {
    top: -120px; margin-left: -240px; width: 480px; height: 340px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(255, 253, 250, .95), rgba(247, 241, 233, 0));
  }
  .lg-mark {
    margin: calc(78px + env(safe-area-inset-top)) 0 0; align-self: center;
    flex-direction: column; gap: 13px;
  }
  .lg-mark svg { width: 38px; height: 38px; }
  .lg-wm { font-size: 18px; }
  .lg-card {
    width: 100%; max-width: none; padding: 0; background: none; border-radius: 0;
    margin-top: 46px;
  }
  .lg-h1 { font-size: 38px; text-align: center; margin-bottom: 22px; }
  .lg-pick { height: 64px; border-radius: 16px; padding: 0 16px; gap: 13px; }
  .lg-av { width: 36px; height: 36px; font-size: 12px; }
  .lg-pick-n { font-size: 16px; }
  .lg-pick-r { font-size: 12px; margin-top: 3px; }
  .lg-fld { margin-bottom: 14px; }
  .lg-in { height: 56px; border-radius: 16px; font-size: 16px; }
  .lg-lab { font-size: 12.5px; }
  .lg-btn { height: 56px; border-radius: 16px; font-size: 15.5px; }
  .lg-box { border-radius: 7px; }
  .lg-shops { display: none; }

  /* Список ролей — шторка знизу, під палець. */
  .lg-dd {
    position: fixed; inset: auto 0 0 0; top: auto; max-height: 72vh;
    padding: 8px 12px calc(18px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0; border: none;
    transform: translateY(101%); opacity: 1;
    /* Поки не відкритий — прибраний зі сцени. Інакше в перший кадр після
       створення шару його встигало видно внизу екрана. */
    visibility: hidden;
    /* Ховаємо ПІСЛЯ того, як шторка з'їхала (затримка .42s), а показуємо
       МИТТЄВО — інакше рух починався у прихованому стані й здавалось, що
       модалка з'являється без анімації. */
    transition: transform .42s cubic-bezier(.16, 1, .3, 1), visibility 0s .42s;
  }
  .lg-dd.on {
    transform: translateY(0); visibility: visible;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .lg-dd::before {
    content: ''; display: block; width: 38px; height: 5px; border-radius: 999px;
    background: #E2D6C8; margin: 3px auto 12px;
  }
  .lg-it { height: 60px; border-radius: 16px; }
  .lg-it-n { font-size: 16px; }
  .lg-av-lg { width: 36px; height: 36px; }

  /* Затемнення під шторкою. */
  .lg-scrim {
    position: fixed; inset: 0; z-index: 29;
    background: rgba(43, 35, 29, .3); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .lg-scrim.on { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lg, .lg-mark, .lg-card, .lg-shops, .lg-dd, .lg-run { animation: none; transition: none; }
}

/* ─────────── Перехід між розділами ───────────
   Клік по меню — не запуск застосунку: заставку не показуємо взагалі,
   вміст просто проступає. Правило вище гасить сторінку, поки в розмітці
   є #lgBoot, тож тут його треба перебити — сам вузол ми лише ховаємо,
   а не видаляємо: ним користується шар входу. */
html.crm-cross #lgBoot { display: none !important; }

/* Тло сторінки ставимо одразу. Критичні стилі в <head> тримають піщаний
   колір заставки, і саме він блимав шматком у момент переходу. */
html.crm-cross, html.crm-cross body { background: #FCFBFA; }

/* Шапка не зникає ніколи: вона однакова на всіх сторінках. */
html.crm-cross .hdr-wrap,
html.crm-fade .hdr-wrap { opacity: 1 !important; transform: none !important; }

/* ─────────── Поява й зникнення вмісту ───────────

   Один клас ховає (crm-hold), інший лише оголошує рух (crm-fade). Доти
   станів було два — «сховати» і «показати», — і кожен ніс своє правило з
   !important. На сторінці, куди ми вже перейшли, лишався клас показу, і
   він важив більше за клас приховування: ДРУГИЙ перехід поспіль не гаснув
   зовсім. Тепер приховування — єдине правило, сперечатись нема з чим. */
/* Капсула кошика має власний рух (приїзд знизу з масштабом), тому в цей
   перелік вона не входить: два переходи на одну властивість давали
   миготіння, коли позицію прибирали із заявки. Ховається вона разом із
   розділом, цього досить. */
html.crm-fade .page,
html.crm-fade .toolbar,
html.crm-fade #mApp,
html.crm-fade #mTabs,
html.crm-fade .bulk-wrap {
  /* Один такт на всі рухи переходу: капсули й вміст ідуть разом.
     Було .42s — і перехід на іншу сторінку починався лише ПІСЛЯ цього
     згасання: майже пів секунди чистого чекання на кожен клік. */
  transition: opacity .18s ease !important;
}
/* Зум запуску знімаємо ЛИШЕ з полотна сторінки. Нижня панель і капсула
   кошика тримаються посеред екрана власним transform: translateX(-50%) —
   коли його заодно скидали, панель з'їжджала вправо, а пошук опинявся
   посеред екрана. */
html.crm-fade .page,
html.crm-fade #mApp { transform: none !important; }
/* Підміна розділу в тому ж документі: чекати нема чого — дані вже в
   пам'яті, тож і рух коротший. Повний такт лишається для переходів на
   сторінки, яких у документі немає. */
html.crm-quick .page,
html.crm-quick .toolbar,
html.crm-quick #mApp,
html.crm-quick #mTabs,
html.crm-quick .bulk-wrap { transition: opacity .15s ease !important; }

html.crm-hold .page,
html.crm-hold .toolbar,
html.crm-hold #mApp,
html.crm-hold #mTabs,
html.crm-hold .bulk-wrap { opacity: 0 !important; }

/* Поки сторінка чекає готовності, вміст не має бути ще й прихованим
   правилом заставки — інакше після зняття crm-hold нічого не проступить. */
html.crm-cross .page,
html.crm-cross .toolbar,
html.crm-cross #mApp,
html.crm-cross #mTabs,
html.crm-cross .bulk-wrap { opacity: 1; }
html.crm-cross .fade-in { animation: none !important; }

/* ─────────── Капсула меню ───────────
   ПЕРЕЇХАЛА в orders-v2.html: стилі й логіка живуть прямо в документі,
   який ніколи не кешується, — тож не залежать від версій цього файла.
   Тут правил капсули більше НЕМАЄ навмисно. */

/* ─────────── Заставка після пароля ───────────
   Той самий вигляд, що й при звичайному запуску: тло, знак, смужка. */
.lg-after { gap: 18px; justify-content: center; }
/* Центр — по висоті, знятій на старті (--boot-h), як у початкової
   заставки: розмір вікна на айфоні гуляє після клавіатури, і прив'язка
   до нього ставила знак «десь угорі». */
.lg.lg-after { top: 0; bottom: auto; height: var(--boot-h, 100vh); }
.lg-after .lg-status {
  margin-top: 2px; min-height: 19px; text-align: center;
  font: 400 13px/1.45 'Jost', system-ui, sans-serif;
  letter-spacing: .03em; color: #8F7E6E;
  /* Числа лічильника однакової ширини — текст не сіпається на кожній порції. */
  font-variant-numeric: tabular-nums;
}
.lg-after .lg-note {
  position: absolute; left: 24px; right: 24px;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto; max-width: 300px; text-align: center;
  font: 400 10.5px/1.7 'Jost', system-ui, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #B9A78F;
}
.lg-after .lg-mark-big { width: 74px; height: 74px; display: block;
  animation: lg-mark-in .5s ease both .06s; }
@keyframes lg-mark-in { from { opacity: 0; } to { opacity: 1; } }
.lg-after .lg-load {
  /* display:block перебиває .lg-load кроків форми (display:grid,
     grid-template-rows:0fr) — інакше бігунок <i> схлопується в нуль
     і смужка виглядає мертвою. */
  display: block;
  width: 96px; height: 2px; border-radius: 999px;
  background: #E0D2BE; overflow: hidden;
}
.lg-after .lg-load i {
  display: block; width: 32%; height: 100%; border-radius: 999px; background: #B4894F;
  animation: lg-load-run 1.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes lg-load-run { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
  .lg-after .lg-mark-big, .lg-after .lg-load i { animation: none; }
}