/* Интерфейс приложения EMoney. Цвета и размеры — из tokens.css, здесь только
   компоненты. Правила: docs/DESIGN.md. Образец: docs/audit/ios_prototype.html.

   Стили общие для всех трёх пространств — операции, партнёрский кабинет и
   кабинет клиента. Новый раздел берёт готовые компоненты, а не пишет свои.
*/
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
/* Единый вход в отчёты. Цвета наследуются от активной темы. */
.an-wrap{padding:0 var(--gap) 24px}
.an-entry{margin:8px var(--gap) 18px;padding:2px 12px 10px;background:var(--go-tint);border-radius:var(--r-card)}
.an-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:14px 0;cursor:pointer;font:inherit}
.an-link strong{display:block;font-size:18px;line-height:1.3}
.an-link small{display:block;color:var(--ink-2);font-size:13px;line-height:1.4;margin-top:4px}
.an-link svg{width:20px;height:20px;flex-shrink:0;color:var(--go-text)}
.an-shortcuts{display:flex;flex-wrap:wrap;gap:6px 16px}
.an-shortcuts button,.an-refresh,.an-unavailable button{border:0;background:none;font:inherit;color:var(--go-text);padding:10px 0;min-height:44px;cursor:pointer}
.an-shortcuts button{font-size:14px;font-weight:600}
.an-intro,.an-note{font-size:13px;line-height:1.5;color:var(--ink-2);margin:8px 0 16px;max-width:70ch}
.an-section{padding:8px 0 22px;border-bottom:1px solid var(--sep);margin-bottom:8px}
.an-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin:10px 0 20px}
.an-metric{min-width:0;font-variant-numeric:tabular-nums}
.an-metric>span,.an-metric small{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.an-metric strong{display:block;font-size:24px;font-weight:650;line-height:1.3;margin-top:4px;overflow-wrap:anywhere}
.an-trend{margin:18px 0 22px;font-variant-numeric:tabular-nums}
.an-trend figcaption{font-size:15px;font-weight:600;margin-bottom:10px}
.an-trend>svg{display:block;width:100%;height:auto;max-height:240px;overflow:visible}
.an-grid{stroke:var(--sep);fill:none;stroke-width:1}
.an-line{stroke:var(--go-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.an-dot{fill:var(--go-text)}
/* Каждой метрике — свой сдержанный тон из палитры графиков (tokens.css).
   Графики аналитики живут в том же plotwrap, что и графики курсов, —
   один компонент, тон задаётся классом на обёртке. */
.t1 .an-line,.plotwrap.t1 .wave{stroke:var(--ch-1)} .t1 .an-dot,.t1 .an-bar,.plotwrap.t1 .pt,.plotwrap.t1 .area{fill:var(--ch-1)}
.t2 .an-line,.plotwrap.t2 .wave{stroke:var(--ch-2)} .t2 .an-dot,.t2 .an-bar,.plotwrap.t2 .pt,.plotwrap.t2 .area{fill:var(--ch-2)}
.t3 .an-line,.plotwrap.t3 .wave{stroke:var(--ch-3)} .t3 .an-dot,.t3 .an-bar,.plotwrap.t3 .pt,.plotwrap.t3 .area{fill:var(--ch-3)}
.t4 .an-line,.plotwrap.t4 .wave{stroke:var(--ch-4)} .t4 .an-dot,.t4 .an-bar,.plotwrap.t4 .pt,.plotwrap.t4 .area{fill:var(--ch-4)}
.t5 .an-line,.plotwrap.t5 .wave{stroke:var(--ch-5)} .t5 .an-dot,.t5 .an-bar,.plotwrap.t5 .pt,.plotwrap.t5 .area{fill:var(--ch-5)}
.an-bar{opacity:.85}
.plotwrap .area{opacity:.10}
/* Живая точка: конец линии дышит текущим показателем (все графики). */
.live-ring{fill:none; stroke:var(--go); stroke-width:1.6; pointer-events:none;
  transform-box:fill-box; transform-origin:center;
  animation:live-ring 1.6s ease-out infinite}
.plotwrap.t1 .live-ring{stroke:var(--ch-1)} .plotwrap.t2 .live-ring{stroke:var(--ch-2)}
.plotwrap.t3 .live-ring{stroke:var(--ch-3)} .plotwrap.t4 .live-ring{stroke:var(--ch-4)}
.plotwrap.t5 .live-ring{stroke:var(--ch-5)}
@keyframes live-ring{0%{transform:scale(.55); opacity:.85} 100%{transform:scale(2.6); opacity:0}}
@media (prefers-reduced-motion:reduce){.live-ring{animation:none; opacity:0}}

/* Незавершённый день: последний отрезок пунктиром, точка полая. */
.plotwrap .wave.dashed{stroke-dasharray:3 4; opacity:.7}
.plotwrap .pt.hollow{fill:var(--bg-2); stroke-width:1.6}
.plotwrap.t1 .pt.hollow{stroke:var(--ch-1)} .plotwrap.t2 .pt.hollow{stroke:var(--ch-2)}
.plotwrap.t3 .pt.hollow{stroke:var(--ch-3)} .plotwrap.t4 .pt.hollow{stroke:var(--ch-4)}
.plotwrap.t5 .pt.hollow{stroke:var(--ch-5)}
/* Внутри отчётов plotwrap и разбор не добавляют боковых полей: их даёт an-wrap. */
.an-wrap .plotwrap.boxed,.an-wrap .pananal{margin-left:0; margin-right:0}
/* Разделы отчёта отделены линией и воздухом (Эдуард 22.09: «разделение
   между разделами не видно») — каждый заголовок начинает свой блок. */
.an-wrap .an-breakdown{border-top:1px solid var(--sep-solid); padding-top:18px; margin-top:30px}
.an-wrap .an-method{border-top:1px solid var(--sep-solid); padding-top:14px; margin-top:28px}
.an-wrap .an-trend{margin:26px 0 10px}
.an-wrap .an-trend figcaption{font-size:16px}
.an-wrap .plotmeta{display:flex; gap:12px; flex-wrap:wrap; font-size:12px;
  color:var(--ink-3); margin:0 0 6px; font-variant-numeric:tabular-nums}
.an-wrap .plotwrap .plot{height:136px}
.an-delta{font-weight:600}
.an-delta.up{color:var(--st-fin-ink)} .an-delta.down{color:var(--st-stop-ink)}
.an-delta.flat{color:var(--ink-3)}
.an-trend text{fill:var(--ink-2);font:11px system-ui}
.an-axis{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-2)}
.an-periods{display:flex;gap:4px;margin:8px 0 20px;flex-wrap:wrap}
.an-periods button{border:0;background:none;color:var(--ink-2);font:inherit;font-size:14px;padding:10px 14px;min-height:44px;border-radius:8px;cursor:pointer}
.an-periods button.on{color:var(--go-text);background:var(--go-tint);font-weight:600}
.an-data summary,.an-method summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--go-text);font-size:13px}
.an-data summary::before,.an-method summary::before{content:'+';width:18px;font-weight:600}
.an-data[open] summary::before,.an-method[open] summary::before{content:'−'}
.an-table-wrap{max-height:300px;overflow:auto}
.an-data table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink-2)}
.an-data th,.an-data td{text-align:right;padding:8px 2px;border-bottom:1px solid var(--sep)}
.an-data th:first-child,.an-data td:first-child{text-align:left}
.an-breakdown{margin:28px 0}
.an-breakdown h2{font-size:17px;margin:0 0 10px}
.an-break-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--sep);font-size:14px}
.an-break-row>span{min-width:0;overflow-wrap:anywhere}
.an-break-row strong{flex-shrink:0;font-variant-numeric:tabular-nums}
.an-break-row small{font-weight:400;color:var(--ink-2)}
/* Источники: категория с полосой доли своего тона, площадки — вложенными
   строками. Цвет здесь — подсказка глазу, слово и число всегда рядом. */
.an-src{padding:10px 0 12px;border-bottom:1px solid var(--sep)}
.an-src-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14.5px}
.an-src-top strong{flex-shrink:0;font-variant-numeric:tabular-nums}
.an-src-top strong small{font-weight:400;color:var(--ink-2)}
.an-src-hint{font-size:12.5px;color:var(--ink-3);margin-top:1px;max-width:60ch}
.an-share{height:4px;border-radius:2px;background:var(--wait-tint);margin-top:8px;overflow:hidden}
.an-share i{display:block;height:100%;border-radius:2px;background:var(--ink-3)}
.an-src.t1 .an-share i{background:var(--ch-1)}
.an-src.t2 .an-share i{background:var(--ch-2)}
.an-src.t3 .an-share i{background:var(--ch-3)}
.an-src.t4 .an-share i{background:var(--ch-4)}
.an-src.t5 .an-share i{background:var(--ch-5)}
.an-src-refs{margin-top:8px;display:grid;gap:2px}
.an-src-ref{display:flex;justify-content:space-between;gap:12px;padding:4px 0 4px 14px;font-size:13.5px;color:var(--ink-2)}
.an-src-ref b{font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.an-src-ref span{font-variant-numeric:tabular-nums;flex-shrink:0}
.an-method{font-size:13px;line-height:1.5;color:var(--ink-2)}
.an-status{font-weight:600;font-size:15px;margin:16px 0}
.an-status small{display:block;font-weight:400;color:var(--ink-2);margin-top:4px}
.an-stale{color:var(--stop)}
.an-unavailable{font-size:14px;padding:16px 0;color:var(--ink-2)}
.an-wrap button:focus-visible,.an-entry button:focus-visible,.an-wrap summary:focus-visible{outline:2px solid var(--go-text);outline-offset:3px}
@media(hover:hover){.an-link:hover strong,.an-shortcuts button:hover{text-decoration:underline;text-underline-offset:4px}}
@media(min-width:700px){.an-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.an-section .an-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
/* ── оболочка ──
   Единственное, что закреплено на экране. Внутри неё всё остальное
   позиционируется от неё же, поэтому таб-бару и листам достаточно
   обычного absolute: они часть оболочки и никуда от неё не денутся.
   Высота по dvh: адресная строка Safari то появляется, то уезжает, и
   процент от окна скачет вместе с ней. */
.app{position:fixed; inset:0; height:100dvh; overflow:hidden}

/* ── стек экранов ── */
.stack{position:absolute; inset:0; overflow:hidden}
/* Никакой полосы сверху — но список, уезжая под системное время и вырез,
   делал их нечитаемыми. Вместо панели тонкое затухание у самого края:
   контент под ним размывается и тает, а часы и батарея остаются видны. */
.edge-top{position:absolute; top:0; left:0; right:0; height:max(env(safe-area-inset-top), 14px); z-index:52;
  pointer-events:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(to bottom, #000 42%, transparent);
  mask-image:linear-gradient(to bottom, #000 42%, transparent)}
.screen{position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column;
  transform-origin:top center}
/* Стекло бессмысленно над плоской заливкой — размывать нечего. Мягкие пятна
   света под слоями и дают ту глубину, ради которой стекло затевается.
   Свет намеренно неподвижен: под ним лежат стеклянные слои, а движущийся фон
   заставлял бы пересчитывать размытие каждый кадр — на телефоне это заметно. */
.screen::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(135% 72% at 6% -12%, var(--glow-1), transparent 58%),
    radial-gradient(115% 62% at 112% 10%, var(--glow-2), transparent 55%),
    radial-gradient(110% 70% at 46% 112%, var(--glow-3), transparent 60%)}
/* Затемнение экрана, оставшегося позади. Через непрозрачность наложения, а
   не через filter:brightness — фильтр заставляет перерисовывать весь слой
   каждый кадр, а тут меняется одно число у элемента, который и так поверх. */
/* Экран, оставшийся позади, слегка притухает. Переход ведёт CSS — слой
   складывается на видеокарте и не перерисовывается. Значение --dim остаётся
   для жеста: пока палец тянет экран назад, затемнение следует за рукой. */
.screen.dim::after{content:""; position:absolute; inset:0; background:#000;
  opacity:var(--dim, 0); pointer-events:none; z-index:40;
  transition:opacity var(--duration-slow) var(--out)}
.screen.behind::after{opacity:.12}
.screen.behind{transition:none}

/* ── навигационная шапка ── */
/* Ничего не прилипает: шапка уезжает вместе со списком и освобождает экран
   целиком. Вернуться назад можно жестом от левого края — он работает всегда,
   в том числе когда кнопка уже уехала. */
/* Отступ сверху — от настоящего выреза устройства: в браузере без чёлки
   жёсткие 52px были пустым полем над заголовком. */
.nav{padding:max(env(safe-area-inset-top), 14px) 0 0; background:transparent}
.nav-bar{min-height:44px; display:flex; align-items:center; padding:0 8px; gap:2px}
.nav-back{display:flex; align-items:center; gap:2px; border:0; background:none; color:var(--go-text);
  font:inherit; font-size:17px; padding:4px 6px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .18s var(--out)}
.nav.has-back .nav-back{opacity:1; pointer-events:auto}
.nav-back svg{width:12px; height:20px}
.nav-mid{flex:1; text-align:right; font-size:12.5px; color:var(--ink-3);
  letter-spacing:-.004em; font-variant-numeric:tabular-nums}
.nav-act{border:0; background:none; color:var(--go-text); font:inherit; font-size:17px; padding:4px 8px;
  cursor:pointer}
.large{padding:0 0 3px; font-size:22px; font-weight:700; letter-spacing:-.032em; line-height:1.12;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}

/* ── содержимое ── */
.body{position:relative; z-index:10; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 0 calc(96px + max(env(safe-area-inset-bottom), 20px));
  overscroll-behavior:contain}

.sub-line{padding:0 18px 4px; font-size:13px; color:var(--ink-3); letter-spacing:-.006em}
.sec{font-size:13px; font-weight:500; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.05em; padding:18px 20px 6px}
.group{background:var(--group); margin:0 14px; border-radius:var(--r-card); overflow:hidden;
  /* Размытия здесь нет намеренно. Под плиткой лежит ровный фон экрана —
     размывать нечего, а стоит это дорого: браузер пересчитывает область
     каждый кадр, пока экран движется, и таких плиток на экране полдюжины.
     Стекло имеет смысл только там, где под ним и правда что-то есть:
     таб-бар и лист лежат над содержимым. */
  border:.5px solid var(--glass-edge); position:relative}
/* Верхняя кромка ловит свет, как настоящее стекло. Без неё слой читается
   просто как полупрозрачный прямоугольник. */
.group::after{content:""; position:absolute; top:0; left:12px; right:12px; height:.5px;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  pointer-events:none}
.item{display:flex; align-items:center; gap:11px; padding:9px 14px; position:relative;
  cursor:pointer; background:transparent; transition:background .12s var(--out)}
.item:active{background:var(--sep-solid)}
.item[role="button"]{min-height:44px}
.val.trunc{max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item + .item::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px;
  background:var(--sep)}
.item .txt{flex:1; min-width:0}
.item .t{font-size:16px; letter-spacing:-.016em}
.item .s{font-size:12.5px; color:var(--ink-3); margin-top:0; letter-spacing:-.006em}
.item .val{font-size:16px; color:var(--ink-3); letter-spacing:-.016em; font-variant-numeric:tabular-nums}
.chev{width:8px; height:13px; flex-shrink:0; color:var(--ink-4)}
.badge{min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:var(--stop);
  color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center;
  justify-content:center; letter-spacing:-.01em}
.badge.q{background:var(--ink-4); color:var(--bg-2)}

/* ── строка дела ── */
.task{padding:10px 14px; background:transparent; position:relative; cursor:pointer}
.task + .task::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--sep)}
.task:active{background:var(--sep-solid); transform:scale(.988)}
.task{transition:background .12s var(--out), transform .12s var(--out)}
.task .top{display:flex; align-items:baseline; gap:8px}
.task .num{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.task .who{font-size:16px; font-weight:590; letter-spacing:-.016em; flex:1}
.task .amt{font-size:19px; font-weight:640; letter-spacing:-.028em; margin-top:1px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.task .sub{font-size:12.5px; color:var(--ink-3); margin-top:5px; letter-spacing:-.006em;
  display:flex; align-items:center}
.pill{display:inline-flex; align-items:center; font-size:13px; font-weight:590; padding:2px 8px;
  border-radius:20px; letter-spacing:-.01em}
.p-go{background:var(--go-tint); color:var(--go-text); font-weight:640}
.p-wait{background:var(--wait-tint); color:var(--wait)}
.p-new{background:var(--new-tint); color:var(--new)}
.p-stop{background:var(--stop-tint); color:var(--stop)}

/* ── плитки сумм ── */
.legs{margin:0 14px 10px; background:var(--group); border-radius:var(--r-card); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; border:.5px solid var(--glass-edge);
  position:relative}
.legs::after{content:""; position:absolute; top:0; left:12px; right:12px; height:.5px;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent); pointer-events:none}
.leg{padding:11px 14px}
.leg + .leg{box-shadow:inset .5px 0 0 var(--sep)}
.leg .l{font-size:13px; color:var(--ink-3); letter-spacing:0}
.leg .v{font-size:21px; font-weight:660; letter-spacing:-.032em; margin-top:2px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.leg .m{font-size:12.5px; color:var(--ink-3); margin-top:1px}

/* Досье клиента: факты и кнопки связи — одна плашка, а не россыпь блоков. */
.legs.dossier .leg:nth-child(3){box-shadow:none}
.legs.dossier .leg:nth-child(3),.legs.dossier .leg:nth-child(4){border-top:.5px solid var(--sep)}
.legs.dossier .reach{grid-column:1/-1; display:flex; gap:8px; padding:10px 12px 12px;
  border-top:.5px solid var(--sep)}
.reach>a,.reach>button{flex:1; min-width:0; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; gap:7px; border:0; border-radius:12px;
  background:var(--bg); color:var(--ink); font:inherit; font-size:14.5px; font-weight:600;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.reach>a:active,.reach>button:active{transform:scale(.97)}
.reach .go-tg{background:var(--go); color:var(--go-ink)}
.reach svg{width:17px; height:17px; flex:none}
@media (hover:hover) and (pointer:fine){
  .reach>a:hover,.reach>button:hover{background:var(--sep-solid)}
  .reach .go-tg:hover{background:var(--go)}
}

/* Кнопки идут в потоке. Раньше .act-wrap липла к низу (position:sticky) —
   пока действие было одно, это работало; когда на карточке сделки их стало
   четыре, все четыре слиплись в одну кучу поверх содержимого. */
.act-wrap{margin:14px}
.act-wrap + .act-wrap{margin-top:-6px}
.act{width:100%; border:0; border-radius:13px; padding:14px; background:var(--go); color:var(--go-ink);
  font:inherit; font-size:16px; font-weight:620; letter-spacing:-.018em; cursor:pointer;
  transition:transform .1s ease-out, opacity .1s}
.act:active{transform:scale(.975); opacity:.9}
.act.quiet{background:var(--group); color:var(--go-text)}
.act.warn{background:var(--group); color:var(--stop)}

/* ── таб-бар ── */
.tabs{position:absolute; left:0; right:0; bottom:0; z-index:50;
  height:calc(56px + max(env(safe-area-inset-bottom), 20px));
  background:var(--chrome); backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px); box-shadow:0 -.5px 0 var(--sep);
  display:flex; padding-bottom:max(env(safe-area-inset-bottom), 20px)}
.tab{flex:1; border:0; background:none; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding-top:8px; color:var(--ink-3); cursor:pointer; font:inherit; font-size:10px;
  letter-spacing:-.01em; position:relative}
.tab svg{width:26px; height:26px}
.tab.on{color:var(--go-text)}
.tab.on svg{filter:drop-shadow(0 0 9px var(--go-tint))}
.tab .dot{position:absolute; top:6px; left:calc(50% + 7px); width:8px; height:8px;
  background:var(--stop); border-radius:50%}

/* ── лист ── */
/* Затемнение под листом. Размытие делает границу между слоями настоящей:
   без него лист лежит НА картинке, с ним — над ней. Прозрачность ведёт JS,
   потому что во время перетаскивания она следует за пальцем. */
.scrim{position:absolute; inset:0; background:var(--scrim); z-index:70; opacity:0;
  pointer-events:none; will-change:opacity}
/* Размытие включается вместе с листом. Пока лист закрыт, слой невидим, но
   существует — и полноэкранный backdrop-filter на нём пересчитывался при
   каждом движении под ним. */
.scrim.on{pointer-events:auto; backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:71; background:var(--sheet);
  backdrop-filter:blur(34px) saturate(180%); -webkit-backdrop-filter:blur(34px) saturate(180%);
  border-top:.5px solid var(--glass-edge);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0; transform:translateY(100%);
  max-height:88%; display:flex; flex-direction:column; will-change:transform;
  /* Пока лист закрыт, его не должно существовать для глаза: translateY
     уводит его вниз, но при оттягивании страницы Safari показывает всё, что
     лежит за краем — видна была ручка и жёлтая кнопка под таб-баром. */
  visibility:hidden;
  box-shadow:0 -1px 24px rgba(0,0,0,.18)}
.sheet.on{visibility:visible}
.screen.sheet-depth{border-radius:14px; overflow:hidden}
.grab,.sheet-h{touch-action:none}
.grab{width:36px; height:5px; background:var(--ink-4); border-radius:3px; margin:6px auto 0;
  flex-shrink:0}
.sheet-h{padding:10px 18px 9px; font-size:19px; font-weight:680; letter-spacing:-.028em;
  flex-shrink:0}
.sheet-b{padding:0 16px 8px; overflow-y:auto; overscroll-behavior:contain}
.sheet-f{padding:8px 16px calc(16px + max(env(safe-area-inset-bottom), 12px)); flex-shrink:0}
.opt{display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--group);
  position:relative; cursor:pointer; font-size:17px; letter-spacing:-.02em}
.opt + .opt::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--sep)}
.opt .tick{width:20px; color:var(--go-text); opacity:0; font-size:17px}
.opt.on .tick{opacity:1}
.fld{background:var(--group); padding:9px 14px; position:relative}
.fld + .fld::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--sep)}
.fld label{display:block; font-size:13px; color:var(--ink-3); letter-spacing:-.01em}
.fld input{width:100%; border:0; background:none; color:var(--ink); font:inherit; font-size:17px;
  letter-spacing:-.02em; padding:2px 0 0; outline:none; font-variant-numeric:tabular-nums}
/* Внутри листа стекла нет: лист сам уже размывает то, что под ним, а второй
   слой размытия только мылит текст. Внутренние блоки — обычная подложка. */
.rounded{margin:0 0 14px; border-radius:var(--r-card); overflow:hidden;
  background:var(--sep-solid); border:.5px solid var(--sep)}
.sheet .group{backdrop-filter:none; -webkit-backdrop-filter:none;
  background:var(--sep-solid)}

.empty{text-align:center; color:var(--ink-3); font-size:15px; padding:60px 40px; line-height:1.5}
@media (prefers-reduced-motion:reduce){
  /* Убираем перемещение, но оставляем прозрачность и цвет: они объясняют,
     что происходит, и головокружения не вызывают. */
  .screen{transition:none!important}
  .task:active{transform:none}
  .act:active{transform:none}
}

/* ── четыре состояния экрана ─────────────────────────────────────────
   Экран не готов, пока не нарисованы все: пусто, загрузка, ошибка, нет прав. */
.state{padding:64px 32px; text-align:center}
.state-i{font-size:30px; color:var(--ink-3); margin-bottom:12px}
.state-t{font-size:17px; letter-spacing:-.02em; margin-bottom:6px}
.state-s{font-size:14px; color:var(--ink-3); line-height:1.45}
.state-note{margin:0 14px 12px; padding:11px 14px; border-radius:var(--r-card);
  background:var(--wait-tint); color:var(--ink-2); font-size:13.5px; line-height:1.4}

/* Скелет вместо крутилки: глаз заранее видит форму будущего списка. */
/* Заглушки на время ожидания. Блик идёт слева направо — так видно, что
   система работает, а не замерла. Мигание прозрачностью, которое было
   раньше, читается скорее как неисправность. */
.sk{position:relative; overflow:hidden; border-radius:5px; height:11px; margin:7px 0;
  background:var(--sep-solid)}
.sk::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  opacity:.5; transform:translateX(-100%);
  animation:блик 1.25s var(--timing-smooth) infinite}
.sk-big{height:19px; margin:9px 0}
/* Заглушки под будущую форму: строка списка и график. */
.sk-row{height:15px; margin:12px 14px}
.sk-row.short{width:42%}
.sk-row.mid{width:68%}
.sk-chart{height:88px; margin:10px 14px; border-radius:var(--r-card)}
@keyframes блик{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none; opacity:.25}}

/* ── 3. Изменение курса ──
   Курс обновляется сам, и человек может смотреть в другое место. Короткая
   подсветка говорит, что число изменилось, и в какую сторону. Цвет —
   единственный признак, поэтому рядом всегда стоит стрелка. */
/* Вспышка мгновенная, затухание плавное — одной анимацией, а не переходом.
   Переход тут не годится: браузер применяет новое значение transition уже
   после смены свойства, и подсветка либо не зажигается плавно, либо остаётся
   гореть навсегда. Анимация описывает всё поведение целиком: зажечь,
   подержать, погасить за 300 мс. */
.live{font-variant-numeric:tabular-nums; border-radius:6px; padding:1px 4px; margin:0 -4px;
  background-color:transparent}
.live.up{animation:вспышка-вверх .7s var(--timing-smooth)}
.live.down{animation:вспышка-вниз .7s var(--timing-smooth)}
@keyframes вспышка-вверх{
  0%, 57%{background-color:var(--go-tint)}
  100%{background-color:transparent}}
@keyframes вспышка-вниз{
  0%, 57%{background-color:var(--stop-tint)}
  100%{background-color:transparent}}
@media (prefers-reduced-motion:reduce){
  .live.up, .live.down{animation:none}}
.live .dir{font-size:12px; margin-left:3px; opacity:.85}

/* ── 4. Строка, сменившая состояние ──
   Заявка не исчезает рывком: сначала окрашивается в цвет нового состояния,
   и только потом уходит. Так видно, что именно произошло. */
.item.done, .task.done{background:var(--go-tint);
  transition:background-color var(--duration-normal) var(--timing-smooth)}
.item.stopped, .task.stopped{background:var(--stop-tint);
  transition:background-color var(--duration-normal) var(--timing-smooth)}

.sheet-note{margin:0 4px 12px; color:var(--ink-3); font-size:14.5px; line-height:1.45}
.sheet-err{margin:0 0 12px; padding:11px 14px; border-radius:var(--r-card);
  background:var(--stop-tint); color:var(--stop); font-size:14px; line-height:1.4}
.act.quiet{background:var(--sep-solid); color:var(--ink)}
.act:disabled{opacity:.5}
.content{min-height:40vh}

/* Полоса быстрых фильтров: прокручивается вбок, чтобы не переносить строки. */
/* Полоса вкладок прокручивается вбок, но по обрезанному краю не понять,
   есть ли там что-то ещё. Маска показывает: полоса продолжается — у карточки
   сделки за краем живут «Переписка» и «Заметки», и их просто не находили. */
.chips{display:flex; gap:7px; overflow-x:auto; padding:4px 14px 12px;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
/* Палец не попадает в 34 пикселя: Apple просит 44, и это не придирка —
   «Одобрить» и «Отказать» стоят рядом, а промах здесь стоит денег.
   Видимая высота остаётся прежней, растёт только область нажатия. */
.chip{flex-shrink:0; border:0; font:inherit; font-size:14px; letter-spacing:-.01em;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:7px 14px; border-radius:20px; background:var(--sep-solid); color:var(--ink-2);
  cursor:pointer; transition:background .12s var(--out), color .12s var(--out)}
.chip.on{background:var(--go); color:var(--go-ink); font-weight:600}

/* ── подгрузка списка ──
   Длинные списки (665 клиентов, 1043 расчёта) грузятся кусками. Кнопка
   намеренно не жёлтая: жёлтое на экране — это действие с деньгами, а не
   «покажи ещё». */
.more{width:calc(100% - 28px); margin:6px 14px 4px; border:0; border-radius:13px;
  padding:13px; background:var(--group); color:var(--ink-2);
  font:inherit; font-size:15px; letter-spacing:-.01em; cursor:pointer;
  transition:transform .1s ease-out, opacity .1s}
.more:active{transform:scale(.985); opacity:.85}
.more[disabled]{opacity:.5}

/* ── поиск ──
   Стеклом не делаем: поле лежит внутри списка, а стекло на стекле
   превращается в серый прямоугольник (DESIGN.md §5). */
.search{margin:2px 14px 10px}
.search input{width:100%; border:0; border-radius:12px; padding:12px 14px;
  background:var(--group); color:var(--ink); font:inherit; font-size:16px;
  letter-spacing:-.01em}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:2px solid var(--go); outline-offset:-2px}

/* ── столбик объёма ──
   Полоса под строкой вместо графика: она показывает соотношение дней, не
   требуя ни библиотеки, ни холста, и остаётся видимой в списке. */
.bar{height:3px; border-radius:2px; background:var(--sep); margin-top:7px; overflow:hidden}
.bar span{display:block; height:100%; border-radius:2px; background:var(--go); opacity:.55}


/* Пояснение под списком: почему так, что делать дальше. Отдельный класс,
   потому что раньше отступ прописывался прямо в разметке несуществующим
   токеном — и текст прижимался к краю экрана. */
.hint{padding:2px var(--gap-lg) 10px; margin:0; font-size:13.5px; line-height:1.45;
  color:var(--ink-3); letter-spacing:-.006em}

/* Поле ввода в списке — многострочное. Те же правила, что у .search input. */
.area{width:100%; border:0; border-radius:12px; padding:12px 14px; background:var(--group);
  color:var(--ink); font:inherit; font-size:16px; line-height:1.4; resize:vertical}
.area:focus{outline:2px solid var(--go); outline-offset:-2px}


/* ── звёзды отзыва ──
   Векторные: эмодзи-звезда зависит от системного шрифта и не красится
   токеном — на одном телефоне жёлтая, на другом контурная. */
.stars{display:inline-flex; gap:2px; vertical-align:-2px}
.star{width:14px; height:14px; fill:var(--ink-4)}
.star.on{fill:var(--go-text)}

/* Нажатие должно быть видно везде, где можно нажать: без отклика человек
   жмёт второй раз, думая, что не попал. */
.chip:active{opacity:.7}
.more:active{opacity:.85}

/* ── видимый фокус ──
   Обвод был только у полей ввода. Кнопки, строки списка и вкладки его не
   показывали — с клавиатуры (а ей пользуются не только программисты:
   внешняя клавиатура к планшету, переключатель для людей с моторными
   ограничениями) было не понять, где ты находишься.
   :focus-visible, а не :focus — чтобы обвод не вспыхивал от касания. */
.act:focus-visible,
.chip:focus-visible,
.more:focus-visible,
.tab:focus-visible,
.item:focus-visible,
.task:focus-visible,
.nav-back:focus-visible{outline:2px solid var(--go-text); outline-offset:2px;
  border-radius:10px}

/* ── отключено ──
   Прозрачности мало: она читается как «бледная кнопка», а не «нажимать
   нечего». Курсор и отсутствие отклика говорят прямее. */
.act:disabled,
.chip:disabled,
.more[disabled]{opacity:.45; cursor:default}
.act:disabled:active,
.chip:disabled:active{transform:none; opacity:.45}


/* ── длинные значения без пробелов ──
   Хеш платежа, адрес кошелька, токен расчёта — сплошная строка в полсотни
   знаков. Без правила переноса она вылезает за границу строки и молча
   обрезается: человек видит начало и не знает, что там дальше.
   overflow-wrap:anywhere только для значений, не для всей прозы — иначе
   обычный текст начнёт рваться посреди слов. */
.item .s,
.item .val,
.txt .t{overflow-wrap:anywhere; min-width:0}

/* Сумма справа не должна сжиматься до многоточия из-за длинного соседа:
   ради неё строку и открывают. */
.item .val{flex-shrink:0}


/* ── сколько заявка стоит без движения ──
   В группах «Застряли» и «Заброшены» это главная цифра: она объясняет,
   почему заявка тут. Красную метку рядом убрал — заголовок группы говорит
   то же самое, а два одинаковых сигнала подряд перестают читаться. */
.since{margin-left:7px; color:var(--ink-3)}
.since.long{color:var(--ink-2); font-weight:560}

/* ── процент наценки ──
   Главное число ступени. Раньше оно жило в подписи мелким серым, хотя
   ради него на экран и заходят. */
.pct{font-size:19px; font-weight:640; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-left:auto; padding-left:10px}

/* Предупреждение о деньгах — не подпись вполголоса. */
.state-note.warn{background:var(--stop-tint); color:var(--stop)}

/* ══ состояния появления и ухода ══════════════════════════════════════
   Переход описан здесь, а JS только вешает класс. Когда длительность и
   кривая живут в JS, они расходятся с остальным интерфейсом и правятся в
   двух местах вместо одного. */
/* Смена вкладки: новый экран проявляется и встаёт на место, чуть подрастая.
   Масштаб, а не сдвиг: transform не трогает раскладку, поэтому ничего не
   дёргается и не пересчитывается. 0.98 — почти незаметно глазу, но разница
   между «возникло» и «появилось» именно в этих двух процентах. */
.is-entering{opacity:0; transform:scale(.98)}
.is-in{opacity:1; transform:scale(1);
  transition:opacity var(--duration-fast) var(--timing-smooth),
             transform var(--duration-fast) var(--timing-smooth)}
/* Уходящий экран не ждёт, пока приедет новый: их движение перекрывается,
   иначе на кадр остаётся пустота. */
.is-leaving{opacity:0; transform:scale(.98);
  transition:opacity 120ms var(--timing-smooth), transform 120ms var(--timing-smooth)}

/* Содержимое, которое сменяется на месте: вкладка карточки, период CRM. */
.is-updating{opacity:.7; transition:opacity var(--duration-fast) var(--out)}
.content,.client-body,#crm-body{transition:opacity var(--duration-fast) var(--out)}

/* Строка, которую убрали: разобранная заявка, одобренный партнёр. Мгновенное
   исчезновение читается как сбой — непонятно, сработало нажатие или нет. */
/* Уходящая строка сжимается по высоте, а не просто гаснет. Без этого она
   пропадает из потока разом, и все строки под ней прыгают вверх рывком —
   именно это и читается как «кривая анимация».
   Высоту знает только JS (она зависит от содержимого), поэтому он ставит её
   один раз в --h перед уходом. Это подготовка, а не покадровая правка:
   дальше всё делает CSS. */
.leaving{
  max-height:var(--h, 120px); opacity:1; overflow:hidden;
  animation:уход 200ms var(--timing-smooth) forwards}
@keyframes уход{
  /* Гаснет и сжимается одновременно, с небольшим перехлёстом: прозрачность
     уходит быстрее высоты, поэтому строка не «схлопывается видимой».
     Раньше эти две фазы шли друг за другом — четверть секунды на одну
     строку, и это ощущалось долгим. */
  0%{opacity:1; transform:scale(1); max-height:var(--h, 120px)}
  40%{opacity:0; transform:scale(.99)}
  100%{opacity:0; transform:scale(.99); max-height:0;
       padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .leaving{animation:none; opacity:0; max-height:0; overflow:hidden}}

/* Наведение мышью: на десктопе панель тоже открывают. */
@media (hover:hover){
  .item:hover,
  .task:hover{background:var(--sep); cursor:pointer;
    transition:background var(--duration-fast) var(--timing-smooth)}
  .item[style*="cursor:default"]:hover,
  .task[style*="cursor:default"]:hover{background:none; cursor:default}
  /* Кнопка подрастает под курсором: масштаб не трогает раскладку, соседние
     элементы не сдвигаются. */
  .chip:hover{transform:scale(1.05); opacity:.92}
  .act:hover{transform:scale(1.012)}
  .more:hover{background:var(--sep)}
}
.chip, .act{transition:transform var(--duration-fast) var(--timing-smooth),
  opacity var(--duration-fast) var(--timing-smooth),
  background-color var(--duration-fast) var(--timing-smooth)}

@media (prefers-reduced-motion:reduce){
  .is-in,.is-updating,.leaving,.content,.client-body,#crm-body{transition:none}
}

/* ══ переписка ════════════════════════════════════════════════════════
   Разговор читается пузырями, а не строками таблицы: сразу видно, кто
   говорит, и не нужно каждый раз вычитывать подпись. */
.chat{padding:4px 12px 8px; display:flex; flex-direction:column; gap:3px}
.bub{max-width:78%; padding:7px 11px 6px; border-radius:16px; font-size:16px;
  line-height:1.32; letter-spacing:-.012em; white-space:pre-wrap;
  overflow-wrap:anywhere; position:relative}
/* Клиент слева, мы справа — как в любом мессенджере. Хвостик у последнего
   сообщения подряд: у середины серии он только мешает. */
.bub.in{align-self:flex-start; background:var(--group); color:var(--ink);
  border-bottom-left-radius:5px}
.bub.out{align-self:flex-end; background:var(--go-tint); color:var(--ink);
  border-bottom-right-radius:5px}
.bub.mid.in{border-bottom-left-radius:16px}
.bub.mid.out{border-bottom-right-radius:16px}
.bub .when{float:right; margin:6px 0 -2px 8px; font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.bub.gone{color:var(--ink-3); font-style:italic}
/* Разделитель дня: разговор без дат сливается в одну ленту. */
.chat-day{align-self:center; margin:10px 0 4px; padding:3px 10px; border-radius:11px;
  background:var(--group); color:var(--ink-3); font-size:12.5px}
.chat-who{align-self:center; margin:6px 0 2px; font-size:12px; color:var(--ink-3)}


/* ── отказ ──
   Форма отвечает на неправильный ввод так же, как экран блокировки на
   неверный код: короткий отказ вместо молчаливого «ничего не произошло».
   Сдвиг по горизонтали и ничего больше — раскладка не трогается. */
@keyframes отказ{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
.shake{animation:отказ .32s var(--timing-smooth)}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}

/* ── нажатие ──
   Всё, что нажимается, отвечает на палец: уменьшается под нажатием и
   отпружинивает обратно. Без отклика человек жмёт второй раз, думая, что
   не попал. */
.item[data-go]:active,
.item[data-sheet]:active,
.item[data-copy]:active{transform:scale(.985); opacity:.9}
.item[data-go], .item[data-sheet], .item[data-copy]{
  transition:transform var(--duration-tap) var(--spring-back),
             opacity var(--duration-tap) var(--timing-smooth),
             background-color var(--duration-fast) var(--timing-smooth)}
.task{transition:transform var(--duration-tap) var(--spring-back),
                 background-color var(--duration-fast) var(--timing-smooth)}
@media (prefers-reduced-motion:reduce){
  .item[data-go]:active, .item[data-sheet]:active, .item[data-copy]:active{transform:none}}


/* ══ дизайн 26.08 — эталон 4b ═════════════════════════════════════════ */

/* ── шапка одной строкой: заголовок слева, версия справа по базовой ── */
.navrow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:0 18px}
.ver{font-size:12.5px; color:var(--ink-3); letter-spacing:-.004em;
  font-variant-numeric:tabular-nums; flex:none}

/* ── заголовок группы со счётчиком и суммой ── */
.sec-r{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.sec-r .tot{letter-spacing:0; font-variant-numeric:tabular-nums; color:var(--ink-3);
  text-transform:none}
.cnt{display:inline-flex; align-items:center; justify-content:center; min-width:18px;
  height:18px; padding:0 5px; border-radius:9px; background:var(--sep-solid);
  color:var(--ink-2); font-size:11.5px; font-weight:640; letter-spacing:0; margin-left:6px}

/* ── строка заявки: иконка 32 · гибкая середина · правый столбец ──
   Иконка носит статус (подложка пары), номер фиксирован на 36px — имена
   стоят колонкой, правый столбец с деньгами не сжимается никогда. */
.task.ic{display:flex; align-items:center; gap:11px; padding:9px 14px}
.ico{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none}
.ico svg{width:18px; height:18px}
.task.ic .tx{flex:1; min-width:0}
.task.ic .l1{display:flex; align-items:baseline; gap:7px}
.task.ic .l1 .num{flex:none; min-width:36px; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.task.ic .who{font-size:16px; font-weight:590; letter-spacing:-.016em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.task.ic .l2{font-size:12.5px; color:var(--ink-3); letter-spacing:-.006em; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.task.ic .amt{margin:0; font-size:17px}
.task.ic .rt{flex:none; text-align:right; padding-left:4px}
.task.ic .rt .amt{display:block}
.task.ic .rt .since{display:block; margin:1px 0 0; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.st{font-weight:590}
/* полка под новые данные: метки не переносятся, лишние тают у правого края */
.task.ic .l3{display:flex; gap:6px; margin-top:5px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.tag{flex:none; font-size:11.5px; line-height:1.35; padding:2px 6px; border-radius:6px;
  background:var(--sep-solid); color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── пары статусов: плашка, слово, иконка ── */
.pill.p-new{background:var(--st-new-bg); color:var(--st-new-ink)}
.pill.p-work{background:var(--st-work-bg); color:var(--st-work-ink)}
.pill.p-pay{background:var(--st-pay-bg); color:var(--st-pay-ink)}
.pill.p-paid{background:var(--st-paid-bg); color:var(--st-paid-ink)}
.pill.p-issue{background:var(--st-issue-bg); color:var(--st-issue-ink)}
.pill.p-done{background:var(--st-done-bg); color:var(--st-done-ink)}
.pill.p-fin{background:var(--st-fin-bg); color:var(--st-fin-ink)}
.pill.p-off{background:var(--st-off-bg); color:var(--st-off-ink)}
.pill.p-stop{background:var(--st-stop-bg); color:var(--st-stop-ink)}
/* прежние имена, чтобы старые экраны не остались бесцветными */
.pill.p-wait{background:var(--st-pay-bg); color:var(--st-pay-ink)}
.pill.p-go{background:var(--st-issue-bg); color:var(--st-issue-ink)}
.c-new{color:var(--st-new-ink)} .c-work{color:var(--st-work-ink)}
.c-pay{color:var(--st-pay-ink)} .c-paid{color:var(--st-paid-ink)}
.c-issue{color:var(--st-issue-ink)} .c-done{color:var(--st-done-ink)}
.c-fin{color:var(--st-fin-ink)} .c-off{color:var(--st-off-ink)}
.c-stop{color:var(--st-stop-ink)}
.i-new{background:var(--st-new-bg); color:var(--st-new-ink)}
.i-work{background:var(--st-work-bg); color:var(--st-work-ink)}
.i-pay{background:var(--st-pay-bg); color:var(--st-pay-ink)}
.i-paid{background:var(--st-paid-bg); color:var(--st-paid-ink)}
.i-issue{background:var(--st-issue-bg); color:var(--st-issue-ink)}
.i-done{background:var(--st-done-bg); color:var(--st-done-ink)}
.i-fin{background:var(--st-fin-bg); color:var(--st-fin-ink)}
.i-off{background:var(--st-off-bg); color:var(--st-off-ink)}
.i-stop{background:var(--st-stop-bg); color:var(--st-stop-ink)}

/* ── сводка: переключатель периодов и плитки ── */
.per{display:flex; align-items:center; justify-content:space-between;
  gap:7px; width:100%}
.per .dv{color:var(--ink-4); font-weight:400}
.seg{border:0; background:transparent; padding:8px 6px; margin:-6px 0;
  min-height:44px; min-width:44px; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); white-space:nowrap;
  transition:color var(--duration-fast) var(--timing-smooth),
             opacity var(--duration-fast) var(--timing-smooth)}
.seg.on{color:var(--ink)}
.seg:active{opacity:.6}
.legs.three{grid-template-columns:1fr 1fr 1fr}
.legs.three .leg{padding:10px 12px}
.legs.three .leg .v{font-size:19px}
.leg .v.plus{color:var(--ink)}

/* ── плашки быстрого доступа ── */
.legs.qa-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.qa{display:flex; align-items:center; gap:10px; min-width:0; padding:11px 13px;
  background:transparent; border:0; font:inherit; color:var(--ink); cursor:pointer;
  text-align:left; min-height:44px; width:100%;
  transition:background var(--duration-fast) var(--timing-smooth)}
.qa + .qa{box-shadow:inset .5px 0 0 var(--sep)}
.qa:active{background:var(--sep-solid)}
.qa .ico{width:28px; height:28px; border-radius:7px; background:var(--sep-solid);
  color:var(--ink-2)}
.qa .ico svg{width:16px; height:16px}
.qa .n{flex:1; min-width:0; font-size:15px; letter-spacing:-.016em; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qa .c{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ── пустое состояние по левому краю ── */
.state.tight{padding:14px 20px 10px; text-align:left}
.state.tight .state-t{margin-bottom:2px}


/* ══ CRM — эталон 26.08 ═══════════════════════════════════════════════ */

/* четыре плашки периодов */
.quad{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:2px 14px 12px;
  background:var(--group); border:.5px solid var(--glass-edge);
  border-radius:var(--r-card); overflow:hidden; position:relative}
.quad::after{content:""; position:absolute; top:0; left:12px; right:12px; height:.5px;
  background:linear-gradient(90deg,transparent,var(--glass-hi),transparent); pointer-events:none}
.quad .q{padding:8px 12px 9px}
.quad .q:nth-child(2n){box-shadow:inset .5px 0 0 var(--sep)}
.quad .q:nth-child(n+3){box-shadow:inset 0 .5px 0 var(--sep)}
.quad .q:nth-child(4){box-shadow:inset .5px 0 0 var(--sep), inset 0 .5px 0 var(--sep)}
.quad .ql{font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3)}
.quad .qv{margin-top:1px; font-size:19px; font-weight:660; letter-spacing:-.032em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.quad .qb{height:3px; border-radius:2px; background:var(--sep); margin:5px 0 4px; overflow:hidden}
.quad .qb span{display:block; height:100%; border-radius:2px; background:var(--ink-3)}
.quad .qm{display:flex; align-items:baseline; justify-content:space-between; gap:6px;
  font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.quad .qp{color:var(--st-fin-ink); font-weight:560}

/* тихие кнопки-фильтры и выгрузка */
.ctl{display:flex; gap:7px; padding:0 14px 10px}
.ctl button{flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:6px; border:0; border-radius:12px; background:var(--group); color:var(--ink);
  font:inherit; font-size:14px; letter-spacing:-.01em; min-height:44px; padding:0 12px;
  cursor:pointer; transition:background var(--duration-fast) var(--timing-smooth),
  opacity var(--duration-fast) var(--timing-smooth)}
.ctl button:active{opacity:.8}
.ctl button span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctl svg{width:9px; height:6px; flex:none; color:var(--ink-4)}
.dl{display:inline-flex; align-items:center; gap:4px; border:0; background:none;
  font:inherit; font-size:11.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); cursor:pointer; padding:4px 0}
.dl svg{width:12px; height:12px; color:var(--ink-3)}
.dl:active{opacity:.6}

/* строка книги: плитка источника серая — цвет несёт глиф */
.row{display:flex; align-items:center; gap:11px; padding:9px 14px; position:relative;
  transition:background var(--duration-fast) var(--timing-smooth)}
.row + .row::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px;
  background:var(--sep)}
.ava{width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--sep-solid); color:var(--ink-2)}
.ava svg{width:17px; height:17px}
.s-bot{color:var(--st-done-ink)} .s-site{color:var(--st-paid-ink)}
.s-manager{color:var(--st-work-ink)} .s-calc{color:var(--st-off-ink)}
.s-partner{color:var(--st-fin-ink)}
.row .tx{flex:1; min-width:0}
.row .l1{display:flex; align-items:baseline; gap:7px}
.row .num{flex:none; min-width:36px; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.row .who{font-size:16px; font-weight:590; letter-spacing:-.016em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.row .l2{font-size:12.5px; color:var(--ink-3); letter-spacing:-.006em; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .rt{flex:none; text-align:right; padding-left:4px}
.row .rt .amt{display:block; font-size:17px; font-weight:640; letter-spacing:-.028em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.row .rt .pf{display:block; margin-top:1px; font-size:12.5px; color:var(--st-fin-ink);
  font-variant-numeric:tabular-nums}
.row .rt .idle{display:block; margin-top:1px; font-size:12.5px; color:var(--st-off-ink);
  font-variant-numeric:tabular-nums}
.cur{font-weight:590}
.cur.u{color:var(--st-fin-ink)} .cur.t{color:var(--st-issue-ink)}
.cur.r{color:var(--st-new-ink)} .cur.e{color:var(--st-work-ink)}
.arr{color:var(--ink-4); font-weight:400; margin:0 2px}

/* плашка клиента */
.ccard{margin:0 14px 5px; background:var(--group); border:.5px solid var(--glass-edge);
  border-radius:var(--r-card); padding:6px 10px 6px; cursor:pointer; position:relative;
  transition:background var(--duration-fast) var(--timing-smooth),
             transform var(--duration-tap) var(--spring-back)}
.ccard:active{background:var(--sep-solid); transform:scale(.99)}
.ccard::after{content:""; position:absolute; top:0; left:12px; right:12px; height:.5px;
  background:linear-gradient(90deg,transparent,var(--glass-hi),transparent); pointer-events:none}
.ccard .h{display:flex; align-items:center; gap:10px}
.ccard .h .tx{flex:1; min-width:0; display:flex; flex-direction:column}
.ccard .who{font-size:15px; font-weight:590; letter-spacing:-.016em}
.ccard .sub{font-size:12.5px; color:var(--ink-3); letter-spacing:-.006em; margin-top:1px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.vip{display:inline-flex; align-items:center; gap:3px; color:var(--go-text); font-size:11px;
  font-weight:700; letter-spacing:.06em}
.vip svg{width:12px; height:12px}
.vip.spark svg{animation:искра 3.2s var(--timing-smooth) infinite}
@keyframes искра{
  0%,72%,100%{filter:none; transform:scale(1)}
  80%{filter:drop-shadow(0 0 5px var(--go)); transform:scale(1.18)}
  88%{filter:drop-shadow(0 0 2px var(--go)); transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.vip.spark svg{animation:none}}
.ccard .rt{flex:none; text-align:right}
.ccard .amt{display:block; font-size:15.5px; font-weight:640; letter-spacing:-.028em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.ccard .pf{display:block; margin-top:1px; font-size:12.5px; color:var(--st-fin-ink);
  font-variant-numeric:tabular-nums}
.ccard .grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 9px;
  margin-top:7px; padding-top:7px; border-top:.5px solid var(--sep)}
.ccard .f{display:flex; flex-direction:column; min-width:0}
.ccard .f .k{font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); line-height:1.25}
.ccard .f .v{margin-top:1px; font-size:13px; letter-spacing:-.01em; line-height:1.25;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ccard .f a.v{color:var(--st-done-ink); text-decoration:none; padding:3px 0; margin:-3px 0}
.ccard .f a.v:active{opacity:.6}
.ccard .bar-sep{color:var(--ink-4)}
.ccard .ago{font-weight:590}
.ccard .ago.a0{color:var(--st-fin-ink)} .ccard .ago.a1{color:var(--st-paid-ink)}
.ccard .ago.a2{color:var(--st-issue-ink)} .ccard .ago.a3{color:var(--st-pay-ink)}
.ccard .ago.a4{color:var(--st-new-ink)}

/* аналитика: биржевой график */
.exch{padding:10px 0 8px}
.exch .plot{display:block; width:100%; height:176px}
.exch .wave{fill:none; stroke:var(--go); stroke-width:1.3; stroke-linejoin:round;
  stroke-linecap:round}
.exch .cross{stroke:var(--ink-4); stroke-width:1; stroke-dasharray:2 3}
.exch .pt{fill:var(--go)}
.exch .gl{stroke:var(--sep); stroke-width:1; stroke-dasharray:2 4}
.plotwrap{position:relative; touch-action:none; cursor:crosshair}
/* график «Курсов»: те же перья, что и биржевой, но живёт вне .exch —
   без этого polyline рисовался чёрной заливкой (аудит 21.09) */
.plotwrap .plot{display:block; width:100%; height:128px}
.plotwrap .wave{fill:none; stroke:var(--go); stroke-width:1.3; stroke-linejoin:round;
  stroke-linecap:round}
.plotwrap .gl{stroke:var(--sep); stroke-width:1; stroke-dasharray:2 4}
.plotwrap .pt{fill:var(--go)}
.plotmeta{display:flex; gap:12px; padding:0 14px 4px; font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.axl{position:absolute; right:2px; transform:translateY(-50%); font-size:9.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none}
.ptip{position:absolute; display:flex; flex-direction:column; gap:1px; padding:5px 9px 6px;
  border-radius:6px; background:var(--tip-bg, #000); color:rgba(255,255,255,.72); font-size:10px;
  white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none; z-index:5}
.ptip b{color:#fff; font-size:13px; font-weight:700; letter-spacing:-.01em}
.exch .last{display:flex; align-items:baseline; gap:8px; padding:2px 14px 6px}
.exch .lv{font-size:17px; font-weight:640; letter-spacing:-.028em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
.exch .ld{font-size:12.5px; font-weight:590; color:var(--ink-2); font-variant-numeric:tabular-nums}
.exch .ld.up{color:var(--st-fin-ink)}
.exch .ld.down{color:var(--st-new-ink)}
.exch .lc{margin-left:auto; font-size:11.5px; color:var(--ink-3)}
.take{margin:9px 14px 0; font-size:12.5px; line-height:1.4; color:var(--ink-2);
  letter-spacing:-.006em}
.take b{font-weight:600; color:var(--ink)}

/* часы и дни недели */
.chart{display:flex; align-items:flex-end; gap:3px; height:104px; margin:2px 14px 0}
.chart .b{flex:1; min-width:0; background:var(--ink-4); border-radius:3px 3px 0 0}
.chart.hours{height:72px; gap:2px}
.chart.hours .b{background:var(--st-done-ink); opacity:.4; border-radius:2px 2px 0 0}
.chart.hours .b.max{opacity:1}
.chart-x{display:flex; justify-content:space-between; margin:5px 14px 0; font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.wk{padding:8px 0 6px}
.wkr{display:flex; align-items:center; gap:10px; padding:5px 14px}
.wkr .wd{flex:none; width:26px; font-size:12.5px; color:var(--ink-3); font-weight:500}
.wkr .wt{flex:1; min-width:0; height:6px; border-radius:3px; background:var(--sep); overflow:hidden}
.wkr .wt span{display:block; height:100%; border-radius:3px; background:var(--st-done-ink); opacity:.55}
.wkr .wt span.max{opacity:1}
.wkr .wt span.low{background:var(--ink-4); opacity:.9}
.wkr .wv{flex:none; min-width:64px; text-align:right; font-size:13px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* источники и пары: полоса-доля + строки с треками */
.share{display:flex; height:9px; border-radius:5px; overflow:hidden; margin:11px 14px 2px;
  background:var(--sep)}
.share i{display:block; height:100%; background:currentColor; opacity:.9}
.share i + i{box-shadow:inset .5px 0 0 var(--bg-2)}
.share i.u{color:var(--st-fin-ink)} .share i.t{color:var(--st-issue-ink)}
.share i.r{color:var(--st-new-ink)} .share i.e{color:var(--st-work-ink)}
.brk{padding:9px 14px; position:relative; color:var(--ink-3)}
.brk + .brk::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px;
  background:var(--sep)}
.brk .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.brk .n{font-size:15px; letter-spacing:-.016em; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:currentColor}
.brk .q{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; flex:none}
.brk .trk{height:5px; border-radius:3px; background:var(--sep); margin-top:6px; overflow:hidden}
.brk .trk span{display:block; height:100%; border-radius:3px; background:currentColor; opacity:.85}
.brk.s-bot{color:var(--st-done-ink)} .brk.s-site{color:var(--st-paid-ink)}
.brk.s-manager{color:var(--st-work-ink)} .brk.s-calc{color:var(--st-off-ink)}
.brk.s-partner{color:var(--st-fin-ink)}

/* изменения и спящие */
.dt{display:flex; align-items:baseline; gap:11px; padding:9px 14px; position:relative}
.dt + .dt::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px;
  background:var(--sep)}
.dt .n{flex:1; min-width:0; font-size:15px; letter-spacing:-.016em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.dt .was{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.dt .d{font-size:15px; font-weight:640; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; min-width:64px; text-align:right}
.dt .d.up{color:var(--st-fin-ink)}
.dt .d.down{color:var(--st-new-ink)}

/* ══ Создать — эталон 27.08 (design_handoff_create) ══════════════════ */
/* строка выбора: ключ слева, значение справа, шеврон */
.pick{display:flex; align-items:center; gap:10px; padding:0 14px; min-height:46px;
  position:relative; cursor:pointer; background:transparent; border:0; width:100%;
  font:inherit; text-align:left; color:var(--ink);
  transition:background var(--duration-fast) var(--timing-smooth)}
.pick + .pick::before{content:""; position:absolute; top:0; left:16px; right:0;
  height:.5px; background:var(--sep)}
.pick:active{background:var(--sep-solid)}
.pick .k{flex:none; font-size:14px; color:var(--ink-3); letter-spacing:-.01em}
.pick .v{flex:1; min-width:0; text-align:right; font-size:15px; letter-spacing:-.016em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Модификатор зовётся v-none, а не empty: .empty — блочное пустое состояние
   с паддингом 60/40, на строке он раздувал её до 141px. */
.pick .v.v-none{color:var(--ink-4)}
.pick .chev{width:8px; height:13px; flex:none; color:var(--ink-4)}
.pick.tight{min-height:40px}
.pick.tight .v{font-size:14px}
.chev{transition:transform var(--duration-fast) var(--timing-smooth)}
.chev.turn{transform:rotate(90deg)}

/* карточка обмена: клипа нет — меню валюты выходит за кромку */
.hero{margin:2px 14px 4px; background:var(--group); border:.5px solid var(--glass-edge);
  border-radius:16px; position:relative}
.hero::after{content:""; position:absolute; top:0; left:14px; right:14px; height:.5px;
  background:linear-gradient(90deg,transparent,var(--glass-hi),transparent); pointer-events:none}
.hero .line{padding:11px 14px 10px}
.hero .line + .line{padding-top:6px}
.hero .cap{display:block; font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-3)}
.hero .row{display:flex; align-items:baseline; gap:10px; margin-top:3px; position:relative}
.hero input{flex:1; min-width:0; border:0; background:none; color:var(--ink); font:inherit;
  font-size:34px; font-weight:680; letter-spacing:-.04em; padding:0; outline:none;
  font-variant-numeric:tabular-nums;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.hero input::placeholder{color:var(--ink-4)}
.hero .out{flex:1; min-width:0; font-size:34px; font-weight:680; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.hero .out.dim{color:var(--ink-4)}
/* Тикер сам себе кнопка; столбец фиксированной ширины держит коды на одной
   вертикали. «Отдаёт» приподнят к базовой линии input, «Получает» — на
   высоту подписи, чтобы стоять от кружка ⇅ на равном расстоянии. */
.tickb{flex:none; display:block; border:0; background:transparent; cursor:pointer; font:inherit;
  padding:4px 0 4px 8px; font-size:14px; font-weight:700; letter-spacing:.03em;
  min-width:52px; text-align:right;
  transition:opacity var(--duration-fast) var(--timing-smooth)}
.tickb.give{position:relative; top:-2px}
.tickb.get{position:relative; top:-18px}
.tickb:active{opacity:.55}
.hero .mid{position:relative; height:1px; margin:0 0 4px}
.hero .rule{position:absolute; left:14px; right:14px; top:0; height:.5px; background:var(--sep)}
.hero .swap{position:absolute; right:14px; top:-17px; width:34px; height:34px; border:0;
  border-radius:17px; background:var(--sep-solid); color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center; z-index:5}
.hero .swap svg{width:15px; height:15px}
.hero .swap:active{opacity:.7}
.ratebar{display:flex; align-items:center; gap:6px; padding:9px 14px 10px;
  border-top:.5px solid var(--sep); border-radius:0 0 16px 16px;
  font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ratebar .dot{color:var(--ink-4)}
/* меню валюты — у тикера, не листом; закрывается перехватчиком на весь экран */
.pop{position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:150px; padding:4px;
  background:var(--sheet); backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%); border:.5px solid var(--glass-edge);
  border-radius:13px; box-shadow:0 8px 26px rgba(20,22,28,.20);
  animation:pop-in var(--duration-fast) var(--out)}
@keyframes pop-in{from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:none}}
.pop button{display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent;
  cursor:pointer; font:inherit; color:var(--ink); text-align:left; padding:0 10px; min-height:38px;
  border-radius:9px; font-size:14.5px; letter-spacing:-.014em}
.pop button:active{background:var(--sep-solid)}
.pop button .tk{margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--ink-3)}
.pop button .ck{flex:none; width:12px; font-size:12px; color:var(--go-text); opacity:0}
.pop button.on .ck{opacity:1}

/* проценты плитками; поле открывается под ними, закрывает его дискета */
.opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0 14px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt-b{display:flex; flex-direction:column; min-width:0; border:.5px solid var(--sep-solid);
  border-radius:11px; background:var(--group); padding:8px 10px 9px; cursor:pointer;
  text-align:left; font:inherit; color:var(--ink);
  transition:border-color var(--duration-fast) var(--timing-smooth),
             background var(--duration-fast) var(--timing-smooth)}
.opt-b .on-n{font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.opt-b .on-v{margin-top:2px; font-size:17px; font-weight:640; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.opt-b.on{border-color:var(--ink); background:var(--sep-solid)}
.opt-b:active{opacity:.85}
.pcin{display:flex; align-items:center; gap:8px; margin:8px 14px 0; padding:0 12px; min-height:44px;
  background:var(--group); border:.5px solid var(--glass-edge); border-radius:11px}
.pcin label{flex:none; font-size:13.5px; color:var(--ink-3)}
.pcin input{flex:1; min-width:0; border:0; background:none; color:var(--ink); font:inherit;
  font-size:17px; font-weight:640; text-align:right; outline:none; font-variant-numeric:tabular-nums}
.pcin .pc{flex:none; font-size:15px; color:var(--ink-3)}
/* дискета вместо слова «Сохранить»: закрывает поле и не спорит с «Заказать» */
.save{flex:none; width:30px; height:30px; border:0; background:transparent; color:var(--ink-3);
  cursor:pointer; display:grid; place-items:center;
  transition:transform var(--duration-tap) var(--spring-back),
             color var(--duration-fast) var(--timing-smooth)}
.save svg{width:17px; height:17px}
.save:active{transform:scale(.94); color:var(--ink)}

/* расчёт */
.calc{margin:0 14px; background:var(--group); border:.5px solid var(--glass-edge);
  border-radius:var(--r-card); overflow:hidden}
.calc .r{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 13px; position:relative}
.calc .r + .r::before{content:""; position:absolute; top:0; left:14px; right:0; height:.5px;
  background:var(--sep)}
.calc .k{font-size:13.5px; color:var(--ink-3)}
.calc .v{font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.016em}
.calc .v.big{font-size:19px; font-weight:640; letter-spacing:-.028em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.calc .v.pf{color:var(--st-fin-ink); font-weight:640}
.calc .v.fee{color:var(--st-work-ink)}

/* текст клиенту */
.quote{margin:9px 14px 0; padding:12px 13px; border-radius:var(--r-card);
  background:var(--sep-solid); font-size:13.5px; line-height:1.5; white-space:pre-line;
  color:var(--ink-2)}
.quote b{color:var(--ink); font-weight:600}
.copied{margin:8px 14px 0; padding:9px 13px; border-radius:var(--r-card);
  background:var(--st-fin-bg); color:var(--st-fin-ink); font-size:13px}
.qedit{padding:9px 14px 0}
.area.quo{min-height:auto; max-height:none}
.qrow{display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap}
.qrow .sp{flex:1}
.qacts{display:flex; align-items:center; gap:16px; padding:8px 14px 0; flex-wrap:wrap}
.tplhint{padding:6px 14px 0; font-size:11.5px; color:var(--ink-3); line-height:1.4}
.tplhint code{font-family:ui-monospace,"SF Mono",monospace; font-size:11px; color:var(--ink-2)}

/* заказчик одной строкой */
.cust-row{display:flex; align-items:center; gap:8px; padding:0 10px 0 14px; min-height:40px}
.cust-row .nm{flex:none; font-size:14.5px; font-weight:590; letter-spacing:-.016em;
  max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cust-row .sb{flex:1; min-width:0; font-size:12px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cust-row .sb.sb-none{color:var(--st-pay-ink)}
.tagx{flex:none; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); border:0; background:transparent; cursor:pointer; padding:6px 0}
.tagx:active{opacity:.6}
.xbtn{flex:none; width:30px; height:30px; border:0; border-radius:15px; background:var(--sep-solid);
  color:var(--ink-3); cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1}
.xbtn:active{opacity:.7}
.xbtn.sm{width:24px; height:24px; border-radius:12px; font-size:13px}
.fld-row{padding:9px 14px; position:relative}
.fld-row + .fld-row::before{content:""; position:absolute; top:0; left:16px; right:0; height:.5px;
  background:var(--sep)}
.fld-row label{display:block; font-size:12.5px; color:var(--ink-3)}
.fld-row input{width:100%; border:0; background:none; color:var(--ink); font:inherit; font-size:17px;
  letter-spacing:-.02em; padding:2px 0 0; outline:none}
.fld-row input::placeholder{color:var(--ink-4)}

/* комментарий растёт сам: базово строка, максимум шесть, дальше прокрутка */
.area-wrap{padding:0 14px}
.area.grow{font-size:15px; resize:none; overflow:hidden; min-height:44px; max-height:140px;
  transition:height var(--duration-fast) var(--timing-smooth)}
.drafted{margin:0 14px 10px; padding:10px 13px; border-radius:var(--r-card);
  background:var(--st-paid-bg); color:var(--st-paid-ink); font-size:13px}

/* черновик и заказ рядом: одно не главнее другого настолько, чтобы занимать полосу */
.go-row{display:flex; gap:9px; padding:14px 14px 0}
.go-row button{flex:1; min-width:0; min-height:48px; border:0; border-radius:13px; font:inherit;
  font-size:15px; font-weight:620; letter-spacing:-.012em; cursor:pointer;
  transition:opacity var(--duration-fast) var(--timing-smooth)}
.go-row .fill{background:var(--go); color:var(--go-ink); flex:1.35}
.go-row .fill:disabled{background:var(--sep-solid); color:var(--ink-4); cursor:default}
.go-row .ghost{background:transparent; box-shadow:inset 0 0 0 1px var(--sep-solid); color:var(--ink-2)}
.go-row button:active{opacity:.85}

/* подтверждение в системном листе */
.made .ic{width:44px; height:44px; border-radius:22px; background:var(--st-fin-bg);
  color:var(--st-fin-ink); display:grid; place-items:center; margin:0 auto 10px}
.made .ic svg{width:24px; height:24px}
.made .t{text-align:center; font-size:19px; font-weight:680; letter-spacing:-.028em}
.made .s{text-align:center; font-size:13.5px; color:var(--ink-3); margin-top:4px; line-height:1.4}
.made .rows{margin:12px 0 4px; background:var(--sep-solid); border-radius:var(--r-card); overflow:hidden}
.calc-r{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 13px; position:relative}
.calc-r + .calc-r::before{content:""; position:absolute; top:0; left:14px; right:0; height:.5px;
  background:var(--sep)}
.calc-r .k{font-size:13.5px; color:var(--ink-3)}
.calc-r .v{font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.016em}

/* ══ Карточка заявки — эталон 28.08 (design_handoff_order) ═══════════ */
/* шапка: имя-кнопка со входом в клиента, верификация, номер */
.hd{padding:2px 20px 0}
.hd .top{display:flex; align-items:baseline; gap:8px}
.hd .nm{display:flex; align-items:baseline; gap:6px; border:0; background:transparent; padding:0;
  cursor:pointer; font:inherit; color:var(--ink); font-size:22px; font-weight:700;
  letter-spacing:-.03em; min-width:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.hd .nm span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hd .nm svg{width:7px; height:12px; flex:none; color:var(--ink-4); transform:translateY(-1px)}
.hd .nm:active{opacity:.6}
.hd .id{margin-left:auto; flex:none; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.hd .sub{display:flex; align-items:center; gap:7px; margin-top:3px; font-size:12.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; flex-wrap:wrap}
.hd .sub .dot{color:var(--ink-4)}
.hd .sub .vfw.no{color:var(--st-pay-ink)}
/* Верификация: галочка в круге у проверенного — и слово рядом, чтобы значок
   не был единственным признаком. */
.vf{flex:none; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  transform:translateY(1px)}
.vf svg{width:60%; height:60%}
.vf.yes{background:var(--st-done-bg); color:var(--st-done-ink)}
.vf.no{background:var(--sep-solid); color:var(--ink-4)}
/* плашка статуса */
.pl{display:inline-flex; align-items:center; padding:4px 9px; border-radius:8px; font-size:12px;
  font-weight:620; letter-spacing:-.006em; white-space:nowrap}
.pl.new{background:var(--st-new-bg); color:var(--st-new-ink)}
.pl.work{background:var(--st-work-bg); color:var(--st-work-ink)}
.pl.pay{background:var(--st-pay-bg); color:var(--st-pay-ink)}
.pl.paid{background:var(--st-paid-bg); color:var(--st-paid-ink)}
.pl.issue{background:var(--st-issue-bg); color:var(--st-issue-ink)}
.pl.done{background:var(--st-done-bg); color:var(--st-done-ink)}
.pl.fin{background:var(--st-fin-bg); color:var(--st-fin-ink)}
.pl.off{background:var(--st-off-bg); color:var(--st-off-ink)}
.pl.stop{background:var(--st-stop-bg); color:var(--st-stop-ink)}
/* шаги статуса полосами */
.steps{display:flex; gap:4px; padding:12px 20px 0}
.steps .s{flex:1; min-width:0}
.steps .bar{height:3px; border-radius:2px; background:var(--sep-solid)}
.steps .bar.on{background:var(--st-issue-ink)}
.steps .bar.pass{background:var(--st-fin-ink)}
.steps .bar.offc{background:var(--st-off-ink)}
.steps .lb{margin-top:5px; font-size:9px; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.steps .lb.on{color:var(--ink-2); font-weight:600}
/* деньги: обе суммы одного кегля; размерный класс тикера — .tk (.u занят USDT) */
.sum{padding:12px 14px 11px}
.sum .big{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.sum .v{font-size:24px; font-weight:680; letter-spacing:-.032em; font-variant-numeric:tabular-nums;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.sum .tk{font-size:13px; font-weight:700; letter-spacing:.03em}
.sum .ar{font-size:14px; color:var(--ink-4)}
.sum .foot{display:flex; align-items:baseline; gap:8px; margin-top:7px; font-size:12.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.sum .pf{margin-left:auto; color:var(--st-fin-ink); font-weight:660; font-size:14.5px}
/* строки оплаты и выдачи */
.mv{display:flex; align-items:center; gap:10px; padding:10px 14px; position:relative}
.mv + .mv::before,.sum + .mv::before{content:""; position:absolute; top:0; left:14px; right:0;
  height:.5px; background:var(--sep)}
.mv .ic{flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center}
.mv .ic svg{width:17px; height:17px}
.mv .ic.in{background:var(--st-paid-bg); color:var(--st-paid-ink)}
.mv .ic.out{background:var(--st-done-bg); color:var(--st-done-ink)}
.mv .ic.wait{background:var(--st-issue-bg); color:var(--st-issue-ink)}
.mv .tx{flex:1; min-width:0; display:flex; flex-direction:column}
.mv .t1{display:block; font-size:14.5px; letter-spacing:-.014em; font-variant-numeric:tabular-nums}
.mv .t2{display:block; font-size:12px; color:var(--ink-3); margin-top:1px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.mv .st{flex:none; font-size:11.5px; font-weight:600}
.mv .st.ok{color:var(--st-fin-ink)}
.mv .st.wt{color:var(--st-issue-ink)}
.mv .st.no{color:var(--ink-4)}
/* ведёт: карточка не клипует — меню передачи выходит за кромку */
.card.plain{overflow:visible}
.own{display:flex; align-items:center; gap:10px; padding:0 10px 0 14px; min-height:46px;
  position:relative; border-radius:var(--r-card)}
.own .who{flex:1; min-width:0}
.own .nm{font-size:15px; font-weight:590; letter-spacing:-.016em}
.own .rl{font-size:12px; color:var(--ink-3); margin-top:1px}
.tagb{flex:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--go-text); padding:8px 4px}
.tagb:active{opacity:.6}
.own .pop{right:10px; top:calc(100% - 4px); min-width:186px}
/* файлы плитками */
.files{display:flex; gap:8px; padding:0 14px; flex-wrap:wrap}
.file-t{flex:1; min-width:calc(45% - 4px); display:flex; align-items:center; gap:8px; padding:9px 11px;
  background:var(--group); border:.5px solid var(--glass-edge); border-radius:12px; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left}
.file-t svg{width:16px; height:16px; color:var(--ink-3); flex:none}
.file-t .fn{flex:1; min-width:0; font-size:13px; letter-spacing:-.012em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.file-t .fs{flex:none; font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.file-t .okc{flex:none; width:15px; height:15px; border-radius:50%; background:var(--st-fin-bg);
  color:var(--st-fin-ink); display:grid; place-items:center}
.file-t .okc svg{width:60%; height:60%; color:currentColor}
.file-t:active{opacity:.75}
/* история лентой */
.tl{margin:0 14px; padding:4px 0 2px}
.ev{display:flex; gap:11px; padding-left:2px}
.ev .col{flex:none; width:22px; display:flex; flex-direction:column; align-items:center}
.ev .pt{width:9px; height:9px; border-radius:5px; margin-top:5px; flex:none; box-shadow:0 0 0 3px var(--bg)}
.ev .ln{flex:1; width:1.5px; background:var(--sep-solid); min-height:8px}
.ev:last-child .ln{background:transparent}
.ev .bd{flex:1; min-width:0; padding-bottom:14px}
.ev .hl{display:flex; align-items:baseline; gap:8px}
.ev .ttl{font-size:14.5px; font-weight:590; letter-spacing:-.016em}
.ev .tm{margin-left:auto; flex:none; font-size:12px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.ev .tx{font-size:13px; color:var(--ink-3); margin-top:2px; line-height:1.45; text-wrap:pretty}
.ev .note{margin-top:6px; padding:9px 11px; background:var(--group); border:.5px solid var(--glass-edge);
  border-radius:11px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
/* переписка оператора */
.cm{padding:10px 14px; position:relative}
.cm + .cm::before{content:""; position:absolute; top:0; left:14px; right:0; height:.5px; background:var(--sep)}
.cm .hl{display:flex; align-items:baseline; gap:8px}
.cm .who{font-size:13px; font-weight:600; letter-spacing:-.01em}
.cm .tm{margin-left:auto; font-size:11.5px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.cm .tx{font-size:13.5px; color:var(--ink-2); margin-top:2px; line-height:1.45; text-wrap:pretty}
.wr{display:flex; align-items:flex-end; gap:9px; padding:9px 14px 0}
.wr textarea{flex:1; min-width:0; border:.5px solid var(--glass-edge); border-radius:12px;
  background:var(--group); color:var(--ink); font:inherit; font-size:14.5px; padding:11px 12px;
  resize:none; overflow:hidden; outline:none; line-height:1.4; box-sizing:border-box}
.wr textarea::placeholder{color:var(--ink-4)}
.wr textarea:focus{box-shadow:inset 0 0 0 1px var(--go)}
.wr .snd{flex:none; width:40px; height:40px; border:0; border-radius:20px; background:var(--go);
  color:var(--go-ink); cursor:pointer; display:grid; place-items:center}
.wr .snd svg{width:18px; height:18px}
.wr .snd:disabled{background:var(--sep-solid); color:var(--ink-4); cursor:default}
.wr .snd:active{opacity:.85}
/* заявки клиента */
.rel{display:flex; align-items:center; gap:10px; padding:9px 12px 9px 14px; position:relative;
  cursor:pointer; border:0; background:transparent; width:100%; font:inherit; color:var(--ink);
  text-align:left}
.rel + .rel::before{content:""; position:absolute; top:0; left:14px; right:0; height:.5px;
  background:var(--sep)}
.rel:active{background:var(--sep-solid)}
.rel .n{flex:none; width:40px; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rel .mid{flex:1; min-width:0; display:flex; flex-direction:column}
.rel .t1{display:block; font-size:14px; letter-spacing:-.014em; font-variant-numeric:tabular-nums}
.rel .t2{display:block; font-size:12px; margin-top:1px}
.rel .amt{flex:none; font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:-.014em}
.sec-r .allb{border:0; background:transparent; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:0}
.sec-r .allb:active{opacity:.6}
.c-fin{color:var(--st-fin-ink)}
.c-offc{color:var(--st-off-ink)}
/* док действий над таб-баром: экранная кнопка всегда под рукой */
.dock{position:absolute; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:40;
  padding:10px 14px 12px; background:var(--chrome);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 .5px 0 var(--glass-edge)}
/* Пока экраны едут, стекло внутри них не размывает: пересчёт блюра на каждом
   кадре пружины и есть «ступеньки». На месте блюр возвращается сам. */
.stack.moving .dock{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg)}
.acts{display:flex; gap:9px}
.acts button{flex:1; min-width:0; min-height:48px; border:0; border-radius:13px; font:inherit;
  font-size:15px; font-weight:620; letter-spacing:-.012em; cursor:pointer}
.acts .fill{background:var(--go); color:var(--go-ink); flex:1.5}
.acts .fill:disabled{background:var(--sep-solid); color:var(--ink-4); cursor:default}
.acts .ghost{background:transparent; box-shadow:inset 0 0 0 1px var(--sep-solid); color:var(--ink-2)}
.acts button:active{opacity:.85}
/* лист причин: удаление отделено и красное */
.opt.danger{color:var(--st-new-ink)}
.opt.danger .tick{opacity:0}
.sheet .split{height:8px}

/* ── потянуть сверху — обновить: системный лепестковый круг ── */
.sd{position:absolute; top:calc(max(env(safe-area-inset-top), 14px) + 8px); left:50%;
  transform:translateX(-50%); z-index:60; width:28px; height:28px; color:var(--ink-3);
  opacity:0; pointer-events:none}
.sd svg{width:100%; height:100%; display:block}
/* Кручение — дискретными шагами, как у системного: плавное вращение
   лепестков читается как чужое. */
.sd.spin{opacity:1; animation:sd-spin .8s steps(12) infinite}
@keyframes sd-spin{to{transform:translateX(-50%) rotate(360deg)}}
.sd.hide{opacity:0 !important; transition:opacity var(--duration-fast) var(--timing-smooth)}
.sd.up{opacity:0 !important; margin-top:-10px;
  transition:opacity var(--duration-normal) var(--timing-smooth),
             margin-top var(--duration-normal) var(--timing-smooth)}
/* Контент приспущен, пока идёт обновление; поднимается — классом. */
.body.ptr-hold{transform:translateY(52px)}
.body.ptr-settle{transition:transform var(--duration-normal) var(--timing-smooth)}
@media (prefers-reduced-motion:reduce){
  .sd.spin{animation:none}
  .body.ptr-hold{transform:none}
}

/* Полоса вкладок карточки прилипает к верху скролла: из длинной переписки
   не мотают наверх, чтобы переключиться. Подложка плотная — блюр на каждом
   кадре прокрутки телефону дорог. */
.chips.stick{position:sticky; top:0; z-index:30; background:var(--bg);
  padding-top:6px; padding-bottom:8px; margin-top:-6px;
  box-shadow:0 10px 12px -12px rgba(0,0,0,.35)}

/* ── сводка «Сейчас»: строгие цветовые акценты (Эдуард 21.09) ────────── */
.legs .v.sum-vol{color:var(--st-issue-ink)}
.legs .v.sum-pf{color:var(--st-fin-ink)}
.legs .l .dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:5px; vertical-align:1px}
.dot.d-new{background:var(--st-new-ink)}
.dot.d-fin{background:var(--st-fin-ink)}
.dot.d-work{background:var(--st-work-ink)}

/* профит в строке закрытой сделки и в «Моих показателях» */
.task .rt .pfx{display:block; font-size:12px; font-weight:600;
  color:var(--st-fin-ink); font-variant-numeric:tabular-nums}
.item .val .pfe{display:block; font-size:12px; font-weight:600;
  color:var(--st-fin-ink); font-variant-numeric:tabular-nums}

/* ── «Система»: плашка курсов в моменте (Эдуард 21.09) ──────────────── */
.rhero{margin:2px 14px 8px; padding:14px 14px 10px; background:var(--group);
  border:.5px solid var(--glass-edge); border-radius:var(--r-card);
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform var(--duration-tap) var(--spring-back)}
.rhero:active{transform:scale(.988)}
.rhero::before{content:""; position:absolute; inset:0 0 auto 0; height:64px;
  background:linear-gradient(180deg,var(--glass-hi),transparent); opacity:.5; pointer-events:none}
.rhero .cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.rhero .col{min-width:0}
.rhero .src{display:flex; align-items:center; gap:5px; font-size:10px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.rhero .src .st-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.st-dot.ok{background:var(--st-fin-ink)} .st-dot.old{background:var(--st-issue-ink)}
.st-dot.bad{background:var(--st-off-ink)}
.rhero .val{margin-top:3px; font-size:21px; font-weight:650; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.rhero .val small{font-size:11.5px; font-weight:500; color:var(--ink-3); letter-spacing:0}
.rhero .age{font-size:10.5px; color:var(--ink-4); margin-top:1px}
.rhero .spark{display:block; width:100%; height:30px; margin-top:7px}
.rhero .spark .sp-dot{fill:var(--st-issue-ink)}
.rhero .spark .live-ring{stroke:var(--st-issue-ink); stroke-width:1.2}
.rhero .spark polyline{fill:none; stroke:var(--st-issue-ink); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.rhero .spark.flat polyline{stroke:var(--sep-solid)}
.rhero .foot{display:flex; justify-content:space-between; align-items:center;
  margin-top:9px; padding-top:8px; border-top:.5px solid var(--sep);
  font-size:12px; color:var(--ink-3)}
.rhero .foot .go-hint{color:var(--st-issue-ink); font-weight:550}

/* экран «Курсы и профит» */
.rhub-chips{display:flex; gap:8px; margin:4px 14px 10px}
.rhub-chips .chip{flex:1; text-align:center}
.rhub-edit{display:flex; gap:8px; align-items:center}
.rhub-edit input{flex:1; min-width:0; text-align:right;
  font-variant-numeric:tabular-nums}

/* графики v2 (Эдуард 21.09): фон-подложка, сетка обеих осей, метки времени */
.plotwrap.boxed{margin:0 14px; padding:6px 8px 22px; background:var(--group);
  border:.5px solid var(--glass-edge); border-radius:var(--r-card)}
.plotwrap .gl.v{stroke:var(--sep); stroke-width:1; stroke-dasharray:2 5; opacity:.8}
.plotwrap .axtrow{position:absolute; left:8px; right:8px; bottom:5px; height:12px;
  pointer-events:none}
.plotwrap .axt{position:absolute; transform:translateX(-50%); font-size:9px;
  color:var(--ink-4); font-variant-numeric:tabular-nums; white-space:nowrap}
.plotmeta{margin-top:2px}

/* разбор под графиком: вывод и операционная подсказка */
.pananal{margin:8px 14px 14px; padding:10px 12px; background:var(--group);
  border:.5px solid var(--glass-edge); border-radius:var(--r-card);
  display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.pananal .pa-row{display:flex; align-items:center; gap:7px; letter-spacing:-.006em}
.pananal .pa-row.muted{color:var(--ink-3); font-size:11.5px}
.pananal .pa-row.hintline{color:var(--st-issue-ink); font-weight:550}
.pananal .pa-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0}
.pananal .pa-dot.good{background:var(--st-fin-ink)}
.pananal .pa-dot.warn{background:var(--st-issue-ink)}
.pananal .pa-dot.note{background:var(--ink-4)}

/* спарклайны плашки: лёгкая подложка и пунктир середины */
.rhero .spark{background:var(--sep); background:color-mix(in srgb, var(--group) 55%, transparent);
  border-radius:6px; padding:2px 2px}