/* N1: shell. Правила только внутри body.n1 (см. n1.css). */
/*
 * Оболочка нового вида: общий вид полноэкранных экранов, окна подтверждения,
 * тосты, заставка, системные экраны, шторка «Код для курьера» и штрих-код на
 * весь экран (Выдача). Разделы уточняют свои экраны селекторами с id —
 * у них вес выше (body.n1 #settings-screen …).
 * Движение — отдельно, в n1-motion.css. --neo-dur/--neo-ease здесь не трогаем.
 */

body.n1 {
  --n1-red: #ff6b6b;
  /* «назад» на всех экранах: тот же значок, что ph-caret-left в спрайте (свой рисунок,
     scripts/n1-sprite/build.js) в пропорциях iOS: угол 90°, при 22 px около 10x17,5 px,
     линия 2,5 px, по весу как жирный заголовок шапки; рамка на 0,75 клетки левее середины
     ради оптического центра. Был regular (1,4 px) — тонкая и неровная (замечание Тима № 21),
     потом caret-left-bold (8,5x16, линия 2 px, узкая и тонкая) — «выглядит не очень» (пункт 10).
     Маску пишет make_sprite.js. */
  --n1-caret-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.75' d='M15.35 3.8L7.15 12L15.35 20.2'/%3E%3C/svg%3E");
}

/* ── Полноэкранные экраны поверх вкладок (.fullscreen-overlay) ─────────
   Шапка 56: круглая кнопка «назад» 44 слева, заголовок 17/600 по центру,
   фон страницы без градиента и линии. Разметку не трогаем: по классу
   .fullscreen-back «назад» телефона находит кнопку (neo-gestures.js).
   display у кнопки не задаём: app.js прячет её инлайном (промокод при
   регистрации), а display из таблицы стилей это ломал бы. */
body.n1 .fullscreen-overlay { background: var(--n1-bg); color: #fff; }
body.n1 .fullscreen-header {
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 64px 0;
  gap: 0;
  justify-content: center;
  background: var(--n1-bg);
  border-bottom: 0;
  box-shadow: none;
}
body.n1 .fullscreen-back {
  position: absolute;
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--n1-card2);
  color: #fff;
  box-shadow: none;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
}
/* старая стрелка (svg или знак) внутри кнопки — прячем, рисуем ph-caret-left */
body.n1 .fullscreen-back > * { display: none !important; }
body.n1 .fullscreen-back::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--n1-caret-left) center / 22px 22px no-repeat;
  mask: var(--n1-caret-left) center / 22px 22px no-repeat;
}
body.n1 .fullscreen-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* пустая распорка справа (<div style="width:32px">) сдвигала заголовок */
body.n1 .fullscreen-header > div:empty:not([class]):not([id]) { display: none; }

/* ── Шапки экранов: одна сетка под вырезом (замечание Тима № 4) ────────
   В приложении (оболочка Expo, айфон) страница идёт под часы и вырез:
   env(safe-area-inset-top) — 47 на iPhone 13, 59 на 14 Pro…16, в браузере 0.
   Шапка любого экрана: полоса под вырез и под ней строка 56. «Назад» 44 и
   заголовок 17/600 по центру строки (по 6 над кнопкой и под ней), поля 16,
   фон страницы, волосок снизу только у прокрученного списка.
   Что было не так, и видно это только в приложении:
   - min-height: 56px вместе с padding-top под вырез при border-box. Вырез
     съедал строку, от неё оставалось 44 (высота кнопки): «назад» садилась
     на нижний край шапки, и волосок при прокрутке шёл прямо по кнопке
     (карточка посылки и «Личные данные», снимки Тима 6 и 12);
   - у «Выдачи» отступ под вырез перебивал style.css (padding 10px
     !important на телефонах): шапка 56 + вырез, а заголовок вставал по
     центру всей высоты, выше кнопки (снимок 7).
   Правило: высота строки считается от выреза, min-height = 56 + вырез
   (у карточки посылки и «Личных данных» так прямо в их правилах,
   n1-parcel.css и n1-profilesub.css). */
body.n1 { --n1-sat: env(safe-area-inset-top, 0px); }
/* Выдача в нынешней разметке: своя шапка .status-screen-header и #pkv2
   прямо в экране (pickup-v2.js). Группа «Выдача» переводит экран на общую
   шапку .fullscreen-header в колонке .pk-n1-frame: там эти четыре правила
   не срабатывают (селекторы через «>»), после её слияния их можно удалить. */
body.n1 #pickup-screen > .status-screen-header { padding: var(--n1-sat) 0 0 !important; min-height: 0 !important; }
body.n1 #pickup-screen > .status-screen-header > .status-screen-title { top: calc(var(--n1-sat) + 17px); }
/* Выдача: прокрутка от самого волоска. 8 над первым блоком были у обёртки
   #pkv2 (pickup-v2.js) и ещё 8 внутри прокрутки: прокрученный список
   обрезался на 8 ниже волоска, и под ним оставалась полоса фона шапки
   (снимок 7). Теперь весь отступ внутри прокрутки, в покое всё на месте. */
body.n1 #pickup-screen > #pkv2 { padding-top: 0; }
body.n1 #pickup-screen > #pkv2 > .n1-pk { padding-top: 16px; }
/* Волосок снизу, пока список под шапкой прокручен: один на все экраны
   (класс n1-hdr--line ставит app.js, «Волосок под шапкой экрана»). Карточка
   посылки, Выдача и Пункты выдачи ставят свой (is-scrolled, pk-scrolled),
   вид тот же. У переписки волосок постоянный (n1-support.css). */
body.n1 :is(.fullscreen-header, .wl-header, .sp-header, .id-header, .status-screen-header) { transition: box-shadow .2s ease; }
body.n1 :is(.fullscreen-header, .wl-header, .sp-header, .id-header, .status-screen-header).n1-hdr--line,
body.n1 #orders-status-screen .status-screen-header.n1-hdr--line { box-shadow: inset 0 -.5px 0 var(--n1-hair); }
@media (prefers-reduced-motion: reduce) {
  body.n1 :is(.fullscreen-header, .wl-header, .sp-header, .id-header, .status-screen-header) { transition: none; }
}

/* Общая шапка для новых экранов — та же сетка готовым блоком:
     <header class="n1-hdr">
       <button type="button" class="n1-hdr-back" data-back aria-label="Назад"></button>
       <h2 class="n1-hdr-title">Заголовок</h2>
       <div class="n1-hdr-end">кнопка справа, если нужна</div>
     </header>
   Экран — колонка: шапка, под ней прокрутка (flex: 1; min-height: 0).
   Прокрутка начинается ровно от низа шапки, отступ над первым блоком —
   padding внутри прокрутки, а не у обёртки: иначе между волоском и списком
   остаётся полоса фона, и список обрезается не по краю шапки (Выдача,
   снимок 7). Волосок, пока список прокручен, ставит app.js сам (класс
   n1-hdr--line), если прокрутка — следующий за шапкой блок: свой код не
   нужен. По data-back «назад» телефона и свайп от края находят кнопку
   (neo-gestures.js). Стрелку рисует ::before, содержимое кнопки скрыто.
   Та же сетка и у старой разметки .fullscreen-header / .fullscreen-back /
   .fullscreen-title (выше): на ней все подэкраны профиля, и на неё же
   переходит Выдача у группы «Выдача» (.pk-n1-frame). Обе стоят одинаково. */
body.n1 .n1-hdr {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(56px + var(--n1-sat));
  padding: var(--n1-sat) 68px 0;
  background: var(--n1-bg);
  box-shadow: inset 0 -.5px 0 transparent;
  transition: box-shadow .2s ease;
}
body.n1 .n1-hdr.n1-hdr--line { box-shadow: inset 0 -.5px 0 var(--n1-hair); }
body.n1 .n1-hdr-back {
  position: absolute;
  left: 16px;
  top: calc(var(--n1-sat) + 6px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--n1-card2);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .n1-hdr-back > * { display: none; }
body.n1 .n1-hdr-back::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--n1-caret-left) center / 22px 22px no-repeat;
  mask: var(--n1-caret-left) center / 22px 22px no-repeat;
}
body.n1 .n1-hdr-title {
  min-width: 0;
  margin: 0;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.n1 .n1-hdr-end {
  position: absolute;
  right: 16px;
  top: calc(var(--n1-sat) + 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-hdr { transition: none; }
}

/* ── Полоса под часами над главными вкладками ──────────────────────────
   У Главной, Посылок, Сообщений и Профиля шапки нет: заголовок уезжает
   вместе со списком, и в приложении прокрученное шло прямо под часы и
   вырез (снимки Тима 9 и 11). Над вкладками — полоса цвета фона высотой
   выреза и под ней спад в 12 px: список уходит под часы мягко, а не
   обрывается краем. В покое под полосой только верхний отступ вкладки
   (16), ничего не закрыто. В браузере выреза нет: высота 0, полосы нет.
   Слой 90: выше содержимого вкладок, ниже навбара (1000), затемнения
   (1050) и любого экрана (10001): экраны и шторки закрывают её собой. */
body.n1::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: calc(var(--n1-sat) + min(12px, var(--n1-sat) * 100));
  background: linear-gradient(var(--n1-bg) var(--n1-sat), rgba(38, 38, 38, 0));
  pointer-events: none;
}

/* ── Экраны и шторки модулей — во всю ширину окна ─────────────────────
   Общая причина «экран уже окна на 430»: модули (wallet.js, parcels-pay.js,
   identity.js, support.js) задают экрану боковую панель width:min(420px,100vw)
   (поддержка 480) с right:0, а шторкам max-width:420px по центру. В N1 рамку
   слева убрали, и на 430/440 (iPhone Plus/Pro Max) слева оставалась полоса
   нижнего экрана: видна, принимает касания, свайп от края тянул не тот экран;
   у шторок щели по 5 px. Разделы переопределяют это и у себя; здесь общее
   правило с низким весом (:where): любое правило раздела сильнее. Окно
   кошелька .wn-dialog узкое намеренно — его не трогаем. */
body.n1 :where(.wl-screen, .pp-screen, .id-screen, .sp-screen) { width: 100%; }
body.n1 :where(.wl-sheet:not(.wn-dialog), .pp-sheet) { max-width: none; }

/* ── Выдача: шапка экрана (pickup-v2.js) ───────────────────────────── */
body.n1 #pickup-screen { background: var(--n1-bg) !important; }
body.n1 #pickup-screen .status-screen-header {
  height: calc(56px + env(safe-area-inset-top, 0px));
  min-height: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  box-sizing: border-box;
  background: var(--n1-bg) !important;
  border-bottom: 0 !important;
}
body.n1 #pickup-screen .status-screen-title {
  left: 64px;
  right: 64px;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.n1 .pkv2-back {
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--n1-card2);
  color: #fff;
}
body.n1 .pkv2-back svg { width: 22px; height: 22px; }
/* пролистали список — у шапки волосок (pickup-v2.js ставит .pk-scrolled) */
body.n1 #pickup-screen .status-screen-header { transition: box-shadow 150ms ease; }
body.n1 #pickup-screen.pk-scrolled .status-screen-header { box-shadow: inset 0 -0.5px 0 var(--n1-hair); }
body.n1 #pkv2 { top: calc(56px + env(safe-area-inset-top, 0px)); }

/* ── Окно-подтверждение N1 (.n1-dlg) ───────────────────────────────────
   Карточка #2f2f2f r24 по центру, поля 24, заголовок 20/700, одна серая
   строка 15, кнопки столбиком 52: главная салатовая, вторая #383838,
   опасное действие — красный текст на #383838. Фон rgba(0,0,0,.6) без размытия.
   Разметка:
     <div class="n1-dlg-bd"><div class="n1-dlg" role="dialog">
       <div class="n1-dlg-t">…</div><div class="n1-dlg-x">…</div>
       <div class="n1-dlg-btns"><button class="n1-dlg-btn n1-dlg-btn--danger">…</button>
       <button class="n1-dlg-btn">…</button></div></div></div>
   Появление — в n1-motion.css. */
body.n1 .n1-dlg-bd {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .6);
  -webkit-tap-highlight-color: transparent;
}
body.n1 .n1-dlg {
  width: 100%;
  max-width: 340px;
  padding: 24px;
  border-radius: 24px;
  background: var(--n1-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
body.n1 .n1-dlg-t { font: 700 20px/25px var(--n1-font); letter-spacing: -.4px; color: #fff; text-wrap: balance; }
body.n1 .n1-dlg-x { margin-top: 8px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: balance; }
body.n1 .n1-dlg-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
body.n1 .n1-dlg-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 26px;
  background: var(--n1-card2);
  color: #fff;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .n1-dlg-btn--main { background: var(--n1-lime); color: var(--n1-on-lime); }
body.n1 .n1-dlg-btn--danger { color: var(--n1-red); }
body.n1 .n1-dlg-btn:disabled { opacity: .5; cursor: default; }

/* «Выйти из аккаунта?» и «Удалить посылку?» (app.html, инлайн-стили — поэтому
   !important). Тексты и id не трогаем: на id опирается app.js. Значок-кружок
   сверху убран (в окне только заголовок и строка), кнопки столбиком: опасное
   действие сверху красным текстом, «Отмена» под ним. */
body.n1 #logout-confirm-modal,
body.n1 #delete-confirm-modal {
  padding: 24px !important;
  background: rgba(0, 0, 0, .6) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.n1 #logout-confirm-modal > div,
body.n1 #delete-confirm-modal > div {
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--n1-card) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important;
  box-sizing: border-box;
}
body.n1 #logout-confirm-modal > div > div:first-child,
body.n1 #delete-confirm-modal > div > div:first-child { display: none !important; }
body.n1 #logout-confirm-modal h3,
body.n1 #delete-confirm-modal h3 {
  margin: 0 !important;
  font: 700 20px/25px var(--n1-font) !important;
  letter-spacing: -.4px;
  color: #fff !important;
  text-wrap: balance;
}
body.n1 #logout-confirm-modal p,
body.n1 #delete-confirm-modal p {
  margin: 8px 0 0 !important;
  font: 400 15px/20px var(--n1-font) !important;
  letter-spacing: -.23px;
  color: var(--n1-grey) !important;
  text-wrap: balance;
}
body.n1 #logout-confirm-modal > div > div:last-child,
body.n1 #delete-confirm-modal > div > div:last-child {
  flex-direction: column-reverse !important;
  gap: 8px !important;
  margin-top: 20px;
}
body.n1 #logout-confirm-modal button,
body.n1 #delete-confirm-modal button {
  flex: none !important;
  width: 100%;
  height: 52px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--n1-card2) !important;
  color: #fff !important;
  font: 600 17px/22px var(--n1-font) !important;
  letter-spacing: -.4px;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #logout-confirm-modal #logout-confirm-btn,
body.n1 #delete-confirm-modal #delete-confirm-btn { color: var(--n1-red) !important; }

/* ── Тосты (window.toast / showAppNotification, app.js) ────────────────
   Контейнер #__ios_notif_root лежит на <html>, ВНЕ body, поэтому приставка
   не «body.n1», а «корень, у которого body.n1»: правила по-прежнему работают
   только в новом виде. Все стили тоста инлайновые (app.js) — отсюда
   !important. Логику (лимиты, свайп вверх, закрытие нажатием) не трогаем.
   Вид: плашка #383838 r16 под статус-баром, поля 16 по краям, значок в круге
   32 слева (галочка на салатовом, «!» на красном, «i» на сером), текст 15/20.
   Тип тоста узнаём по цвету значка, который app.js пишет в его style.
   Движение — в n1-motion.css. */
/* Поверх экрана с шапкой тост встаёт ПОД её строку (вырез + 56 + 8), а не
   на неё: стоя поверх, он закрывал кнопку «назад» и заголовок, и «назад»
   не нажималась, пока тост не уйдёт. На главных вкладках шапки нет, и тост
   на той же высоте висел посреди экрана, через 64 px пустоты под часами,
   поверх заголовка и карточек (замечание Тима № 18). Там он сразу под
   часами: вырез + 8. Экран поверх вкладки узнаём по классу neo-tab-under
   на body (его ставит стек экранов, neo-gestures.js). Мимо тоста касания
   проходят насквозь (у контейнера pointer-events:none, app.js). Тосты не
   копятся стопкой: виден последний. */
:root:has(> body.n1) #__ios_notif_root {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 0 !important;
  gap: 8px !important;
}
:root:has(> body.n1.neo-tab-under) #__ios_notif_root {
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
}
:root:has(> body.n1) #__ios_notif_root > div:not(:last-child) { display: none !important; }
:root:has(> body.n1) #__ios_notif_root > div {
  width: 100% !important;
  max-width: 420px !important;
  min-height: 56px;
  box-sizing: border-box;
  padding: 12px 16px 12px 12px !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #383838 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, system-ui, sans-serif) !important;
  -webkit-tap-highlight-color: transparent;
}
/* значок: круг 32 */
:root:has(> body.n1) #__ios_notif_root > div > div:first-child {
  width: 32px !important;
  height: 32px !important;
  border-radius: 16px !important;
  background: #4a4a4a !important;
  color: #fff !important;
}
/* знак внутри круга: у svg из app.js он мелкий (7 из 24), поэтому svg крупнее круга */
:root:has(> body.n1) #__ios_notif_root > div > div:first-child svg { width: 38px; height: 38px; flex: none; stroke-width: 1.8; overflow: visible; }
:root:has(> body.n1) #__ios_notif_root > div > div:first-child svg circle { display: none; }
/* успех: салатовый круг, тёмная галочка */
:root:has(> body.n1) #__ios_notif_root > div > div[style*="#b2fe12"] { background: #b2fe12 !important; color: #111a00 !important; }
/* ошибка: красный круг, белый «!» */
:root:has(> body.n1) #__ios_notif_root > div > div[style*="#ff3b30"] { background: #ff453a !important; color: #fff !important; }
/* внимание: янтарный круг, тёмный «!» (треугольник убран) */
:root:has(> body.n1) #__ios_notif_root > div > div[style*="#ff9f0a"] { background: #ffbd5a !important; color: #2a1c00 !important; }
:root:has(> body.n1) #__ios_notif_root > div > div[style*="#ff9f0a"] svg path:first-child { display: none; }
/* текст */
:root:has(> body.n1) #__ios_notif_root > div > div:last-child {
  font: 400 15px/20px var(--font-system, -apple-system, BlinkMacSystemFont, system-ui, sans-serif) !important;
  letter-spacing: -.23px;
  color: #fff !important;
}

/* ── Заставка #neo-preloader ────────────────────────────────────────────
   Логотип без лаймового свечения. Уход в два шага: сначала за 120 мс гаснет
   логотип (с лёгким уменьшением), потом за 240 мс слой. Раньше они гасли
   вместе за полсекунды, и светящийся полупрозрачный логотип висел поверх
   уже готовой Главной. Весь уход укладывается в 330 мс, а удаляет узел
   app.html через 600 мс после класса — с запасом. */
body.n1 #neo-preloader {
  background: var(--n1-bg);
  transition: opacity 240ms ease 90ms, visibility 0s 330ms;
}
body.n1 .neo-preloader-logo {
  width: 180px;
  height: auto;
  filter: none;
  transition: opacity 120ms ease-out, transform 200ms var(--neo-ease);
}
body.n1 #neo-preloader.neo-preloader-hidden .neo-preloader-logo { opacity: 0; transform: scale(.96); }

/* В приложении прелоадер сайта продолжает заставку оболочки (LaunchOverlay):
   тот же лаймовый логотип того же размера (250 из 393 по ширине) ровно по
   центру. Заставка ушла раньше, чем сайт готов (медленная сеть), — логотип
   стоит на месте, а не сменяется другим («старый прелоадер», Тим, 07.10). */
html.neo-native body.n1 .neo-preloader-logo { display: none; }
html.neo-native body.n1 #neo-preloader::before {
  content: "";
  width: calc(100vw * 250 / 393);
  aspect-ratio: 371.87 / 77.9;
  background: url("../img/logo-neo-lime.svg") center / contain no-repeat;
  transition: opacity 120ms ease-out, transform 200ms var(--neo-ease);
}
html.neo-native body.n1 #neo-preloader.neo-preloader-hidden::before { opacity: 0; transform: scale(.96); }

/* ── «Приложение не загрузилось» (#neo-load-fail, строится в app.html) ──
   Экран N1 (макет AppLoadFail): логотип и строки по центру экрана, кнопка
   на них не влияет (она прижата к низу абсолютно), строка 17/600 и серая
   строка 15 под ним, салатовая кнопка 56 внизу во всю ширину. Стили у узла
   инлайновые. Так же устроена offline.html, чтобы два экрана не прыгали. */
body.n1 #neo-load-fail {
  background: var(--n1-bg) !important;
  gap: 0 !important;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px) !important;
  font-family: var(--n1-font) !important;
}
body.n1 #neo-load-fail::before {
  content: "";
  display: block;
  width: 180px;
  height: 38px;
  margin-bottom: 40px;
  background: url("../img/logo-neo-lime.svg") center / contain no-repeat;
}
body.n1 #neo-load-fail > div:first-of-type {
  font: 600 17px/22px var(--n1-font) !important;
  letter-spacing: -.4px;
  color: #fff !important;
}
body.n1 #neo-load-fail > div:nth-of-type(2) {
  max-width: 300px !important;
  margin-top: 6px;
  font: 400 15px/20px var(--n1-font) !important;
  letter-spacing: -.23px;
  color: var(--n1-grey) !important;
}
body.n1 #neo-load-fail > button {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--n1-lime) !important;
  color: var(--n1-on-lime) !important;
  font: 600 17px/22px var(--n1-font) !important;
  letter-spacing: -.4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Технические работы (#maintenance-modal, <dialog>) ────────────────
   Полный экран вместо окна (макет SysMaintenance): 3D-шестерня 120,
   «Технические работы» 22/700, одна серая строка «Посылки, кошелёк и бонусы
   в порядке». Длинный абзац из разметки убран; правило .update-app-text ниже
   оставлено на случай старой разметки. Закрыть нельзя: так задумано в
   app.js, «назад» глушится. */
body.n1 #maintenance-modal {
  background: var(--n1-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.n1 #maintenance-modal::backdrop { background: var(--n1-bg); }
body.n1 #maintenance-modal .update-app-content {
  width: 100%;
  max-width: 360px;
  padding: 0 24px;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}
body.n1 #maintenance-modal .tehrab-znak {
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  border: 0;
  border-radius: 0;
  background: url("../img/n1/maintenance.webp") center / contain no-repeat;
}
body.n1 #maintenance-modal .tehrab-znak svg { display: none; }
body.n1 #maintenance-modal .update-app-title {
  margin: 0;
  font: 700 22px/28px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
}
body.n1 #maintenance-modal .update-app-text { display: none; }
body.n1 #maintenance-modal .tehrab-pripiska {
  margin: 8px 0 0;
  font: 400 15px/20px var(--n1-font);
  letter-spacing: -.23px;
  color: var(--n1-grey);
  text-wrap: balance;
}


/* ── Шторка «Код для курьера» (pickup-v2.js) ──────────────────────────
   Шторка N1: фон #2f2f2f, верхние углы 28, ручка 36×5, заголовок 22/700
   слева, поля 20. Код — по цифре в ячейках, в группе #383838 r20, под ним
   полоса срока. «Отменить код» — красным текстом, подтверждение окном
   .n1-dlg поверх шторки. Переход шторки (transform var(--neo-dur)
   var(--neo-ease)) не трогаем. */
body.n1 .pk-sheet-bd {
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.n1 .pk-sheet {
  max-width: 520px;
  padding: 8px 20px max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));   /* низ: в приложении 12 px над полоской «домой» */
  border-radius: 28px 28px 0 0;
  background: var(--n1-card);
  color: #fff;
  box-sizing: border-box;
}
body.n1 .pk-grab { width: 36px; height: 5px; margin: 0 auto 20px; border-radius: 3px; background: #5a5a5a; }
body.n1 .pk-sh-t { font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; }
/* шторка с кодом: заголовок по центру, как над картинкой до «Получить код» —
   при смене содержимого он не перескакивает влево */
body.n1 .pk-sh-t--c { text-align: center; }
body.n1 .pk-sh-x { margin-top: 8px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); text-wrap: pretty; }
/* Герой шторки (pickup-v2.js, courierHero): 3D Тима «код для курьера»
   (NeoArt 'courier') 96 px по центру, как .n1ps-art у окон «Данные для
   таможни» и Telegram; заголовок и пояснение под картинкой тоже по центру.
   Низкий экран (до 640 px): картинка 72, чтобы шторка с кодом не росла. */
body.n1 .pk-sh-art { display: block; width: 96px; height: 96px; margin: 0 auto 16px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .pk-sh-art ~ .pk-sh-t,
body.n1 .pk-sh-art ~ .pk-sh-x { text-align: center; text-wrap: balance; }
@media (max-height: 640px) { body.n1 .pk-sh-art { width: 72px; height: 72px; margin-bottom: 12px; } }
body.n1 .pk-sh-cta { margin-top: 24px; }
body.n1 .pk-sh-cta:disabled { opacity: .6; cursor: default; }
body.n1 .pk-sh-cta--dark { background: var(--n1-card2); color: #fff; }
body.n1 .pk-sh-note { margin-top: 12px; text-align: center; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey2); }
/* Код (замечание Тима №16): по цифре в ячейке 44×56 тоном шторки, две
   тройки через зазор («250 816»). Ячейки ужимаются на узком экране (320:
   по 35 px). Пока код едет с сервера (.is-gen), цифры перебираются серым и
   по ячейкам проходит салатовый отсвет; встала цифра (.is-set) — вспышка
   салатовым и рамкой, гаснет в белый за 460 мс. Без сдвигов и масштаба. */
body.n1 .pk-sh-code {
  margin-top: 16px;
  padding: 20px 16px 16px;
  border-radius: 20px;
  background: var(--n1-card2);
}
body.n1 .pk-sh-cells { position: relative; display: flex; justify-content: center; gap: 6px; overflow: hidden; border-radius: 14px; }
body.n1 .pk-sh-gap { flex: none; width: 10px; }
body.n1 .pk-sh-cell {
  flex: 0 1 44px;
  min-width: 0;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--n1-card);
  box-shadow: inset 0 0 0 1.5px rgba(178, 254, 18, 0);
  font: 700 30px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
body.n1 .pk-sh-cell.is-roll { color: #6a6a6a; }
body.n1 .pk-sh-cell.is-set { animation: pkShSet 460ms ease-out; }
@keyframes pkShSet {
  from { color: var(--n1-lime); box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
  to { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(178, 254, 18, 0); }
}
body.n1 .pk-sh-code.is-gen .pk-sh-cells::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, rgba(178, 254, 18, 0), rgba(178, 254, 18, .16), rgba(178, 254, 18, 0));
  pointer-events: none;
  animation: pkShSweep 900ms linear infinite;
}
@keyframes pkShSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Срок: полоса — доля оставшегося из 4 часов (меньше получаса — янтарная),
   под ней «Действует до 14:32» и «Ещё 3 ч 59 мин». Полоса заполняется
   при открытии шторки и когда код встал. */
body.n1 .pk-sh-ttl { margin-top: 16px; }
body.n1 .pk-sh-bar { height: 4px; border-radius: 2px; background: #4a4a4a; overflow: hidden; }
body.n1 .pk-sh-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--n1-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease;
}
body.n1 .pk-sh-bar.is-low i { background: var(--n1-amber); }
body.n1 .pk-sh-ttl-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
body.n1 .pk-sh-ttl-row > span { white-space: nowrap; }
/* кнопки ждут кода невидимыми на своих местах (высота шторки не прыгает),
   код встал — проявляются за 220 мс, «Скопировать» и «Отменить» чуть позже */
body.n1 .pk-sh-acts > *,
body.n1 .pk-sh-cancel { transition: opacity 220ms ease-out; }
body.n1 .pk-sh-acts > :nth-child(2) { transition-delay: 40ms; }
body.n1 .pk-sh-cancel { transition-delay: 80ms; }
body.n1 .pk-sh-acts.is-wait > *,
body.n1 .pk-sh-cancel.is-wait { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.n1 .pk-sh-code.is-gen .pk-sh-cells::after { display: none; }
  body.n1 .pk-sh-bar i,
  body.n1 .pk-sh-acts > *,
  body.n1 .pk-sh-cancel { transition: none; }
}
/* Колонки равные и сжимаемые (minmax 0): при 1fr кнопка не ужималась меньше
   своего текста, и на 320 «Скопировать» уходила за правый край экрана. */
body.n1 .pk-sh-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
body.n1 .pk-sh-act { width: 100%; min-width: 0; height: 52px; padding: 0 12px; border-radius: 26px; font-size: 17px; line-height: 22px; letter-spacing: -.4px; }
body.n1 .pk-sh-act svg { flex: none; }
body.n1 .pk-sh-act span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* уже 360 значок и текст в половину шторки не помещаются: оставляем текст */
@media (max-width: 359px) { body.n1 .pk-sh-act svg { display: none; } }
body.n1 .pk-sh-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  text-align: center;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  color: var(--n1-red);
}


/* ── Штрих-код на весь экран (pickup-v2.js, .pk-bcf) ───────────────────
   Белый экран поверх всего. Код стоит ПО ВЫСОТЕ экрана (полосы поперёк),
   модуль в целых точках; место и размер считает bcfRender по окну и
   отступам под вырезы (padding = safe-area). Номер столбиком слева от кода.
   «Готово» сверху справа; закрывают и нажатие, смахивание, «назад».
   Над окнами (20000), под тостами. */
body.n1 .pk-bc--tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 .pk-bcf {
  position: fixed;
  inset: 0;
  z-index: 20050;
  display: none;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  background: #fff;
  color: #111;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
body.n1 .pk-bcf.active,
body.n1 .pk-bcf.is-out { display: block; }
body.n1 .pk-bcf.is-out { pointer-events: none; }
body.n1 .pk-bcf-code { position: absolute; left: 0; top: 0; }
body.n1 .pk-bcf-code svg { display: block; }
body.n1 .pk-bcf-num {
  position: absolute;
  width: 22px;
  writing-mode: vertical-rl;
  text-align: center;
  font: 600 17px/22px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
  letter-spacing: 2px;
  color: #111;
  white-space: nowrap;
}
body.n1 .pk-bcf-done {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 16px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: #efefef;
  color: #111;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ── Скелетон N1 (.n1-skel) — общий блок для разделов ────────────────
   Блок #333 r12 (внутри карточки #3a3a3a), мерцание — в n1-motion.css.
   Форма повторяет будущее содержимое; цифр и «—» до ответа не рисуем. */
body.n1 .n1-skel { display: block; border-radius: 12px; background-color: #333; }
body.n1 .s-card .n1-skel { background-color: #3a3a3a; }
body.n1 .n1-skel-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; box-sizing: border-box; }
body.n1 .n1-skel-row--p { min-height: 72px; }
body.n1 .n1-skel-row { position: relative; }
body.n1 .n1-skel-row + .n1-skel-row::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1-skel-row--p + .n1-skel-row--p::before { left: 78px; }
body.n1 .n1-skel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body.n1 .n1-skel--ic { width: 26px; height: 26px; border-radius: 13px; flex: none; }
body.n1 .n1-skel--thumb { width: 48px; height: 48px; border-radius: 14px; flex: none; }
body.n1 .n1-skel--t { width: 58%; height: 14px; border-radius: 7px; }
body.n1 .n1-skel--g { width: 40%; height: 12px; border-radius: 6px; }

/* Выдача: скелетон по раскладке экрана, штрих-код без повторного «всплытия» */
body.n1 .n1-pk--skel { overflow: hidden; }
body.n1 .n1-skel--bc { height: 148px; border-radius: 24px; }
body.n1 .n1-skel--hint { width: 62%; height: 14px; margin: 15px auto 3px; border-radius: 7px; }
body.n1 .n1-skel--sub { width: 42%; height: 16px; margin: 30px 4px 14px; border-radius: 8px; }
body.n1 .n1-pk .pk-anim { animation: none; }