/*
 * Новый вид приложения (N1, утверждён Тимом 29.09.2026).
 * Работает только при классе n1 на <body>: снял класс, и вид старый.
 * Правила пишем только внутри body.n1: style.css грузит ещё и панель сотрудников,
 * а голые теги протекают на экран входа (vhod.css).
 * Токены с приставкой --n1-, чтобы не задеть переменные style.css.
 * Шрифт системный, как во всём приложении (--font-system из style.css).
 */

body.n1 {
  --n1-bg: #262626;
  --n1-card: #2f2f2f;
  --n1-card2: #383838;
  --n1-thumb: #3a3a3a;
  --n1-av: #353535;
  --n1-hair: #4a4a4a;
  --n1-grey: #bdbdbd;
  --n1-grey2: #8e8e8e;
  --n1-chev: #6a6a6a;
  --n1-lime: #b2fe12;
  --n1-on-lime: #111a00;
  --n1-amber: #ffbd5a;
  --n1-bonus: #a78bfa;
  --n1-green: #4ade80;   /* щит «данные под защитой» (шторка способов, Личные данные), как в prod-18-09 */
  --n1-bar: #1a1a1a;
  --n1-r-card: 24px;
  --n1-font: var(--font-system);

  /* Текст белый, как в макете (было #dcded1 с прозрачностями, style.css:302-305).
     Производные --color-text* и --ink тоже переопределяем здесь: в :root они
     уже посчитаны из старых значений и сами не обновятся. Слой входа #vh-sloi
     задаёт свои цвета и этого не заметит. */
  --text-primary: #fff;
  --text-secondary: #bdbdbd;
  --text-tertiary: #8e8e8e;
  --text-disabled: rgba(255, 255, 255, .38);
  --ink: #fff;
  --color-text: #fff;
  --color-text-light: #bdbdbd;
  --color-text-muted: #8e8e8e;
  --status-pending-text: #bdbdbd;
  --status-delivered-text: #8e8e8e;
}

/* Текст: 30 / 22 / 17 / 15 / 13 */
body.n1 .s-h1 { margin: 0; font: 700 30px/36px var(--n1-font); letter-spacing: -.5px; color: #fff; }
body.n1 .s-h2 { margin: 0; font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .s-t { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; }
body.n1 .s-b { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; }
body.n1 .s-g { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .s-c { font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }
body.n1 .s-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Подзаголовок раздела со ссылкой справа */
body.n1 .s-sub { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
body.n1 .s-sub a,
body.n1 .s-sub span.r { font: 400 15px/20px var(--n1-font); color: var(--n1-grey); text-decoration: none; }

/* Шапка экрана: в потоке страницы, не поверх */
body.n1 .s-top { min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Пилюли и круглые кнопки */
body.n1 .s-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--n1-card2); color: #fff; font: 600 15px/20px var(--n1-font); letter-spacing: -.2px; white-space: nowrap; }
body.n1 .s-ib { width: 44px; height: 44px; border-radius: 22px; background: var(--n1-card2); display: grid; place-items: center; color: #fff; flex: none; }

/* Пилюля баланса: сумма открывает кошелёк, «+» пополнение */
body.n1 .s-bal { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; border-radius: 22px; background: var(--n1-card2); color: #fff; font: 600 16px/20px var(--n1-font); letter-spacing: -.3px; white-space: nowrap; }
body.n1 .s-bal > a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
body.n1 .s-bal .plus { width: 32px; height: 32px; border-radius: 16px; background: var(--n1-lime); color: var(--n1-on-lime); display: grid; place-items: center; }
body.n1 .s-bal a.plus-t { width: 44px; height: 44px; margin: 0 -6px; display: grid; place-items: center; }

/* Карточки */
body.n1 .s-card { background: var(--n1-card); border-radius: var(--n1-r-card); position: relative; overflow: hidden; color: #fff; }
body.n1 a.s-card { display: block; text-decoration: none; }
body.n1 .s-glow::before { content: ""; position: absolute; right: -70px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(178, 254, 18, .34), rgba(178, 254, 18, .1) 55%, rgba(178, 254, 18, 0)); pointer-events: none; }
body.n1 .s-glow--tr::before { right: -60px; top: -90px; bottom: auto; }
body.n1 .s-limel { background: linear-gradient(90deg, #b2fe12 0, #9ee010 20%, #5f8a0c 34%, #3b4a22 46%, var(--n1-card) 60%); }

/* Карточка, из которой выходит 3D-картинка: фон отдельно, картинка поверх края */
body.n1 .s-break { position: relative; }
body.n1 .s-break > .bg { position: absolute; inset: 0; border-radius: var(--n1-r-card); overflow: hidden; background: var(--n1-card); }

/* Кнопки */
body.n1 .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: var(--n1-lime); color: var(--n1-on-lime); font: 600 16px/20px var(--n1-font); letter-spacing: -.3px; white-space: nowrap; text-decoration: none; cursor: pointer; }
body.n1 .s-btn--dark { background: var(--n1-card2); color: #fff; }
body.n1 .s-cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border: 0; border-radius: 28px; background: var(--n1-lime); color: var(--n1-on-lime); font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; text-decoration: none; cursor: pointer; }

/* Поле ввода 48 с кнопкой «Вставить» */
body.n1 .s-field { height: 48px; border-radius: 24px; background: var(--n1-card2); display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; color: var(--n1-grey2); font: 400 17px/22px var(--n1-font); letter-spacing: -.4px; }
body.n1 .s-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; letter-spacing: inherit; padding: 0; }
body.n1 .s-field input::placeholder { color: var(--n1-grey2); opacity: 1; }
body.n1 .s-field .paste { margin-left: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--n1-lime); color: var(--n1-on-lime); font: 600 15px/20px var(--n1-font); display: flex; align-items: center; cursor: pointer; }

/* Строки списков: разделитель в полпикселя начинается от текста */
body.n1 .s-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 16px; position: relative; color: #fff; text-decoration: none; }
body.n1 .s-row + .s-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 .s-row--p { min-height: 72px; }
body.n1 .s-row--p + .s-row--p::before { left: 78px; }
body.n1 .s-row--i + .s-row--i::before { left: 16px; }
body.n1 .s-hair { height: 1px; background: var(--n1-hair); transform: scaleY(.5); transform-origin: top; }
body.n1 .s-thumb { width: 48px; height: 48px; border-radius: 14px; background: var(--n1-thumb); display: grid; place-items: center; flex: none; overflow: hidden; }
body.n1 .s-av { width: 52px; height: 52px; border-radius: 26px; background: var(--n1-av); display: grid; place-items: center; flex: none; overflow: hidden; }
/* Стрелка строки. Своя коробка ровно по значку (flex): обычный span давал
   строчную коробку выше значка, значок садился на базовую линию, и стрелка
   стояла на 3 px выше середины строки и текста (замечание Тима № 10). */
body.n1 .s-chev { color: var(--n1-chev); flex: none; display: flex; align-items: center; justify-content: center; }
body.n1 .s-chev > svg { display: block; }

/* Ряд цифр через тонкие разделители */
body.n1 .s-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 4px; }
body.n1 .s-stats > div,
body.n1 .s-stats > a { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; color: #fff; text-decoration: none; }
body.n1 .s-stats > a { min-height: 44px; }
body.n1 .s-stats > div + div::before,
body.n1 .s-stats > a + a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--n1-hair); }
body.n1 .s-stats .v { display: flex; align-items: center; gap: 8px; font: 700 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .s-stats .s-g { text-align: center; }

/* Точки прогресса */
body.n1 .s-dots { display: flex; align-items: center; gap: 6px; }
body.n1 .s-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--n1-lime); display: block; }
body.n1 .s-dots i.off { background: #5a5a5a; }
body.n1 .s-dots b { width: 20px; height: 20px; border-radius: 50%; background: var(--n1-lime); color: var(--n1-on-lime); display: grid; place-items: center; }

/* Переключатель из двух половин */
body.n1 .s-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.n1 .s-seg > * { height: 48px; border-radius: 16px; background: var(--n1-card); display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/20px var(--n1-font); color: var(--n1-grey); }
body.n1 .s-seg > .on { box-shadow: inset 0 0 0 1.5px var(--n1-lime); color: #fff; }
body.n1 .s-seg i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #454545; color: #fff; font: 700 12px/22px var(--n1-font); }
body.n1 .s-seg > .on i { background: var(--n1-lime); color: var(--n1-on-lime); }

/* Бейджи, кольцо аватара, знак бонуса */
body.n1 .s-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--n1-lime); color: var(--n1-on-lime); font: 700 12px/20px var(--n1-font); text-align: center; flex: none; }
body.n1 .s-ring { width: 108px; height: 108px; border-radius: 54px; border: 2px dashed var(--n1-lime); display: grid; place-items: center; }
body.n1 .s-bs { display: inline-block; border-top: .08em solid currentColor; line-height: .84; }

/* Значки из набора (window.neoIc) */
body.n1 .n1-ic { display: block; flex: none; }

/* ── Нижняя панель ─────────────────────────────────────────────────────
   Разметка в app.html (nav.tab-bar-bottom). Размеры, прозрачность, сдвиг и
   переходы самой панели не трогаем: ими управляют свайпы и экраны поверх
   (style.css, body.neo-tab-under и др.). Меняем только вид внутри. */
body.n1 .tab-bar-bottom {
  /* style.css задаёт высоту и отступ через --safe-bottom, которой нигде нет,
     причём с !important. Высоту даёт содержимое, отступ снизу у контейнера. */
  height: auto !important;
  padding: 0 !important;
  box-shadow: none;
}
/* Мягкое затемнение над панелью: контент уходит под неё плавно */
body.n1 .tab-bar-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 56px;
  background: linear-gradient(to top, rgba(38, 38, 38, .72), rgba(38, 38, 38, 0));
  pointer-events: none;
}
body.n1 .tab-bar-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  padding: 10px 0 max(22px, env(safe-area-inset-bottom, 0px));
  background: var(--n1-bar);
  border-top: 0;
  box-shadow: inset 0 .5px 0 #3a3a3a;
  border-radius: 0;
}
body.n1 .tab-link,
body.n1 .tab-link-fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  height: auto;
  min-height: 46px;
  margin: 0;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--n1-grey2);
  font: 500 10px/12px var(--n1-font);
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .tab-link-fab::before,
body.n1 .tab-link-fab::after { content: none; }
/* Кнопка поднята вместе с диском: её рамка (по ней подсвечивает обучение
   и ловится нажатие) охватывает диск целиком, подпись стоит в ряд с остальными */
body.n1 .tab-link-fab { margin-top: -28px; }
/* Зона нажатия — по диску, а не на всю колонку: иначе полоска над панелью
   (на планшете во всю ширину колонки) открывала выдачу вместо карточки под ней.
   Скругление верха повторяет диск с кольцом (54 + 2×5), нажатия за ним не ловятся. */
body.n1 .tab-link-fab { justify-self: center; width: 64px; border-radius: 32px 32px 14px 14px; }
/* Полоска над активной вкладкой, по верхнему краю панели */
body.n1 .tab-link::before {
  top: -10px;
  width: 30px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--n1-lime);
}
body.n1 .tab-link .tab-icon,
body.n1 .tab-link.active .tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: inherit;
  filter: none;
  transform: none;
}
/* Значок вкладки: контур из набора (линия 1.75, разметка в app.html). У активной
   вкладки тот же контур салатовый и чуть толще. Без заливки: залитый значок на
   тёмной панели терял детали и выглядел меньше, серый контур с салатовой
   заливкой смотрелся наклейкой (замечания Тима 06.10 и 07.10). Правило CSS
   перебивает атрибут stroke-width у <g>. Без переходов: кнопки статичные. */
body.n1 .tab-link .n1-tab-ic { grid-area: 1 / 1; display: block; color: var(--n1-grey2); }
body.n1 .tab-link.active .n1-tab-ic { color: var(--n1-lime); }
body.n1 .tab-link.active .n1-tab-ic g { stroke-width: 2.15; }
body.n1 .tab-link .tab-label,
body.n1 .tab-link-fab .fab-label {
  display: block;
  font: inherit;
  color: inherit;
  letter-spacing: 0;
  white-space: nowrap;
}
body.n1 .tab-link.active,
body.n1 .tab-link-fab.active { color: var(--n1-lime); }
body.n1 .tab-link.active .tab-label { font-weight: 600; }

/* Выдача: салатовый диск, приподнят над панелью, подпись под ним */
body.n1 .tab-link-fab .fab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.n1 .tab-link-fab .n1-disc {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  background: var(--n1-lime);
  color: var(--n1-on-lime);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 5px var(--n1-bar);
}

/* Счётчик непрочитанного у «Сообщений» */
body.n1 #nav-notification-badge {
  position: absolute;
  top: -3px;
  left: 50%;
  right: auto;
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background: var(--n1-lime);
  color: var(--n1-on-lime);
  font: 700 11px/18px var(--n1-font);
  text-align: center;
  box-shadow: 0 0 0 2px var(--n1-bar);
}
body.n1 #nav-notification-badge.hidden { display: none; }

/* ── Общие мелочи ────────────────────────────────────────────────────── */
/* Кнопка без своего вида: для карточек и строк, которые целиком нажимаются */
body.n1 .n1-plain { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 .n1-lime { color: var(--n1-lime); }
body.n1 .n1-grow { flex: 1; min-width: 0; }
/* строка-кнопка: сброс .n1-plain обнулял её отступ, возвращаем */
body.n1 .n1-plain.s-row { padding: 0 16px; }
body.n1 button.s-ib { appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
body.n1 .n1-nowrap { white-space: nowrap; }
body.n1 .n1-right { text-align: right; }
body.n1 .n1-amber { color: var(--n1-amber); }
body.n1 .n1-offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* :where — сброс без веса, иначе margin:0 перебивал отступы у карточек-кнопок */
body.n1 :where(button.s-card, button.s-row) { appearance: none; -webkit-appearance: none; width: 100%; margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 .s-stats > button { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-height: 44px; color: #fff; }
body.n1 .s-stats > button + button::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--n1-hair); }
/* 320: «Доставляется» во всю колонку касалось линий между колонками */
@media (max-width: 359px) { body.n1 .s-stats > button .s-g { padding: 0 4px; font-size: 13px; line-height: 17px; } }
/* соседи разного типа (кнопка «Получено» + блок «Общий вес» в Профиле) тоже с разделителем */
body.n1 .s-stats > * + *::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--n1-hair); }
body.n1 .s-card:focus-visible,
body.n1 .n1-plain:focus-visible,
body.n1 .s-btn:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; }

/* ── Главная ─────────────────────────────────────────────────────────── */
body.n1 .home-tab { gap: 16px; }
/* Старый баннер: якорь для ленты сторис, самого баннера в новом виде нет */
body.n1 .home-tab .home-hero-card { display: none !important; }
body.n1 .n1-home-top { padding: 0; margin: -4px 0 -4px; }
body.n1 .n1-home-logo { display: block; width: 92px; height: 30px; }
body.n1 .s-bal > button { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: inherit; }
body.n1 .s-bal > button.plus-t { width: 44px; height: 44px; margin: 0 -6px; justify-content: center; }
/* Кошелёк в шапке: вся левая часть пилюли — кнопка высотой 44 (была 50×20,
   касание по краю пилюли ничего не открывало). Значок и «+» спокойные:
   салатовый на Главной — только у карточки «Сейчас». */
body.n1 .n1-home-top .s-bal { padding-left: 0; gap: 4px; }
body.n1 .n1-home-top #n1-bal-open { height: 44px; padding: 0 4px 0 14px; border-radius: 22px 0 0 22px; }
body.n1 .n1-home-top .s-bal .plus { background: #4d4d4d; color: #fff; }
/* Большая сумма не влезает (n1-home.js, fitBal): значок кошелька уходит,
   сумма мельчает до 13 px, пилюля остаётся в полях экрана */
body.n1 .n1-home-top .s-bal.n1-bal--tight #n1-bal-open > svg { display: none; }
body.n1 .n1-home-top .s-bal.n1-bal--tight #n1-bal-open { padding-left: 14px; }
body.n1 .n1-home-top #n1-bal-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Пункт выдачи под шапкой: адрес, партнёр, стрелка */
body.n1 .n1-pt { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: -8px; padding: 0 12px 0 10px; border-radius: 18px; background: var(--n1-card); color: #fff; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; }
body.n1 .n1-pt-ic { flex: none; color: var(--n1-grey); }
body.n1 .n1-pt-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.n1 .n1-pt-name.n1-sk { width: 132px; height: 18px; }
body.n1 .n1-pt-badge { flex: none; display: inline-flex; align-items: center; color: var(--n1-grey2); }
body.n1 .n1-pt-badge:empty { display: none; }
body.n1 .n1-pt-chev { flex: none; color: var(--n1-chev); margin-left: 2px; }
body.n1 .n1-home { display: flex; flex-direction: column; gap: 16px; }
/* hidden у старых блоков: их собственный display иначе перебивает атрибут */
body.n1 .home-tab [hidden] { display: none !important; }

/* «Сейчас» (n1-home.js renderNow): одна карточка-акцент по состоянию клиента.
   Верхняя часть — кнопка: картинка Тима справа (абсолютно, обрезается краем
   карточки), заголовок 22/700, серая строка, пилюля действия внизу. */
body.n1 .n1-now { display: flex; flex-direction: column; }
body.n1 .n1-now-main { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 188px; padding: 20px 20px 18px; text-align: left; color: #fff; }
body.n1 .n1-now-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: calc(100% - 112px); }
body.n1 .n1-now-kicker { margin-bottom: 6px; font: 600 15px/20px var(--n1-font); letter-spacing: -.23px; }
body.n1 .n1-now-title { text-wrap: balance; }
body.n1 .n1-now-sub { margin-top: 4px; }
body.n1 .n1-now-body > :has(+ .n1-now-btn) { margin-bottom: 16px; }
body.n1 .n1-now-btn { flex: none; margin-top: auto; height: 40px; padding: 0 16px; font-size: 15px; }
body.n1 .n1-now-art { position: absolute; display: block; pointer-events: none; }
body.n1 .n1-now-art--shop { right: -14px; bottom: -8px; width: 170px; height: 170px; }
/* «можно забирать»: посылка в руке, рукав срезан нижним краем карточки */
body.n1 .n1-now-art--hand { right: -12px; bottom: -20px; width: 150px; height: 150px; }
body.n1 .n1-now--ready .n1-now-body { max-width: calc(100% - 128px); }
@media (max-width: 389px) { body.n1 .n1-now-btn { padding: 0 14px; font-size: 14px; } }
body.n1 .n1-now-art--box { right: -4px; bottom: 8px; width: 128px; height: 128px; transform: rotate(-8deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
body.n1 .n1-now-art--truck { right: -30px; bottom: -18px; width: 176px; height: 176px; }
/* фура шире посылки: текст не заходит под кабину */
body.n1 .n1-now--transit .n1-now-body { max-width: calc(100% - 132px); }
/* «в закрытом пункте»: пункт 170 px, подпись не заходит на его навес */
body.n1 .n1-now--shut .n1-now-body { max-width: calc(100% - 132px); }
/* 320: картинки меньше, иначе пилюля действия закрывает их, а строка
   «2 на складе в Китае» заходит на карту */
@media (max-width: 359px) {
  body.n1 .n1-now-body { max-width: calc(100% - 96px); }
  body.n1 .n1-now--transit .n1-now-body { max-width: calc(100% - 112px); }
  body.n1 .n1-now--shut .n1-now-body { max-width: calc(100% - 100px); }
  body.n1 .n1-now-art--shop { width: 128px; height: 128px; }
  body.n1 .n1-now--ready .n1-now-body { max-width: calc(100% - 100px); }
  body.n1 .n1-now-art--hand { right: -22px; bottom: -16px; width: 112px; height: 112px; }
  body.n1 .n1-now-art--box { width: 100px; height: 100px; }
  body.n1 .n1-now-art--truck { right: -40px; width: 136px; height: 136px; }
}
/* строки внутри карточки: оплата (янтарная), «всё получено», шаги первой посылки */
body.n1 .n1-now-row { gap: 10px; min-height: 56px; padding: 0 16px 0 20px; }
body.n1 .n1-now-main + .n1-now-row::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1-now-sum { flex: none; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 .n1-now-main.is-busy,
body.n1 .n1-now-row.is-busy { opacity: .7; }
body.n1 .n1-now-text { display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1-now-quiet { min-height: 72px; padding-left: 16px; }
body.n1 .n1-now-art--thumb { position: static; width: 40px; height: 40px; }
body.n1 .n1-now-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 0 20px; }
body.n1 .n1-now-head .n1-now-title { flex: 1; min-width: 0; }
body.n1 .n1-now-art--first { position: static; flex: none; width: 104px; height: 104px; margin: -6px 0 -10px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
body.n1 .n1-now .n1-step { gap: 14px; min-height: 64px; padding: 8px 16px 8px 20px; }
body.n1 .n1-now .n1-step + .n1-step::before { left: 62px; }
body.n1 .n1-now .n1-step:last-child { margin-bottom: 4px; }
body.n1 .n1-step-n { flex: none; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #5a5a5a; color: var(--n1-grey); font: 600 15px/20px var(--n1-font); }
body.n1 .n1-step-n.is-on { background: var(--n1-lime); color: var(--n1-on-lime); box-shadow: none; }

/* «Ждут оплаты»: карточка, которая слева переходит в салатовый */
body.n1 .n1-unpaid { display: flex; align-items: center; gap: 14px; height: 104px; padding: 0 16px 0 10px; color: #fff; }
body.n1 .n1-unpaid-art { flex: none; width: 80px; height: 80px; transform: rotate(-10deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
body.n1 .n1-unpaid-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
body.n1 .n1-unpaid-sum { font: 600 22px/28px var(--n1-font); letter-spacing: -.4px; white-space: nowrap; }
/* подпись переносится, а не режется: на 320 от «ждут оплаты» оставалось «ждут …» */
body.n1 .n1-unpaid-sub { color: #e6e6e6; white-space: normal; }

/* Адрес склада в Китае */
/* Всегда целиком, без «скрыть/показать» (Тим, партия 3 №7) — как в 779c7d42 */
body.n1 .n1-addr { padding: 18px 16px 16px 20px; }
body.n1 .n1-addr-title { font-size: 20px; line-height: 25px; }
body.n1 .n1-addr-rows { margin-top: 4px; }
body.n1 .n1-addr-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
body.n1 .n1-addr-k { width: 92px; flex: none; display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1-addr-ru { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
/* Значения — то, что копируют: белые и крупнее подписей. Номер склада и код
   клиента не рвутся посередине (n1-home.js оборачивает их в .n1-nw), перенос
   идёт между иероглифами. */
body.n1 .n1-addr .n1-addr-v { flex: 1; min-width: 0; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; overflow-wrap: anywhere; word-break: normal; }
body.n1 .n1-addr-v .n1-nw { white-space: nowrap; }
body.n1 .n1-copy { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: -12px -12px 0 -4px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--n1-grey2); flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 .n1-copy > svg,
body.n1 .n1-addr-all > svg { grid-area: 1 / 1; }
body.n1 .n1-copy-ok { display: none; }
body.n1 .is-copied .n1-copy-ic { display: none; }
body.n1 .is-copied .n1-copy-ok { display: block; }
body.n1 .n1-copy.is-copied { color: var(--n1-lime); }
body.n1 .n1-addr-all { width: 100%; margin-top: 8px; }
body.n1 .n1-addr-all.is-copied { background: var(--n1-lime); color: var(--n1-on-lime); }
body.n1 .n1-addr-note { margin-top: 10px; }
/* Предупреждение о переезде склада: app.js вставляет его первым ребёнком
   карточки с отступами под старую разметку (инлайн) */
body.n1 #home-cn-card > .neo-branch-alert { margin: 0 0 14px !important; }
/* Та же плашка в виде N1 (app.js, NeoBranchAlert, класс n1-moved): как
   подсказка про коды под адресом. 3D склада, строка янтарём (внимание, как
   «Ждут оплаты»), строка серым, фон --n1-card2. Без рамки, градиента,
   треугольника и выезда сверху. */
body.n1 .neo-branch-alert.n1-moved { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 0; border-radius: 16px; background: var(--n1-card2); animation: none; }
body.n1 .n1-moved-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.n1 .n1-moved-t { color: var(--n1-amber); }
/* Окно «Мы сменили адрес склада» в виде N1: как «Вышло обновление»
   (n1-profilesub.css) — карточка --n1-card r24, 3D сверху, заголовок 20/700,
   одна мысль серым, кнопка 52. Фон без размытия; появление: фон проявляется,
   карточка из .96 в 1 за 200 мс, без перелёта. */
body.n1 .neo-branch-modal-overlay.n1-moved-bd { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity .2s ease-out; }
body.n1 .neo-branch-modal.n1-moved-modal { max-width: 342px; padding: 24px; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transform: scale(.96); transition: transform .2s ease-out; }
body.n1 .n1-moved-bd.active .n1-moved-modal { transform: none; }
body.n1 .n1-moved-modal .neo-branch-modal__art { width: 112px; height: 112px; margin: 0 auto 16px; }
body.n1 .n1-moved-modal h3 { margin: 0; font: 700 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; text-wrap: balance; }
body.n1 .n1-moved-modal p { margin: 8px 0 20px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: pretty; }
body.n1 .n1-moved-modal .neo-branch-modal__primary { height: 52px; margin: 0; padding: 0 16px; border-radius: 26px; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; }
@media (prefers-reduced-motion: reduce) {
  body.n1 .neo-branch-modal-overlay.n1-moved-bd,
  body.n1 .neo-branch-modal.n1-moved-modal { transition: none; }
}
/* Адреса ещё нет (app.js, n1CnState). Под заголовком блок состояния в виде
   той же подсказки: 3D, строка жирным, строка серым. «Готовим» — строки
   адреса остаются, значения плашками с переливом, как заглушки n1Wait, и
   адрес встаёт на их место без скачка. «Нет пункта» и «не пришёл» — без
   строк, с кнопкой. Подсказка про коды в это время не нужна: кодов нет. */
body.n1 #n1-addr-st { margin-top: 12px; }
body.n1 .n1-addr-st-box { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--n1-card2); }
body.n1 .n1-addr-st-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.n1 .n1-addr-st-btn { width: 100%; margin-top: 12px; }
body.n1 .n1-addr-st-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 4px; color: var(--n1-lime); font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; }
body.n1 #home-cn-card.n1-addr--st .n1-addr-note { display: none; }
/* Плашка «Мы переехали» показывается и без адреса, как раньше: меняется
   только её вторая строка («Когда новый адрес появится ниже…», app.js) */
body.n1 #home-cn-card:is(.n1-addr--branch, .n1-addr--fail, .n1-addr--load) .n1-addr-rows { display: none; }
/* Ширина плашек — доля места под значение (строка минус подпись 92 и зазор
   12; кнопок копирования в это время нет), а не всей строки: от строки
   нижняя на 320 вылезала за край карточки. */
body.n1 #home-cn-card.n1-addr--wait .n1-addr-v { flex: none; width: calc((100% - 104px) * .86); height: 22px; overflow: hidden; border-radius: 7px; color: transparent; background: linear-gradient(90deg, #363636 0%, #414141 45%, #363636 90%) 0 0 / 220% 100%; animation: n1-sk 1.4s linear infinite; user-select: none; }
body.n1 #home-cn-card.n1-addr--wait .n1-addr-v * { visibility: hidden; }
body.n1 #home-cn-card.n1-addr--wait .n1-addr-row:nth-child(2) .n1-addr-v { width: calc((100% - 104px) * .68); }
body.n1 #home-cn-card.n1-addr--wait .n1-addr-row:nth-child(3) .n1-addr-v { width: calc((100% - 104px) * .76); }
body.n1 #home-cn-card.n1-addr--wait .n1-addr-row:nth-child(4) .n1-addr-v { width: calc(100% - 104px); height: 44px; }
@media (prefers-reduced-motion: reduce) {
  body.n1 #home-cn-card.n1-addr--wait .n1-addr-v { animation: none; }
}

/* Где заказывать: заголовок, честная подпись «видео в Instagram», 3D маркетплейсов справа;
   плитки логотипов со значком ▶ — нажатие открывает ролик. */
body.n1 .n1-mk-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 0 20px; }
body.n1 .n1-mk-head-text { display: flex; flex-direction: column; gap: 4px; }
body.n1 .n1-mk-sub { display: flex; align-items: center; gap: 6px; }
body.n1 .n1-mk-sub svg { flex: none; }
body.n1 .n1-mk-art { flex: none; width: 72px; height: 72px; margin: -4px 0 -8px; }
body.n1 .n1-mk-row { display: flex; justify-content: space-between; padding: 12px 16px 16px; }
body.n1 .n1-mk { position: relative; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.n1 .n1-mk img { display: block; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
/* плитка без логотипа маркетплейса (07.10): значок магазина на тёмной подложке */
body.n1 .n1-mk-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--n1-card2); color: var(--n1-lime); }
body.n1 .n1-mk-name { color: #fff; }
body.n1 .n1-mk-play { position: absolute; top: 38px; right: 0; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--n1-card); color: #fff; box-shadow: 0 0 0 2px var(--n1-card); }
body.n1 .s-row.n1-mk-add { padding: 0 16px 0 20px; }

/* Акции: карусель во всю ширину экрана (поля вкладки 16 — прокрутка до края),
   карточка на 40 px уже экрана, чтобы была видна кромка следующей. Без
   градиентов: тёмная карточка, текст слева, 3D Тима справа. Точки белые. */
body.n1 .n1-promo { margin: 0 -16px; }
body.n1 .n1-promo-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
body.n1 .n1-promo-track::-webkit-scrollbar { display: none; }
body.n1 .n1-promo-card { position: relative; overflow: hidden; flex: 0 0 calc(100% - 24px); max-width: 380px; min-height: 112px; display: flex; align-items: center; padding: 16px 112px 16px 20px; scroll-snap-align: start; border-radius: var(--n1-r-card); background: var(--n1-card); color: #fff; text-align: left; }
body.n1 .n1-promo-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.n1 .n1-promo-art { position: absolute; right: 8px; top: 50%; width: 96px; height: 96px; margin-top: -48px; pointer-events: none; }
/* диорама Тима «пункт у дома»: сцена с мелкими деталями, на 96 px не
   читается; крупнее, но в поле картинки (112 px справа) */
body.n1 .n1-promo-art--scene { right: -2px; width: 114px; height: 114px; margin-top: -57px; }
body.n1 .n1-promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
body.n1 .n1-promo-dots i { width: 6px; height: 6px; border-radius: 3px; background: #5a5a5a; transition: background-color 160ms ease; }
body.n1 .n1-promo-dots i.on { background: #fff; }
body.n1 .n1-promo-dots:has(i:only-child) { display: none; }

/* Полезно знать: подзаголовок группы и строки «значок · заголовок · серая строка» */
body.n1 .n1-know-wrap { display: flex; flex-direction: column; gap: 8px; }
body.n1 .n1-know-sub { margin: 0; }
body.n1 .n1-know .s-row { min-height: 68px; padding: 10px 16px; }
body.n1 .n1-know-text { display: flex; flex-direction: column; gap: 2px; }

body.n1 .n1-addr-v .n1-code { color: var(--n1-lime); white-space: nowrap; }
/* Подсказка под адресом: оба кода жирным салатовым (Тим, партия 3 №8) */
body.n1 .n1-addr-note .n1-code { color: var(--n1-lime); font-weight: 600; white-space: nowrap; }
/* Подсказка — отдельная плашка на #383838 внутри карточки адреса. Слева обычный
   значок «i» 20 px салатовым из спрайта, как значки строк по приложению; 3D
   здесь Тиму не нужна (06.10, круг 2 №1). Значок по первой строке текста
   (строка 18, значок 20: на 1 px выше), а не по середине трёх строк. */
body.n1 .n1-addr-note:not([hidden]) { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--n1-card2); color: var(--n1-grey); }
body.n1 .n1-addr-note-ic { flex: none; margin-top: -1px; color: var(--n1-lime); }
body.n1 .n1-addr-note-t { min-width: 0; text-wrap: pretty; }
/* 3D в блоке «адреса ещё нет» (n1CnState) и в плашке «Мы переехали» (app.js) */
body.n1 .n1-addr-art { flex: none; width: 56px; height: 56px; }

/* Сторис на Главной (лента карточек и просмотр) — css/n1-stories.css. */

/* ── Посылки ──────────────────────────────────────────────────────────
   #orders-screen показывает и прячет app.js (инлайн display), поэтому
   отступы — у детей, а не flex у контейнера. Старые блоки прячем:
   #orders-add-btn остаётся в DOM, через него открывается окно трека;
   старый список статусов тоже — оплата пакета нажимает его «Готово». */
body.n1 #orders-bonuses-card,
body.n1 #wl-orders-card,
body.n1 #orders-add-btn,
body.n1 #track-help-card,
body.n1 #orders-screen .n1-old-status { display: none !important; }
body.n1 .n1-page-title { margin: 4px 0 0; }

/* «Добавить трек-код»: одна строка-кнопка под заголовком (замечание Тима №14) */
body.n1 .s-row.n1-add-row { margin-top: 16px; }
body.n1 .n1-add-row .s-chev { display: flex; }

/* Где посылки: плитки этапов (как до ночи 03.10, замечание Тима №11) */
body.n1 .n1-sub { margin: 24px 0 10px; }
body.n1 .n1-stages-hair { margin: 0 16px; }
body.n1 .s-stats > .is-zero .v,
body.n1 .s-stats > .is-zero .v svg { color: var(--n1-grey2); }
body.n1 #orders-screen > .n1-stages { margin-bottom: 8px; }

/* ── Профиль ──────────────────────────────────────────────────────────
   Старая шапка (#profile-header-main) и старая разметка спрятаны: app.js
   показывает шапку инлайн-стилями, поэтому display:none с !important. */
body.n1 #profile-header-main { display: none !important; }
body.n1 .n1-old-prof[hidden] { display: none !important; }
body.n1 .n1-prof { padding-bottom: 8px; }
/* hidden у карточек Профиля (например, «Добавьте ИИН»): их display иначе перебивает атрибут */
body.n1 .n1-prof [hidden] { display: none !important; }

body.n1 .n1-who { display: flex; align-items: center; gap: 16px; min-height: 96px; margin-top: 8px; }
body.n1 .n1-ring { width: 84px; height: 84px; border-radius: 42px; flex: none; }
body.n1 .n1-ring-in { width: 70px; height: 70px; border-radius: 35px; background: var(--n1-thumb); display: grid; place-items: center; color: #fff; font: 700 26px/32px var(--n1-font); letter-spacing: -.4px; }
body.n1 .n1-who-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.n1 .n1-who-name { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; width: 100%; text-align: left; }
body.n1 .n1-who-text { display: flex; flex-direction: column; }
body.n1 .n1-who-title { font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .n1-who-name .s-chev { margin-top: 5px; }
body.n1 .n1-code-btn { align-self: flex-start; height: 44px; display: flex; align-items: center; margin-top: 2px; }
body.n1 .n1-code-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 16px; background: var(--n1-card2); color: var(--n1-grey2); }
body.n1 .n1-code-pill .s-c { color: var(--n1-grey); }
body.n1 .n1-code-pill b { font: 600 15px/20px var(--n1-font); letter-spacing: .2px; color: #fff; }
/* Подпись «Личный код» всегда в одну строку: на 320 она ломалась на две и вылезала
   из пилюли высотой 32. Сжаться может только сам код (многоточие), но на узких
   экранах кольцо и отступы меньше, и код до 10 знаков (NEO101548) стоит целиком. */
body.n1 .n1-code-btn { max-width: 100%; }
body.n1 .n1-code-pill { max-width: 100%; min-width: 0; }
body.n1 .n1-code-pill :is(.s-c, svg) { flex: none; }
body.n1 .n1-code-pill .s-c { white-space: nowrap; }
body.n1 .n1-code-pill b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 350px) {
  body.n1 .n1-who { gap: 12px; }
  body.n1 .n1-ring { width: 72px; height: 72px; border-radius: 36px; }
  body.n1 .n1-ring-in { width: 60px; height: 60px; border-radius: 30px; font-size: 22px; line-height: 28px; }
  body.n1 .n1-code-pill { gap: 4px; padding: 0 8px 0 10px; }
  body.n1 .n1-code-pill b { letter-spacing: 0; }
}

body.n1 .n1-prof-stats { padding: 14px 0; margin-top: 12px; }
/* Треть строки на 320 всего 96 px: «999 кг» с весами занимает 87. Число не
   переносится, а на узких экранах значок и зазор чуть меньше, чтобы цифры
   не заезжали на разделитель (от тонны вес в тоннах, n1-profile.js fmtKg). */
body.n1 .n1-prof-stats .v { white-space: nowrap; }
@media (max-width: 350px) {
  body.n1 .n1-prof-stats .v { gap: 6px; }
  body.n1 .n1-prof-stats .v svg { width: 20px; height: 20px; }
}
body.n1 .n1-iin { display: flex; align-items: center; gap: 14px; height: 88px; padding: 0 16px; margin-top: 16px; color: #fff; }
body.n1 .n1-iin-text { display: flex; flex-direction: column; gap: 2px; }
/* 320: подпись «Данные нужны для таможни» переносится, адрес пункта мельче:
   «пр. Абая…» резался без номера дома (длинный адрес режется, как раньше) */
@media (max-width: 359px) { body.n1 .n1-iin-text .s-ell { white-space: normal; text-overflow: clip; } body.n1 #n1-prof-branch-name { font-size: 14px; } }

body.n1 .n1-pair { display: flex; gap: 16px; margin-top: 16px; }
body.n1 .n1-pair-card { flex: 1; min-width: 0; height: 128px; padding: 0; color: #fff; }
body.n1 .n1-cover { position: absolute; inset: 0; z-index: 1; }
body.n1 .n1-pair-head { position: absolute; left: 18px; top: 18px; display: flex; align-items: center; gap: 8px; }
/* Сумма во всю ширину плитки (по 18 px с краёв): «+» наверху, в строке
   «Кошелёк», а не внизу, где он закрывал знак тенге. Длинная сумма мельчает
   (n1-profile.js, fitAmounts); не влезла и на 14 px — переносится (--wrap). */
body.n1 .n1-pair-amt { position: absolute; left: 18px; bottom: 18px; max-width: calc(100% - 36px); font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; white-space: nowrap; }
body.n1 .n1-pair-plus { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; z-index: 2; }
/* до 359 px плитка 136-156 px: значок кошелька уступает место «+», подпись
   остаётся (у «Бонусов» значка нет вовсе) */
@media (max-width: 359px) { body.n1 .n1-wallet .n1-pair-head svg { display: none; } }
body.n1 .n1-pair-plus span { width: 32px; height: 32px; border-radius: 16px; background: var(--n1-lime); color: var(--n1-on-lime); display: grid; place-items: center; }
body.n1 .n1-bonus { display: block; text-align: left; }
body.n1 .n1-bonus-art { position: absolute; right: 4px; top: 12px; width: 84px; height: 60px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); pointer-events: none; }
body.n1 .n1-bonus-label { position: absolute; left: 18px; top: 18px; line-height: 20px; color: var(--n1-bonus); }
/* На 320 плитка 136 px, и карта 84 px углом ложилась на «ы» в «Бонусы».
   До 350 px карта меньше и у самого края, между ней и подписью зазор. */
@media (max-width: 350px) {
  body.n1 .n1-bonus-art { right: 0; top: 10px; width: 68px; height: 48px; }
}
body.n1 #n1-prof-bonus-amount .wl-b { color: var(--n1-bonus); }
/* Сумма влезает в половину экрана только мельче 18 px (на 390 с миллионов
   с копейками, на 320 раньше): плитки одна под другой во всю ширину, сумма
   крупнее прежнего (n1-profile.js, fitAmounts). «+» и карта бонусов справа
   по центру плитки, сумма им не мешает. */
body.n1 .n1-pair--wide { flex-direction: column; gap: 12px; }
body.n1 .n1-pair--wide .n1-pair-card { flex: none; height: 104px; }
body.n1 .n1-pair--wide .n1-pair-amt { max-width: calc(100% - 118px); font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
body.n1 .n1-pair--wide .n1-pair-plus { top: 50%; right: 10px; margin-top: -22px; }
body.n1 .n1-pair--wide .n1-wallet .n1-pair-head svg { display: block; }
body.n1 .n1-pair--wide .n1-bonus-art { top: 50%; right: 14px; width: 84px; height: 60px; margin-top: -30px; }

/* «Приглашайте друзей». Высота по содержимому, не меньше 96 из макета: на 320
   заголовок и строка встают в две строки каждый, и жёсткие 96 обрезали низ.
   Текст начинается там, где салатовый .s-limel уже ушёл в тёмный, около 36%
   ширины карточки (так в макете на 390). На узких экранах отступ слева
   сжимается вместе с карточкой, на широких не больше прежних 40.
   36% − 79px: процент берётся от ширины карточки без полей (10 + 16), а
   79 ≈ поле 10 + значок 64 + зазор 14 − 36% от 26. */
body.n1 .n1-friends { display: flex; align-items: center; gap: 14px; min-height: 96px; margin-top: 16px; padding: 12px 16px 12px 10px; color: #fff; }
body.n1 .n1-friends-ic { width: 64px; flex: none; display: grid; place-items: center; color: var(--n1-on-lime); }
body.n1 .n1-friends-text { display: flex; flex-direction: column; gap: 2px; padding-left: clamp(8px, calc(36% - 79px), 40px); }
/* строки ровные, как в макете «вам 2% / с его доставок», без одного слова внизу */
body.n1 .n1-friends-text .s-g { color: #d6d6d6; text-wrap: balance; }

body.n1 .n1-menu { margin-top: 16px; }
body.n1 .n1-menu .s-row { gap: 14px; }
/* «Выйти из аккаунта» отдельной карточкой под меню (замечание Тима 32),
   как было в Настройках (макет Settings): красная надпись по центру. */
body.n1 .n1-prof-logout { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 16px; padding: 0 16px; color: var(--n1-red, #ff6b6b); font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; text-align: center; }
/* карточка «ждут оплаты», пока подтягиваем свежую сумму */
body.n1 .n1-unpaid.is-busy { opacity: .7; }

/* ── Сообщения ────────────────────────────────────────────────────────
   Старый скелетон спрятан: app.js снимает с него hidden сам, поэтому
   display:none с !important. */
body.n1 #messages-skeleton { display: none !important; }
body.n1 .messages-inbox { padding: 0 0 24px; }

/* Карточка «Техподдержка» наверху вкладки и место плашки пушей над ней —
   в n1-support.css, там же остальное «Сообщений». */

/* Каналы: список по категориям (строит messages.js, в новом виде своя начинка) */
body.n1 #messages-dialogs-list { gap: 0; background: var(--n1-card); border: 0; border-radius: var(--n1-r-card); overflow: hidden; }
body.n1 #messages-dialogs-list .msg-dialog-item { align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; background: none; border-radius: 0; }
body.n1 #messages-dialogs-list .msg-dialog-item::after { display: none; }
body.n1 #messages-dialogs-list .msg-dialog-item + .msg-dialog-item::before { content: ""; position: absolute; left: 80px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #messages-dialogs-list .msg-dialog-avatar { width: 52px; height: 52px; flex: none; border-radius: 26px; background: var(--n1-av); display: grid; place-items: center; overflow: hidden; }
body.n1 #messages-dialogs-list .msg-dialog-avatar img { width: 38px; height: 38px; object-fit: contain; }
body.n1 #messages-dialogs-list .msg-dialog-content { gap: 2px; }
body.n1 #messages-dialogs-list .msg-dialog-top { gap: 8px; }
body.n1 #messages-dialogs-list .msg-dialog-name { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
/* название чата в одну строку: на 320 px «Закрытие пунктов» рядом с датой
   переносилось на вторую. На узком экране шрифт на пункт меньше, а если и
   так не влезло — многоточие */
body.n1 #messages-dialogs-list .msg-dialog-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) {
  body.n1 #messages-dialogs-list .msg-dialog-name { font-size: 16px; }
}
body.n1 #messages-dialogs-list .msg-dialog-time { font: 400 13px/18px var(--n1-font); color: var(--n1-grey2); flex: none; }
body.n1 #messages-dialogs-list .msg-dialog-preview { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #messages-dialogs-list .has-unread .msg-dialog-preview { color: #fff; font-weight: 400; }
/* Сумма в превью Кошелька и Бонусов не режется (messages.js previewSumN1):
   многоточие только у подписи. На 320 было «Оплата доставки −5 3…», а у
   «Начисление бонусов …» суммы не было видно совсем. */
body.n1 #messages-dialogs-list .msg-dialog-preview.n1m-pv { display: flex; min-width: 0; }
body.n1 #messages-dialogs-list .n1m-pv-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.n1 #messages-dialogs-list .n1m-pv-s { flex: none; padding-left: .25em; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.n1 #messages-dialogs-list .has-unread .msg-dialog-time { color: var(--n1-grey2); font-weight: 400; }
body.n1 #messages-dialogs-list .msg-dialog-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--n1-lime); color: var(--n1-on-lime); font: 700 12px/20px var(--n1-font); flex: none; }

/* ── Выдача (экран, pickup-v2.js renderN1) ────────────────────────────
   Общая шапка приложения, под ней вкладки «Можно забирать» и «Ждут
   оплаты»; прокручивается только вкладка, оплата закреплена внизу. */
/* Колонка «шапка + экран» (pickup-v2.js, .pk-n1-frame): шапка — общая
   .fullscreen-header (вид и вырезы в n1-shell.css, здесь её не трогаем),
   экран #pkv2 ровно под ней, какой бы высоты она ни была. Старая шапка
   из app.html спрятана: её #pickup-close нажимает «назад». overflow — чтобы
   выезжающая снизу строка оплаты не давала экрану прокрутку. */
body.n1 #pickup-screen > .status-screen-header { display: none !important; }
body.n1 #pickup-screen > .pk-n1-frame { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; }
body.n1 .pk-n1-frame > #pkv2 { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; padding: 0 16px; }
/* Вкладки — сегмент N1 (.s-seg): открытая с салатовой рамкой, число
   справа. Стоят на месте, список уходит под них; пролистали — волосок. */
body.n1 .n1-pk-tabs { position: relative; z-index: 1; flex: none; margin: 0 -16px; padding: 4px 16px 12px; background: var(--n1-bg); box-shadow: inset 0 -.5px 0 transparent; transition: box-shadow 150ms ease; }
body.n1 #pickup-screen.pk-scrolled .n1-pk-tabs { box-shadow: inset 0 -.5px 0 var(--n1-hair); }
body.n1 .n1-pk-tab { appearance: none; -webkit-appearance: none; min-width: 0; margin: 0; padding: 0 8px; gap: 6px; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 150ms ease-out, box-shadow 150ms ease-out; }
/* название не режется многоточием: не влезает в строку (узкий экран,
   крупный системный шрифт) — переносится на вторую, высота вкладки та же */
body.n1 .n1-pk-tab-t { min-width: 0; line-height: 18px; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.n1 .n1-pk-tab i { flex: none; font-variant-numeric: tabular-nums; transition: background-color 150ms ease-out, color 150ms ease-out; }
body.n1 .n1-pk-tab:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; }
/* Число «Ждут оплаты» — янтарём, пока есть что оплатить (замечание Тима
   №10: клиент замечает и не забывает), и когда вкладка открыта, и когда
   нет. Янтарь в приложении и значит «ждёт оплаты» (Главная, «осталось X»);
   салатовый — выбранное, им рамка вкладки. Без мигания. Нечего оплатить —
   числа нет вовсе (pickup-v2.js n1Tabs). */
body.n1 .n1-pk-seg > .n1-pk-tab i.is-due { background: var(--n1-amber); color: #2a1c00; }
/* Рамка открытой вкладки — одна на двоих и едет за лентой вкладок
   (pickup-v2.js pgPut, --pk-p: 0 — «Можно забирать», 1 — «Ждут оплаты»);
   своей рамки у вкладок нет. Поверх фона вкладок, нажатия не ловит. */
body.n1 .n1-pk-seg { position: relative; }
body.n1 .n1-pk-seg > .n1-pk-tab.on { box-shadow: none; }
body.n1 .n1-pk-seg > .n1-pk-ring { position: absolute; left: 0; top: 0; z-index: 1; width: calc((100% - 10px) / 2); height: 100%; padding: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--n1-lime); pointer-events: none; transform: translate3d(calc(var(--pk-p, 0) * (100% + 10px)), 0, 0); }
/* 320–359: «Можно забирать» с числом в строку не влезает (вкладка 139 px):
   название переносилось на две строки, а соседнее «Ждут оплаты» — нет, и
   вкладки стояли неровно. Число здесь — кружком на правом верхнем углу
   вкладки, как счётчик на значке; обе вкладки одинаково, название в одну
   строку. Ободок цвета фона отделяет кружок от салатовой рамки. */
@media (max-width: 359px) {
  body.n1 .n1-pk-tab { position: relative; padding: 0 10px; font-size: 14px; letter-spacing: -.2px; }
  body.n1 .n1-pk-tab-t { line-height: 17px; }
  body.n1 .n1-pk-tab i { position: absolute; z-index: 2; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11px; line-height: 20px; box-shadow: 0 0 0 2px var(--n1-bg); }
}
body.n1 .n1-pk-tabs-skel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.n1 .n1-pk-tabs-skel .n1-skel { height: 48px; border-radius: 16px; }
body.n1 .n1-pk { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
body.n1 .n1-pk--tabs { padding-top: 4px; }
/* внизу закреплена оплата — вырез снизу у неё, списку хватает своего поля */
body.n1 .n1-pk--dock { padding-bottom: 24px; }
/* Лента вкладок (pickup-v2.js n1Pager): обе вкладки рядом, у каждой своя
   прокрутка и своя высота, оплата закреплена внизу «Ждут оплаты» и едет
   вместе с ней. Ленту ведёт палец (pgMove); pan-y — вдоль ленты браузер
   сам ничего не делает, поперёк — обычная прокрутка. */
body.n1 .n1-pk-pager { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 -16px; overflow: hidden; touch-action: pan-y; }
body.n1 .n1-pk-track { display: flex; height: 100%; will-change: transform; }
body.n1 .n1-pk-page { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; }
body.n1 .n1-pk-page > .n1-pk { margin: 0; touch-action: pan-y; }
body.n1 .n1-pk-page > .n1-pk-dock { margin: 0; }
/* порядок вкладки: карточки через 16, группы пунктов через 12 */
body.n1 .n1-pk-pane > .n1-pk-list { margin-top: 16px; }
body.n1 .n1-pk-pane > .n1-pk-list:first-child { margin-top: 0; }
body.n1 .n1-pk-pane > .n1-pk-list + .n1-pk-list { margin-top: 12px; }
body.n1 .n1-pk-pane > .n1-sub:first-child { margin-top: 4px; }
/* «Штрих-код для выдачи появится после оплаты» над списком, когда забирать нечего */
body.n1 .n1-pk-hint--lead { margin: 0 0 12px; }
body.n1 .n1-pk-pane > .n1-pk-hint--lead + .n1-pk-list { margin-top: 0; }
/* пустая вкладка: путь на соседнюю («Перейти к оплате», «Показать штрих-код») */
body.n1 .n1-pk-go { align-self: center; margin-top: 16px; }
/* Оплата внизу вкладки «Ждут оплаты» (pickup-v2.js n1PayDock): как строка
   оплаты экрана этапа (.pp-n1-selbar): слева сколько и сумма, справа
   «Оплатить»; над вырезом снизу, волосок сверху. */
body.n1 .n1-pk-dock { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 20px; background: var(--n1-bg); box-shadow: inset 0 .5px 0 var(--n1-hair); }
body.n1 .n1-pk-dock-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1-pk-dock-sum .s-g { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.n1 .n1-pk-dock-v { font: 600 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 .n1-pk-dock-btn { flex: none; height: 48px; padding: 0 24px; border-radius: 24px; font-size: 17px; line-height: 22px; letter-spacing: -.4px; }
body.n1 .n1-pk-dock-btn.is-busy { opacity: .6; }
body.n1 .n1-pk .pk-bc-wrap { margin: 0; }
body.n1 .n1-pk .pk-bc-glow { display: none; }
/* Белая карточка по ширине кода (замечание Тима №19): ширину, боковое белое
   поле и сдвиг ставит pickup-v2.js (fitBarcodeCard) по настоящей ширине
   экрана. Полосы 84 px (замечание Тима №15: 120 было «амбально»; на
   прежнем экране 76, «можно чуть больше»): сканеру важна ширина модуля,
   её считает fitBarcodeCard, а не высота. */
body.n1 .n1-pk .pk-bc { padding: 14px 14px 10px; border-radius: 20px; display: flex; flex-direction: column; box-shadow: none; box-sizing: border-box; max-width: none; }
body.n1 .n1-pk .pk-bc-svg { width: 100%; height: 84px; display: flex; }
body.n1 .n1-pk .pk-bc-svg svg { display: block; flex: none; }
body.n1 .n1-pk .pk-bc-zoom { margin-top: 2px; text-align: center; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: #555; }
body.n1 .n1-pk .pk-bc-zoom[hidden] { display: none; }
body.n1 .n1-pk--skel .n1-skel--bc { height: 132px; max-width: 320px; margin: 0 auto; border-radius: 20px; }
/* номер под кодом: сканер не взял — сотрудник наберёт руками */
body.n1 .n1-pk .pk-bc-num { margin-top: 6px; text-align: center; font: 400 13px/18px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; letter-spacing: 1px; color: #767676; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.n1 .n1-pk-hint { margin-top: 10px; text-align: center; }
body.n1 .n1-pk-where { margin-top: 16px; }
body.n1 .n1-pk-where .s-row { gap: 14px; min-height: 64px; padding: 10px 16px; text-align: left; cursor: pointer; }
body.n1 .n1-pk-ic { width: 26px; flex: none; display: grid; place-items: center; color: var(--n1-lime); }
body.n1 .n1-pk-text { display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1-pk-courier .n1-pk-text .s-g { white-space: normal; }
body.n1 .n1-pk-courier .pk-courier-chev { flex: none; color: var(--n1-chev); opacity: 1; display: grid; }
body.n1 .n1-pk-courier .pk-courier-chev svg { width: 18px; height: 18px; }
/* 3D Тима слева в строке (pickup-v2.js, класс n1-pk-th): «Код для курьера»
   (NeoArt 'courier'). Плитка 48 r14 тоном --n1-thumb, картинка 44, как у
   строк посылок на этом же экране (PP.row, .pp-prow-th). В карточке с такой
   строкой колонка значка у всех строк 48 px (n1-pk-where--th): текст с 76 px,
   вровень с названиями посылок ниже (16 + 48 + 12), волосок от текста,
   строки по 72 px. */
body.n1 .n1-pk-ic.n1-pk-th { width: 48px; height: 48px; border-radius: 14px; background: var(--n1-thumb); }
body.n1 .n1-pk-th img { display: block; width: 44px; height: 44px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .n1-pk-where--th .n1-pk-ic { width: 48px; }
body.n1 .n1-pk-where--th .s-row { gap: 12px; min-height: 72px; }
body.n1 .n1-pk-where--th .s-row + .s-row::before { left: 76px; }
/* Карточки посылок по пунктам, у строк посылок плитки 3D (NeoArt.rowThumbs,
   класс n1-pk-list--th): у строки пункта та же колонка 48 и отступ 12 —
   метка над плитками, адрес вровень с названиями посылок (76 px). У
   закрытого пункта в этой колонке 3D Тима «пункт закрыт» ('branch-closed'). */
body.n1 .n1-pk-list--th .n1-pk-branch { gap: 12px; }
body.n1 .n1-pk-list--th .n1-pk-ic { width: 48px; }
/* колонка текста стала уже: длинный адрес пункта («пр. Рахимжана
   Кошкарбаева, 48») переносится на вторую строку, а не режется многоточием;
   на 320 часы пункта уходят под пилюлю партнёра; «ещё 2 ч 58 мин» у кода
   курьера не рвётся */
body.n1 :is(.n1-pk-where--th, .n1-pk-list--th) .n1-pk-branch .s-b.s-ell { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.n1 :is(.n1-pk-where--th, .n1-pk-list--th) .n1-pk-br-sub { flex-wrap: wrap; row-gap: 2px; }
body.n1 :is(.n1-pk-where--th, .n1-pk-list--th) .n1-pk-br-sub > .s-g { flex: 0 0 auto; max-width: 100%; }
body.n1 .n1-pk-left { white-space: nowrap; }
/* действующий код курьера прямо в строке: «K7M 4Q2 · ещё 2 ч 59 мин» */
body.n1 .n1-pk-code { color: #fff; font-variant-numeric: tabular-nums; }
/* пункт строкой: наверху экрана и первой строкой каждой группы по пунктам;
   под адресом пилюля партнёра (NeoBranch) и часы */
body.n1 .n1-pk-list .n1-pk-branch { min-height: 64px; padding: 10px 16px; text-align: left; }
body.n1 button.n1-pk-branch { cursor: pointer; }
body.n1 div.n1-pk-branch, body.n1 .n1-pk-where div.n1-pk-branch { cursor: default; }
body.n1 .n1-pk-br-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.n1 .n1-pk-br-sub > :not(.s-g) { flex: none; }
body.n1 .n1-pk-list + .n1-pk-list { margin-top: 12px; }
/* строки посылок — единая строка PP.row (.pp-prow, n1-parcel.css); волосок
   между строками и под строкой пункта, от левого поля */
body.n1 .n1-pk-list > .pp-prow + .pp-prow::before,
body.n1 .n1-pk-list > .n1-pk-branch + .pp-prow::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
/* скелетон строк Выдачи — по форме PP.row: три строки (с плиткой 3D ниже) */
body.n1 .n1-skel-row--pr { min-height: 88px; }
body.n1 .n1-skel-row--pr + .n1-skel-row--pr::before { left: 16px; }
body.n1 .n1-skel-row--pr .n1-skel--kg { width: 22%; }
/* с плитками 3D в строках (pickup-v2.js, n1-skel-row--prth; карточка
   «пункт и курьер» n1-pk-where--th): плитка 48, отступ 12, текст с 76 px,
   волосок от текста — как у строк с данными, ничего не прыгает */
body.n1 .n1-pk--skel .n1-skel-row--prth { gap: 12px; }
body.n1 .n1-pk--skel .n1-skel-row--prth + .n1-skel-row--prth::before { left: 76px; }
body.n1 .n1-pk--skel .n1-pk-where--th .n1-skel-row { gap: 12px; min-height: 72px; }
body.n1 .n1-pk--skel .n1-pk-where--th .n1-skel--ic { margin: 0 11px; }
body.n1 .n1-pk--skel .n1-pk-where--th .n1-skel-row + .n1-skel-row::before { left: 76px; }
/* скелетон вкладки: карточка курьера и посылки через 16, как с данными */
body.n1 .n1-pk--skel .n1-pk-where + .n1-pk-list { margin-top: 16px; }
body.n1 .n1-pk-empty { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding: 20px; }
/* не загрузилось и показать нечего (pickup-v2.js, state.loadErr): кнопка «Повторить» по содержимому */
body.n1 .n1-pk-retry { align-self: flex-start; margin-top: 12px; }
/* верх вкладки по состоянию: ошибка вместо штрих-кода, пусто */
body.n1 .n1-pk-top { margin-top: 0; }
body.n1 .n1-pk-none { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 24px 8px; text-align: center; }
/* пустой стеллаж (NeoArt 'empty-pickup'): картинка почти без прозрачных полей,
   размер и отступ как у 3D других пустых экранов (112 px, 16 px до заголовка) */
body.n1 .n1-pk-none img { width: 112px; height: 112px; margin: 0 0 12px; object-fit: contain; }
body.n1 .n1-pk-none .s-g { max-width: 280px; text-wrap: balance; }
/* не загрузилось и показать нечего (n1-pk-fail): 3D «ошибка» или «нет
   связи» на месте пустого стеллажа, «Повторить» под текстом по центру */
body.n1 .n1-pk-none .n1-pk-retry { align-self: center; margin-top: 16px; }
body.n1 .n1-pk-fail .s-g { text-wrap: balance; }
body.n1 .n1-pk-where--own { margin-top: 32px; }

/* ── Заглушки «грузится» (window.n1Wait, config.js) ─────────────────────
   Текст остаётся в DOM, но прозрачный; на его месте плашка с мягким
   переливом в одну сторону. При «меньше движения» — без перелива. */
body.n1 .n1-sk {
  display: inline-block;
  min-width: 2.2em;
  border-radius: 7px;
  color: transparent !important;
  background: linear-gradient(90deg, #363636 0%, #414141 45%, #363636 90%) 0 0 / 220% 100%;
  animation: n1-sk 1.4s linear infinite;
  user-select: none;
}
body.n1 .n1-sk * { visibility: hidden; }
body.n1 #n1-bal-amount.n1-sk { min-width: 56px; }
body.n1 .n1-addr-v.n1-sk { flex: none; width: 58%; }
body.n1 .n1-who-title.n1-sk { width: 70%; }
body.n1 #n1-prof-phone.n1-sk { width: 48%; }
/* пункт выдачи в Профиле: плашка справа по размеру значения, а не во всю строку */
body.n1 #n1-prof-branch-name.n1-sk { flex: none; width: 88px; margin-left: auto; }
body.n1 .n1-pair-amt.n1-sk { min-width: 88px; }
@keyframes n1-sk { from { background-position: 110% 0; } to { background-position: -110% 0; } }
/* данные пришли: текст проявляется на месте плашки, без рывка */
body.n1 .n1-sk-in { animation: n1-sk-in .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes n1-sk-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-sk, body.n1 .n1-sk-in { animation: none; }
}
/* «Готово к выдаче» и «ждут оплаты» до первых данных выдачи (n1-home.js):
   карточка прошлого запуска стоит плашкой своего размера, чтобы Главная не
   прыгала, когда данные придут. Нажать её нельзя. */
body.n1 .n1-pk-wait { pointer-events: none; background: var(--n1-card); }
body.n1 .n1-pk-wait::before { content: none; }
body.n1 .n1-pk-wait > * { visibility: hidden; }
/* две строки-плашки: заголовок и подпись */
body.n1 .n1-pk-wait::after {
  content: "";
  position: absolute; left: 20px; top: 24px;
  width: 58%; height: 22px; border-radius: 11px;
  background: linear-gradient(90deg, #363636 0%, #414141 45%, #363636 90%) 0 0 / 220% 100%;
  box-shadow: 0 36px 0 -3px #363636;
  animation: n1-sk 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-pk-wait::after { animation: none; }
}


/* ── Нижняя панель: полоска переезжает к активной вкладке (n1-tabbar.js) ──
   Своя полоска у каждой вкладки (::before) выключена: вместо неё одна общая,
   её двигает transform. Значок активной вкладки только становится салатовым
   и чуть толще, без «выпрыгивания» (замечание Тима № 11: кнопки статичные). */
body.n1 .tab-link::before { content: none; }
body.n1 .n1-tab-ind {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--n1-lime);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-tab-ind { transition: none; }
}

/* ── Выдача: линия сканера по живому штрих-коду (pickup-v2.js, maybeScan) ──
   Один проход сверху вниз при открытии экрана и когда код ожил. */
body.n1 .n1-pk .pk-bc { position: relative; overflow: hidden; }
body.n1 .n1-pk .pk-bc.is-scan::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(178, 254, 18, 0), #8ccb0c 18%, #b2fe12 50%, #8ccb0c 82%, rgba(178, 254, 18, 0));
  box-shadow: 0 0 10px 1px rgba(140, 203, 12, .55);
  pointer-events: none;
  animation: n1-scan .9s cubic-bezier(.45, 0, .2, 1) both;
}
@keyframes n1-scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(82px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-pk .pk-bc.is-scan::after { animation: none; display: none; }
}