/* N1: profilesub. Правила только внутри body.n1 (см. n1.css).
 *
 * Окна и экраны из Профиля: данные получателя (identity.js), обновление
 * (app-update.js), переезд склада
 * (addr-campaign.js), просмотрщик сторис (stories.js) и содержимое
 * полноэкранных экранов app.html (настройки, об аккаунте, пароль, промокод,
 * язык, выход, о приложении, правила, тарифы).
 *
 * Шапку, фон и кнопку «назад» у .fullscreen-overlay задаёт n1-shell.css,
 * здесь только содержимое (селекторы с #id — у них вес выше).
 * Модули вставляют свой <style> ПОСЛЕ этого файла, поэтому у всех правил
 * приставка body.n1, а где у модуля или разметки !important — тоже !important.
 */

body.n1 {
  --n1-red: #ff6b6b;
  --n1-grab: #5a5a5a;
  /* значки для масок: те же, что в спрайте app.html (набор Solar, ids ph-*): разметку экранов app.html
     не меняем, старые stroke-значки прячем и рисуем эти поверх */
  --n1ps-ic-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M5.3 10.1V8C5.3 4.3 8.3 1.3 12 1.3C15.7 1.3 18.8 4.3 18.8 8V10.1C19.9 10.1 20.6 10.3 21.1 10.9C22 11.8 22 13.2 22 16C22 18.8 22 20.2 21.1 21.1C20.2 22 18.8 22 16 22H8C5.2 22 3.8 22 2.9 21.1C2 20.2 2 18.8 2 16C2 13.2 2 11.8 2.9 10.9C3.4 10.3 4.1 10.1 5.3 10.1ZM6.8 8C6.8 5.1 9.1 2.8 12 2.8C14.9 2.8 17.3 5.1 17.3 8V10C16.9 10 16.5 10 16 10H8C7.5 10 7.1 10 6.8 10V8ZM14 16C14 17.1 13.1 18 12 18C10.9 18 10 17.1 10 16C10 14.9 10.9 14 12 14C13.1 14 14 14.9 14 16Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --n1ps-ic-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10 4H14C17.8 4 19.7 4 20.9 5.2C21.7 6 21.9 7.1 22 9C22 9.4 22 9.5 21.9 9.7C21.9 9.8 21.6 9.9 21 10.3C20.4 10.6 20 11.2 20 12C20 12.8 20.4 13.4 21 13.7C21.6 14.1 21.9 14.2 21.9 14.3C22 14.5 22 14.6 22 15C21.9 16.9 21.7 18 20.9 18.8C19.7 20 17.8 20 14 20H10C6.2 20 4.3 20 3.1 18.8C2.3 18 2.1 16.9 2 15C2 14.6 2 14.5 2.1 14.3C2.1 14.2 2.4 14.1 3 13.7C3.6 13.4 4 12.8 4 12C4 11.2 3.6 10.6 3 10.3C2.4 9.9 2.1 9.8 2.1 9.7C2 9.5 2 9.4 2 9C2.1 7.1 2.3 6 3.1 5.2C4.3 4 6.2 4 10 4ZM15.5 8.5C15.8 8.8 15.8 9.2 15.5 9.5L9.5 15.5C9.2 15.8 8.8 15.8 8.5 15.5C8.2 15.2 8.2 14.8 8.5 14.5L14.5 8.5C14.8 8.2 15.3 8.2 15.5 8.5ZM14.5 15.5C15.1 15.5 15.5 15.1 15.5 14.5C15.5 13.9 15.1 13.5 14.5 13.5C14 13.5 13.5 13.9 13.5 14.5C13.5 15.1 14 15.5 14.5 15.5ZM9.5 10.5C10.1 10.5 10.5 10.1 10.5 9.5C10.5 8.9 10.1 8.5 9.5 8.5C8.9 8.5 8.5 8.9 8.5 9.5C8.5 10.1 8.9 10.5 9.5 10.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --n1ps-ic-translate: 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.25' d='M4 6h10M9 4v2m3 0c0 4-3 8-8 10m2.559-7c.985 2.628 3.237 5.024 6.441 6.561M11 20l4.5-10L20 20m-7.65-3h6.3'/%3E%3C/svg%3E");
  --n1ps-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 17.8C12.4 17.8 12.8 17.4 12.8 17V11C12.8 10.6 12.4 10.3 12 10.3C11.6 10.3 11.3 10.6 11.3 11V17C11.3 17.4 11.6 17.8 12 17.8ZM12 7C12.6 7 13 7.4 13 8C13 8.6 12.6 9 12 9C11.4 9 11 8.6 11 8C11 7.4 11.4 7 12 7Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --n1ps-ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.75'%3E%3Cpath d='M3.3 15.3C2.4 14.2 2 13.6 2 12C2 10.4 2.4 9.8 3.3 8.7C5 6.5 7.8 4 12 4C16.2 4 19 6.5 20.7 8.7C21.6 9.8 22 10.4 22 12C22 13.6 21.6 14.2 20.7 15.3C19 17.5 16.2 20 12 20C7.8 20 5 17.5 3.3 15.3Z'/%3E%3Cpath d='M15 12C15 13.7 13.7 15 12 15C10.3 15 9 13.7 9 12C9 10.3 10.3 9 12 9C13.7 9 15 10.3 15 12Z'/%3E%3C/g%3E%3C/svg%3E");
  --n1ps-ic-eyeoff: 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-width='1.75' d='M12 14C5 14 2 7 2 7M22 7C22 7 21.1 9.2 19 11.1C18.1 12 17 12.8 15.6 13.3C14.5 13.7 13.3 14 12 14M12 14V16.5M15.6 13.3L17 15.5M19 11.1L20.5 12.6M8.4 13.3L7 15.5M5 11.1L3.5 12.6'/%3E%3C/svg%3E");
  --n1ps-ic-check: 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.35' d='M5 13L9 17L19 7'/%3E%3C/svg%3E");
  --n1ps-ic-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.75'%3E%3Cpath d='M6 11C6 8.2 6 6.8 6.9 5.9C7.8 5 9.2 5 12 5H15C17.8 5 19.2 5 20.1 5.9C21 6.8 21 8.2 21 11V16C21 18.8 21 20.2 20.1 21.1C19.2 22 17.8 22 15 22H12C9.2 22 7.8 22 6.9 21.1C6 20.2 6 18.8 6 16V11Z'/%3E%3Cpath d='M6 19C4.3 19 3 17.7 3 16V10C3 6.2 3 4.3 4.2 3.2C5.3 2 7.2 2 11 2H15C16.7 2 18 3.3 18 5'/%3E%3C/g%3E%3C/svg%3E");
  --n1ps-ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.75'%3E%3Cpath d='M19 5L5 19'/%3E%3Cpath d='M19 19L5 5'/%3E%3C/g%3E%3C/svg%3E");
  --n1ps-ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(.5 0)'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5L15 12L9 19'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Общие части окон раздела ────────────────────────────────────────────
   Шторка снизу: фон --n1-card, верх 28px, ручка 36×5, поля 20px.
   Окно по центру: карточка --n1-card r24, поля 24px, кнопки столбиком 52px. */
body.n1 .n1ps-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--n1-grab); margin: 0 auto; flex: none; }
body.n1 .n1ps-art { display: block; width: 96px; height: 96px; margin: 0 auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .s-cta.n1ps-second { background: var(--n1-card2); color: #fff; }
/* Кнопки окон раздела (класс n1ps-btn): выключенная серая */
body.n1 .n1ps-btn:disabled { background: var(--n1-card2); color: var(--n1-grey2); cursor: default; }
body.n1 .n1ps-btn { -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1ps-btn { transition: none; }
}

/* ── Данные получателя (identity.js) ─────────────────────────────────────
   Сверху плашка «всё ли заполнено», поля с зелёной галочкой у верного.
   Сноска под карточкой, ошибка ИИН на её месте красным. «Сохранить» внизу. */
body.n1 .id-screen { width: 100vw; background: var(--n1-bg); border: 0; color: #fff; font-family: var(--n1-font); }
body.n1 .id-header { min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; border: 0; gap: 0; }
body.n1 .id-back { width: 44px; height: 44px; border-radius: 22px; background: var(--n1-card2); color: #fff; -webkit-tap-highlight-color: transparent; }
body.n1 .id-back svg { width: 22px; height: 22px; }
body.n1 .id-title { margin: 0; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .id-body { padding: 8px 16px 24px; }

/* Поля как в «Изменить пароль» (одна схема N1): подпись 15 серым над полем,
   поле 52 r16 #383838, фокус — салатовая обводка, ошибка ИИН — красная. */
body.n1 .id-form { padding: 0; }
body.n1 .id-f + .id-f { margin-top: 20px; }
body.n1 .id-lbl { display: block; margin: 0 4px 8px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .id-box { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px 0 16px; border-radius: 16px; background: var(--n1-card2); cursor: text; transition: box-shadow .15s ease; }
body.n1 .id-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
body.n1 .id-box:has(.id-input.err) { box-shadow: inset 0 0 0 1.5px var(--n1-red); }
body.n1 .id-k { flex: none; width: 88px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 .id-input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: 0; color: #fff; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; caret-color: var(--n1-lime); }
body.n1 .id-input::placeholder { color: var(--n1-grey2); opacity: 1; }
body.n1 .id-input.ok,
body.n1 .id-input.err,
body.n1 .id-input:focus { border: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { body.n1 .id-box { transition: none; } }
/* Галочка у верно заполненного поля (п. 11 Тима, 06.10): зелёный кружок,
   тот же зелёный, что у щита «Ваши данные под защитой» и плашки ниже.
   Появляется коротко: проявление и подрастание без пружины. */
body.n1 .id-check { flex: none; width: 24px; justify-content: center; color: var(--n1-green, #4ade80); transform: scale(.7); transition: opacity .2s cubic-bezier(.2, 0, 0, 1), transform .2s cubic-bezier(.2, 0, 0, 1); }
body.n1 .id-check.show { transform: none; }
body.n1 .id-check svg { width: 22px; height: 22px; color: var(--n1-green, #4ade80); }
@media (prefers-reduced-motion: reduce) { body.n1 .id-check { transition: none; } }

/* Плашка над полями (п. 11 Тима): «Все данные заполнены» зелёной, когда имя,
   фамилия и ИИН сохранены; иначе спокойная серая «Осталось заполнить …» с
   тремя делениями. Текст и логика — identity.js (sumHtml). */
body.n1 .id-sum-box { margin: 0 0 20px; }
body.n1 .id-sum-box:empty { display: none; }
body.n1 .id-sum { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; box-sizing: border-box; border-radius: 20px; background: var(--n1-card); }
body.n1 .id-sum--ok { background: rgba(74, 222, 128, .1); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .24); }
body.n1 .id-sum-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--n1-green, #4ade80); }
body.n1 .id-sum-ic svg { width: 32px; height: 32px; }
body.n1 .id-sum-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 .id-sum-t { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .id-sum-s { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .id-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.n1 .id-sum-n { flex: none; font-variant-numeric: tabular-nums; }
body.n1 .id-sum-segs { display: flex; gap: 4px; margin-top: 10px; }
body.n1 .id-sum-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--n1-hair); }
body.n1 .id-sum-seg.on { background: var(--n1-green, #4ade80); }
/* пока данные едут с сервера: поля-«пилюли», как скелетон */
body.n1 .id-form.is-wait .id-input { flex: 0 1 150px; height: 22px; border-radius: 11px; color: transparent; background: linear-gradient(90deg, #333 0, #3c3c3c 50%, #333 100%) 0 0 / 200% 100%; animation: n1ps-shimmer 1.4s linear infinite; }
body.n1 .id-form.is-wait .id-input::placeholder { color: transparent; }
@keyframes n1ps-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.n1 .id-form.is-wait .id-input { animation: none; background: #333; }
}
body.n1 .id-hint { margin: 8px 4px 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); white-space: pre-line; }
body.n1 .id-hint.err { color: var(--n1-red); }
/* «Ваши данные под защитой» (замечание Тима 38, вид prod-18-09): зелёный щит
   и строка под сноской. --n1-green общий для щитов доверия; без него запасной. */
body.n1 .id-safe { display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; font: 600 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-green, #4ade80); }
body.n1 .id-safe svg { flex: none; width: 20px; height: 20px; }
/* телефон и личный код: только для чтения, «подпись: значение», код копируется */
body.n1 .id-acc { margin-top: 24px; padding: 0; }
body.n1 .id-acc-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; }
body.n1 .id-acc .id-k { width: auto; white-space: nowrap; }
body.n1 .id-acc-row + .id-acc-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .id-acc-v { flex: 1; min-width: 0; text-align: right; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
body.n1 .id-acc-copy { flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--n1-grey2); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Личный код своей карточкой под телефоном: слева 3D Тима (бейдж на ленте) в
   плитке 48 r14, как у фактов в Тарифах; подпись серым, код белым, справа копия. */
body.n1 .id-acc + .id-acc--code { margin-top: 16px; }
body.n1 .id-code-row { gap: 14px; min-height: 72px; padding: 12px 16px; box-sizing: border-box; }
body.n1 .id-code-art { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #444; display: grid; place-items: center; overflow: hidden; }
body.n1 .id-code-art img { display: block; width: 44px; height: 44px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .id-code-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 .id-code-k { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .id-code-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/22px var(--n1-font); letter-spacing: .2px; color: #fff; user-select: text; -webkit-user-select: text; }

body.n1 .id-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--n1-bg); box-shadow: inset 0 .5px 0 var(--n1-hair); }
body.n1 .id-save { margin: 0; }
/* Данные не загрузились: картинка, строка и «Повторить» (разметка identity.js) */
body.n1 .id-foot:empty { display: none; }
body.n1 .id-fail { display: flex; flex-direction: column; align-items: center; padding: 72px 20px; text-align: center; }
body.n1 .id-fail img { width: 112px; height: 112px; margin-bottom: 16px; object-fit: contain; pointer-events: none; }
body.n1 .id-fail .s-g { margin-top: 4px; text-wrap: balance; }
body.n1 .id-fail .s-btn { margin-top: 20px; }

/* ── Шторки-приглашения снизу: «Данные для таможни» ──────────────────────
   3D по центру, заголовок 22/700, одна серая фраза, две кнопки 56. */
body.n1 .id-modal-bd { background: rgba(0, 0, 0, .6); padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.n1 .id-modal { width: 100%; max-width: 600px; padding: 8px 20px max(20px, calc(12px + env(safe-area-inset-bottom, 0px))); border: 0; border-radius: 28px 28px 0 0; background: var(--n1-card); box-shadow: none; text-align: center; }
body.n1 .id-modal .n1ps-art { margin-top: 20px; }
body.n1 .id-modal-t { margin: 16px 0 0; font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; text-wrap: balance; }
body.n1 .id-modal-s { margin: 8px 4px 20px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); text-wrap: balance; }
body.n1 .id-modal-go { height: 56px; margin: 0 0 12px; border-radius: 28px; font: 600 17px/22px var(--n1-font); }
body.n1 .id-modal-skip { height: 56px; margin: 0; border-radius: 28px; font: 600 17px/22px var(--n1-font); }

/* ── Окна по центру: «Вышло обновление» (app-update.js), «Мы сменили адрес
   склада» (addr-campaign.js) ──────────────────────────────────────────────
   Карточка --n1-card r24, поля 24px, 3D сверху, заголовок 20/700, одна серая
   фраза, кнопки столбиком 52px. Появление scale .96 → 1 за 200 мс (модуль). */
body.n1 :is(.appupd-bd, .adrc-bd) { background: rgba(0, 0, 0, .6); padding: 24px; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.n1 :is(.appupd-modal, .adrc-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); text-align: center; color: #fff; }
body.n1 .appupd-modal .n1ps-art { margin: 0 auto 16px; }
body.n1 :is(.appupd-t, .adrc-t) { margin: 0; font: 700 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; text-wrap: balance; }
body.n1 :is(.appupd-s, .adrc-s) { margin: 8px 0 20px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: balance; }
body.n1 :is(.appupd-go, .adrc-all, .adrc-ok, .adrc-never) { height: 52px; margin: 0; padding: 0 16px; border-radius: 26px; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; }
/* «Обновляем»: тёмная кнопка, слева кольцо-спиннер */
body.n1 .appupd-go.is-busy,
body.n1 .appupd-go.is-busy:disabled { gap: 10px; background: var(--n1-card2); color: var(--n1-grey); opacity: 1; }
body.n1 .appupd-go.is-busy::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #5c5c5c; border-top-color: var(--n1-grey); animation: n1ps-spin .8s linear infinite; }
@keyframes n1ps-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.n1 .appupd-go.is-busy::before { animation: none; }
}

/* «Мы сменили адрес склада»: кнопки столбиком, третья — тихая ссылка */
body.n1 .adrc-modal { padding-top: 28px; }
body.n1 .adrc-all { gap: 8px; }
body.n1 .adrc-all.is-copied { background: var(--n1-lime); color: var(--n1-on-lime); }
body.n1 .adrc-ok { margin-top: 12px; }
body.n1 .adrc-never.on { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--n1-grey2); font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; -webkit-tap-highlight-color: transparent; }

/* ── Просмотрщик сторис (stories.js) ─────────────────────────────────────
   Сами сторис — картинки админа во весь экран, их не трогаем. Полоски 2.5px
   с зазором 4, заголовок 15/600, крестик в зоне 44, кнопка-ссылка .s-cta 56
   без свечения, затемнение сверху плотнее: заголовок лежит на картинке. */
body.n1 .stories-viewer { background: #000; }
body.n1 .stories-viewer-shade-top { height: 140px; background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%); }
body.n1 .stories-viewer-shade-bot { height: 160px; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
body.n1 .stories-progress { top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; gap: 4px; }
body.n1 .stories-progress-track { height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
body.n1 .stories-progress-fill { border-radius: 2px; background: #fff; }
body.n1 .stories-viewer-head { top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; right: 4px; gap: 8px; min-height: 44px; }
body.n1 .stories-viewer-title { font: 600 15px/20px var(--n1-font); letter-spacing: -.23px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
body.n1 .stories-viewer-close { width: 44px; height: 44px; border-radius: 22px; background: none; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4)); -webkit-tap-highlight-color: transparent; }
body.n1 .stories-viewer-close svg { width: 26px; height: 26px; }
body.n1 .stories-viewer-link.s-cta { left: 16px; right: 16px; width: auto; height: 56px; padding: 0 20px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 28px; background: var(--n1-lime); color: var(--n1-on-lime); font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; box-shadow: none; }

/* ── Настройки (#settings-screen, разметка app.html) ─────────────────────
   Макет Settings: карточка «Изменить пароль / Ввести промокод», карточка
   «Язык / О приложении», отдельной строкой красное «Выйти». Значки 24px
   салатовые (маской поверх старых stroke-значков), без плашек.
   Лишнее прячем, а не удаляем: «Правила» и «Тарифы» уже есть в Профиле.
   С 03.10 (замечание Тима 32) шестерёнки нет: «Язык», «Изменить пароль»,
   «Ввести промокод», «О приложении» и «Выйти» стоят внизу Профиля и нажимают
   кнопки этого экрана (n1-profile.js), поэтому экран остаётся в разметке. */
body.n1 #settings-screen .settings-screen-body { padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
body.n1 #settings-screen .set-wrap { max-width: 600px; margin: 0 auto; padding: 8px 16px 0; }
body.n1 #settings-promo-btn,
body.n1 #settings-account-btn,
body.n1 #settings-phone-btn,
body.n1 #settings-contact-btn,
body.n1 #settings-rules-btn,
body.n1 #settings-screen .set-group,
body.n1 #settings-screen .set-foot { display: none !important; }
body.n1 #settings-screen .set-card { display: flex; flex-direction: column; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); overflow: hidden; }
body.n1 #settings-screen .set-card ~ .set-card { margin-top: 24px; }
body.n1 #settings-screen .set-row { position: relative; min-height: 64px; gap: 14px; padding: 0 16px; border: 0 !important; background: none; color: #fff; }
/* язык первым во второй карточке, как в макете; линия — только над вторыми строками
   («Язык» снова виден, замечание Тима 34) */
body.n1 #settings-language-btn { order: -1; }
body.n1 :is(#settings-promo-btn, #settings-about-btn)::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #settings-screen .set-ic { width: 26px; height: 26px; border-radius: 0; background: none; color: var(--n1-lime); display: grid; place-items: center; }
body.n1 #settings-screen .set-ic svg { display: none; }
body.n1 #settings-screen .set-ic::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--n1ps-ic) center / 24px 24px no-repeat; mask: var(--n1ps-ic) center / 24px 24px no-repeat; }
body.n1 #settings-password-btn { --n1ps-ic: var(--n1ps-ic-lock); }
body.n1 #settings-promo-btn { --n1ps-ic: var(--n1ps-ic-ticket); }
body.n1 #settings-language-btn { --n1ps-ic: var(--n1ps-ic-translate); }
body.n1 #settings-about-btn { --n1ps-ic: var(--n1ps-ic-info); }
body.n1 #settings-screen .set-row-title { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #settings-screen .set-val { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); }
body.n1 #settings-screen .set-flag { display: none; }
body.n1 #settings-screen .set-chev { width: 18px; height: 18px; margin-right: -2px; color: var(--n1-chev); stroke-width: 1.6; }
body.n1 #settings-logout-btn { gap: 0; min-height: 56px; margin-top: 24px; padding: 0 16px; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); color: var(--n1-red); font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; }
body.n1 #settings-logout-btn svg { display: none; }
body.n1 #settings-logout-btn { -webkit-tap-highlight-color: transparent; }
/* «Выйти из аккаунта?»: окно N1 (и серую фразу под заголовком, как в
   остальных окнах подтверждения) делает n1-shell.css */

/* ── Шторка «Язык» (#language-modal, разметка app.html с инлайн-стилями,
   поэтому !important) ────────────────────────────────────────────────────
   Макет LanguageSheet: ручка, заголовок 22/700, карточка #383838 r20:
   «Русский» с салатовой галочкой, «Қазақша» с серой пометкой справа.
   Показ и скрытие — инлайн из app.js (display/opacity/transform), их не трогаем.
   Крестика в макете нет: шторка закрывается смахиванием вниз (app.js подключает
   NeoSwipe.attachSheetClose), фоном и «назад» (тот нажимает скрытый крестик). */
body.n1 #language-modal-content {
  left: 0 !important;
  right: 0 !important;
  padding: 8px 0 max(20px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  border: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: var(--n1-card) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.n1 #language-modal-content::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--n1-grab); }
body.n1 #language-modal-content > div:first-child { padding: 20px 20px 16px !important; border: 0 !important; }
body.n1 #language-modal-content h3 { margin: 0 !important; font: 700 22px/28px var(--n1-font) !important; letter-spacing: -.4px; color: #fff !important; }
body.n1 #language-modal-close { display: none !important; }
body.n1 #language-modal-content > div:last-child {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
  padding: 0 !important;
  border-radius: 20px;
  background: var(--n1-card2);
  overflow: hidden;
}
body.n1 #language-modal .language-option {
  position: relative;
  min-height: 56px;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #language-modal .language-option[data-lang="ru"] { order: -1; }
body.n1 #language-modal .language-option[data-lang="kz"]::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #language-modal .language-option > div:first-child { flex: 1; min-width: 0; gap: 16px !important; }
body.n1 #language-modal .language-option > div:first-child > div:first-child { width: 28px !important; height: 28px !important; border-radius: 14px; overflow: hidden; }
/* во флаге-картинке поля вокруг круга: показываем 46px, круг 28 обрезает лишнее */
body.n1 #language-modal .language-option img { width: 46px !important; height: 46px !important; max-width: none; margin: -9px; border-radius: 0 !important; display: block; }
/* подпись: слева название, справа серая пометка («В разработке») */
body.n1 #language-modal .language-option > div:first-child > div:last-child { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.n1 #language-modal .language-option > div:first-child > div:last-child > div:first-child { font: 400 17px/22px var(--n1-font) !important; letter-spacing: -.43px; color: #fff !important; }
body.n1 #language-modal .language-option > div:first-child > div:last-child > div:nth-child(2) { margin: 0 !important; font: 400 17px/22px var(--n1-font) !important; letter-spacing: -.43px; color: var(--n1-grey2) !important; white-space: nowrap; }
body.n1 #language-modal .language-check { width: 24px !important; height: 24px !important; margin-left: 12px; display: grid; place-items: center; color: var(--n1-lime); }
body.n1 #language-modal .language-check svg { display: none; }
body.n1 #language-modal .language-check::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--n1ps-ic-check) center / 22px 22px no-repeat; mask: var(--n1ps-ic-check) center / 22px 22px no-repeat; }
/* у «Қазақша» галочки нет (app.js держит её прозрачной), место не занимаем */
body.n1 #language-modal .language-option[data-lang="kz"] .language-check { display: none; }

/* ── Об аккаунте (#about-account-screen, разметка app.html) ──────────────
   Макет AboutAccount: сначала карточка учётной записи (код, телефон, пункт,
   с нами с), потом «Данные получателя», потом «Получено за всё время».
   Порядок меняем сеткой (разметку не трогаем), аватар, «Последний вход» и
   сноску прячем. Строки «Имя», «Фамилия», «ИИН» с шевроном ведут в данные
   получателя (.acc-row--go), поэтому ссылка «Изменить данные» спрятана
   (обработчик на ней остался: строки нажимают её). */
body.n1 #about-account-body { padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
body.n1 #about-account-content:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
body.n1 #about-account-content > * { grid-column: 1 / -1; }
body.n1 #about-account-content .acc-avatar-wrap,
body.n1 #about-account-content .acc-stats-note,
body.n1 #about-edit-identity + .acc-group-title,
body.n1 #about-edit-identity,
body.n1 #about-account-content .acc-row:has(#about-last-login) { display: none; }
/* 1 — учётная запись */
body.n1 #about-edit-identity ~ .acc-card { grid-row: 1; }
/* 2 — «Данные получателя»: подзаголовок и ссылка в одну строку */
body.n1 #about-account-content .acc-avatar-wrap + .acc-group-title { grid-row: 2; grid-column: 1; }
body.n1 #about-edit-identity { grid-row: 2; grid-column: 2; }
body.n1 #about-account-content .acc-avatar-wrap + .acc-group-title + .acc-card { grid-row: 3; }
/* 3 — за всё время */
body.n1 #about-edit-identity ~ .acc-card ~ .acc-group-title { grid-row: 4; }
body.n1 #about-account-content .acc-stats { grid-row: 5; }

body.n1 #about-account-content .acc-group-title { margin: 24px 0 8px; padding: 0 4px; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; text-transform: none; color: #fff; }
body.n1 #about-edit-identity { width: auto; margin: 24px 0 8px; padding: 0 4px; gap: 0; border: 0; border-radius: 0; background: none; color: var(--n1-lime); font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
body.n1 #about-edit-identity svg { display: none; }
body.n1 #about-account-content .acc-card { border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); }
body.n1 #about-account-content .acc-row { position: relative; gap: 16px; min-height: 64px; padding: 10px 16px; border: 0; box-sizing: border-box; }
body.n1 #about-account-content .acc-row + .acc-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #about-account-content .acc-row-k { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #about-account-content .acc-row-v { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
body.n1 #about-account-content .acc-row-v--mono { font-family: var(--n1-font); letter-spacing: .2px; }
body.n1 #about-account-content .acc-row-v--ok { color: var(--n1-grey); }
body.n1 #about-account-content .acc-row-v--empty { color: var(--n1-amber); font-weight: 400; }
/* «Получено за всё время»: две цифры в одной карточке, как на Профиле */
body.n1 #about-account-content .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 16px 4px; border-radius: var(--n1-r-card); background: var(--n1-card); }
body.n1 #about-account-content .acc-stat { position: relative; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; }
body.n1 #about-account-content .acc-stat + .acc-stat::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; transform: scaleX(.5); background: var(--n1-hair); }
body.n1 #about-account-content .acc-stat-ic { width: 24px; height: 24px; margin: 0; border-radius: 0; background: none; color: var(--n1-lime); }
body.n1 #about-account-content .acc-stat-ic svg { width: 24px; height: 24px; }
body.n1 #about-account-content .acc-stat-val { font: 700 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; font-variant-numeric: tabular-nums; }
body.n1 #about-account-content .acc-stat-key { grid-column: 1 / -1; margin: 0; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-align: center; }

/* Скелетон: те же карточки, строки-«пилюли» (макет AboutAccountLoading) */
body.n1 #about-account-skeleton { gap: 24px; padding: 0; }
body.n1 #about-account-skeleton .about-skeleton-avatar { display: none; }
body.n1 #about-account-skeleton :is(.about-skeleton-grid, .about-skeleton-stats) { gap: 0; padding: 0; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); }
body.n1 #about-account-skeleton .about-skeleton-grid > .skeleton-line { width: auto !important; height: 64px !important; margin-left: 16px; border-radius: 0; background: none; animation: none; position: relative; }
body.n1 #about-account-skeleton .about-skeleton-grid > .skeleton-line::before,
body.n1 #about-account-skeleton .about-skeleton-grid > .skeleton-line::after { content: ""; position: absolute; top: 22px; height: 20px; border-radius: 10px; background: #333; }
body.n1 #about-account-skeleton .about-skeleton-grid > .skeleton-line::before { left: 0; width: 96px; }
body.n1 #about-account-skeleton .about-skeleton-grid > .skeleton-line::after { right: 16px; width: 120px; }
body.n1 #about-account-skeleton .about-skeleton-grid > * + *,
body.n1 #about-account-skeleton .about-skeleton-stats-row { box-shadow: inset 0 .5px 0 var(--n1-hair); }
body.n1 #about-account-skeleton .about-skeleton-row { align-items: center; height: 64px; margin-left: 16px; padding-right: 16px; }
body.n1 #about-account-skeleton .skeleton-line { border-radius: 10px; background: #333; animation: none; }
body.n1 #about-account-skeleton .about-skeleton-row .skeleton-line,
body.n1 #about-account-skeleton .about-skeleton-stats .skeleton-line { height: 20px !important; }
body.n1 #about-account-skeleton .about-skeleton-stats > .skeleton-line { width: 40% !important; margin: 22px 16px !important; }
body.n1 #about-account-skeleton .about-skeleton-stats-row { align-items: center; height: 64px; margin-left: 16px; padding-right: 16px; }

/* ── Изменить пароль (#change-password-screen, инлайн-стили → !important) ──
   Поля N1: подпись 15 серым над полем, поле 52 r16 #383838, текст 17,
   фокус — салатовая обводка, ошибка — красная обводка и текст 13 красным.
   Глаз — значок ph-eye / ph-eye-slash маской: app.js меняет тип поля, по
   нему и выбираем значок (лигатура Material спрятана, <span> на месте).
   Полоса сложности спрятана (её «Средний» с 6 символов при минимуме 8).
   «Сохранить пароль» в доке под телом экрана (.n1ps-dock). */
body.n1 #change-password-body { display: flex; flex-direction: column; padding: 8px 16px 24px !important; }
body.n1 #change-password-form { flex: none; display: flex; flex-direction: column; }
body.n1 #change-password-form > div { margin: 0 0 20px !important; }
body.n1 #change-password-form label { margin: 0 4px 8px !important; font: 400 15px/20px var(--n1-font) !important; letter-spacing: -.23px; color: var(--n1-grey) !important; }
body.n1 #change-password-form input {
  height: 52px;
  padding: 0 52px 0 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--n1-card2) !important;
  box-shadow: none;
  outline: 0;
  font: 400 17px/22px var(--n1-font) !important;
  letter-spacing: -.43px;
  color: #fff !important;
  caret-color: var(--n1-lime);
  transition: box-shadow .15s ease !important;
  box-sizing: border-box;
}
body.n1 #change-password-form input::placeholder { color: var(--n1-grey2); opacity: 1; }
body.n1 #change-password-form input:focus { box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
/* ошибка: app.js показывает блок ошибки инлайном display:block */
body.n1 #change-password-form > div:has(> [id$="-password-error"][style*="display: block"]) input { box-shadow: inset 0 0 0 1.5px var(--n1-red); }
body.n1 #change-password-form [id$="-password-error"] { margin: 8px 4px 0 !important; font: 400 13px/18px var(--n1-font) !important; color: var(--n1-red) !important; }
body.n1 #change-pwd-strength { display: none !important; }
/* скрытое поле «чей пароль» для связки ключей и менеджера паролей */
body.n1 #change-password-form .n1ps-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
body.n1 #change-password-form .pwd-eye-toggle {
  right: 4px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 22px !important;
  color: var(--n1-grey2) !important;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #change-password-form .pwd-eye-toggle > .material-symbols-rounded { display: none !important; }
body.n1 #change-password-form .pwd-eye-toggle::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--n1ps-ic-eye) center / 22px 22px no-repeat; mask: var(--n1ps-ic-eye) center / 22px 22px no-repeat; }
body.n1 #change-password-form input[type="text"] + .pwd-eye-toggle::before { -webkit-mask-image: var(--n1ps-ic-eyeoff); mask-image: var(--n1ps-ic-eyeoff); }
body.n1 #change-password-submit {
  height: 56px;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--n1-lime) !important;
  color: var(--n1-on-lime) !important;
  box-shadow: none !important;
  transform: none !important;
  font: 600 17px/22px var(--n1-font) !important;
  letter-spacing: -.4px;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #change-password-submit:disabled { background: var(--n1-card2) !important; color: var(--n1-grey2) !important; }

/* ── Док под телом экрана (промокод, пароль) ─────────────────────────────
   Главная кнопка не внутри прокрутки, а в доке после тела (data-kb="dock"):
   клавиатура поднимает только кнопку (n1-keyboard.js), экран стоит. Фон и
   волосок дока гаснут, пока клавиатура открыта (n1-keyboard.css). */
body.n1 .n1ps-dock { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--n1-bg); box-shadow: inset 0 .5px 0 var(--n1-hair); }

/* ── Промокод (#promo-code-screen, инлайн-стили → !important) ────────────
   Макеты PromoCode / OnbPromo: 3D-карта бонусов сверху, поле N1 без капса
   и разрядки, «Активировать» в доке внизу. На шаге регистрации (признак
   data-obyazatelno) «Пропустить» — салатовая ссылка справа в строке шапки.
   app.js красит рамку и фон поля инлайном (фокус, ввод, ошибка): рамку
   гасим, состояние показываем обводкой box-shadow; ошибку узнаём по
   показанному #promo-modal-error. */
body.n1 #promo-code-screen { overflow: hidden; }
body.n1 #promo-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 16px 24px !important; }
body.n1 #promo-modal-form { flex: none; display: flex; flex-direction: column; }
body.n1 #promo-modal-form::before { content: ""; display: block; width: 176px; height: 176px; margin: -12px auto 0; background: url("../img/icon/cartbonus.webp") center / contain no-repeat; pointer-events: none; }
body.n1 #promo-modal-form > label { margin: 0 4px 8px !important; font: 400 15px/20px var(--n1-font) !important; letter-spacing: -.23px !important; text-transform: none !important; color: var(--n1-grey) !important; }
body.n1 #promo-modal-input {
  height: 52px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--n1-card2) !important;
  box-shadow: none;
  outline: 0;
  font: 400 17px/22px var(--n1-font) !important;
  letter-spacing: .5px !important;
  text-align: left !important;
  text-transform: uppercase;
  color: #fff !important;
  caret-color: var(--n1-lime);
  transition: box-shadow .15s ease !important;
}
body.n1 #promo-modal-input::placeholder { text-transform: none; letter-spacing: -.43px; color: var(--n1-grey2); opacity: 1; }
body.n1 #promo-modal-input:focus { box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
body.n1 #promo-modal-form:has(#promo-modal-error[style*="display: block"]) #promo-modal-input { box-shadow: inset 0 0 0 1.5px var(--n1-red); }
body.n1 #promo-modal-input:disabled { opacity: .6; }
body.n1 #promo-modal-error { margin: 8px 4px 0 !important; font: 400 13px/18px var(--n1-font) !important; color: var(--n1-red) !important; }
body.n1 #promo-modal-submit {
  height: 56px;
  margin: 0 !important;
  padding: 0 20px !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;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #promo-modal-form > label + div { margin-bottom: 0; }
/* Промокод принят: салатовый круг с галочкой, «+500 Б начислено», серая строка */
body.n1 #promo-modal-form[hidden],
body.n1 .n1ps-ok[hidden] { display: none !important; }
body.n1 .n1ps-ok { display: flex; flex-direction: column; align-items: center; padding: 56px 8px 0; text-align: center; }
body.n1 .n1ps-ok-ic { width: 72px; height: 72px; border-radius: 36px; background: var(--n1-lime); color: var(--n1-on-lime); display: grid; place-items: center; animation: n1ps-ok-in .32s cubic-bezier(.22, 1, .36, 1) both; }
body.n1 .n1ps-ok-t { margin-top: 20px; font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; font-variant-numeric: tabular-nums; }
body.n1 .n1ps-ok-s { margin-top: 6px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
@keyframes n1ps-ok-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.n1 .n1ps-ok-ic { animation: none; } }
/* Подпись над полем не нужна: экран называется «Промокод», поле подписано
   подсказкой (у поля aria-label). Сноска «Бонусами можно оплатить доставку»
   под полем; ошибка встаёт на её место. */
body.n1 #promo-modal-form > label { display: none !important; }
body.n1 #promo-modal-error[style*="display: block"] + #promo-note { display: none; }
/* Шаг регистрации (макет OnbPromo): вместо заголовка в шапке крупный
   «Есть промокод?» с подписью под картой, сноски нет. */
body.n1 #promo-code-screen[data-obyazatelno] .fullscreen-title { visibility: hidden; }
body.n1 #promo-code-screen[data-obyazatelno] #promo-onb { display: block; margin: 8px 0 24px; text-align: center; }
body.n1 #promo-onb h2 { margin: 0; font: 700 30px/36px var(--n1-font); letter-spacing: -.6px; color: #fff; }
body.n1 #promo-onb p { margin: 4px 0 0; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #promo-code-screen[data-obyazatelno] #promo-note { display: none; }
body.n1 #promo-modal-submit:disabled { background: var(--n1-card2) !important; color: var(--n1-grey2) !important; }
/* «Пропустить» на шаге регистрации: ссылкой справа в строке шапки */
body.n1 #promo-skip:not([hidden]) {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  right: 8px;
  z-index: 10004;
  width: auto !important;
  height: 44px;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: none !important;
  color: var(--n1-lime) !important;
  font: 400 17px/22px var(--n1-font) !important;
  letter-spacing: -.43px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Паттерн Neo Cargo «летящие посылки» (пункт Тима 14, 06.10) ─────────
   Плитка 350×500 из файла Тима (pattern.pdf → img/n1/pattern-posylki.svg,
   лаймовые посылки без фона). Только на обложках: «О приложении» вокруг
   иконки, «Контактная информация» под логотипом. Приглушённо: узор на
   тёмной карточке почти тон в тон, к середине гаснет ещё сильнее, чтобы
   иконка и логотип стояли на спокойном месте. Узор лежит ::before, пятно
   ::after, содержимое обложки выше обоих (isolation: isolate). */
body.n1 .n1-pat { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--n1-r-card); background: var(--n1-card); }
body.n1 .n1-pat::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/n1/pattern-posylki.svg") 50% 50% / 112px 160px repeat; opacity: .12; pointer-events: none; }
body.n1 .n1-pat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, var(--n1-card) 35%, rgba(47, 47, 47, 0)) 50% 50% / 78% 118% no-repeat; pointer-events: none; }

/* Иконка приложения, как на экране телефона (пункт 12): тёмный квадрат со
   скруглением iOS (22,5 % стороны), логотип neo с лаймовым свечением, как в
   icon.png оболочки, лаймовый кант и мягкий ореол, как на старом проде. */
body.n1 .n1-appicon { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 24px; background: #262626; box-shadow: inset 0 0 0 1px rgba(178, 254, 18, .42), 0 0 28px rgba(178, 254, 18, .14), 0 14px 30px rgba(0, 0, 0, .45); }
body.n1 .n1-appicon img { display: block; width: 76px; height: auto; filter: drop-shadow(0 0 5px rgba(178, 254, 18, .45)); pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ── О приложении (#about-screen) ────────────────────────────────────────
   Пункт Тима 12: обложка с паттерном и иконкой приложения, под ней «Neo
   Cargo» 22/700 и версия серым; карточка с описанием сервиса; документы
   (договор, соглашение, политика) строками 64 с шевроном; реквизиты
   («Компания», «БИН» с копированием). Прокрутка — тело экрана под шапкой
   (на ней волосок при прокрутке, app.js). */
body.n1 #about-screen .n1ab-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
/* блоки своей высоты, лишнее прокручивается (на 320×568 не сжимаются) */
body.n1 #about-screen .n1ab-body > * { flex-shrink: 0; }
body.n1 .n1ab-cover { display: grid; place-items: center; height: 184px; }
body.n1 .n1ab-name { margin: 16px 0 0; text-align: center; font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .n1ab-ver { align-self: center; margin: 2px 0 0; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
body.n1 .n1ab-text { margin: 24px 0 0; padding: 16px; font: 400 15px/21px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .n1ab-card { margin-top: 16px; }
/* у старого style.css на кнопках документов подсветка :hover с !important: на
   айфоне после касания она залипает (эффект нажатия) — гасим */
body.n1 #about-screen #about-docs .s-row { background: none !important; }
/* на 320 «Пользовательское соглашение» в две строки: поля, чтобы не липло к волоскам */
body.n1 #about-docs .s-row { padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }
body.n1 .n1ab-req .s-b { flex: 1 0 auto; }
body.n1 .n1ab-v { min-width: 0; text-align: right; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
body.n1 .n1ab-req .n1-copy { margin: -10px -12px -10px -8px; }
@media (max-width: 359px) {
  body.n1 .n1ab-cover { height: 160px; }
  body.n1 .n1-appicon { width: 92px; height: 92px; border-radius: 21px; }
  body.n1 .n1-appicon img { width: 68px; }
}

/* ── Контактная информация (#contacts-screen, js/n1-contacts.js) ──────────
   Пункты Тима 13 и 14, образец Jana Post: обложка с логотипом на паттерне,
   карточка «адрес, почта, телефон» (значок салатовый, значение 17 белым,
   подпись 13 серым; справа копирование 44×44; почта и телефон по нажатию на
   строку пишут и звонят), ниже карточка «Мы на связи». */
body.n1 #contacts-screen .n1ct-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
body.n1 .n1ct-cover { display: grid; place-items: center; height: 168px; }
body.n1 .n1ct-logo { display: block; width: 186px; height: auto; filter: drop-shadow(0 0 8px rgba(178, 254, 18, .32)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .n1ct-card { margin-top: 16px; }
body.n1 .n1ct-row { position: relative; display: flex; align-items: center; gap: 4px; min-height: 72px; padding: 0 16px; }
body.n1 .n1ct-row + .n1ct-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 .n1ct-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 12px 0; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
body.n1 .n1ct-ic { flex: none; width: 24px; height: 24px; color: var(--n1-lime); }
body.n1 .n1ct-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1ct-v { color: #fff; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
body.n1 .n1ct-row .n1ct-copy { margin: 0 -12px 0 0; }
body.n1 #contacts-screen .n1-soc { margin-top: 16px; }
/* заголовок: на 320 «Контактная информация» вплотную к «назад», там «Контакты» */
body.n1 .n1ct-t-short { display: none; }
@media (max-width: 359px) {
  body.n1 .n1ct-t-full { display: none; }
  body.n1 .n1ct-t-short { display: inline; }
}
body.n1 a.n1ct-main:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; border-radius: 12px; }

/* ── Карточка «Мы на связи» (пункт Тима 13): низ Главной, Профиля и экран
   «Контактная информация». Заголовок 17/600, справа «Все контакты» серым
   (на самом экране контактов её нет). Три круга 56 #383838 со знаками
   Instagram, TikTok, WhatsApp белым, подписи 13 серым. Знаки одноцветные,
   как остальные значки N1: фирменная раскраска тремя пятнами спорила бы с
   салатовым. Нажатия без эффектов. */
body.n1 .n1-soc { padding: 16px 16px 18px; }
body.n1 .n1-prof .n1-soc { margin-top: 16px; }
body.n1 .n1-soc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
body.n1 .n1-soc-more { display: inline-flex; align-items: center; gap: 2px; height: 44px; margin: -8px -8px -8px 0; padding: 0 8px; color: var(--n1-grey); font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; white-space: nowrap; }
body.n1 .n1-soc-more svg { flex: none; color: var(--n1-chev); }
body.n1 .n1-soc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
body.n1 .n1-soc-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
body.n1 .n1-soc-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 28px; background: var(--n1-card2); color: #fff; }
body.n1 .n1-soc-ic svg { display: block; width: 24px; height: 24px; }
body.n1 .n1-soc-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey); }
body.n1 .n1-soc-btn:focus-visible { outline: none; }
body.n1 .n1-soc-btn:focus-visible .n1-soc-ic { outline: 2px solid var(--n1-lime); outline-offset: 2px; }

/* Профиль: зелёная галочка в строке «Личные данные», когда всё сохранено (n1-profile.js) */
body.n1 .n1-prof-ok { flex: none; width: 22px; height: 22px; color: var(--n1-green, #4ade80); }

/* ── Правила сервиса (#rules-screen) ─────────────────────────────────────
   Макет Rules: вводный абзац серым без карточки, пункты — строками одной
   карточки: номер серым слева, справа заголовок 17 белым и текст 15 серым.
   Без плашек-значков, без «ПУНКТ N» капсом (номер рисует счётчик CSS),
   предупреждения — янтарным текстом без оранжевых коробок. Пункты разбиты
   на группы («Вес», «Хрупкие товары», «Доставка и хранение», «Выдача и
   оплата»), нумерация сквозная (счётчик на .rules-body). Внизу карточка
   «Публичный договор / Спросить в поддержке», под ней сноска. */
body.n1 #rules-screen .rules-body { padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); counter-reset: n1ps-rule; }
body.n1 #rules-screen .rules-group { margin: 24px 0 8px; padding: 0 4px; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 #rules-screen .rules-intro + .rules-group { margin-top: 0; }
body.n1 #rules-screen .rules-logo,
body.n1 #rules-screen .rules-intro-title { display: none; }
body.n1 #rules-screen .rules-intro { margin: 0 0 24px; padding: 0 4px; border: 0; border-radius: 0; background: none; }
body.n1 #rules-screen .rules-intro-text { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); }
body.n1 #rules-screen .rules-list { gap: 0; border-radius: var(--n1-r-card); background: var(--n1-card); overflow: hidden; }
body.n1 #rules-screen .rules-card { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 18px 16px; border: 0; border-radius: 0; background: none; counter-increment: n1ps-rule; }
body.n1 #rules-screen .rules-card > * { grid-column: 2; }
body.n1 #rules-screen .rules-card::before { content: counter(n1ps-rule); grid-column: 1; grid-row: 1; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey2); font-variant-numeric: tabular-nums; }
body.n1 #rules-screen .rules-card + .rules-card::after { content: ""; position: absolute; left: 54px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #rules-screen .rules-card-head { display: block; margin: 0 0 6px; }
body.n1 #rules-screen .rules-card-ic,
body.n1 #rules-screen .rules-card-num { display: none; }
body.n1 #rules-screen .rules-card-titles { padding: 0; }
body.n1 #rules-screen .rules-card-title { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #rules-screen .rules-card-body { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #rules-screen .rules-card-body p { margin: 0 0 6px; }
body.n1 #rules-screen .rules-card-body p:last-child { margin: 0; }
body.n1 #rules-screen :is(.rules-card-body, .rules-example) b { font-weight: 400; color: #fff; }
body.n1 #rules-screen .rules-example { display: block; margin: 6px 0 0; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #rules-screen .rules-warn { margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-amber); }
/* низ: одна карточка из двух строк (договор, поддержка), под ней сноска */
body.n1 #rules-screen .rules-foot { display: flex; flex-direction: column; margin: 24px 0 0; padding: 0; border: 0; border-radius: var(--n1-r-card); background: none; }
body.n1 #rules-screen .rules-foot-text { order: 3; margin: 8px 4px 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }
body.n1 #rules-screen .rules-foot-btn { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: var(--n1-card); color: #fff; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; text-align: left; box-shadow: none; -webkit-tap-highlight-color: transparent; }
body.n1 #rules-screen #rules-open-contract { order: 1; border-radius: var(--n1-r-card) var(--n1-r-card) 0 0; }
body.n1 #rules-screen #rules-ask-support { order: 2; border-radius: 0 0 var(--n1-r-card) var(--n1-r-card); }
body.n1 #rules-ask-support::before { content: ""; position: absolute; left: 54px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #rules-screen .rules-foot-btn > svg { flex: none; width: 24px; height: 24px; color: var(--n1-lime); }
body.n1 #rules-screen .rules-foot-btn-t { flex: 1; min-width: 0; }
body.n1 #rules-screen .rules-foot-btn::after { content: ""; width: 18px; height: 18px; flex: none; background: var(--n1-chev); -webkit-mask: var(--n1ps-ic-chev) center / 18px 18px no-repeat; mask: var(--n1ps-ic-chev) center / 18px 18px no-repeat; }

/* ── Тарифы (#tariff-screen) ─────────────────────────────────────────────
   Сверху цена 30/700 и серая строка, справа 3D из NeoArt ('tariff', кладёт
   n1-profile.js вместе с классом .tariff-hero--art; без него прежняя посылка
   из ::after). Ниже факты Тима (замечание 37): опт, до 100 г, свыше 100 г
   строками «значок, заголовок, пояснение», отдельной карточкой кэшбэк
   (ведёт на Бонусы), группа «Услуги и комиссии» строками «подпись: значение»,
   внизу «Правила сервиса» с шевроном. Числа подставляет app.js
   (openTariffScreen), id и классы процентов не тронуты. */
body.n1 #tariff-screen .tariff-screen-body { padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
body.n1 #tariff-screen .tariff-body { display: flex; flex-direction: column; }
body.n1 #tariff-screen .tariff-hero { position: relative; min-height: 88px; margin: 0 0 24px; padding: 4px 96px 0 4px; border: 0; border-radius: 0; background: none; }
body.n1 #tariff-screen .tariff-hero::after { content: ""; position: absolute; right: 0; top: -4px; width: 88px; height: 88px; background: url("../img/n1/posylka-v2.webp") center / contain no-repeat; transform: rotate(-8deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); pointer-events: none; }
body.n1 #tariff-screen .tariff-hero--art::after { content: none; }
body.n1 #tariff-screen .tariff-hero-art { position: absolute; right: 0; top: -4px; width: 88px; height: 88px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 #tariff-screen .tariff-hero-value { font: 700 30px/36px var(--n1-font); letter-spacing: -.5px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 #tariff-screen .tariff-hero-unit { font: inherit; }
body.n1 #tariff-screen .tariff-hero-note { margin-top: 4px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: balance; }
body.n1 #tariff-screen :is(.tariff-hero-note, .tariff-opt-note)::first-letter { text-transform: uppercase; }
/* факты: значок 24 салатовый, заголовок 17/22 белый, пояснение 15/20 серое,
   волосок между строками от текста (как у строк Профиля) */
body.n1 #tariff-screen .tariff-fact { position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; box-sizing: border-box; color: #fff; text-align: left; }
body.n1 #tariff-screen .tariff-fact + .tariff-fact::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #tariff-screen .tariff-fact-ic { flex: none; width: 26px; height: 22px; display: grid; place-items: center; }
body.n1 #tariff-screen .tariff-fact-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 #tariff-screen .tariff-fact-tx b { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; text-wrap: balance; }
body.n1 #tariff-screen .tariff-fact-tx > span { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: pretty; }
/* кэшбэк: карточка-кнопка на Бонусы, значок бонусный фиолетовый. Только новая
   разметка (.tariff-cashback): прежнюю строку «Бонусы» оформляет n1-wallet.css. */
body.n1 #tariff-screen #tariff-to-bonus.tariff-cashback { appearance: none; -webkit-appearance: none; align-items: center; width: 100%; margin: 16px 0 0; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 #tariff-screen #tariff-to-bonus.tariff-cashback .tariff-fact-ic { align-self: flex-start; }
body.n1 #tariff-screen .n1-bonus-ic { color: var(--n1-bonus); }
/* 3D у фактов: n1-profile.js кладёт картинку NeoArt на место плоского значка и
   ставит .tariff-fact-art (а карточке .tariff-facts--art). Плитка 48 r14 с 3D 44,
   как «Ввести промокод» в Кошельке; строка по центру плитки, линия от текста. */
body.n1 #tariff-screen .tariff-fact:has(> .tariff-fact-art) { align-items: center; }
body.n1 #tariff-screen .tariff-fact .tariff-fact-ic.tariff-fact-art,
body.n1 #tariff-screen #tariff-to-bonus.tariff-cashback .tariff-fact-ic.tariff-fact-art { align-self: center; width: 48px; height: 48px; border-radius: 14px; background: #444; overflow: hidden; }
body.n1 #tariff-screen .tariff-fact-art img { display: block; width: 44px; height: 44px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 #tariff-screen .tariff-facts--art .tariff-fact + .tariff-fact::before { left: 78px; }
/* группа строк «подпись: значение»: «Услуги и комиссии» (в прежней разметке
   ещё «Сколько стоит» со сноской .tariff-foot под ней) */
body.n1 #tariff-screen .tariff-group { margin: 0 0 8px; padding: 0 4px; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 #tariff-screen .tariff-card + .tariff-group,
body.n1 #tariff-screen .tariff-foot + .tariff-group { margin-top: 24px; }
body.n1 #tariff-screen .tariff-card { border-radius: var(--n1-r-card); background: var(--n1-card); overflow: hidden; }
body.n1 #tariff-screen .tariff-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 16px; box-sizing: border-box; }
body.n1 #tariff-screen .tariff-row + .tariff-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 #tariff-screen .tariff-row-k { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #tariff-screen .tariff-row-v { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 #tariff-screen .tariff-foot { margin: 8px 4px 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }
/* вход в правила — строка-карточка */
body.n1 #tariff-to-rules { gap: 14px; min-height: 64px; margin-top: 24px !important; padding: 10px 16px; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); -webkit-tap-highlight-color: transparent; }
body.n1 #tariff-to-rules .rules-entry-ic { width: 26px; height: 24px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--n1-lime); display: grid; place-items: center; flex: none; }
body.n1 #tariff-to-rules .rules-entry-ic svg { width: 24px; height: 24px; }
body.n1 #tariff-to-rules .rules-entry-sub { display: none; }
body.n1 #tariff-to-rules .rules-entry-title { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #tariff-to-rules .rules-entry-sub { margin-top: 2px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #tariff-to-rules .rules-entry-sub::first-letter { text-transform: uppercase; }
body.n1 #tariff-to-rules .rules-entry-arrow { width: 18px; height: 18px; font-size: 0; color: var(--n1-chev); }
body.n1 #tariff-to-rules .rules-entry-arrow::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--n1ps-ic-chev) center / 18px 18px no-repeat; mask: var(--n1ps-ic-chev) center / 18px 18px no-repeat; }

/* ── Заготовки под разметку второй волны (maps/profilesub_wave2.md) ──────
   Сноски под полями («Не короче 8 символов», «Бонусами можно оплатить
   доставку»), строки «Об аккаунте», которые ведут в данные получателя,
   и значение версии в строке «О приложении». Пока разметки нет, правила
   ни на что не действуют. */
body.n1 :is(#change-password-form, #promo-modal-form) .n1ps-hint { margin: 8px 4px 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }
/* ошибка нового пароля («Минимум 8 символов») встаёт на место сноски, а не под ней */
body.n1 #new-password-error[style*="display: block"] + .n1ps-hint { display: none; }
body.n1 #about-account-content .acc-row--go { cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 #about-account-content .acc-row--go .s-chev { display: grid; margin-left: -8px; }
body.n1 #about-account-content .acc-row .n1-copy { margin: -10px -12px -10px -8px; }

/* ── Профиль: «Приглашайте друзей» с 3D Тима (n1-profile.js) ──────────────
   n1-profile.js кладёт в карточку 3D-подарок (NeoArt 'gift') и ставит
   .n1-friends--art. Тогда карточка тёмная (на салатовой заливке .s-limel
   салатовый бант и монета терялись), текст от левого поля, 3D справа 88 с
   наклоном, как 3D-карта в плитке «Бонусы» над ней (при 96 низ коробки
   срезал край карточки высотой 96). Плоский значок и шеврон
   прячутся: нажимается вся карточка. Без класса (нет NeoArt) прежний вид. */
body.n1 #n1-prof-friends.n1-friends--art { position: relative; overflow: hidden; padding: 12px 108px 12px 16px; background: var(--n1-card); }
body.n1 #n1-prof-friends.n1-friends--art :is(.n1-friends-ic, .s-chev) { display: none; }
body.n1 #n1-prof-friends.n1-friends--art .n1-friends-text { padding-left: 0; }
body.n1 #n1-prof-friends .n1-friends-art { position: absolute; right: 10px; top: 50%; width: 88px; height: 88px; margin-top: -47px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* на 320–359 карточка уже: 3D 76, текст получает ещё 16 px */
@media (max-width: 359px) {
  body.n1 #n1-prof-friends.n1-friends--art { padding-right: 92px; }
  body.n1 #n1-prof-friends .n1-friends-art { right: 6px; width: 76px; height: 76px; margin-top: -40px; }
}

/* ── Правила сервиса: 3D-герой сверху (n1-profile.js) ─────────────────────
   3D Тима «календарь и посылка» (NeoArt 'storage') над вводным абзацем, по
   центру, 112 (герои экранов раздела 96-160). Абзац и группы ниже как были. */
body.n1 #rules-screen .rules-hero-art { display: block; width: 112px; height: 112px; margin: 4px auto 16px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ── Личные данные: 3D-герой сверху (identity.js) ─────────────────────────
   «Щит с удостоверением» (NeoArt 'shield') над полями по центру, 96, как в
   шторке «Данные для таможни». Строка «Ваши данные под защитой» под ИИН
   остаётся. На экране ошибки героя нет: там своя картинка. */
body.n1 .id-hero-art { display: block; width: 96px; height: 96px; margin: 0 auto 16px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ── Ошибка списка пунктов: 3D «ошибка» / «нет связи» (app.js) ──────────────
   n1-branches.css увеличивает картинку .n1-list-err (cover, scale 1.3): так
   подбирали под прежний 3D-пункт с широкими прозрачными полями. У 3D Тима
   «ошибка» и «нет связи» полей нет, увеличение срезало бы края: класс
   n1-err-art (ставит branchListErrorHtml) возвращает картинку целиком. */
body.n1 .n1-list-err img.n1-err-art { object-fit: contain; transform: none; }