/* app.css — добавки поверх styles.css: поля ввода, модалка, тосты.
   Базовая дизайн-система не трогается. */

/* Form-контролы (button/input/select/textarea) не наследуют font-family
   по умолчанию — браузер ставит свой (Arial). Заставляем наследовать Manrope,
   чтобы текст на кнопках (.primary, .cancel, .bk, .edit) был в том же шрифте. */
button, input, select, textarea { font-family: inherit; }

/* Поле поиска -> реальный input */
.sinp{flex:1;border:none;background:transparent;outline:none;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--text);min-width:0;padding:0}
.sinp::placeholder{color:var(--muted);font-weight:600}

/* Поля форм -> реальные input */
.ffinwrap{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.ffinp{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:inherit;
  font-size:15px;font-weight:700;color:var(--text);padding:0}
.ffinp::placeholder{color:var(--dim);font-weight:600}
.ff:focus-within{background:var(--surface)}

/* Поле суммы в модалке */
.amtinp{border:none;background:transparent;outline:none;font-family:inherit;
  font-size:30px;font-weight:800;color:var(--text);width:160px;padding:0;margin-left:2px}
.amtinp::placeholder{color:var(--dim)}

/* Пустые состояния */
.empty{text-align:center;color:var(--muted);font-weight:600;font-size:14px;padding:40px 16px}

/* ============================================================
   АДАПТИВНАЯ РАСКЛАДКА (любой iPhone / Android, без платформо-кода)
   • высоты баров — CSS-переменные
   • системные зоны (вырез, home-индикатор) — env(safe-area-inset-*)
   • высота приложения — 100dvh; контент тянется flex'ом
   ============================================================ */
:root{
  --status-h:44px;       /* статус-бар */
  --nav-h:44px;          /* компактная навигация / «назад» */
  --nav-large-h:96px;    /* большой заголовок */
  --tab-h:49px;          /* панель таб-бара (без safe-area) */
  /* системные отступы; на устройствах без вырезов = 0 */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  /* токены движения */
  --ease-out:cubic-bezier(.23,1,.32,1); --dur-screen:.3s; --dur-press:.1s;
}

/* iOS-PWA: статичные не-зумящиеся экраны (нативное ощущение):
   двойной тап и авто-resize текста — выкл, подсветка тапа убрана.
   touch-action iOS применяет ПОЭЛЕМЕНТНО (не наследуется) — manipulation на всё:
   пан/скролл остаются, double-tap-zoom и 350ms-задержка тапа убраны везде.
   Точечный touch-action:none (лист модалки) специфичнее — сохраняется. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}
/* фон документа = фону приложения: непокрытые зоны / overscroll НЕ светят белым */
html,body{background:var(--bg)}
/* поля ввода ≥16px — на случай если фокус-зум всё же сработает (зум-лок в мете —
   основная защита). Крупные поля (.amtinp) переопределяют. */
input,select,textarea{font-size:16px}

/* Приложение заполняет весь экран устройства */
.scr{height:100dvh;display:flex;flex-direction:column;border-radius:0}
#statusbar{position:absolute;top:0;left:0;right:0;z-index:11;background:var(--card);transition:background-color .25s ease}
/* Large-title экраны до скролла: статус-бар прозрачен — экран единый, шапки не видно */
#statusbar.bar-large:not(.scrolled){background:transparent}
#navbar{flex:0 0 auto}
#tabbar{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:0 12px calc(var(--safe-bottom) + 8px)}
/* Контентная область: тянется, скроллится; по бокам учитываем вырез в ландшафте */
#view{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;padding-left:var(--safe-left);padding-right:var(--safe-right)}
/* На экранах без таб-бара — скроллируемый клиренс над home-индикатором. padding входит
   в scrollHeight (в отличие от margin-bottom последнего ребёнка, который Safari выбрасывает),
   поэтому нижняя кнопка форм всегда докручивается целиком. */
#view.safe-bottom-pad{padding-bottom:calc(var(--safe-bottom) + var(--space-md))}
#view::-webkit-scrollbar{display:none}

/* Тумблер темы: состояние ON рисуется атрибутным правилом :root[data-theme="dark"] .tog .knob
   (transform:translateX, styles.css). Отдельное .tog.on убрано — оно конфликтовало (left/right + transform → двойной сдвиг). */

/* --- Контейнер: на телефоне без рамки (fill), на десктопе — превью в рамке --- */
.page{padding:0;min-height:100dvh;align-items:stretch;justify-content:stretch}
.phone{position:relative;width:100%;height:100dvh;background:transparent;
  border-radius:0;padding:0;box-shadow:none}
/* Превью-рамка телефона — ТОЛЬКО на настоящем ПК (широкий экран + мышь).
   На тач-устройствах (pointer:coarse) приложение всегда на весь экран,
   даже если телефон рапортует ширину ≥480px. */
@media (min-width:480px) and (hover:hover) and (pointer:fine){
  .page{padding:24px;align-items:center;justify-content:center}
  .phone{width:390px;height:844px;max-height:calc(100dvh - 48px);background:#000;
    border-radius:52px;padding:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .scr{height:100%;border-radius:38px}
}
/* Установленный PWA — всегда на весь экран, без превью-рамки */
@media (display-mode:standalone),(display-mode:minimal-ui){
  .page{padding:0}
  .phone{width:100%;height:100dvh;background:transparent;border-radius:0;padding:0;box-shadow:none}
  .scr{height:100dvh;border-radius:0}
}
/* На реальном устройстве / в установленном PWA — заблокированный «нативный» шелл:
   body не скроллится и не «резинит», высота стабильная (100%, не 100dvh) →
   нижний таб-бар не «плавает». На десктоп-превью не влияет (условие там ложно). */
@media (hover:none) and (pointer:coarse), (display-mode:standalone), (display-mode:minimal-ui){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg)}
  .page{position:fixed;inset:0}
  .phone,.scr{height:100%;min-height:0}
  /* Настоящий телефон показывает СВОИ часы/батарею — фейковый «9:41» прячем.
     #statusbar остаётся спейсером под вырез (safe-area) с блюром в standalone;
     в браузерной вкладке env()=0 → высота 0, навбар прижат к верху. */
  #statusbar{height:env(safe-area-inset-top,0px)}
  #statusbar .sbar{display:none}
}
/* ПРИМЕЧАНИЕ (нижний зазор в установленном PWA на iOS): лечится НЕ здесь. Виноват был
   легаси-режим iOS (метатег apple-mobile-web-app-capable): окно 793 при экране 852, нижние
   59px вне WKWebView — CSS туда не дотягивается (пробовали lvh — контент лишь клипуется
   на границе окна). Фикс — убрать легаси-меты из index.html: установка идёт по манифесту,
   современный режим даёт окно во весь экран. */

/* Модалка оплаты поверх устройства */
#modal{position:absolute;inset:0;border-radius:0;overflow:hidden;
  display:none;z-index:20}
@media (min-width:480px) and (hover:hover) and (pointer:fine){ #modal{inset:12px;border-radius:40px} }
#modal.on{display:block;animation:fadein .18s ease}
/* Изменение 1: реальное затемнение, лист прижат вниз (justify flex-end) */
.sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:var(--kb,0px)}   /* лист оплаты поднимается над клавиатурой; шелл и таб-бар статичны */
/* Всплытие листа — только при открытии (класс sheet-in), не на обновлениях */
#modal .sheet{touch-action:none}
#modal .sheet.sheet-in{animation:slideup .44s cubic-bezier(.32,1.42,.45,1)}
/* нижние углы листа квадратные (флаш к экрану; на десктопе их скругляет рамка #modal) */
.sheet-overlay .sheet{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Изменение 3: полоска-индикатор сверху листа */
.grab{width:36px;height:4px;border-radius:99px;background:var(--chev);margin:6px auto 16px}

/* Единый крестик закрытия на всех листах */
.sheet{position:relative}
.sheet-x{position:absolute;top:18px;right:18px;z-index:3;width:32px;height:32px;
  border:none;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#E8E8EC;color:#8A8A90;box-shadow:inset 0 1px 1px rgba(255,255,255,.8)}
:root[data-theme="dark"] .sheet-x{background:#3C3C40;color:#A0A0A6;box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .sheet-x{background:#3C3C40;color:#A0A0A6;box-shadow:none}}
.sheet-x i{font-size:16px}
.sheet-x:active{transform:scale(.94)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(40px)}to{transform:translateY(0)}}
/* Закрытие листа: съезжает вниз + затемнение гаснет (раньше пропадал резко) */
#modal .sheet.sheet-out{animation:slidedown .26s cubic-bezier(.77,0,.175,1) forwards}
.sheet-overlay.overlay-out{animation:overlayout .26s ease forwards}
@keyframes slidedown{from{transform:translateY(0)}to{transform:translateY(110%)}}
@keyframes overlayout{from{opacity:1}to{opacity:0}}

/* Анимация появления контента — ТОЛЬКО при навигации (класс nav-anim),
   чтобы тихие обновления фона (закрытие листа, фильтр) не «прыгали». */
/* Направленные переходы: nav-fwd/back/fade ставит renderScreen по navDir.
   translateX ~28px + opacity, cubic-bezier(.4,0,.2,1). Без will-change (короткая). */
#view.nav-anim.nav-fwd>*{animation:navFwd var(--dur-screen) var(--ease-out)}
#view.nav-anim.nav-back>*{animation:navBack var(--dur-screen) var(--ease-out)}
#view.nav-anim.nav-fade>*,
#view.nav-anim:not(.nav-fwd):not(.nav-back)>*{animation:scrin .22s ease}
@keyframes navFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes navBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes scrin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Уходящий экран (двухслойный переход): старый контент = статичный клон-призрак,
   уезжает и гаснет, пока новый въезжает — нет «жёсткой склейки». Живёт ~300мс. */
.view-ghost{position:absolute;overflow:hidden;pointer-events:none;z-index:5;background:var(--bg)}
.view-ghost .vgi{position:absolute;left:0;right:0}
.view-ghost.ghost-fwd{animation:ghostFwd var(--dur-screen) var(--ease-out) forwards}
.view-ghost.ghost-back{animation:ghostBack var(--dur-screen) var(--ease-out) forwards}
@keyframes ghostFwd{to{opacity:0;transform:translateX(-28px)}}
@keyframes ghostBack{to{opacity:0;transform:translateX(28px)}}

/* Доступность: уважаем «уменьшить движение» */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* Тост-уведомление */
#toast{position:absolute;z-index:40;
  left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));
  bottom:calc(var(--tab-h) + var(--safe-bottom) + 28px);
  background:rgba(28,28,30,.94);color:#fff;font-size:13.5px;font-weight:700;
  text-align:center;padding:12px 16px;border-radius:var(--r-ctrl);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
#toast.on{opacity:1;transform:none}

/* ============================================================
   МЕТРИКИ iOS (как в WhatsApp): размеры интерфейса
   Status bar 44 · Nav (Large Title) 96→44 · Tab bar 49 + 34
   H-отступы 16 · Tap targets ≥44 · Строка 72 · Аватар 50
   ============================================================ */

/* --- Status bar: высота = max(переменная, вырез сверху) --- */
.sbar{height:max(var(--status-h), var(--safe-top));align-items:center;
  padding-left:calc(16px + var(--safe-left));padding-right:calc(16px + var(--safe-right))}
/* На реальном устройстве статус-бар (время, сеть, Wi-Fi, батарея) рисует ОС.
   Фейковые «9:41» и значки скрываем, оставляя только отступ-спейсер под вырез/«остров».
   В десктоп-превью с мышью фейковый бар остаётся (часть макета телефона). */
@media (hover:none) and (pointer:coarse), (display-mode:standalone), (display-mode:minimal-ui){
  .sbar{visibility:hidden}   /* прячем и время, и значки; высота-спейсер остаётся */
}

/* --- Навигация: закреплённый слот --- */
/* Шапка-карта: статус-бар + навбар = единый приподнятый «лист» из материала карточек
   (без скруглений — во всю ширину). Карточный вид дают: кромка --nm-edge, светлый волосок
   по нижнему краю (inset -1px — зеркало карточного inset 0 1px 0) и тень уровня --nm-raise,
   но БЕЗ inset-верха — он нарисовал бы шов между статус-баром и навбаром. */
/* .su-nav — снимок навбара в подложке свайпа-назад: тот же материал (см. блок свайпа ниже) */
#navbar,.su-nav{position:absolute;left:0;right:0;z-index:10;background:var(--card);
  border:1px solid var(--nm-edge);border-top:none;
  box-shadow:0 15px 32px rgba(40,40,55,.10),0 3px 8px rgba(40,40,55,.05),inset 0 -1px 0 rgba(255,255,255,.9);
  transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
:root[data-theme="dark"] #navbar,:root[data-theme="dark"] .su-nav{box-shadow:0 15px 32px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.2),inset 0 -1px 0 rgba(255,255,255,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) #navbar,:root:not([data-theme]) .su-nav{box-shadow:0 15px 32px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.2),inset 0 -1px 0 rgba(255,255,255,.07)}}
/* Large-title (Клиенты/Просрочки/Сводка/Ещё): до скролла бар НЕВИДИМ (экран единый,
   заголовок в потоке сразу под статус-баром), карта-шапка плавно проявляется при скролле.
   pointer-events:none — невидимый бар лежит поверх большого заголовка, клики сквозь. */
#navbar.nav-large:not(.scrolled){background:transparent;border-color:transparent;box-shadow:none;pointer-events:none}

/* Large Title (нативный паттерн): панель ВСЕГДА компактная; большой заголовок
   (.bigtitle) живёт в скролл-контенте и уезжает со скроллом. Компактный заголовок
   в панели проявляется через opacity (ставит JS по scrollTop) — только composited,
   без анимации height/font-size → нет рефлоу #view, плавно. */
.nav-large .lnav{height:var(--nav-h);display:flex;align-items:center;justify-content:center;
  padding:0 16px;border-bottom:.5px solid transparent;transition:border-color .15s ease}
.nav-large .lnav h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;
  color:var(--text);opacity:0}
/* Большой заголовок — первый элемент #view (скроллится сам браузером) */
.bigtitle{margin:0;font-size:34px;font-weight:800;letter-spacing:-.8px;color:var(--text);
  padding:8px calc(16px + var(--safe-left)) 6px calc(16px + var(--safe-right))}

/* Компактная панель (назад / отмена) — высота через переменную */
.nav-back .nav,.nav-cancel .nav{height:var(--nav-h);margin:0;
  padding-left:calc(16px + var(--safe-left));padding-right:calc(16px + var(--safe-right))}

/* --- Tab bar: панель (var) + safe-area снизу через env() --- */
/* safe-area снизу и боковые отступы плавающей капсулы вынесены на #tabbar (padding) */
.tabbar .tabs{align-items:center}
.tabbar .tab{min-height:44px;justify-content:center}
/* home-индикатор: рисуем сами только в десктоп-превью; на устройстве его рисует ОС в safe-area */
.tabbar .home{display:none}
@media (min-width:480px) and (hover:hover) and (pointer:fine){ .tabbar .home{display:block;height:5px;width:135px;margin:14px auto 12px} }

/* --- Строка списка клиентов: 72px, аватар 50×50 --- */
.row{height:72px;padding:0 16px;gap:12px}
.av{width:50px;height:50px;font-size:15px}
.oav{width:50px;height:50px}

/* --- Tap targets ≥ 44×44 --- */
/* Кнопка «...» — без белой подложки, просто иконка в цвете текста (вписать в навбар) */
.more{width:44px;height:44px;background:transparent}
.more i{font-size:24px;color:var(--text)}
.miniact{width:44px;height:44px}
.miniact i{font-size:19px}
.filt{width:40px;height:40px}
.xbtn{width:40px;height:40px}

/* ============================================================
   КОМПОНЕНТЫ ВОЛНЫ 1 (на дизайн-токенах)
   ============================================================ */

/* StatusBadge — пилюля статуса (Правило 3) */
.statusbadge{display:inline-flex;align-items:center;
  padding:3px 9px;
  border-radius:99px;font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap}
.sb-success{color:#fff;background:var(--green-solid)}   /* залитый сбер-стиль */
.sb-danger {color:#fff;background:#DD524A;padding:4px 9px;border-radius:8px;height:20px;box-shadow:0 4px 10px rgba(210,60,52,.26),0 1px 2px rgba(210,60,52,.16),inset 0 1px 0 rgba(255,255,255,.20)}
/* «Оплата»: залитый ЯНТАРНЫЙ бейдж дней до платежа (зеркало sb-danger в амбере) */
.sb-due {color:#fff;background:#E8930C;padding:4px 9px;border-radius:8px;height:20px;box-shadow:0 4px 10px rgba(232,147,12,.26),0 1px 2px rgba(232,147,12,.16),inset 0 1px 0 rgba(255,255,255,.22)}
:root[data-theme="dark"] .sb-due{background:#FF9F0A;box-shadow:0 4px 10px rgba(255,159,10,.24),0 1px 2px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .sb-due{background:#FF9F0A;box-shadow:0 4px 10px rgba(255,159,10,.24),0 1px 2px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15)}}
.sb-warning{color:var(--c-warning);background:var(--c-warning-bg)}
.sb-neutral{color:var(--c-neutral);background:var(--c-neutral-bg)}

/* FormInput — единый паттерн поля (Правило 4) */
.formfield{margin-bottom:var(--space-md)}
.fi-label{display:block;font-size:12px;color:var(--c-secondary-text);
  margin-bottom:var(--space-xs);font-weight:600}
.fi-control{display:flex;align-items:center;gap:var(--space-sm);
  height:44px;padding:0 var(--space-md);
  border:1px solid var(--c-border);border-radius:var(--r-ctrl);background:var(--card)}
.fi-control:focus-within{border-color:var(--c-neutral)}
.fi-input{flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--text);padding:0}
.fi-input::placeholder{color:var(--dim);font-weight:500}
.fi-unit{color:var(--c-secondary-text);font-weight:700;font-size:14px}

/* Барабан-пикер периода: 2 колеса (месяц+год), серая полоса выбора по центру,
   строки гаснут к краям, чёрная кнопка «Готово» снизу (см. scrPeriodSheet). */
.wheels{position:relative;display:flex;height:200px;overflow:hidden;margin-top:8px}
.wheelband{position:absolute;left:8px;right:8px;top:80px;height:40px;background:var(--surface2);border-radius:var(--r-ctrl);pointer-events:none;z-index:0}
.wheel{flex:1;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;padding:80px 0;position:relative;z-index:1;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel-item{height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--text);scroll-snap-align:center;white-space:nowrap}

/* ── Онбординг Сводки: «?» у пилюли, панель-в-карточке (шаги 1-2), указатель-бабл на плитку (шаги 3-5) ── */
.summary-top{display:flex;align-items:center;gap:10px;margin:13px 16px 0}
.summary-top .perpill{margin:0}
.help-btn{margin-left:auto;flex:0 0 auto;width:36px;height:36px;background:transparent;
  border:none;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center}
.help-btn i{font-size:19px}
.help-btn:active{transform:scale(.94)}
.ob-off{opacity:.32;transition:opacity .2s}
.ob-on{position:relative;z-index:30;box-shadow:0 0 0 2.5px var(--accent);border-radius:var(--r-card)}
.ob-text{font-size:14px;line-height:1.45;color:var(--text);font-weight:600}
.ob-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ob-count{font-size:13px;color:var(--muted);font-weight:700}
.ob-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;padding:4px 2px}
.ob-skip{color:var(--text)}
.ob-next{color:var(--accent)}
.ob-panel{position:absolute;inset:0;background:var(--card);border-radius:var(--r-card);padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;z-index:5}
.ob-tip{position:absolute;top:calc(100% + 12px);width:calc(200% + 9px);z-index:31;text-align:left;
  background:var(--card);border-radius:var(--r-ctrl);padding:14px;box-shadow:0 14px 34px rgba(0,0,0,.20)}
.ob-tip-l{left:0}
.ob-tip-r{right:0}
.ob-tip::before{content:"";position:absolute;top:-6px;width:13px;height:13px;background:var(--card);transform:rotate(45deg)}
.ob-tip-l::before{left:21px}
.ob-tip-r::before{right:21px}
.ob-tip-up{top:auto;bottom:calc(100% + 12px)}      /* нижний ряд: бабл НАД плиткой, стрелка вниз */
.ob-tip-up::before{top:auto;bottom:-6px}
/* ФИО — визуально с заглавной каждое слово (значение нормализуется в Store при сохранении) */
.fi-cap{text-transform:capitalize}

/* Поле даты — нативный системный календарь (iPhone: колесо, Android: календарь).
   Выглядит как остальные поля (рамку/радиус/отступы даёт .fi-control).
   Иконку календаря прячем, но растягиваем её на всё поле → тап в любом месте открывает календарь. */
.fi-input[type="date"]{position:relative;align-self:stretch;width:100%}
.fi-input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}

/* Телефон с авто-форматированием: слева статичный код +7, разделитель,
   затем поле национального номера (XXX) XXX-XX-XX.
   +7 приглушён (как плейсхолдер), пока поле пустое; чернеет, когда введён номер. */
.phone-field .phone-dial{flex:0 0 auto;font-family:inherit;font-size:15px;font-weight:600;color:var(--text)}
.phone-field:has(.phone-input:placeholder-shown) .phone-dial{color:var(--dim)}
.phone-field .phone-input{padding-left:var(--space-sm);border-left:1px solid var(--c-border)}

/* Заголовок секции формы (Правило 7) — над своей карточкой .fcard.
   Низ маленький (жмётся к карточке), а 16px между секциями даёт margin-bottom карточки. */
.fsec-title{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--c-neutral);margin:0 0 var(--space-sm)}
.fsec-title:first-child{margin-top:var(--space-sm)}

/* ── Карточки секций формы ───────────────────────────────────────────
   Каждая секция (Клиент / Дополнительно / Товар) — отдельная карточка:
   белый фон, тонкая едва заметная граница, скруглённые углы.
   Между карточками — 16px (margin-bottom). */
.fcard{background:var(--card);border:1px solid var(--c-border);border-radius:var(--r-field);
  margin-bottom:var(--space-lg);padding:0 var(--space-lg)}

/* Поля внутри карточки сохраняют свою рамку (как в секции «Клиент»):
   карточке нужен вертикальный внутренний отступ, у последнего поля убираем нижний. */
.fcard.fcard-boxed{padding:var(--space-md) var(--space-lg)}
.fcard.fcard-boxed .formfield:last-child{margin-bottom:0}

/* Обёртка формы — единые горизонтальные отступы (16) */
.formwrap{padding:var(--space-sm) var(--space-lg) 0}
.formwrap .primary{width:100%;margin:var(--space-xl) 0}

/* Read-only поле (например, выбранный клиент) */
.fi-readonly .fi-control{background:var(--surface);border-style:dashed}
.fi-static{font-size:15px;font-weight:600;color:var(--text)}

/* Карточка расчёта рассрочки — приподнятая, вид как у .fcard (без overflow:hidden — иначе жёсткие углы) */
.calc-card{border-radius:var(--r-field)}
.calc-row{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md);border-bottom:1px solid var(--c-border)}
.calc-row:last-child{border-bottom:none}
.calc-l{font-size:14px;color:var(--c-secondary-text)}
.calc-v{font-size:15px;font-weight:700;color:var(--text)}

/* ============================================================
   ВОЛНА 2 / 3 — правки по экранам
   ============================================================ */

/* Аватары — нейтральный серый (Правило 6, подход A).
   Один токен-цвет на все типы аватаров; перекрывает фикс-цвета из styles.css. */
.a-neutral,
.av.a-neutral{background:var(--c-neutral-bg);color:var(--c-neutral)}

/* Клиенты — вторичная строка под именем (Правило 2) */
.row .nm{flex:initial}
.rowbody{flex:1;min-width:0}
.rowsub{font-size:13px;font-weight:400;color:var(--c-secondary-text);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Просрочки — подпись суммы (label → value) */
.hl{font-size:13px;color:var(--c-secondary-text);margin-bottom:var(--space-xs)}

/* Карточка клиента — иконка баннера цветом ближайшего текста */
.nextp>i{color:var(--amberl)}

/* Сводка товара — нулевое значение словами + длинный адрес в столбик */
.mv-alt{font-size:14px;font-weight:600;color:var(--c-secondary-text)}
.irow-stack{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
.ir-stack{font-size:15px;color:var(--text);font-weight:600;text-align:left;white-space:normal}

/* Платежи — белая строка, статус читается только иконкой (Правило 6) */
.pay.pay-next{background:transparent}

/* Сумма платежа окрашена в цвет статус-иконки. Нужна повышенная специфичность,
   т.к. .payamt{color:var(--text)} в styles.css идёт позже и иначе перебивает t-*. */
.payamt.t-green{color:var(--green)}
.payamt.t-amber{color:var(--amber)}
.payamt.t-red{color:var(--red)}

/* Денежная сумма: знак ₽ — отдельный элемент В КОНЦЕ, мельче/легче/приглушённый,
   с небольшим отступом от цифр. .digits наследуют размер/вес/цвет контейнера.
   em → «на 20-25% меньше цифр». */
.rub{font-size:.78em;font-weight:400;color:#9CA3AF;margin-left:.2em}

/* Инлайновая сумма сразу после слова-метки (остаток / из / останется) в мелком
   тексте — добавляем немного воздуха, чтобы число не прилипало к слову. */
.val-gap{margin-left:.35em}

/* ===== Сводка: карточка-состав + плитки-метрики + деталь-экраны (этап 1) ===== */
/* Цвета шкалы поступлений (по ТЗ; theme-aware). */
:root{--seg-cost:#C2C2C7;--seg-tovar:#2FB84A;--seg-rass:#0FB5A6}
:root[data-theme="dark"]{--seg-cost:#5A5A5E;--seg-tovar:#30D158;--seg-rass:#2BC0B4}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--seg-cost:#5A5A5E;--seg-tovar:#30D158;--seg-rass:#2BC0B4}}
.seg-cost{background:var(--seg-cost)}
.seg-tovar{background:var(--seg-tovar)}
.seg-rass{background:var(--seg-rass)}

/* Карточка-состав «Получено» */
.compcard{position:relative;background:var(--card);border-radius:var(--r-card);margin:11px 16px 0;padding:16px}
/* Кнопка «⋯» на карточке прибыли → выбор метода расчёта */
.cc-menu{position:absolute;top:11px;right:11px;width:34px;height:34px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;font-size:18px;font-weight:700;font-family:inherit;transition:transform var(--dur-press) ease-out}
.cc-menu i{font-size:20px}
.cc-menu:active{transform:scale(.88)}
/* Лист выбора метода расчёта прибыли */
.pm-opt{display:flex;align-items:flex-start;gap:12px;background:var(--sheet-item);border-radius:var(--r-ctrl);padding:13px 14px;margin-top:9px;border:1.5px solid transparent;cursor:pointer;transition:transform var(--dur-press) ease-out,border-color .15s ease}
.pm-opt:active{transform:scale(.985)}
.pm-opt.sel{border-color:var(--accent)}
.pm-rad{width:21px;height:21px;border-radius:50%;border:2px solid var(--chev);flex:0 0 auto;margin-top:1px;position:relative}
.pm-opt.sel .pm-rad{border-color:var(--accent)}
.pm-opt.sel .pm-rad::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.pm-t{font-size:15px;font-weight:700;color:var(--text)}
.acc-opt{align-items:center}                 /* строки счетов однострочные → по центру (метод прибыли — со стопкой, flex-start) */
.acc-opt .pm-t{flex:1;min-width:0}           /* имя тянется, баланс уходит вправо */
.pm-s{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.pm-note{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--muted);margin-top:14px;line-height:1.45}
.pm-note i{font-size:15px;flex:0 0 auto;margin-top:1px}
.compval{font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.5px;white-space:nowrap;margin:3px 0 13px}
.compbar{display:flex;gap:3px;height:10px;margin-bottom:14px}
.compbar>span{display:block;border-radius:5px}

/* (od-dot удалён в v153 — просрочку на иконке товара несёт свечение значка, см. блок «icon glow») */
.compbar-empty>span{background:var(--seg-track);border-radius:5px}
.lgrow{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.lgdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.lgnm{flex:1;font-size:13.5px;color:var(--text)}
.lgvl{font-size:13.5px;font-weight:700;color:var(--text)}
.compprofit{display:flex;align-items:center;border-top:.5px solid var(--line);margin-top:4px;padding-top:12px}
.cpnm{flex:1;font-size:14.5px;font-weight:700;color:var(--green)}
.cpvl{font-size:16px;font-weight:800;color:var(--green)}

/* Сетка 2×2 плиток-метрик (кликабельны, с шевроном) */
.tiles-4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile-tap{cursor:pointer}
.tilehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.tilechev{font-size:15px;color:var(--chev)}

/* Деталь-экран метрики: крупный итог + правые значения в строках списка */
.metrichead{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:var(--r-card);margin:12px 16px 0;padding:15px}
.metrichead .hl{font-size:12.5px;color:var(--muted);font-weight:600}
.metricnum{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.4px;white-space:nowrap;margin-top:3px}
.mhicon{width:42px;height:42px;border-radius:var(--r-ctrl);background:var(--surface2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
/* Метрик-hero: та же ниша, что у нейтральной (--surface2 + inset), меняется только ЦВЕТ иконки (спек) */
.mh-green .mhicon{color:var(--green)}
.mh-red .mhicon{color:var(--red)}
.mr-val{text-align:right;flex:0 0 auto}
.mr-val .paydate{margin-top:2px}

/* Модалка — знак валюты отдельно от суммы (Правило 2) */
/* Фикс. высота поля суммы: span (Полностью) и input (Частично) — одинаковой высоты,
   чтобы лист не менял размер при переключении режима. */
.amtfield{gap:6px;height:76px}
.amtfield .cur{font-size:20px;font-weight:400;color:#9CA3AF;line-height:1}
.amtfield .a{font-size:40px;font-weight:800;color:var(--text);line-height:1}
.amtinp{font-size:40px;font-weight:800;flex:1;min-width:0;width:100%;height:44px;line-height:1}
/* Подписи под полем — одинаковой высоты в обоих режимах */
.amthint,.amthint-ok{min-height:18px}
.amthint-ok{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--green)}
.amthint-ok i{font-size:16px}

/* Кнопка быстрой подстановки полной суммы платежа (модалка оплаты) */
.fillfull{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  width:100%;height:46px;margin-top:var(--space-md);
  background:var(--surface2);color:var(--accent);border:none;border-radius:var(--r-btn);
  font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.fillfull i{font-size:18px}
.fillfull:active{transform:scale(.98)}
/* Две быстрые кнопки в ряд: «Платёж» + «Всё» (переплата) */
.payquick{display:flex;gap:8px;margin-top:var(--space-md)}
.payquick .fillfull{flex:1;min-width:0;width:auto;margin:0;font-size:13.5px;white-space:nowrap;overflow:hidden}
.fillfull-all{background:var(--green-solid);color:#fff}
/* Лист подтверждения переплаты */
.spread-sum{text-align:center;font-size:34px;font-weight:800;color:var(--green);letter-spacing:-1px;margin:8px 0 2px;line-height:1}
.spread-cap{text-align:center;font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.spread-done{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green);font-weight:700;font-size:14px;margin:12px 0 2px}
.spread-done i{font-size:18px}
/* Разбивка переплаты в детали операции: заголовок «Распределено» + строки платежей с отступом */
.drow-part .k{padding-left:14px}
.drow-part .k::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green-solid);margin-right:8px;vertical-align:middle}

/* Форма — расчёт появляется плавно; кнопка с safe-area снизу.
   Запас под тень внутри клипа: padding + отрицательный margin (положение карточки не меняется),
   иначе overflow:hidden срезал --nm-raise у .calc-card → «жёсткие углы» без неоморфизма. */
#calc-block{max-height:300px;opacity:1;overflow:hidden;pointer-events:none;
  padding:6px 16px 28px;margin:-6px -16px -28px;
  transition:opacity .3s ease, max-height .3s ease, padding .3s ease, margin .3s ease}
#calc-block.calc-hidden{opacity:0;max-height:0;
  padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}

/* ============================================================
   ФАЗА 2 — листы действий, фильтр, период, предупреждения
   ============================================================ */
.asheet{padding-bottom:calc(var(--space-lg) + var(--safe-bottom))}
.ashead{text-align:center;padding:2px 8px 10px}
.ashead .t{font-size:17px;font-weight:800;color:var(--text)}
.ashead .s{font-size:13px;color:var(--c-secondary-text);margin-top:2px}

.aslist{display:flex;flex-direction:column;background:var(--sheet-item);
  border-radius:var(--r-btn);overflow:hidden;margin-bottom:var(--space-sm)}
.asitem{display:flex;align-items:center;gap:var(--space-md);width:100%;min-height:52px;
  padding:0 var(--space-lg);background:var(--sheet-item);border:none;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--text);text-align:left;
  border-bottom:.5px solid var(--sheet-line)}
.aslist .asitem:last-child{border-bottom:none}
.asitem i{font-size:21px;flex:0 0 auto}
.asitem .as-chk{margin-left:auto;color:var(--green);font-size:20px}
.as-danger,.as-danger i{color:var(--c-danger)}
.as-cancel,.as-done{justify-content:center;border-radius:var(--r-btn);margin-top:var(--space-sm);
  font-weight:700;border-bottom:none}
.as-done{color:var(--accent)}
.asrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  background:var(--sheet-item);border-radius:var(--r-btn);padding:12px var(--space-lg);
  margin-bottom:var(--space-sm);font-size:16px;font-weight:600;color:var(--text)}
.asheet .fsec-title{margin:var(--space-sm) 0}

/* Индикатор активного фильтра на кнопке */
.filt-on{position:relative}
.filt-on::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:50%;background:var(--c-danger);border:2px solid var(--bg)}

/* Тренд «вниз» в сводке */
.trend-down{background:var(--c-danger-bg);color:var(--c-danger)}

/* Предупреждение в форме (правка условий товара) */
.formnote{display:flex;align-items:flex-start;gap:11px;
  background:#FCF5E7;color:#8A6A28;border:1px solid rgba(214,150,40,.18);border-radius:16px;
  box-shadow:0 10px 22px rgba(180,120,20,.08),inset 0 1px 0 rgba(255,255,255,.6);
  padding:13px 15px;font-size:13px;font-weight:600;margin-bottom:var(--space-md)}
.formnote i{font-size:18px;flex:0 0 auto;color:#C6820F}
:root[data-theme="dark"] .formnote{background:#38301C;color:#D6A24A;border-color:rgba(255,159,10,.18);box-shadow:0 10px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)}
:root[data-theme="dark"] .formnote i{color:#FF9F0A}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .formnote{background:#38301C;color:#D6A24A;border-color:rgba(255,159,10,.18);box-shadow:0 10px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)}:root:not([data-theme]) .formnote i{color:#FF9F0A}}

/* Активные нажатия — тактильный отклик (scale, композитится; release плавный) */
.row,.pcard2,.orow,.srow,.act,.profile,.tile-tap,.asitem,
.primary,.filt,.miniact,.sheet-x,.help-btn,.fillfull,.more,.selbtn,.barbtn,.cardmenu{transition:transform var(--dur-press) ease-out}
.bk,.cancel,.edit{transition:opacity var(--dur-press) ease-out}
.tab{transition:transform var(--dur-press) ease-out, color .2s ease}
.pay,.selc{transition:transform var(--dur-press) ease-out, background-color .15s ease, border-color .15s ease}
.row:active,.pcard2:active,.orow:active,.srow:active,.act:active,.pay:active,
.tab:active,.profile:active,.tile-tap:active,.asitem:active,.seg>div:active{transform:scale(.97)}
.primary:active,.filt:active,.miniact:active,.more:active,.selbtn:active,.barbtn:active,.cardmenu:active{transform:scale(.95)}
.bk:active,.cancel:active,.edit:active{opacity:.45}

/* Доступность: системная настройка «уменьшить движение» — убираем анимации (мгновенно, без сдвигов) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  #view.nav-anim>*{animation:none !important}
}

/* Карточка платежа: действия «Изменить»/«Отменить» */
.payactions{display:flex;flex-direction:column;gap:10px;margin:16px 16px 0}
.payactions .primary{width:100%;margin:0}   /* сброс базового margin:18px 16px 20px (иначе кнопка смещена) */
.pdanger{width:100%;padding:14px;border:none;border-radius:var(--r-btn);background:var(--card);color:var(--red);
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.pdanger:active{opacity:.55}
/* Поле даты в листе «Изменить платёж» — как денежное поле (боксом) */
.fedate{position:relative;display:flex;align-items:center;gap:11px;width:100%;height:52px;padding:0 16px;border-radius:18px;background:var(--card);color:var(--text);cursor:pointer}
.fedate .cal{font-size:19px;color:var(--nm-ctrl-ic);flex:0 0 auto}
.fedate-txt{flex:1;font-size:15.5px;font-weight:600}
.fedate-chev{font-size:18px;color:var(--nm-chev);flex:0 0 auto}
.fedate-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;background:transparent;padding:0;margin:0;pointer-events:none;-webkit-appearance:none;appearance:none}
/* Селектор счёта в форме — тап-открыть, значит приподнятый (как поле-дата), не утоплённый */
.fi-control.acc-sel-ctrl{background:var(--card);box-shadow:var(--nm-raise-sm)}
:root[data-theme="dark"] .fedate{box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .fedate{box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)}}
.pe-note{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--muted);font-weight:600;margin:12px 2px 0}
.pe-note i{font-size:15px;flex:0 0 auto;margin-top:1px}

/* --- Режим выбора платежей: плавный переход (класс .psel на .paywrap, БЕЗ пересборки DOM) --- */
/* Карточка «Оплачено» сворачивается, строки уезжают вверх. */
/* max-height:285 (а не 300) — впритык к реальной высоте коробки карточки (~272px): убирает
   верхнюю «мёртвую зону» анимации, где карточка ещё не жмётся, а selhint уже растёт → строки
   не проваливаются вниз в начале. Карточка фиксированной высоты, клипа нет. */
.paycollapse{max-height:285px;opacity:1;overflow:hidden;padding-bottom:70px;margin-bottom:-58px;
  transition:max-height .42s var(--ease-out),opacity .25s ease,margin-bottom .42s var(--ease-out)}
/* padding-bottom:70 — постоянный запас под тень (не анимируем: иначе max-height и padding вдвоём
   гонят высоту border-box → покадровое двоение → дрожь). 70px-пустоту в режиме выбора убираем
   отрицательным margin, а не обнулением padding.
   max-height жмём до 70 (= padding), НЕ до 0: box-sizing:border-box не даёт высоте упасть ниже
   паддинга → при цели 0 движение упиралось в пол на полпути (обрыв скорости −1.3→0 px/ms за кадр,
   замер по rAF) и строки замирали рывком. Цель 70 — пол не пересекается, ease-out доезжает
   до конца плавно. Верх карточки в 70px-окне остаётся — прячет opacity. */
.paywrap.psel .paycollapse{max-height:70px;opacity:0;margin-bottom:-70px}
/* Подсказка «Выберите платежи» — раскрывается только в режиме выбора.
   .30s (быстрее карточкиных .42s, пропорция сохранена): selhint успевает раскрыться, пока
   карточка ещё жмётся, — иначе дорастает в хвосте, когда карточка уже упёрлась в пол, и
   додавливает строки вниз (просадка в конце). Вместе с max-height:285 обе просадки → 0. */
.selhint{max-height:0;opacity:0;overflow:hidden;padding:0 16px;
  transition:max-height .30s var(--ease-out),opacity .25s ease,padding .30s var(--ease-out)}
.paywrap.psel .selhint{max-height:44px;opacity:1;padding:8px 16px 12px}
/* Левый маркер: статус-иконка (ожидается/просрочено) ↔ кружок выбора — кроссфейд, метки не пропадают. */
.paymark{position:relative;width:22px;height:22px;flex:0 0 auto}
.paymark .st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}
.paymark .selc{position:absolute;inset:0;opacity:0;transform:scale(.7);transition:opacity .2s ease,transform .2s ease}
.paywrap.psel .paymark .st{opacity:0}
.paywrap.psel .paymark .selc{opacity:1;transform:scale(1)}
/* Chevron гаснет в режиме выбора */
.paychev{transition:opacity .2s ease}
.paywrap.psel .paychev{opacity:0}

/* Экран входа / регистрации (Фаза 1) */
.authwrap{padding:8px 20px 24px;display:flex;flex-direction:column;justify-content:center;min-height:100%;box-sizing:border-box}
.authcard{background:var(--card);border-radius:var(--r-card);padding:16px}
.autherr{color:var(--red);font-size:13px;font-weight:600;min-height:17px;margin:4px 2px 2px}
.authbtn{width:100%;margin:6px 0 0}   /* margin:0 по бокам — базовый .primary имеет 16px, кнопка бы смещалась */
.fi-eye{background:none;border:none;color:var(--muted);cursor:pointer;padding:0 2px;font-size:19px;display:flex;align-items:center;flex:0 0 auto}
.fi-eye:active{opacity:.5}
.authswitch{text-align:center;color:var(--muted);font-size:14px;font-weight:600;margin-top:20px}
.authlink{color:var(--a-blue-fg);font-weight:700;cursor:pointer}
.authlink:active{opacity:.5}

/* ============================================================
   НЕОМОРФИЗМ — материалы для классов app.css (поверх базовых правил).
   ============================================================ */
/* Приподнятые карточки */
.metrichead{box-shadow:var(--nm-raise-lg);border:1px solid var(--nm-edge)}
.compcard{box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}
.authcard,.aslist{box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}
.fcard{box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}
.pdanger{box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}

/* Поля-ниши */
.fi-control{background:var(--field);border:none;box-shadow:var(--nm-inset)}
.fi-control:focus-within{box-shadow:var(--nm-inset),0 0 0 2px var(--accent);border:none}
.fi-readonly .fi-control{background:var(--surface);box-shadow:var(--nm-inset-icon)}
.fedate{box-shadow:0 8px 18px rgba(40,40,55,.111),0 1px 3px rgba(40,40,55,.074),inset 0 1px 0 rgba(255,255,255,.95)}
.wheelband{box-shadow:var(--nm-inset-icon)}

/* Иконки-плитки / круглые ниши */
.mhicon{box-shadow:var(--nm-inset-icon)}

/* Быстрая кнопка «Платёж» — приподнята */
.fillfull{box-shadow:var(--nm-raise-sm)}

/* ============================================================
   ПИКСЕЛЬ-ХРОМ (Фаза A) — точные значения из макетов design_handoff.
   Грузится последним → перебивает базовые правила styles.css/app.css.
   ============================================================ */
:root{
  --sb-fg:#1B1B1F; --sb-bg:#FFFFFF; --tab-off:#A6A6AE; --tab-tile:#FFFFFF;
  --tab-tile-sh:0 6px 15px rgba(40,40,55,.222),0 2px 4px rgba(40,40,55,.093),inset 0 1px 0 #fff;
  --nm-label:#9A9AA2; --nm-legend:#6E6E76; --nm-ctrl-ic:#6E6E76; --nm-chev:#ABABB4; --nm-icon:#8A8A8E; --grab-c:#D0D0D6;
  --status-h:48px;
}
:root[data-theme="dark"]{
  --sb-fg:#F2F2F4; --sb-bg:#2B2B2D; --tab-off:#7C7C82; --tab-tile:#3E3E42;
  --tab-tile-sh:0 8px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);
  --nm-label:#8A8A90; --nm-legend:#A0A0A6; --nm-ctrl-ic:#C4C4CA; --nm-chev:#6E6E74; --nm-icon:#9A9AA0; --grab-c:#48484C;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --sb-fg:#F2F2F4; --sb-bg:#2B2B2D; --tab-off:#7C7C82; --tab-tile:#3E3E42;
  --tab-tile-sh:0 8px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);
  --nm-label:#8A8A90; --nm-legend:#A0A0A6; --nm-ctrl-ic:#C4C4CA; --nm-chev:#6E6E74; --nm-icon:#9A9AA0; --grab-c:#48484C;
}}

/* ── A1. Статус-бар (фейк — только в браузер-превью; на устройстве скрыт, спейсер=safe-area) ── */
.sbar{padding:16px 32px 0;align-items:center;justify-content:space-between;font-weight:400}
.sb-time{font-size:17px;font-weight:600;letter-spacing:.2px;color:var(--sb-fg)}
.sb-island{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:126px;height:34px;border-radius:20px;background:#000;display:flex;align-items:center;padding-left:20px}
.sb-island svg{width:20px;height:20px}
.sb-right{display:flex;align-items:center;gap:7px}
.sb-signal{display:flex;align-items:flex-end;gap:2px;height:12px}
.sb-signal b{width:3px;border-radius:1px;background:var(--sb-fg)}
.sb-signal b:nth-child(1){height:5px}.sb-signal b:nth-child(2){height:7px}
.sb-signal b:nth-child(3){height:9px}.sb-signal b:nth-child(4){height:11px}
.sb-lte{font-size:14px;font-weight:600;color:var(--sb-fg)}
.sb-batt{width:28px;height:15px;border-radius:5px;background:var(--sb-fg);display:flex;align-items:center;justify-content:center;position:relative}
.sb-batt::after{content:"";position:absolute;right:-4px;width:2px;height:6px;border-radius:1px;background:var(--sb-fg)}
.sb-batt i{font-style:normal;font-size:10px;font-weight:700;color:var(--sb-bg)}

/* ── A2. Плавающий таб-бар — пилюля h80/r32, активная плитка 50×40 ── */
#tabbar{padding:0 12px calc(var(--safe-bottom) + 12px)}   /* 12 (не 20): капсула шире карточек контента (те на 16px) — карточки не торчат за бар */
.tabbar{height:80px;border-radius:32px;background:var(--card);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 46px rgba(40,40,55,.185),0 5px 14px rgba(40,40,55,.074),inset 0 1px 0 rgba(255,255,255,.95);overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme="dark"] .tabbar{border-color:rgba(255,255,255,.05);box-shadow:0 22px 48px rgba(0,0,0,.42),0 5px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .tabbar{border-color:rgba(255,255,255,.05);box-shadow:0 22px 48px rgba(0,0,0,.42),0 5px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}}
.tabbar .tabs{height:100%;padding:0 12px;align-items:center}
.tab{gap:6px;color:var(--tab-off);font-size:11px;font-weight:400;letter-spacing:normal}
.tab svg{width:23px;height:23px;color:inherit}
.tabic{height:40px;padding:0;background:none;border-radius:0;transition:none}
.tabA{color:var(--text);font-weight:600}
.tabA .tabic{width:50px;height:40px;border-radius:15px;background:var(--tab-tile);box-shadow:var(--tab-tile-sh)}
.tavatar{width:26px;height:26px;font-size:9px;color:#9A9AA2;
  background:radial-gradient(circle at 32% 26%,#FBFBFD,#DEDEE4);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 2px rgba(40,40,55,.111)}
:root[data-theme="dark"] .tavatar{color:#9A9AA0;
  background:radial-gradient(circle at 32% 26%,#4A4A4E,#2E2E31);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),inset 0 -1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .tavatar{color:#9A9AA0;
  background:radial-gradient(circle at 32% 26%,#4A4A4E,#2E2E31);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),inset 0 -1px 2px rgba(0,0,0,.3)}}

/* ── A3. Верхние бары ── */
.bigtitle{font-size:34px;font-weight:700;letter-spacing:-.6px;padding:22px calc(16px + var(--safe-left)) 0 calc(16px + var(--safe-right))}
.nav-large .lnav h3{font-weight:600}

/* ── A4/A5. Sheet + Primary ── */
.primary,.barbtn{height:54px;border-radius:20px;font-size:16px;font-weight:700}
.primary i,.barbtn i{font-size:20px}
/* Нижний бар выбора платежей: ряд из «Всё · Y» + «Оплатить X» (обе — белые пилюли .barbtn) */
.bar-row{display:flex;gap:10px}
.bar-row .barbtn{flex:1;width:auto;min-width:0}
.sheet{border-radius:30px 30px 0 0;padding:10px 20px 24px}
.grab{width:40px;height:5px;border-radius:3px;margin:6px auto 10px;background:var(--grab-c)}

/* ── Сводка (первый экран) ── */
.summary-top{margin:18px 16px 0;gap:12px;align-items:center}
.summary-top .perpill{flex:1;height:46px;border-radius:18px;padding:0 16px;margin:0;font-size:15px;font-weight:600;color:var(--text);box-shadow:var(--nm-raise-sm)}
.perpill .cs{font-size:19px;color:var(--nm-ctrl-ic)}
.perpill .cd{font-size:17px;color:var(--nm-chev);margin-left:auto}
.summary-top .help-btn{width:46px;height:46px;border-radius:18px;background:var(--card);box-shadow:var(--nm-raise-sm);color:var(--nm-ctrl-ic);position:relative}
/* точка-индикатор активного фильтра направления в Истории */
.help-btn.help-on::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--green-solid);border:2px solid var(--card)}
.summary-top .help-btn i{font-size:20px}
.compcard{margin:16px 16px 0;border-radius:22px;padding:20px}
.compcard .hlabel{font-size:14px;color:var(--nm-label)}
.compval{font-size:32px;font-weight:700;letter-spacing:-.5px;margin:5px 0 16px}
.compbar{height:10px;gap:3px;margin-bottom:16px}
.compbar>span{border-radius:5px}
.lgrow{gap:10px;padding:7px 0;margin-bottom:0}
.lgdot{width:9px;height:9px;border-radius:3px}
.lgnm{font-size:14px;color:var(--nm-legend)}
.lgvl{font-size:15px;font-weight:600;color:var(--text)}
.compprofit{margin-top:14px;padding-top:15px;border-top:1px solid var(--nm-divider);display:flex;align-items:center;justify-content:space-between}
.compprofit .cpnm{font-size:15px;font-weight:600;color:var(--text)}
.compprofit .cpvl{font-size:18px;font-weight:700;color:var(--text)}
.compprofit .cpvl.t-red{color:var(--red)}
.compprofit .cpvl.t-green{color:var(--green)}
/* Касса: строки Получено/Расход — ПРИПОДНЯТЫЕ тап-поля (материал карты, как пилюля/выбор
   счёта): --card + --nm-raise-sm + кромка --nm-edge, радиус поля. Группа полей шире контента
   карточки (почти до краёв, отриц. margin); заголовок «Касса» и строка «Прибыль» — на обычном
   отступе. Между полями гэп 8px. */
.kcard .krow{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:0 -8px;
  background:var(--card);border:1px solid var(--nm-edge);border-radius:15px;box-shadow:var(--nm-raise-sm);cursor:pointer}
.kcard .hlabel + .krow{margin-top:14px}   /* :first-of-type не годится — все дети div, первый div = .hlabel */
.kcard .krow + .krow{margin-top:8px}
/* Иконка — нейтральная утопленная ниша (как в лентах/настройках); смысл несёт цвет стрелки:
   приход — зелёная, расход — нейтральная серая (красный только на сумме). */
.kcard .kic{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--icon-niche);box-shadow:var(--nm-inset-icon)}
.kcard .kic-in i{color:var(--green)}
.kcard .kic-out i{color:var(--nm-ctrl-ic)}
.kcard .knm{flex:1;font-size:15px;font-weight:600;color:var(--text)}
.kcard .kv{font-size:16px;font-weight:700}
.kcard .kchv{font-size:16px;color:var(--nm-row-chev)}
/* Заработок с наценки: крупный навар + «из N полученных» */
.earnhead{display:flex;align-items:baseline;gap:9px;margin:4px 0 13px;flex-wrap:wrap}
.earnval{font-size:28px;font-weight:800;letter-spacing:-.5px}
.earnsub{font-size:13px;color:var(--nm-label);font-weight:600}
.tiles-4{gap:12px;padding:16px 16px 0}
.tiles-4 .tile{border-radius:22px;padding:16px;box-shadow:var(--nm-raise)}
.tilechev{font-size:15px;color:var(--chev)}
.tiles-4 .tl{font-size:13px;color:var(--nm-label);margin-top:12px}
.tiles-4 .tv{font-size:23px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin-top:3px}

/* ── Общие компоненты списков (поиск/сегмент/фильтр/аватар/строка) + Клиенты ── */
:root{
  --nm-search-ic:#ABABB4; --nm-row-chev:#BFBFC6; --seg-bg:#E4E4EA; --seg-thumb:#FCFCFE; --filt-bg:#FCFCFE; --av-ini:#9A9AA2;
  --seg-inset:inset 0 2px 5px rgba(40,40,55,.148),inset 0 -1px 1px rgba(255,255,255,.85);
  --seg-thumb-sh:0 4px 10px rgba(40,40,55,.222),0 1px 2px rgba(40,40,55,.111),inset 0 1px 0 rgba(255,255,255,.95);
  --srch-sh:0 8px 20px rgba(40,40,55,.111),0 1px 3px rgba(40,40,55,.074),inset 0 1px 0 rgba(255,255,255,.95);
  --filt-sh:0 2px 6px rgba(40,40,55,.185),inset 0 1px 0 rgba(255,255,255,.95);
  --av-grad:radial-gradient(circle at 38% 30%,#F0F0F4,#E4E4EA);
  --av-dome:inset 0 1px 2px rgba(255,255,255,.85),inset 0 -2px 5px rgba(40,40,55,.093),0 2px 6px rgba(40,40,55,.093);
}
:root[data-theme="dark"]{
  --nm-search-ic:#6E6E74; --nm-row-chev:#5C5C62; --seg-bg:#212123; --seg-thumb:#3C3C40; --filt-bg:#3C3C40; --av-ini:#B4B4BA;
  --seg-inset:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.03);
  --seg-thumb-sh:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  --srch-sh:0 8px 20px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --filt-sh:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
  --av-grad:radial-gradient(circle at 38% 30%,#454549,#303033);
  --av-dome:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 5px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --nm-search-ic:#6E6E74; --nm-row-chev:#5C5C62; --seg-bg:#212123; --seg-thumb:#3C3C40; --filt-bg:#3C3C40; --av-ini:#B4B4BA;
  --seg-inset:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.03);
  --seg-thumb-sh:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  --srch-sh:0 8px 20px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --filt-sh:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
  --av-grad:radial-gradient(circle at 38% 30%,#454549,#303033);
  --av-dome:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 5px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25);
}}
/* Поиск (r20, приподнят) */
.srch{padding:13px 16px 0}
.srch .field{height:44px;padding:0 6px 0 12px;gap:8px;border-radius:20px;background:var(--card);box-shadow:var(--srch-sh)}
.srch .field .lic{color:var(--nm-search-ic);font-size:19px}
.srch .shph,.srch .sinp{font-size:15px;font-weight:400}
.srch .shph{color:var(--nm-search-ic)}
.srch .sinp::placeholder{color:var(--nm-search-ic);font-weight:400}
.srch .sep{display:none}
.srch .filt{width:35px;height:35px;border-radius:15px;background:var(--filt-bg);color:var(--nm-ctrl-ic);box-shadow:var(--filt-sh)}
.srch .filt i{font-size:19px}
/* Сегмент (r20) */
.seg{border-radius:20px;background:var(--seg-bg);padding:3px;box-shadow:var(--seg-inset)}
.segthumb{border-radius:20px;background:var(--seg-thumb);border:none;box-shadow:var(--seg-thumb-sh)}
.segA{color:var(--text);font-weight:700}
.segI{color:var(--nm-label);font-weight:600}
/* Строка клиента */
.row{border-radius:22px}
.row .nm{font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
.rowsub{color:var(--nm-label);font-size:13px}
.ch{color:var(--nm-row-chev);font-size:18px}
/* Аватары — нейтральный серый градиент-купол (спек убирает цветные) */
.av,.av.a-green,.av.a-blue,.av.a-red,.av.a-purple,.av.a-teal,.av.a-neutral,.cav,.bav{
  background:var(--av-grad);color:var(--av-ini);box-shadow:var(--av-dome)}

/* ── Ещё + настроечные списки (gcard/srow/sicon/tog) — общий паттерн ── */
:root{ --icon-niche:#F3F3F6 }
:root[data-theme="dark"]{ --icon-niche:#2A2A2C }
@media (prefers-color-scheme:dark){:root:not([data-theme]){ --icon-niche:#2A2A2C }}
.profile{padding:18px;margin:18px 16px 0;gap:16px;box-shadow:var(--nm-raise-lg)}
.profile .cav{flex:0 0 56px;width:56px;height:56px;font-size:16px;font-weight:600}
.sname{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
.smail{font-size:13px;color:var(--nm-label)}
.sverif{color:var(--tab-off);font-size:12.5px;font-weight:500}
.sverif i{font-size:14px}
.profile .schv{color:var(--nm-row-chev)}
.glabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tab-off);padding:22px 20px 8px}
.srow{padding:14px 16px;gap:14px;position:relative;border-bottom:none}
.gcard .srow:not(:last-child)::after{content:"";position:absolute;left:68px;right:0;bottom:0;height:1px;background:var(--nm-divider)}
.sicon{width:38px;height:38px;border-radius:14px;background:var(--icon-niche);color:var(--nm-ctrl-ic);box-shadow:var(--nm-inset-icon)}
.sicon i{font-size:20px}
.slabel{font-size:15.5px;font-weight:600;color:var(--text)}
.ssub2{font-size:12.5px;color:var(--nm-label);margin-top:2px}
.svalue{font-size:14px;font-weight:600;color:var(--nm-label)}
.svalue-strong{font-size:15px;font-weight:700;color:var(--text)}   /* баланс кошелька — тёмный/жирный (спек) */
.schv{color:var(--nm-row-chev);font-size:17px}
/* Тумблер темы — неоморфный (OFF в светлой, ON=вправо в тёмной; трек графит, не акцент) */
.tog{width:48px;height:29px;border-radius:15px;background:#E2E2E8;box-shadow:inset 0 2px 5px rgba(40,40,55,.185),inset 0 -1px 1px rgba(255,255,255,.7)}
.tog .knob{width:25px;height:25px;background:#FCFCFE;box-shadow:0 2px 5px rgba(40,40,55,.32),inset 0 1px 0 rgba(255,255,255,.9);top:2px;left:2px}
:root[data-theme="dark"] .tog{background:#2B2B2D;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="dark"] .tog .knob{background:#333336;box-shadow:0 2px 5px rgba(0,0,0,.35);transform:translateX(19px)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .tog{background:#2B2B2D;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
:root:not([data-theme]) .tog .knob{background:#333336;box-shadow:0 2px 5px rgba(0,0,0,.35);transform:translateX(19px)}}
/* Выйти + подвал версии */
.logout{gap:9px}
.logout i{font-size:19px}
.foot{font-size:12.5px;color:var(--nm-search-ic);margin-top:16px}

/* ── Кошелёк ── */
.walcard{background:var(--card);padding:20px;margin:18px 16px 0;border-radius:22px;border:1px solid var(--nm-edge);box-shadow:var(--nm-raise-lg)}
.wal-lbl{font-size:14px;color:var(--nm-label)}
.wal-tot{font-size:34px;font-weight:700;letter-spacing:-.6px;color:var(--text);margin:4px 0 2px}
.wal-sub{font-size:12.5px;color:var(--nm-search-ic)}
.wal-split{display:flex;align-items:stretch;margin-top:18px;padding-top:16px;border-top:1px solid var(--nm-divider)}
.wal-col{flex:1}
.wal-crow{display:flex;align-items:center;gap:8px}
.wal-crow span{font-size:13px;color:var(--nm-label)}
.wal-cic{width:28px;height:28px;border-radius:10px;background:var(--surface);box-shadow:var(--nm-inset-icon);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wal-cic i{font-size:16px;color:var(--nm-icon)}
.wal-cic-g i{color:var(--green)}
.wal-cval{font-size:17px;font-weight:700;color:var(--text);margin-top:9px}
.wal-vsep{width:1px;margin:2px 16px;background:var(--nm-divider)}
/* Строки счетов/операций */
.acc-nmrow{display:flex;align-items:center;gap:7px}
.acc-chip{background:var(--bg);color:var(--nm-label);font-size:10px;font-weight:700;letter-spacing:.01em;padding:2px 6px;border-radius:6px}
:root[data-theme="dark"] .acc-chip{background:#3C3C40;color:#A0A0A6}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .acc-chip{background:#3C3C40;color:#A0A0A6}}
.acc-row .acc-bal,.op-row .acc-bal{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;flex:0 0 auto}
.sicon.sic-green i{color:var(--green)}
.sicon.sic-add i{color:var(--nm-label)}

/* ── Карточка товара ── */
:root{ --pi-niche:#F0F0F3; --pi-ic:#4A4A52; --prog-track:#E7E7EC }
:root[data-theme="dark"]{ --pi-niche:#2A2A2C; --pi-ic:#E0E0E6; --prog-track:#262628 }
@media (prefers-color-scheme:dark){:root:not([data-theme]){ --pi-niche:#2A2A2C; --pi-ic:#E0E0E6; --prog-track:#262628 }}
/* Имя товара — ЦЕЛИКОМ в одну строку: бейджа нет (статус несёт свечение значка,
   блок «icon glow» ниже) — имени вся ширина до «...»; хром ужат (иконка/отступы);
   шрифт имени авто-подбирается JS-ом (fitOneLine, 19→14px), многоточие — страховка. */
.phero{padding:15px 16px;margin:18px 16px 0;gap:12px}
.phero .pi{flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:var(--pi-niche);color:var(--pi-ic)}
.phero .pi i{font-size:22px}
.pn{font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--text)}
.ps{font-size:13px;color:var(--nm-label)}
.sb-success{background:#36A65A;box-shadow:0 4px 10px rgba(47,150,74,.28),0 1px 2px rgba(47,150,74,.16),inset 0 1px 0 rgba(255,255,255,.24)}
:root[data-theme="dark"] .sb-success{background:#2FA850;box-shadow:0 4px 10px rgba(48,160,80,.3),0 1px 2px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.16)}
:root[data-theme="dark"] .sb-danger{background:#EC5F57;box-shadow:0 4px 10px rgba(236,95,87,.24),0 1px 2px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .sb-danger{background:#EC5F57;box-shadow:0 4px 10px rgba(236,95,87,.24),0 1px 2px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15)}}
/* Сегмент-табы товара (крупнее клиентского: h50/r30) */
.seg-prod{height:50px;padding:5px;border-radius:30px}
.seg-prod .segthumb{width:calc(50% - 5px);height:calc(100% - 10px);top:5px;left:5px;border-radius:20px}
.seg-prod>div{font-size:15px;display:flex;align-items:center;justify-content:center}
/* Карточка «Оплачено» */
.paycard{padding:20px;border-radius:22px}
.pc-lbl{font-size:14px;color:var(--nm-label)}
.pc-cnt{font-size:14px;color:var(--nm-label)} .pc-cnt b{font-size:15px;color:var(--text)}
.pc-paid{font-size:30px;font-weight:700;color:var(--text);margin-top:4px}
.paycard .track{height:9px;background:var(--prog-track);box-shadow:inset 0 1px 2px rgba(40,40,55,.185);margin-top:14px}
:root[data-theme="dark"] .paycard .track,:root[data-theme="dark"] .mcard-bar .track{box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .paycard .track,:root:not([data-theme]) .mcard-bar .track{box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}}
.paycard .fill,.mcard-bar .fill{background:var(--seg-tovar)}
.pc-fl{font-size:12.5px;color:var(--nm-label)}
.pc-fv{font-size:16px;font-weight:700;color:var(--text)}
/* Строки платежей */
.payrows{border-radius:20px}
.pay{height:auto;padding:13px 16px;gap:13px;border-bottom:none;position:relative}
.payrows .pay:not(:last-child)::after{content:"";position:absolute;left:51px;right:0;bottom:0;height:1px;background:var(--nm-divider)}
.pay i.st{font-size:22px}
.payname{font-size:15px;font-weight:600;color:var(--text)}
.paydate{font-size:12.5px;color:var(--nm-label);margin-top:1px}
.paydate.t-red,.paydate.t-amber{font-weight:500}
.paydate.t-red{color:var(--red)} .paydate.t-amber{color:var(--amber)}
.pay-fut .payname,.pay-fut .payamt{color:var(--nm-legend)}   /* далёкие будущие платежи приглушены (спек) */
.payamt{font-size:15px;font-weight:700}
.paychev{color:var(--nm-row-chev);font-size:17px}
/* Сводка товара (сетка) + список деталей */
.mcard{padding:20px;border-radius:22px}
.ml{font-size:13px;color:var(--nm-label)}
.mv{font-size:20px;font-weight:700;color:var(--text);margin-top:3px}
.pctn{background:var(--prog-track);color:var(--nm-legend);font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;margin-left:.4em}
.mcard-bar .track{height:9px;background:var(--prog-track);box-shadow:inset 0 1px 2px rgba(40,40,55,.185);margin-top:12px}
.mcard-bar .pmeta{font-size:12.5px;color:var(--nm-label)}
.irow{padding:14px 16px}
.il{font-size:14px;color:var(--nm-legend)}
.ir{font-size:14px;font-weight:600;color:var(--text)}
.ir.muted{color:var(--nm-label);font-weight:400}

/* ── Компактный «назад» (все экраны) ── */
.bk i{font-size:24px}
.bk span{font-size:17px;font-weight:500}
/* ── Метрик-детали (Расход/К получению/Прибыль/Просроченные) ── */
.perpill{height:40px;padding:0 15px;border-radius:16px;font-size:14.5px;font-weight:700}
.perpill .cs{font-size:18px} .perpill .cd{font-size:16px}
.summary-top .perpill{height:46px;border-radius:18px;padding:0 16px;font-size:15px;font-weight:600}
.summary-top .perpill .cs{font-size:19px} .summary-top .perpill .cd{font-size:17px}
.metrichead{box-shadow:var(--nm-raise);padding:16px;margin:14px 16px 0;gap:13px}
.metrichead .mhicon{width:44px;height:44px;border-radius:14px;box-shadow:var(--nm-inset-icon)}
.metrichead .mhicon i{font-size:21px}
.metrichead:not(.mh-green):not(.mh-red) .mhicon{background:var(--pi-niche);color:var(--nm-ctrl-ic)}
.metrichead .hl{font-size:13px;color:var(--nm-label)}
.metricnum{font-size:28px;font-weight:700}
.list .picon{color:var(--nm-ctrl-ic)}
.list .picon i{font-size:19px}
.mr-val .payamt{font-size:15px;font-weight:700;color:var(--text)}
.mr-val .paydate{font-size:12px;color:var(--nm-label)}

/* ── Детали клиента ── */
.more{width:42px;height:42px;border-radius:14px;background:var(--card);color:var(--pi-ic);box-shadow:var(--nm-raise-sm)}
.more i{font-size:20px;color:var(--pi-ic)}
/* «…» внутри hero-карточки (перенос из шапки): приподнятая кнопка = навбарная .more 1:1. */
.cardmenu{width:40px;height:40px;border-radius:14px;background:var(--card);box-shadow:var(--nm-raise-sm);color:var(--nm-ctrl-ic);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex:0 0 auto;padding:0;font-family:inherit}
.cardmenu i{font-size:22px;color:var(--nm-ctrl-ic)}
.herotop .cardmenu{margin-left:auto}   /* карточка клиента: точки в правый край строки имени */
.phero .cardmenu{width:35px;height:35px}   /* карточка товара — мельче клиентской (карта товара ниже) */
.cdhero{padding:22px 20px 18px;margin:18px 16px 0}
.herotop{gap:16px}
.cdhero .cav{flex:0 0 64px;width:64px;height:64px;font-size:20px;font-weight:600}
.cnm{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text)}
.cph{font-size:15px;color:var(--nm-label);margin-top:3px}
.actrow{gap:10px;margin-top:18px}
.act{background:var(--card);padding:13px 0;gap:7px;border-radius:16px;color:var(--text);box-shadow:var(--nm-raise-sm)}
.act.act-hi{background:var(--card)}
.act i{font-size:21px}
.act span{font-size:12px;font-weight:600}
/* Баннер ближайшего платежа */
.nextp{padding:15px 18px;margin:14px 16px 0;gap:14px;border-radius:25px;border:1px solid rgba(214,150,40,.16);box-shadow:0 14px 30px rgba(180,120,20,.10),0 3px 8px rgba(180,120,20,.05),inset 0 1px 0 rgba(255,255,255,.7)}
.nextp .l{font-size:12.5px;color:var(--nm-label)}
.nextp .d{font-size:15px;font-weight:600;color:var(--text);margin-top:2px}
.nextp .a{font-size:16px;font-weight:700;color:var(--text)}
/* Заголовок «Товары» + счётчик */
.sechead{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--text);padding:24px 20px 0}
.cnt{background:var(--seg-bg);color:var(--nm-label);font-size:13px;font-weight:600;height:24px;min-width:24px;padding:0 8px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
/* Карточки товара клиента */
.pcard2{padding:16px 18px;margin:12px 16px 0;gap:14px;border-radius:22px}
.pcard2 .picon{flex:0 0 46px;width:46px;height:46px;color:var(--pi-ic)}
.pcard2 .picon i{font-size:21px}
.pname{font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
.pmeta{font-size:12.5px;color:var(--nm-label);margin-top:5px;margin-bottom:0}
.pcard2 .track{height:8px;background:var(--prog-track);box-shadow:inset 0 1px 2px rgba(40,40,55,.185);margin-top:12px}
.pcard2 .fill{background:var(--seg-tovar)}
.pchev{color:var(--nm-row-chev);font-size:18px}

/* ── Просрочки ── */
.headcard{padding:20px;margin:18px 16px 0;gap:16px;border-radius:22px}
.headcard .hicon{flex:0 0 54px;width:54px;height:54px;border-radius:18px;background:var(--icon-niche);color:var(--red);box-shadow:var(--nm-inset-icon)}
.headcard .hicon i{font-size:24px}
.headcard .hl{font-size:14px;color:var(--nm-label)}
.headcard .hnum{font-size:30px;font-weight:700;letter-spacing:-.5px;color:var(--red)}
.headcard .hsub{font-size:13px;color:var(--nm-label)}
.orow{padding:15px 18px;gap:14px;border-radius:22px}
.oav{background:var(--av-grad);color:var(--av-ini);box-shadow:var(--av-dome)}
.oname{font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
.ocnt{font-size:13px;color:var(--nm-label)}
.oamt{font-size:16px;font-weight:700;color:var(--text)}

/* ── Формы (Новый/Изменить клиент/товар/счёт) ── */
.fsec-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tab-off);padding:20px 4px 9px}
.fsec-title:first-child{padding-top:12px}
.fcard{padding:16px;gap:14px;border-radius:22px;display:flex;flex-direction:column;margin-bottom:16px}
.fcard.fcard-boxed{padding:16px}
.fcard .formfield{margin-bottom:0}
.fi-label{font-size:12.5px;font-weight:600;color:var(--nm-label);margin-bottom:7px}
.fi-control{height:46px;padding:0 15px;border-radius:14px;background:var(--pi-niche);border:none;box-shadow:var(--nm-inset)}
.fi-input,.fi-static{font-size:15px;font-weight:600;color:var(--text)}
.fi-input::placeholder{color:var(--nm-search-ic);font-weight:500}
.fi-unit{color:var(--nm-label)}
.phone-field .phone-input{border-left:1px solid rgba(40,40,55,.12)}
.calc-card{background:var(--card);border:1px solid var(--nm-edge);border-radius:22px;box-shadow:var(--nm-raise);margin-bottom:16px}
.calc-card:last-child{margin-bottom:0}
.calc-row{border-color:var(--nm-divider);padding:15px 18px}

/* Клиент-карта (readonly) на «Добавить/Изменить товар» — приподнятая, ряд: аватар · имя/телефон · замок */
.client-lock{flex-direction:row;align-items:center;gap:14px;padding:13px 16px}
.cl-av{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;background:var(--c-neutral-bg);color:var(--c-neutral);box-shadow:var(--nm-dome)}
.cl-who{flex:1;min-width:0}
.cl-nm{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-ph{font-size:14px;color:var(--nm-label);margin-top:2px}
.cl-lock{font-size:18px;color:var(--nm-chev);flex:0 0 auto}

/* ── Авторизация (Вход/Регистрация) ── */
.authcard{padding:20px 18px;gap:15px;border-radius:24px;display:flex;flex-direction:column;box-shadow:var(--nm-raise-lg)}
.authcard .fi-control{height:50px;border-radius:15px;padding:0 16px;gap:11px}
.authbtn{height:52px;border-radius:16px}
.authswitch{font-size:14.5px;font-weight:600;color:var(--nm-label)}
/* Авторизация — лого-блок + ведущие иконки полей + подсказка (пиксель-спек Вход/Регистрация) */
.authlogo{display:flex;flex-direction:column;align-items:center;margin-bottom:30px}
.authlogo-ic{width:66px;height:66px;border-radius:18px;box-shadow:0 14px 28px rgba(22,168,110,.38),0 4px 9px rgba(40,40,55,.185)}
.authlogo-ic svg{display:block;border-radius:18px}
.authtitle{font-size:25px;font-weight:800;color:var(--text);letter-spacing:-.4px;margin-top:16px}
.authsub{font-size:14px;font-weight:500;color:var(--nm-label);margin-top:4px}
.authcard .fi-lead{flex:0 0 auto;color:#B0B0B8}
.fi-hint{display:flex;align-items:center;gap:6px;margin-top:9px;padding-left:2px}
.fi-hint svg{flex:0 0 auto;color:var(--green)}
.fi-hint span{font-size:12px;font-weight:500;color:var(--nm-label)}
:root[data-theme="dark"] .authcard .fi-lead{color:#7A7A80}
:root[data-theme="dark"] .authlogo-ic{box-shadow:0 14px 30px rgba(22,168,110,.34),0 4px 9px rgba(0,0,0,.30)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .authcard .fi-lead{color:#7A7A80}
:root:not([data-theme]) .authlogo-ic{box-shadow:0 14px 30px rgba(22,168,110,.34),0 4px 9px rgba(0,0,0,.30)}}
.authlink{color:var(--a-blue-fg);font-weight:700}

/* ── Цифровая клавиатура (Пополнить/Снять) ── */
.numfield{background:var(--field);height:66px;gap:9px;border-radius:18px;box-shadow:var(--nm-inset);display:flex;align-items:center;justify-content:center}
.nf-cur{color:var(--nm-label);font-size:24px;font-weight:700}
.nf-val{color:var(--text);font-size:32px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.nf-caret{width:2.5px;height:32px;border-radius:2px;background:var(--green)}
.nf-wd .nf-caret{background:#DC7A26}
:root[data-theme="dark"] .nf-wd .nf-caret{background:#F0A24E}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .nf-wd .nf-caret{background:#F0A24E}}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:18px 0 0}
.npk{height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:transform .1s ease}
.npk-d{background:var(--card);box-shadow:var(--nm-raise-sm)}
.npk-d span{font-size:24px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.npk-s{background:var(--pi-niche);box-shadow:var(--nm-inset-icon)}
.npk-s span{font-size:22px;font-weight:600;color:var(--nm-legend)}
.npk-s i{font-size:24px;color:var(--nm-legend)}
.npk:active{transform:scale(.96)}
.opbtn{height:54px;border-radius:20px}
.sheet-home{width:134px;height:5px;border-radius:3px;background:var(--accent);opacity:.85;margin:16px auto 0}

/* ── Листы действий (Меню действий / Выбор счёта / метод прибыли) ── */
.ashead .t{letter-spacing:-.2px}
.aslist{border-radius:20px;box-shadow:var(--nm-raise);overflow:hidden}
.asitem{min-height:56px;padding:0 18px;gap:15px;font-size:16.5px;font-weight:600;border-bottom:none;position:relative}
.asitem i{font-size:21px}
.aslist .asitem:not(:last-child)::after{content:"";position:absolute;left:54px;right:0;bottom:0;height:1px;background:var(--nm-divider)}
.as-cancel,.as-done{height:58px;border-radius:20px;background:var(--sheet-item);box-shadow:var(--nm-raise-sm);font-size:17px;font-weight:700;margin-top:10px}
.as-danger,.as-danger i,.as-danger span{color:var(--red)}
.asitem .as-chk{color:var(--green)}
/* Пункт «Добавить в базу» в листе «Добавить и фильтр» — приподнятая строка-действие */
.as-add{height:54px;border-radius:18px;background:var(--sheet-item);box-shadow:var(--nm-raise-sm);font-weight:700}
.as-add::after{display:none}

/* ── Окно оплаты / Изменить платёж (лист суммы, система-клавиатура) ── */
.shead .t{font-size:21px;font-weight:700;letter-spacing:-.3px}
.ssub{font-size:13.5px;color:var(--nm-label);margin:3px 0 0}
.flabel{font-size:12.5px;font-weight:600;color:var(--nm-label);margin:0;padding:20px 0 8px}
.amtfield{background:var(--field);height:68px;gap:9px;border-radius:18px;box-shadow:var(--nm-inset)}
.amtfield .cur{font-size:25px;font-weight:700;color:var(--nm-label)}
.amtfield .a,.amtinp{font-size:33px;font-weight:700;color:var(--text);letter-spacing:-.5px}
.caret{width:2.5px;height:33px;border-radius:2px;background:var(--green)}
.amthint-ok{font-size:13.5px;font-weight:600;color:var(--green);gap:6px}
/* Быстрые кнопки — обе белые-приподнятые (спек: «Всё» не залит зелёным) */
.payquick{gap:10px;margin-top:16px}
.fillfull{height:46px;gap:7px;border-radius:15px;background:var(--card);color:var(--text);box-shadow:var(--nm-raise-sm);font-size:13.5px;font-weight:700}
.fillfull i{font-size:17px;color:var(--green)}
.fillfull-all{background:var(--card);color:var(--text)}
.fillfull-all i{color:var(--nm-ctrl-ic)}
/* Счёт зачисления */
.pay-acc{height:50px;padding:0 15px;gap:11px;border-radius:15px;background:var(--card);box-shadow:var(--nm-raise-sm)}
.pay-acc .acc-sel-name{font-size:15px;font-weight:600;color:var(--text)}
.pay-acc .acc-sel-bal{font-size:14px;font-weight:700;color:var(--nm-label)}
.pay-acc .acc-dot{width:11px;height:11px}
.pay-acc .acc-sel-chev{color:var(--nm-row-chev);font-size:17px}

/* ── Операция (деталь) + История ── */
.ttl{font-size:17px;font-weight:600}
.dwhen{font-size:13px;color:var(--nm-label);padding:12px 0 4px}
.dbig{width:72px;height:72px;background:var(--av-grad);color:var(--av-ini);box-shadow:var(--av-dome);font-size:24px;font-weight:700}
.dname{font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--text);margin-top:14px}
.dchip{background:var(--surface);color:var(--nm-legend);font-size:12.5px;font-weight:600;padding:6px 13px;gap:6px;border-radius:20px;box-shadow:var(--nm-inset-icon);margin-top:9px}
.dchip i{font-size:15px;color:var(--green)}
.dchip.dchip-out i{color:var(--red)}
.amtfield-edit{height:60px;border-radius:16px}   /* поле суммы на «Изменить платёж» компактнее (спек) */
.amtfield-edit .amtinp{font-size:26px}
.amtfield-edit .cur{font-size:22px}
.drow .v.acc-vdot{display:inline-flex;align-items:center}
.acc-cdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-right:8px}
.acc-cdot.a-green{background:var(--a-green-solid)}.acc-cdot.a-blue{background:var(--a-blue-solid)}.acc-cdot.a-red{background:var(--a-red-solid)}.acc-cdot.a-purple{background:var(--a-purple-solid)}.acc-cdot.a-teal{background:var(--a-teal-solid)}.acc-cdot.a-orange{background:var(--a-orange-solid)}.acc-cdot.a-pink{background:var(--a-pink-solid)}
.dsum{font-size:32px;font-weight:800;letter-spacing:-.5px;margin-top:14px}
/* Деталь платежа — hero в карточке, сумма в утоплённой нише (обновлённый спек) */
.pd-hero{background:var(--card);padding:22px 16px;margin:14px 16px 0;border-radius:22px;box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}
.pd-sum{align-self:stretch;background:var(--field);margin-top:16px;padding:14px 20px;border-radius:25px;box-shadow:var(--nm-inset);text-align:center}
.dsec{padding:2px 18px;margin:18px 16px 0;border-radius:22px}
.drow{padding:14px 0;gap:12px;font-size:14.5px;border-color:var(--nm-divider)}
.drow .k{color:var(--nm-label)}
.drow .v{font-weight:600;color:var(--text)}
.dlinkcard{margin:14px 16px 0;padding:13px 15px;gap:13px;border-radius:22px;background:var(--card);box-shadow:var(--nm-raise);border:1px solid var(--nm-edge)}
/* История: заголовки дат + строки операций */
.dhead{font-size:12px;font-weight:600;color:var(--nm-label);padding:12px 20px 6px}
.op{padding:11px 14px;gap:12px}
.op .ot{font-size:14.5px;font-weight:600;color:var(--text)}
.op .os{font-size:12px;color:var(--nm-label)}
.op .oa{font-size:14.5px;font-weight:700}
.opgc,.op-gc{border-radius:22px}

/* ── Период (барабан выбора) ── */
.asheet:has(.wheels) .ashead .t{font-size:20px;font-weight:700;letter-spacing:-.3px}
.wheels{height:220px;margin-top:6px}
.wheels.wheels-1{justify-content:center}
.wheels.wheels-1 .wheel{flex:0 0 auto;min-width:130px}
.wheelband{top:calc(50% - 21px);left:6px;right:6px;height:42px;border-radius:14px;background:var(--prog-track);box-shadow:var(--nm-inset-icon)}
/* Лист периода: пилюля-режим слева + выпадающее меню */
/* Зазор снизу — чтобы нижняя тень пилюли (raise-sm ≈26px) не попадала под верхний
   градиент-оверлей барабана (.wheels::before, z2, цвет листа) и не срезалась им;
   боковой/верхний отступ — от краёв листа. */
.pmhead{display:flex;align-items:center;min-height:36px;margin:10px 6px 20px;position:relative;z-index:3}
.modepill-wrap{position:relative}
.modepill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:16px;
  background:var(--card);box-shadow:var(--nm-raise-sm);border:1px solid var(--nm-edge);
  font-size:15px;font-weight:700;color:var(--text);font-family:inherit;cursor:pointer}
.modepill .mp-cd{font-size:16px;color:var(--nm-chev);transition:transform .18s ease}
.modepill.on .mp-cd{transform:rotate(180deg)}
.pmmenu{position:absolute;top:44px;left:0;z-index:20;min-width:190px;padding:6px;
  background:var(--sheet-item,var(--card));border-radius:16px;box-shadow:var(--nm-raise-lg);border:1px solid var(--nm-edge)}
.pmmenu-it{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 12px;border-radius:12px;
  background:none;border:none;font-family:inherit;font-size:15.5px;font-weight:600;color:var(--text);cursor:pointer}
.pmmenu-it.on{color:var(--green)}
.pmmenu-it .as-chk{color:var(--green);font-size:18px}
/* Режим «с..по»: два поля-даты */
.pmrange{padding:8px 2px 4px}
.pmr-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nm-label);margin:10px 4px 6px}
.pmrange .fedate{margin:0}
/* Режим «весь период» */
.pmall{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 0 30px}
.pmall-ic{width:56px;height:56px;border-radius:18px;background:var(--icon-niche);box-shadow:var(--nm-inset-icon);display:flex;align-items:center;justify-content:center;color:var(--nm-ctrl-ic);font-size:28px;margin-bottom:14px}
.pmall-t{font-size:18px;font-weight:800;color:var(--text)}
.pmall-s{font-size:13.5px;color:var(--nm-label);font-weight:600;margin-top:5px}
.wheel-item{height:40px;font-size:19px;font-weight:500;color:var(--text);transition:transform .1s ease-out,opacity .1s ease-out;will-change:transform,opacity}
.wheel-item.wi-on{font-weight:600}
.wheels::before,.wheels::after{content:"";position:absolute;left:0;right:0;height:78px;z-index:2;pointer-events:none}
.wheels::before{top:0;background:linear-gradient(var(--sheet),rgba(244,244,247,0))}
.wheels::after{bottom:0;background:linear-gradient(rgba(244,244,247,0),var(--sheet))}
:root[data-theme="dark"] .wheels::before{background:linear-gradient(#302F33,rgba(48,47,51,0))}
:root[data-theme="dark"] .wheels::after{background:linear-gradient(rgba(48,47,51,0),#302F33)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .wheels::before{background:linear-gradient(#302F33,rgba(48,47,51,0))}:root:not([data-theme]) .wheels::after{background:linear-gradient(rgba(48,47,51,0),#302F33)}}

/* ── Расчёт прибыли (метод) ── */
.pm-opt{background:var(--card);padding:16px;gap:14px;border-radius:18px;border:none;box-shadow:var(--nm-raise-sm);align-items:flex-start}
.pm-opt.sel{box-shadow:var(--nm-raise-sm),0 0 0 1.7px rgba(47,184,74,.6)}
.pm-rad{width:23px;height:23px;border:2px solid #D3D3D9;background:var(--surface);box-shadow:inset 0 1px 2px rgba(40,40,55,.093);margin-top:1px}
:root[data-theme="dark"] .pm-rad{border-color:#4A4A50}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pm-rad{border-color:#4A4A50}}
.pm-opt.sel .pm-rad{width:24px;height:24px;border:none;background:#2FB84A;box-shadow:0 3px 7px rgba(47,184,74,.4)}
.pm-opt.sel .pm-rad::after{content:"";position:absolute;left:50%;top:44%;right:auto;bottom:auto;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;border-radius:0;transform:translate(-50%,-50%) rotate(45deg);background:none}
.pm-t{font-size:16px;font-weight:700;color:var(--text)}
/* Выбор счёта — строка-счёт как ниша-иконка + подпись/бейдж/баланс (пиксель-спек) */
.acc-opt{height:66px;padding:0 15px;gap:13px;align-items:center;box-shadow:0 8px 18px rgba(40,40,55,.111),0 1px 3px rgba(40,40,55,.074),inset 0 1px 0 rgba(255,255,255,.95)}
.acc-opt-body{flex:1;min-width:0}
.acc-opt-nm{display:flex;align-items:center;gap:7px}
.acc-opt .pm-t{font-size:15.5px;font-weight:600;flex:0 1 auto}
.acc-opt-sub{font-size:12.5px;color:var(--nm-label);margin-top:2px}
.acc-opt .acc-sel-bal{font-size:15px;font-weight:700;color:var(--text)}
.acc-nic{width:42px;height:42px;flex:0 0 auto;border-radius:13px;background:#F3F3F6;color:var(--ac,#6E6E76);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(40,40,55,.111),inset 0 -1px 1px rgba(255,255,255,.85)}
.acc-nic i{font-size:21px;opacity:.55;transition:opacity .2s ease,filter .2s ease}
.acc-opt.sel .acc-nic i{opacity:1;filter:drop-shadow(0 0 5px var(--ac))}   /* выбран — полный цвет + свечение */
.acc-nic-add{background:var(--card);color:#1F8F43;box-shadow:0 4px 10px rgba(40,40,55,.111),inset 0 1px 0 rgba(255,255,255,.9);position:relative;left:-1px}
.acc-nic-add i{opacity:1;filter:none}   /* «+» — полная яркость, без приглушения */
:root[data-theme="dark"] .acc-nic.acc-nic-add{background:#3A3A3E;color:#2DB84D;box-shadow:0 4px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}   /* выпуклая, как на светлой (специфичнее dark .acc-nic-ниши) */
@media (prefers-color-scheme:dark){:root:not([data-theme]) .acc-nic.acc-nic-add{background:#3A3A3E;color:#2DB84D;box-shadow:0 4px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}}
.pm-add{background:transparent;border:1.5px dashed var(--grab-c);box-shadow:none;height:58px}
.pm-add-sp{width:24px;flex:0 0 auto}   /* правый спейсер под колонку индикатора */
.acc-opt .pm-rad{margin-top:0}   /* индикатор справа — по центру строки */
/* Иконка счёта — в цвете своей карточки (--ac): тускло без выбора, светится при выборе; кольцо/радио выбранного — в том же цвете */
.acc-opt{--ac:var(--nm-ctrl-ic)}
.acc-opt.a-green{--ac:var(--a-green-solid)}
.acc-opt.a-blue{--ac:var(--a-blue-solid)}
.acc-opt.a-red{--ac:var(--a-red-solid)}
.acc-opt.a-purple{--ac:var(--a-purple-solid)}
.acc-opt.a-teal{--ac:var(--a-teal-solid)}
.acc-opt.a-orange{--ac:var(--a-orange-solid)}
.acc-opt.a-pink{--ac:var(--a-pink-solid)}
.acc-opt.sel{box-shadow:var(--nm-raise-sm),0 0 0 1.7px color-mix(in srgb,var(--ac,#2FB84A) 62%,transparent),0 6px 18px -6px color-mix(in srgb,var(--ac,#2FB84A) 32%,transparent)}
.acc-opt.sel .pm-rad{background:var(--ac,#2FB84A);box-shadow:0 3px 8px color-mix(in srgb,var(--ac,#2FB84A) 45%,transparent)}
.pm-add .pm-t{font-size:15px;font-weight:600;color:var(--nm-legend)}
:root[data-theme="dark"] .acc-nic{background:#2A2A2C;box-shadow:inset 0 2px 5px rgba(0,0,0,.45),inset 0 -1px 1px rgba(255,255,255,.04)}
:root[data-theme="dark"] .pm-opt.sel .acc-nic i{opacity:1}
:root[data-theme="dark"] .acc-opt{box-shadow:0 8px 18px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .acc-nic{background:#2A2A2C;box-shadow:inset 0 2px 5px rgba(0,0,0,.45),inset 0 -1px 1px rgba(255,255,255,.04)}
:root:not([data-theme]) .pm-opt.sel .acc-nic i{opacity:1}
:root:not([data-theme]) .acc-opt{box-shadow:0 8px 18px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06)}}
.pm-s{font-size:13px;color:var(--nm-label);line-height:1.4;margin-top:3px}
.pm-note{background:var(--bg);padding:13px 14px;gap:10px;border-radius:14px;color:var(--nm-label);font-size:12.5px;line-height:1.45;margin-top:16px}
.pm-note i{color:var(--nm-label)}

/* ── Деталь платежа (действия «Изменить»/«Отменить») ── */
.payactions{margin:22px 16px 0;gap:12px}
.payactions .primary{height:52px;border-radius:18px;margin:0}
.pdanger{height:52px;border-radius:18px;background:var(--card);color:var(--red);font-size:15.5px;font-weight:700;border:1px solid rgba(220,38,38,.16);box-shadow:var(--nm-raise)}
.pdanger i{font-size:19px}

/* ── Подтверждение оплаты (переплата/spread) ── */
.spread-sum{font-size:42px;font-weight:800;letter-spacing:-1px;color:var(--text)}
.spread-cap{font-size:13.5px;font-weight:600;color:var(--nm-label);margin-top:4px}
.blist{background:var(--card);border-radius:18px;box-shadow:var(--nm-raise);overflow:hidden;margin:18px 0 0;padding:0}
.brow{padding:14px 16px;border-top:none;position:relative;font-size:14.5px}
.blist .brow:not(:first-child)::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--nm-divider)}
.brow .n{color:var(--nm-legend);font-weight:400}
.brow .v{font-weight:700;color:var(--text)}
.spread-done{font-size:14.5px;font-weight:700;color:var(--green);gap:9px;padding:13px 16px;margin:12px 0 2px}
.bcancel{color:var(--nm-legend);font-weight:600;font-size:15px}
/* Групповая оплата */
.bsum{font-size:40px;font-weight:800;letter-spacing:-.8px;color:var(--text)}
/* Недостаточно средств (warning) */
.warnhead{display:flex;flex-direction:column;align-items:center;padding:8px 0 0}
.warn-ic{width:60px;height:60px;border-radius:50%;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 18px rgba(220,38,38,.18)}
.warn-ic i{font-size:30px}
.warn-t{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin-top:14px}
.warn-s{font-size:13.5px;color:var(--nm-label);text-align:center;margin-top:4px}
.warnhead + .blist{margin-top:20px}
.brow-short{padding-top:15px;padding-bottom:15px}
.brow-short .n{color:#B4231C;font-weight:600}
.brow-short .v{font-size:17px;font-weight:800}
:root[data-theme="dark"] .brow-short .n{color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .brow-short .n{color:var(--red)}}
/* Фильтр и сортировка (строки без иконки → дивайдер inset16) */
.asheet .fsec-title{padding:14px 4px 9px}
.filterlist .asitem{min-height:52px;padding:0 16px}
.filterlist .asitem span{font-size:16px;font-weight:600}
.filterlist .asitem:not(:last-child)::after{left:16px}
.filterlist .as-chk{color:var(--green);font-size:21px;margin-left:auto}

/* ── Все данные (полная карточка клиента) ── */
.bighero .bav{width:76px;height:76px;font-size:26px;font-weight:600}
.bnm{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin-top:14px}
.bsub{font-size:14px;color:var(--nm-label);margin-top:4px}
.frow{padding:13px 16px;border-bottom:none;position:relative}
.gcard .frow:not(:last-child)::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--nm-divider)}
.flab{font-size:12px;color:var(--nm-label)}
.fval{font-size:15px;font-weight:600;color:var(--text);margin-top:3px}
.fval.muted{color:var(--nm-label);font-weight:400}
.miniact{width:34px;height:34px;border-radius:12px;background:var(--icon-niche);color:#5A5A62}
.miniact i{font-size:17px}
:root[data-theme="dark"] .miniact{color:#C4C4CA}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .miniact{color:#C4C4CA}}

/* ============================================================
   АУДИТ-ФИКСЫ (сверка с макетами screens/*)
   ============================================================ */
/* 1) Домашний индикатор на ВСЕХ листах (был только в Пополнить/Снять).
   В браузер/десктоп-превью; на устройстве прячем — OS рисует свой. */
.sheet::after{content:"";display:block;width:134px;height:5px;border-radius:3px;background:var(--accent);opacity:.85;margin:16px auto 0}
@media (hover:none) and (pointer:coarse),(display-mode:standalone),(display-mode:minimal-ui){.sheet::after{display:none}}
/* 2) Общий прогресс-fill по спеку #2FB84A (был Сбер #21A038) */
.fill{background:var(--seg-tovar)}
/* 3) Аватар операции в ленте — серый градиент-купол (был плоский) */
.op-av{background:var(--av-grad);color:var(--av-ini);box-shadow:var(--av-dome)}
/* 4) Баннер «Ближайший платёж» — иконка-ниша амбер + фон #FCF5E7 */
.nextp{background:#FCF5E7}
:root[data-theme="dark"] .nextp{background:#38301C;border-color:rgba(255,159,10,.16);box-shadow:0 14px 30px rgba(0,0,0,.40),0 3px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .nextp{background:#38301C;border-color:rgba(255,159,10,.16);box-shadow:0 14px 30px rgba(0,0,0,.40),0 3px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}}
.nextp-ic{width:40px;height:40px;flex:0 0 auto;border-radius:13px;background:#F5E7C4;color:#C6820F;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px rgba(255,255,255,.7),inset 0 -1px 2px rgba(180,120,20,.14)}
.nextp-ic i{font-size:20px}
:root[data-theme="dark"] .nextp-ic{background:#2C2513;color:#FF9F0A;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .nextp-ic{background:#2C2513;color:#FF9F0A;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.04)}}
/* Просрочка — красный вариант баннера (спек Вариант 1: #DD524A/#EC5F57, как .sb-danger).
   Приоритет над янтарём: .nextp.od (0,2,0) + позже по порядку. */
.nextp.od{background:#FDECEA;border-color:rgba(220,70,60,.18)}
.nextp.od .nextp-ic{background:#FAD7D2;color:#DD524A;box-shadow:inset 0 1px 2px rgba(255,255,255,.6),inset 0 -1px 2px rgba(200,60,50,.16)}
.nextp.od .l{color:#DD524A}
.nextp.od .a{color:#DD524A}
:root[data-theme="dark"] .nextp.od{background:#3A1E1B;border-color:rgba(236,95,87,.18)}
:root[data-theme="dark"] .nextp.od .nextp-ic{background:#2E1512;color:#EC5F57;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.04)}
:root[data-theme="dark"] .nextp.od .l{color:#EC5F57}
:root[data-theme="dark"] .nextp.od .a{color:#EC5F57}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .nextp.od{background:#3A1E1B;border-color:rgba(236,95,87,.18)}
  :root:not([data-theme]) .nextp.od .nextp-ic{background:#2E1512;color:#EC5F57;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.04)}
  :root:not([data-theme]) .nextp.od .l{color:#EC5F57}
  :root:not([data-theme]) .nextp.od .a{color:#EC5F57}
}
/* 5) История-карусель: цветные градиент-карты счетов (были серые-неоморфные).
   Вертикальный запас: overflow-x:auto клипует и по Y — без запаса цветное свечение карт
   срезалось по границе карусели жёсткой линией. Отрицательные margin возвращают прежний layout. */
/* Карусель — СВОЯ (Pointer Events + transform, wireHistoryCarousel): нативный
   scroll-snap отключён — его доводку рисует iOS со своими обрывами и таймингом.
   Контейнер клипует, трек .acc-track едет translateX (GPU). Вертикальный палец
   отдан странице (pan-y), горизонталь ловим сами. */
.acc-carousel{display:block;overflow:hidden;scroll-snap-type:none;touch-action:pan-y;
  padding:24px 31px 70px;margin:-10px 0 -58px}
.acc-track{display:flex;gap:14px;will-change:transform}
.acc-track .accard{scroll-snap-align:none}
.accard{flex:0 0 328px;min-height:106px;padding:16px 18px;border-radius:22px}
.accard .an{font-size:14px;font-weight:600;gap:9px}
.accard .adot{width:26px;height:26px;border-radius:9px}
.accard .abal{font-size:26px;font-weight:800;letter-spacing:-.4px}
.accard .card-plus{width:30px;height:30px;top:14px;right:16px}
/* Цветные карточки счёта — эталон: вид ТЁМНОЙ темы. Поверхность карты одинакова в обеих темах
   (135° градиент + мягкий блик справа .18 + приглушённая inset-рамка/блик); отличается только
   подложка-тень: светлая тема — нейтральная серо-графитовая, тёмная — чёрная (override ниже). */
.accard.acc-grad{border:none;
  background:radial-gradient(circle at 78% 26%,rgba(255,255,255,.13),rgba(255,255,255,0) 44%),var(--acc-g);
  box-shadow:0 22px 46px rgba(40,40,55,.20),0 5px 12px rgba(40,40,55,.10),inset 0 0 0 1px rgba(0,0,0,.14)}
.accard.acc-grad:active{transform:scale(.985)}
.accard.a-green{--acc-g:linear-gradient(135deg,#4FD97A 0%,#2CB85D 55%,#1C9A48 100%)}
.accard.a-blue{--acc-g:linear-gradient(135deg,#6BA6FF 0%,#3D78E8 55%,#2B5DD0 100%)}
.accard.a-purple{--acc-g:linear-gradient(135deg,#AD9AFF 0%,#7B62E8 55%,#5E46D2 100%)}
.accard.a-red{--acc-g:linear-gradient(135deg,#FB8A8A 0%,#EE4D4D 55%,#DC2626 100%)}
.accard.a-teal{--acc-g:linear-gradient(135deg,#47E0D0 0%,#1BB8AA 55%,#0F9488 100%)}
.accard.a-orange{--acc-g:linear-gradient(135deg,#FBA94D 0%,#F5820B 55%,#DE6A00 100%)}
.accard.a-pink{--acc-g:linear-gradient(135deg,#F87BC0 0%,#EC4899 55%,#D42A83 100%)}
.accard.acc-grad .an,.accard.acc-grad .abal{color:#fff}
.accard.acc-grad .abal .rub{color:#fff}   /* ₽ в цвет суммы — только на цветных картах счетов */
.accard.acc-grad .adot{background:rgba(255,255,255,.26);color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.45)}
.accard.acc-grad .card-plus{background:rgba(255,255,255,.24);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* Тёмная тема — как walcard: тень чёрная глубокая, блик и рамка приглушены */
:root[data-theme="dark"] .accard.acc-grad{background:radial-gradient(circle at 78% 26%,rgba(255,255,255,.13),rgba(255,255,255,0) 44%),var(--acc-g);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(0,0,0,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .accard.acc-grad{background:radial-gradient(circle at 78% 26%,rgba(255,255,255,.13),rgba(255,255,255,0) 44%),var(--acc-g);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(0,0,0,.2)}}
/* «Все счета» = точь-в-точь глянец карты «Общий баланс» (серебро) */
.accard.acc-all{background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),linear-gradient(135deg,#FBFBFD 0%,#E3E3E9 55%,#C6C6CD 100%);box-shadow:0 20px 44px rgba(40,40,55,.16),0 5px 12px rgba(40,40,55,.08),inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.9)}
.accard.acc-all .an,.accard.acc-all .abal{color:#1B1B1F}
.accard.acc-all .adot{background:#fff;color:#8A8A92;box-shadow:0 3px 8px rgba(40,40,55,.12),inset 0 1px 0 rgba(255,255,255,.9)}
:root[data-theme="dark"] .accard.acc-all{background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),linear-gradient(135deg,#4B4B50 0%,#35353A 55%,#222225 100%);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-theme="dark"] .accard.acc-all .an,:root[data-theme="dark"] .accard.acc-all .abal{color:#F5F5F6}
:root[data-theme="dark"] .accard.acc-all .adot{background:#55555A;color:#D6D6DA;box-shadow:0 3px 8px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .accard.acc-all{background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),linear-gradient(135deg,#4B4B50 0%,#35353A 55%,#222225 100%);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
:root:not([data-theme]) .accard.acc-all .an,:root:not([data-theme]) .accard.acc-all .abal{color:#F5F5F6}
:root:not([data-theme]) .accard.acc-all .adot{background:#55555A;color:#D6D6DA;box-shadow:0 3px 8px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}}
.walcard{cursor:pointer}
/* Кошелёк: глянцевая карта «Общий баланс» (спек) — шапка: иконка-бенто + лейбл + шеврон */
.wal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wal-hleft{display:flex;align-items:center;gap:10px;min-width:0}
.wal-hic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wal-hic svg{width:16px;height:16px;display:block}
.wal-lbl{font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wal-chev{width:18px;height:18px;flex:0 0 auto}
.walcard .wal-tot{margin:14px 0 0;font-size:34px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
/* Счета — вертикальный стек цветных карточек (каждый счёт в своём цвете) */
.acc-stack{display:flex;flex-direction:column;gap:12px;padding:0 16px;margin-top:2px}
.acc-stack .accard{width:100%;flex:0 0 auto;min-height:96px;scroll-snap-align:none}
.accard.acc-grad .acc-chip{background:rgba(255,255,255,.22);color:#fff;margin-left:2px}
.acc-add{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:18px;background:var(--card);box-shadow:var(--nm-raise-sm);color:var(--nm-label);font-size:15px;font-weight:600;cursor:pointer}
.acc-add-ic{width:34px;height:34px;border-radius:11px;background:var(--surface);box-shadow:var(--nm-inset-icon);display:flex;align-items:center;justify-content:center;color:var(--nm-icon);font-size:19px;flex:0 0 auto}
/* Глянцевый металлик — ЕДИНСТВЕННАЯ такая карта на экране (рамка/блик через inset-тень, не border) */
.walcard{border:none;border-radius:25px;
  background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),linear-gradient(135deg,#FBFBFD 0%,#E3E3E9 55%,#C6C6CD 100%);
  box-shadow:0 20px 44px rgba(40,40,55,.16),0 5px 12px rgba(40,40,55,.08),inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.9)}
.walcard:active{transform:scale(.985)}
.walcard .wal-lbl{color:#48484D}
.walcard .wal-tot{color:#1B1B1F}
.wal-chev{stroke:rgba(40,40,55,.32)}
.wal-hic{background:#fff;box-shadow:0 3px 8px rgba(40,40,55,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.wal-hic svg rect{fill:#8A8A92}
:root[data-theme="dark"] .walcard{background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),linear-gradient(135deg,#4B4B50 0%,#35353A 55%,#222225 100%);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-theme="dark"] .walcard .wal-lbl{color:#D6D6DA}
:root[data-theme="dark"] .walcard .wal-tot{color:#F5F5F6}
:root[data-theme="dark"] .wal-chev{stroke:rgba(255,255,255,.32)}
:root[data-theme="dark"] .wal-hic{background:#55555A;box-shadow:0 3px 8px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}
:root[data-theme="dark"] .wal-hic svg rect{fill:#D6D6DA}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .walcard{background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),linear-gradient(135deg,#4B4B50 0%,#35353A 55%,#222225 100%);box-shadow:0 22px 46px rgba(0,0,0,.44),0 5px 12px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
:root:not([data-theme]) .walcard .wal-lbl{color:#D6D6DA}
:root:not([data-theme]) .walcard .wal-tot{color:#F5F5F6}
:root:not([data-theme]) .wal-chev{stroke:rgba(255,255,255,.32)}
:root:not([data-theme]) .wal-hic{background:#55555A;box-shadow:0 3px 8px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}
:root:not([data-theme]) .wal-hic svg rect{fill:#D6D6DA}}
/* 6) op-иконки в лентах (История/Счёт) → серые ниши + цветная иконка (были сплошные круги) */
.op .oic{width:40px;height:40px;border-radius:14px;background:var(--icon-niche);box-shadow:var(--nm-inset-icon)}
.op .oic i{font-size:20px}
.oic-in i{color:var(--green)} .oic-out i{color:var(--nm-ctrl-ic)}
.op .op-av{width:38px;height:38px}
/* 7) суммы расхода в лентах — тёмные (приход зелёный), спек */
.op .oa.t-red{color:var(--text)}
/* Затемнение листов (scrim) по спеку */
.sheet-overlay{background:rgba(18,18,24,.46);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
:root[data-theme="dark"] .sheet-overlay{background:rgba(0,0,0,.58)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .sheet-overlay{background:rgba(0,0,0,.58)}}

/* (удалён) дубль неоморфизм-блока: он шёл ПОСЛЕ пиксель-хром-секции и перебивал её
   правки обратно на базовые — .metrichead/.authcard тени (--nm-raise-lg/--nm-raise)
   и .fi-control фон (--field). Канонный блок — выше, ДО пиксель-хром-секции. */

/* ============ Свайп-назад уровень 2: экран едет за пальцем (iOS) ============ */
/* Подложка #swipeunder — статичный HTML-снимок ПРЕДЫДУЩЕГО экрана. Вставляется ПЕРВЫМ
   ребёнком .scr → рисуется ПОД живыми слоями: навбар z10, статус-бар z11, а транс-
   формированный #view — свой стековый контекст, в DOM он позже подложки. Живые
   #navbar+#view едут за пальцем одним translateX (композитно, выставляет JS). */
#swipeunder{position:absolute;inset:0;overflow:hidden}
#swipeunder .su-stage{position:absolute;inset:0;will-change:transform}   /* параллакс-сдвиг ставит JS; GPU-слой заранее */
#swipeunder .su-view{position:absolute;inset:0;overflow:hidden}
#swipeunder .su-vi{position:absolute;left:0;right:0;padding-left:var(--safe-left);padding-right:var(--safe-right)}
#swipeunder .su-tab{position:absolute;left:0;right:0;bottom:0}  /* padding — inline, computed-копия живого #tabbar (правок у того две, копировать константы нельзя) */
#swipeunder .su-dim{position:absolute;inset:0;background:#000;pointer-events:none;will-change:opacity}
/* Движущийся живой экран: непрозрачный фон (под ним подложка!) + тень левой кромки.
   #view — на всю высоту оболочки, его тень закрывает весь левый край.
   will-change — слои в GPU до первого кадра жеста, не на нём. */
#view.sw-move{background:var(--bg);box-shadow:-4px 0 26px rgba(0,0,0,.20);will-change:transform}
body.sw-lock #navbar{will-change:transform}
/* Статус-бар в жесте: фон гасим, поверх — card-вуаль на OPACITY (composite-only):
   background-color по прогрессу красил бы полосу на КАЖДЫЙ pointermove (paint),
   opacity ::after едет на GPU. --sbp = непрозрачность вуали (1→0 по прогрессу),
   --sbd = длительность доездки (0s во время пальца). */
#statusbar.sb-hold{background:transparent;transition:none}
#statusbar.sb-hold::after{content:'';position:absolute;inset:0;background:var(--card);
  opacity:var(--sbp,1);transition:opacity var(--sbd,0s) var(--ease-out);will-change:opacity}
/* Доездка/пружина после отпускания пальца */
.sw-anim{transition:transform .24s var(--ease-out)}
.sw-anim-dim{transition:opacity .24s var(--ease-out)}
/* Во время жеста не выделять текст (длинный горизонтальный драг по тексту) */
body.sw-lock{user-select:none;-webkit-user-select:none}

/* ============ Текст в карточках: переполнение (v151) ============ */
/* Правило 1: юзерский текст в СТРОКЕ — одна строка + многоточие; деньги и бейджи
   не сжимаются (flex:0 0 auto — уже стоит по базе). Латки там, где защиты не было. */
.pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}                     /* имя товара в карточке товара */
.prow1 .pname{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* имя товара в списке у клиента (бейдж не сжимается) */
.opheadt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* «Операции · Счёт N» */
.an-t{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* имя счёта на карте (карусель/кошелёк) */
.accard .acc-chip{flex:0 0 auto}
.acc-opt .pm-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}      /* имя счёта в «Выборе счёта» */
.ttl{max-width:58%;overflow:hidden;text-overflow:ellipsis}                         /* центр-заголовок навбара (бывает имя счёта) */
/* Правило 2: «геройские» имена — до ДВУХ строк (имя/фамилия переносом), дальше многоточие */
.cnm,.dname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;overflow:hidden;overflow-wrap:anywhere}
/* Правило 3: карточка клиента компактнее — аватар меньше, имени больше места */
.cdhero .cav{flex:0 0 54px;width:54px;height:54px;font-size:18px}
.cdhero .herotop{gap:14px}

/* ============ Свечение значка-статуса (спек «icon glow», v153) ============ */
/* Статус несёт САМ ЗНАЧОК: цветной глиф + drop-shadow-гало ровно вокруг штрихов
   (НЕ box-shadow/background плитки — тот свет выходил бы за скруглённые углы).
   Плитка-ниша всегда нейтральна. Точечно: активен = зелёный, просрочка = красный,
   оплаченный = нейтральный без свечения. Для текста-инициалов аватара (список
   клиентов, просрочка) тот же приём через text-shadow — светятся только буквы. */
.glow-g i{color:#2F9653;filter:drop-shadow(0 0 3.5px rgba(54,166,90,.85))}
.glow-r i{color:#DC2626;filter:drop-shadow(0 0 3.5px rgba(220,38,38,.85))}
.av.glow-r{color:#DC2626;text-shadow:0 0 3.5px rgba(220,38,38,.85)}
:root[data-theme="dark"] .glow-g i{color:#4CC57E;filter:drop-shadow(0 0 3.5px rgba(76,197,126,.9))}
:root[data-theme="dark"] .glow-r i{color:#FF6961;filter:drop-shadow(0 0 3.5px rgba(255,105,97,.9))}
:root[data-theme="dark"] .av.glow-r{color:#FF6961;text-shadow:0 0 3.5px rgba(255,105,97,.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .glow-g i{color:#4CC57E;filter:drop-shadow(0 0 3.5px rgba(76,197,126,.9))}
  :root:not([data-theme]) .glow-r i{color:#FF6961;filter:drop-shadow(0 0 3.5px rgba(255,105,97,.9))}
  :root:not([data-theme]) .av.glow-r{color:#FF6961;text-shadow:0 0 3.5px rgba(255,105,97,.9)}
}
/* База клиентов: метка надёжности на инициалах аватара (зелёный/янтарь из спеки),
   ЧС — потухший. Селекторы кроют и список (.av), и hero карточки (.cav) — синхрон. */
.av.glow-g,.cav.glow-g{color:#2F9653;text-shadow:0 0 3.5px rgba(54,166,90,.85)}
.av.glow-a,.cav.glow-a{color:#C6820F;text-shadow:0 0 3.5px rgba(198,130,15,.8)}
.av.av-off,.cav.av-off{color:var(--nm-label)}
.cav.glow-r{color:#DC2626;text-shadow:0 0 3.5px rgba(220,38,38,.85)}
.nm-ban{color:var(--reds);font-size:14px;margin-left:5px;vertical-align:-1px}
:root[data-theme="dark"] .av.glow-g,:root[data-theme="dark"] .cav.glow-g{color:#4CC57E;text-shadow:0 0 3.5px rgba(76,197,126,.9)}
:root[data-theme="dark"] .av.glow-a,:root[data-theme="dark"] .cav.glow-a{color:#FF9F0A;text-shadow:0 0 3.5px rgba(255,159,10,.85)}
:root[data-theme="dark"] .cav.glow-r{color:#FF6961;text-shadow:0 0 3.5px rgba(255,105,97,.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .av.glow-g,:root:not([data-theme]) .cav.glow-g{color:#4CC57E;text-shadow:0 0 3.5px rgba(76,197,126,.9)}
  :root:not([data-theme]) .av.glow-a,:root:not([data-theme]) .cav.glow-a{color:#FF9F0A;text-shadow:0 0 3.5px rgba(255,159,10,.85)}
  :root:not([data-theme]) .cav.glow-r{color:#FF6961;text-shadow:0 0 3.5px rgba(255,105,97,.9)}
}
/* «Все данные»: hero (аватар+ФИО) в карточке, карандаш «Изменить» в её углу */
.biohero-card{position:relative;background:var(--card);box-shadow:var(--nm-raise);
  border:1px solid var(--nm-edge);border-radius:22px;margin:18px 16px 0;padding:22px 20px 20px}
.bio-edit{position:absolute;top:14px;right:14px}
/* Отступ списка «Клиентов» от сегмента (карточка не липнет к переключателю) */
.seg + .list,.seg + .olist{margin-top:14px}
/* Чип-фильтр срезов Базы (под сегментом) */
.basebar{display:flex;gap:8px;padding:12px 16px 0}
.bfchip{display:flex;align-items:center;gap:7px;height:33px;padding:0 13px;border-radius:12px;
  background:var(--card);box-shadow:var(--nm-raise-sm);border:1px solid var(--nm-edge);
  font-size:13px;font-weight:700;color:var(--text);font-family:inherit;cursor:pointer}
.bfchip i{font-size:15px;color:var(--nm-ctrl-ic)}
.bfchip .bfc-ch{font-size:13px;color:var(--nm-label)}
.bfchip:active{transform:scale(.96)}
/* Лист «Из базы» (повторная продажа) + строка «Выбрать из базы» в форме */
.bp-search{margin:2px 0 10px}
.bp-list{max-height:46vh;overflow-y:auto;scrollbar-width:none}
.bp-list::-webkit-scrollbar{display:none}
.bp-item{gap:12px}
.bp-av{width:36px;height:36px;flex:0 0 36px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.bp-nm{font-size:15.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.basepick{margin:8px 0 16px;cursor:pointer}
/* Буквы-разделители Базы (алфавит по фамилии): липкие под шапкой. Фон ПРОЗРАЧНЫЙ —
   сплошная плашка во всю ширину резала мягкие тени соседних карточек. Читаемость при
   залипании поверх карточки держит ореол цветом фона (text-shadow). */
.bl-head{position:sticky;top:var(--blh-top,0px);z-index:4;background:transparent;pointer-events:none;
  font-size:13px;font-weight:800;letter-spacing:.4px;color:var(--nm-label);
  padding:9px 20px 5px;margin-top:2px;
  text-shadow:0 0 5px var(--bg),0 0 5px var(--bg),0 0 3px var(--bg)}
.list .bl-head:first-child{margin-top:0}