/* NUMMO — интерфейс учёта под iPhone и Telegram. Визуал — из концепта KANGS: тёплый почти чёрный фон, фирменный оранжевый,
   тёплые светлые блоки, появление блоков при прокрутке. Шапок нет: заголовки уезжают вместе с содержимым.
   Отступы — единая сетка: --gap между карточками, --sec между блоками, --pad внутри карточек.
   Плавность: никаких размытий и анимаций на всю площадь экрана; двигаем только transform и opacity. */

:root{
  --bg:#12100E;--bg2:#181512;--tx:#F4EFEA;--tx1:#E1D9D2;--tx2:#B9AFA6;--tx3:#857B73;
  --field:rgba(0,0,0,.28);--sunk:rgba(0,0,0,.25);--chip:rgba(255,255,255,.03);--ghost:rgba(255,255,255,.05);
  --or:#E26612;--or2:#F2853A;--gold:#F6B46A;--ln:rgba(255,236,220,.09);--card:#1A1714;
  --good:#4ADE80;--goodtx:#86EFAC;--bad:#F87171;
  --ez:cubic-bezier(.22,.8,.24,1);--sheet:cubic-bezier(.32,.72,0,1);
  --gap:12px;--sec:32px;--pad:16px;--r:20px;
  --ff:'Onest',-apple-system,system-ui,sans-serif;--fs:'Cormorant',Georgia,serif;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right);
  --tabh:64px;--tabb:max(10px,calc(var(--sab) - 8px));
  color-scheme:dark;
}
/* внутри Telegram на весь экран: сверху статус-бар и кнопки Telegram «Закрыть» и «…» — отступ даёт сам Telegram */
:root.tg{--sat:max(env(safe-area-inset-top),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));
  --sab:max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px));--tabb:max(18px,calc(var(--sab) - 8px))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none}
body{color:var(--tx);font-family:var(--ff);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;touch-action:pan-y}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.1}
input,textarea{font:inherit;caret-color:var(--or);accent-color:var(--or)}
::selection{background:rgba(226,102,18,.32)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--or2);outline-offset:3px;border-radius:10px}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.serif{font-family:var(--fs);font-style:italic;font-weight:500;letter-spacing:-.005em;font-size:1.14em}
.grad{background:linear-gradient(100deg,#FFD3A1 0%,#F2853A 50%,#E26612 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}

/* ——— каркас: фиксированное окно, прокручиваются только экраны ——— */
.app{position:fixed;inset:0;overflow:hidden;background:#000}
.views{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(520px 420px at 0% 0%,rgba(226,102,18,.18),transparent 70%),radial-gradient(420px 380px at 100% 55%,rgba(255,241,226,.035),transparent 70%),var(--bg)}
.view{position:absolute;inset:0;visibility:hidden;pointer-events:none;contain:strict;opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .26s ease-out,transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
/* смена вкладок — перетекание: старая гаснет, новая проявляется и чуть всплывает, обе одновременно */
.view.on{visibility:visible;pointer-events:auto;opacity:1;transform:none;transition:opacity .3s ease-out .04s,transform .42s cubic-bezier(.2,.8,.2,1) .04s,visibility 0s}
.still .rv,.still .rv *{transition:none!important}
@keyframes vIn{from{opacity:0}}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:none;padding-top:calc(var(--sat) + 12px);padding-bottom:calc(var(--tabh) + var(--tabb) + var(--sec))}
.scroll::-webkit-scrollbar{display:none}
.pg{width:min(720px,100%);margin:0 auto;padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}

/* край под часами: вместо шапки текст мягко растворяется (только градиент — без размытия, чтобы прокрутка не тормозила) */
.edge{position:absolute;z-index:15;left:0;right:0;top:0;height:calc(var(--sat) + 14px);pointer-events:none;background:linear-gradient(180deg,rgba(18,16,14,.96) 0%,rgba(18,16,14,.8) 55%,rgba(18,16,14,0))}
.foot-fade{position:absolute;z-index:15;left:0;right:0;bottom:0;height:calc(var(--tabh) + var(--tabb) + 36px);pointer-events:none;background:linear-gradient(0deg,rgba(18,16,14,.9),rgba(18,16,14,0))}

/* ——— появление при прокрутке ——— */
.rv{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ez),transform .6s var(--ez)}
.rv[data-rv="on"]{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}

/* ——— общие элементы и единые отступы ——— */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:44px}
.ttl{font-size:34px;letter-spacing:-.035em}
.lead{font-size:15.5px;color:var(--tx2);margin-top:var(--gap)}
.sub-l{font-size:13.5px;color:var(--tx3);margin:calc(var(--gap) * -.5) 0 var(--gap)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap);margin:var(--sec) 0 var(--gap)}
.sec-h h2{font-size:24px;letter-spacing:-.03em}
.sec-h .lnk{font-size:14px;font-weight:600;color:var(--or2);white-space:nowrap;padding:4px 0}
.hint-r{font-size:14px;color:var(--tx3);white-space:nowrap}.hint-r b{color:var(--tx);font-weight:600}
.lbl{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--or2)}
.vstack>*+*{margin-top:var(--gap)}
.card{position:relative;border-radius:var(--r);background:var(--card);border:1px solid var(--ln);overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border-radius:14px;font-size:15px;font-weight:600;white-space:nowrap;transition:transform .12s ease-out,background-color .2s,color .2s}
.btn:active{transform:scale(.96)}
.btn.pri{background:linear-gradient(180deg,#F2853A,#E26612);color:#fff;box-shadow:0 8px 24px -10px rgba(226,102,18,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:var(--ghost);border:1px solid var(--ln);color:var(--tx)}
.btn.danger{color:#B42318}
.btn.danger.armed{background:#B42318;color:#fff;border-color:transparent}
.btn.sm{height:40px;padding:0 14px;font-size:14px;border-radius:12px}
.btn.wide{width:100%}
.btn:disabled{opacity:.5}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:500}
.pill.ok{color:var(--goodtx);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.22)}
.pill.ok i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.demo{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--gold);padding:2px 9px;border-radius:7px;border:1px dashed rgba(246,180,106,.4)}
@keyframes stepIn{from{opacity:0;transform:translate3d(0,8px,0)}}
.skel{border-radius:14px;background:rgba(255,255,255,.05)}
.lg{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.lg.bidv{background:#0B6E61;color:#E7FFF9}.lg.pionex{background:#F0A23C;color:#2B1606}

/* ——— выбор периода: пилюля в углу, нажатие открывает свой календарь ——— */
.period{display:flex;align-items:center;height:40px;padding:0 3px;border-radius:13px;background:var(--chip);border:1px solid var(--ln);flex:none}
.period button{height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx2);transition:background-color .2s,transform .12s}
.period button:active{transform:scale(.94);background:rgba(255,255,255,.08)}
.period button:disabled{opacity:.25}
.period [data-pnav]{width:30px}
.period [data-pnav] svg{width:16px;height:16px}
.period .pl{gap:6px;padding:0 8px;font-size:14px;font-weight:600;color:var(--tx);white-space:nowrap}
.period .pl svg{width:15px;height:15px;color:var(--or2)}

/* ——— Обзор ——— */
.mark{width:34px;height:34px;border-radius:10px;flex:none;overflow:hidden;box-shadow:0 6px 18px -6px rgba(226,102,18,.6)}
.mark svg{width:100%;height:100%;display:block}
.top .brand{display:flex;align-items:center;gap:10px;min-width:0}
.wm{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.wm img{display:block;height:14px;width:auto;margin-bottom:5px}
.wm b{font-size:17px;font-weight:600}
.wm small{font-size:11.5px;color:var(--tx3);white-space:nowrap}
.hero{padding-top:var(--sec);text-align:center}
.bal-hero{display:block;width:100%;border-radius:22px;transition:transform .12s ease-out}
.bal-hero:active{transform:scale(.985)}
.big{display:block;font-size:clamp(42px,12.5vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1;margin-top:10px;white-space:nowrap}
.big small{font-size:.44em;color:var(--or2);margin-left:6px;letter-spacing:0;font-weight:500}
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--sec)}
/* поступление на BIDV вручную — тихая кнопка под картами */
.add-in{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:var(--gap);border-radius:var(--r);background:var(--card);border:1px solid var(--ln);font-size:15px;font-weight:500;color:var(--tx1);transition:transform .12s ease-out}
.add-in:active{transform:scale(.98)}
.add-in svg{width:18px;height:18px;color:var(--goodtx)}
.kinds.who{grid-template-columns:1fr 1fr 1fr}
.kinds.who button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:72px;font-size:13px}
.kinds.who svg{width:20px;height:20px;color:#C9560D}
.kinds button.on{background:#FFF1E5;border-color:rgba(226,102,18,.7);box-shadow:inset 0 0 0 1px rgba(226,102,18,.4)}
.wcard{display:block;border-radius:14px;transition:transform .15s ease-out}
.wcard:active{transform:scale(.96)}
.bcard{position:relative;display:block;aspect-ratio:720/450;border-radius:12px;overflow:hidden;isolation:isolate}
.bcard img{display:block;width:100%;height:100%;object-fit:cover}
.bcard.bidv{box-shadow:0 12px 28px -14px rgba(62,135,126,.9)}
.bcard.pionex{box-shadow:0 12px 28px -14px rgba(234,92,56,.9)}
.bc-bal{position:absolute;left:7%;bottom:24%;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bcard.big{border-radius:18px;text-align:left}
.bcard.big .bc-bal{font-size:26px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stat{padding:var(--pad)}
.stat small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx3)}
.stat small svg{width:14px;height:14px}
.stat b{display:block;margin-top:6px;font-size:21px;letter-spacing:-.03em;font-weight:600}
.stat b.up{color:var(--goodtx)}
.stat em{display:block;font-style:normal;font-size:12px;color:var(--tx3);margin-top:2px}
.leak{display:flex;align-items:center;gap:var(--gap);width:100%;margin-top:var(--gap);padding:14px var(--pad);border-radius:var(--r);text-align:left;
  background:linear-gradient(120deg,rgba(226,102,18,.2),rgba(226,102,18,.05) 60%);border:1px solid rgba(242,133,58,.35);transition:transform .12s ease-out}
.leak:active{transform:scale(.98)}
.leak .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#F2853A,#C9550C);color:#fff;flex:none}
.leak .t{flex:1;min-width:0}
.leak small{display:block;font-size:12.5px;color:var(--gold)}
.leak b{font-size:19px;letter-spacing:-.02em}
.leak .go{width:18px;height:18px;color:var(--or2)}

/* баланс отдельно в донгах и USDT */
.big2{display:block;margin-top:8px;font-size:clamp(24px,7vw,32px);font-weight:600;letter-spacing:-.03em;color:var(--tx1)}
.big2 small{font-size:.6em;color:var(--or2);font-weight:500}
.tot{display:block;margin-top:6px;font-size:13px;color:var(--tx3)}
/* знак USDT — как символ валюты рядом с суммой */
.usdt{display:inline-block;width:.9em;height:.9em;vertical-align:-.12em;flex:none;overflow:visible;shape-rendering:geometricPrecision}
/* месяц плитками: сверху на всю ширину — с чем зашли, ниже квадраты пришло/ушло по картам */
.flow{display:grid;gap:var(--gap)}
.ft-open,.ft{border-radius:var(--r);background:var(--card);border:1px solid var(--ln);padding:var(--pad);text-align:center}
.ft-h{display:block;font-size:15px;font-weight:600;color:var(--tx1)}
.ft-h small{display:block;font-size:12.5px;font-weight:500;color:var(--tx3);margin-top:2px}
.ft-two{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--gap)}
.ft-two b{font-size:clamp(19px,5.6vw,23px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:var(--tx)}
.ft-two b+b{border-left:1px solid var(--ln)}
.ft-open b small,.ft b small{font-size:.62em;color:var(--or2);font-weight:500;margin-left:3px;letter-spacing:0}
.ft-n{display:block;font-size:12px;line-height:1.35;color:var(--tx3);margin-top:8px}
.ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.ft-sum{display:block;width:100%;transition:transform .12s ease-out}
.ft-sum:active{transform:scale(.98)}
.ft-sum>b{display:block;margin-top:var(--gap);font-size:clamp(26px,8vw,34px);font-weight:600;letter-spacing:-.035em;color:var(--tx);white-space:nowrap}
.ft{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;transition:transform .12s ease-out}
.ft:active{transform:scale(.97)}
.ft>b{font-size:clamp(16px,5vw,20px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:var(--tx)}
.ft.in>b{color:var(--goodtx)}
.ft .ft-n{margin-top:0}

/* ——— светлые блоки (тёплый белый, как на сайте) ——— */
.light{position:relative;background:#F2EDE7;color:var(--tx);margin-top:var(--sec);padding:1px 0 var(--sec);border-radius:28px 28px 0 0;
  --tx:#1B1714;--tx1:#3A322C;--tx2:#5E554E;--tx3:#8A8078;--ln:rgba(52,36,24,.11);--card:#FAF7F3;--chip:#fff;--sunk:rgba(52,36,24,.06);--ghost:rgba(52,36,24,.05);--gold:#A54A0C;--or2:#C9560D;color-scheme:light}
.light+.blk{margin-top:-28px;border-radius:28px 28px 0 0;background:var(--bg);position:relative;padding-top:1px}
.light .card{box-shadow:0 1px 2px rgba(52,36,24,.04),0 18px 36px -28px rgba(90,44,12,.3)}
.light .grad{background-image:linear-gradient(100deg,#A9450A 0%,#E26612 100%)}

/* график по дням */
.chart{padding:var(--pad)}
.ch-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap);min-height:44px}
.ch-top small{display:block;font-size:12.5px;color:var(--tx3)}
.ch-top b{font-size:22px;letter-spacing:-.03em}
.ch-top .avg{font-size:12.5px;color:var(--tx3);text-align:right}
.ch-top .avg b{font-size:15px;color:var(--tx2)}
.bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:150px;margin-top:var(--gap);touch-action:pan-y}
.bars .avg-ln{position:absolute;left:0;right:0;border-top:1px dashed rgba(52,36,24,.25);pointer-events:none}
.bars button{flex:1;height:100%;display:flex;align-items:flex-end;padding:0}
.bars button i{display:block;width:100%;min-height:3px;border-radius:4px;background:linear-gradient(180deg,#F2853A,#E26612);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ez),opacity .2s;transition-delay:calc(var(--i) * 12ms)}
.bars button.cap i{position:relative;background:linear-gradient(180deg,#B84C08,#E26612)}
.bars button.cap i::after{content:"";position:absolute;left:-2px;right:-2px;top:16px;height:3px;background:#FAF7F3;transform:skewY(-24deg)}
.bars button.z i{background:rgba(52,36,24,.12)}
.bars button.fut i{background:transparent;border:1px dashed rgba(52,36,24,.15)}
.rv[data-rv="on"] .bars button i{transform:none}
.bars.sel button:not(.on) i{opacity:.35}
.x-ax{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--tx3)}

/* категории и разбивка потерь */
.cats,.brk{padding:0 var(--pad)}
.cat{display:grid;grid-template-columns:38px 1fr auto;gap:var(--gap);align-items:center;padding:var(--gap) 0;border-bottom:1px solid var(--ln);width:100%;text-align:left}
.cat:last-child{border-bottom:0}
.cat .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(226,102,18,.1);color:#D25F10}
.cat .ic svg{width:19px;height:19px}
.cat .nm{display:block;font-size:15px;font-weight:500}
.cat .tr{display:block;height:6px;margin-top:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.cat .tr i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#F2853A,#E26612);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ez);transition-delay:calc(var(--i) * 50ms)}
.rv[data-rv="on"] .cat .tr i{transform:scaleX(var(--w))}
.cat b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brk .cat{align-items:start}.brk .cat .ic{margin-top:2px;color:var(--or2)}
.brk .hint{display:block;font-size:12.5px;color:var(--tx3);margin-top:1px}

/* ——— строки операций ——— */
.list{padding:2px 0}
.row{display:grid;grid-template-columns:42px 1fr auto;gap:var(--gap);align-items:center;width:100%;padding:11px 14px;text-align:left;-webkit-touch-callout:none}
.row:active{background:rgba(255,255,255,.05)}
.row+.row{box-shadow:inset 0 1px 0 var(--ln)}
.row .ic{position:relative;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(226,102,18,.1);color:var(--or2);border:1px solid rgba(242,133,58,.16)}
.row .ic svg{width:19px;height:19px}
.row .ic.in{background:rgba(74,222,128,.08);color:var(--goodtx);border-color:rgba(74,222,128,.18)}
.row .ic.mut{background:rgba(255,255,255,.04);color:var(--tx2);border-color:var(--ln)}
.row .ic .dot{position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--or2);border:2px solid var(--bg)}
.row .mid{min-width:0}
.row .mid b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .mid small{display:block;font-size:12.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .amt{text-align:right;font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.row .amt.in{color:var(--goodtx)}
.row .amt.mut{color:var(--tx2);font-weight:500}
.row .amt.fee{color:#C9560D}
.row .amt small{display:block;font-size:12px;font-weight:400;color:var(--tx3)}
.row .amt s{text-decoration:line-through;color:var(--tx3)}
.day{margin-top:var(--sec)}
.day+.day{margin-top:var(--gap)}
.day-h{display:flex;align-items:center;gap:8px;width:100%;min-height:56px;padding:0 var(--pad);text-align:left;transition:background-color .2s}
.day-h:active{background:rgba(255,255,255,.03)}
.day-h em{font-style:normal;font-size:15px;font-weight:600;color:var(--tx1)}.day-h em::first-letter{text-transform:uppercase}
.day-h small{font-size:12.5px;color:var(--tx3);margin-right:auto}
.day-h span{font-size:14px;font-weight:500;color:var(--tx2);white-space:nowrap}
.day-h .chev{width:16px;height:16px;color:var(--tx3);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.day.open .day-h .chev{transform:rotate(90deg)}
.day-b{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),opacity .28s ease-out}
.day.open .day-b{grid-template-rows:1fr;opacity:1}
.day-b>div{min-height:0;overflow:hidden}
.day-b .list{border-top:1px solid var(--ln)}

/* поиск и фильтры */
.search{position:relative;margin-top:var(--gap)}
.search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--tx3)}
.search input{width:100%;height:46px;padding:0 14px 0 42px;border-radius:14px;border:1px solid var(--ln);background:var(--field);color:var(--tx);font-size:16px;-webkit-appearance:none;transition:border-color .2s}
.search input::placeholder{color:var(--tx3)}
.search input:focus{border-color:rgba(242,133,58,.55)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.chips-row{display:flex;gap:6px;overflow-x:auto;touch-action:pan-x pan-y;scrollbar-width:none;margin:var(--gap) calc(-1 * max(16px,var(--sal))) 0;padding:2px max(16px,var(--sal))}
.chips-row::-webkit-scrollbar{display:none}
.chips-row button{flex:none;height:36px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;color:var(--tx2);background:var(--chip);border:1px solid var(--ln);transition:color .2s,background-color .2s,transform .12s}
.chips-row button:active{transform:scale(.95)}
.chips-row button.on{color:#fff;background:var(--or);border-color:transparent}
.chip-sep{flex:none;width:1px;margin:6px 4px;background:var(--ln)}
.empty{padding:44px 20px;text-align:center;color:var(--tx3);font-size:15px}
.empty b{display:block;font-size:19px;color:var(--tx);margin:12px 0 6px;letter-spacing:-.02em}
.more-btn{display:flex;justify-content:center;margin-top:var(--gap)}

/* ——— «Разбор» ——— */
#qlist{margin-top:var(--sec)}
.qcard{padding:var(--pad);transition:transform .45s var(--sheet),opacity .35s,margin .4s var(--ez),max-height .4s var(--ez),padding .4s var(--ez);max-height:640px}
.qcard.gone{transform:translate3d(110%,0,0);opacity:0;max-height:0;margin-top:0!important;padding-top:0;padding-bottom:0;border-width:0}
.qcard .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gold);padding:4px 9px;border-radius:8px;background:rgba(246,180,106,.08);border:1px solid rgba(246,180,106,.2)}
.qcard .tag svg{width:13px;height:13px}
.qcard h3{font-size:19px;margin-top:var(--gap);letter-spacing:-.02em;overflow-wrap:anywhere}
.qcard .sum{font-size:30px;font-weight:600;letter-spacing:-.04em;margin-top:6px}
.qcard .sum small{font-size:14px;font-weight:400;color:var(--tx3);letter-spacing:0;margin-left:6px}
.qcard p{font-size:14px;color:var(--tx2);margin-top:6px}
.qcard .meta{font-size:12.5px;color:var(--tx3);margin-top:8px}
.ttl-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.07);margin-top:var(--gap);overflow:hidden}
.ttl-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--or));transform-origin:0 50%}
.sugg{display:flex;align-items:center;gap:10px;margin-top:var(--gap);padding:var(--gap);border-radius:14px;background:var(--sunk);border:1px solid var(--ln)}
.sugg .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(226,102,18,.12);color:var(--or2);flex:none}
.sugg small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx3)}
.sugg small svg{width:13px;height:13px;color:var(--gold)}
.sugg b{font-size:16px}
.conf{margin-left:auto;font-size:13px;font-weight:500;color:var(--gold)}
.acts{display:flex;gap:8px;margin-top:var(--gap)}
.acts .btn{flex:1}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--gap)}
.kinds button{height:46px;border-radius:13px;font-size:14px;font-weight:500;background:var(--chip);border:1px solid var(--ln);transition:transform .12s,background-color .2s}
.kinds button:active{transform:scale(.96);background:rgba(226,102,18,.14)}
.done-ic{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3);color:var(--goodtx)}
.done-ic svg{width:38px;height:38px;stroke-width:2.2;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .7s var(--ez) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ——— «Потери» ——— */
.loss-hero{padding-top:var(--sec);text-align:center}
.loss-hero p{font-size:15.5px;color:var(--tx2);margin:var(--gap) auto 0;max-width:460px}
.loss-hero p b{color:var(--tx)}
.loss-hero+.card{margin-top:var(--sec)}
.pair{padding:var(--pad)}
.pair .fl{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.02em;flex-wrap:wrap}
.pair .fl svg{width:16px;height:16px;color:var(--or2)}
.pair .fl small{font-size:12.5px;font-weight:400;color:var(--tx3);letter-spacing:0;width:100%}
.rates{position:relative;height:30px;margin-top:var(--gap)}
.rates .ln{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:3px;background:var(--sunk)}
.rates .gap{position:absolute;top:13px;height:4px;border-radius:3px;background:linear-gradient(90deg,#E26612,#F6B46A);transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ez) .15s}
.rv[data-rv="on"] .rates .gap{transform:none}
.rates .pt{position:absolute;top:7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:3px solid #FAF7F3;background:var(--tx3)}
.rates .pt.mk{background:var(--or)}
.rl{display:flex;justify-content:space-between;font-size:12px;color:var(--tx3);margin-top:2px}
.rl b{color:var(--tx);font-weight:600}
.pair .ls{display:flex;justify-content:space-between;align-items:center;margin-top:var(--gap);padding-top:var(--gap);border-top:1px solid var(--ln);font-size:14px;color:var(--tx2)}
.pair .ls b{color:var(--or2);font-size:16px}

/* ——— «Ещё»: списки как в настройках iOS ——— */
.grp .rowl{display:flex;align-items:center;gap:var(--gap);width:100%;min-height:56px;padding:10px 14px;text-align:left;font-size:15.5px}
.grp .rowl+.rowl{box-shadow:inset 0 1px 0 var(--ln)}
.grp button.rowl:active{background:rgba(255,255,255,.04)}
.grp .rowl .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(226,102,18,.12);color:var(--or2);flex:none}
.grp .rowl .ic svg{width:17px;height:17px}
.grp .rowl .t{flex:1;min-width:0}
.grp .rowl .t small{display:block;font-size:12.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp .rowl .v{font-size:14px;color:var(--tx3);white-space:nowrap}
.grp .rowl .chev{width:16px;height:16px;color:var(--tx3)}
.fld{display:flex;flex-direction:column;gap:6px;padding:var(--gap) 14px}
.fld+.fld{box-shadow:inset 0 1px 0 var(--ln)}
.fld label{font-size:12.5px;font-weight:600;color:var(--tx3)}
.fld input{width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--ln);background:var(--field);color:var(--tx);font-size:16px;-webkit-appearance:none}
.fld input:focus{border-color:rgba(242,133,58,.55)}
.fld .hint{font-size:12px;color:var(--tx3)}
.tagc{display:flex;flex-wrap:wrap;gap:8px;padding:var(--gap)}
.tagc button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:12px;font-size:14px;background:var(--chip);border:1px solid var(--ln);transition:transform .12s,border-color .2s}
.tagc button:active{transform:scale(.95);border-color:rgba(242,133,58,.5)}
.tagc button svg{width:16px;height:16px;color:var(--or2)}
.tagc .add{color:var(--or2);border-style:dashed;border-color:rgba(242,133,58,.45)}
.src{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:rgba(246,180,106,.1);color:var(--gold)}
.src.ai{background:rgba(160,140,255,.12);color:#C4B5FD}
.foot{display:flex;flex-direction:column;align-items:center;gap:2px;margin:var(--sec) auto 0;padding:8px 16px;border-radius:14px;font-size:13px;font-weight:600;color:var(--tx2)}
.foot small{font-size:12.5px;font-weight:500;color:var(--or2)}
.foot:active{background:rgba(255,255,255,.05)}
.chg{margin-top:var(--pad);padding:var(--pad);border-radius:18px;background:#FAF7F3;border:1px solid var(--ln)}
.chg-h{display:flex;justify-content:space-between;align-items:baseline}.chg-h b{font-size:17px}.chg-h span{font-size:12.5px;color:var(--tx3)}
.chg ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.chg li{position:relative;padding-left:16px;font-size:14px;color:var(--tx2)}
.chg li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:#E26612}

/* ——— нижняя панель вкладок ——— */
.tabbar{position:absolute;z-index:20;left:50%;bottom:var(--tabb);transform:translateX(-50%);width:min(460px,calc(100% - 24px - var(--sal) - var(--sar)));height:var(--tabh);
  display:grid;grid-template-columns:repeat(5,1fr);padding:5px;border-radius:24px;
  background:rgba(28,23,20,.82);border:1px solid rgba(255,236,220,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .5s var(--sheet),opacity .3s}
.sheet-open .tabbar{transform:translate3d(-50%,140%,0);opacity:0}
.tabbar button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:19px;font-size:10.5px;font-weight:500;color:var(--tx3);transition:color .2s,transform .12s ease-out}
.tabbar button:active{transform:scale(.92)}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:#fff}
.tabbar button.on svg{color:var(--or2)}
.tabbar .bdg{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--or);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px rgba(28,23,20,.9);transition:transform .3s var(--ez)}
.tabbar .bdg.z{transform:scale(0)}
.tab-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;border-radius:19px;background:rgba(226,102,18,.14);box-shadow:inset 0 0 0 1px rgba(242,133,58,.42);transition:transform .4s var(--ez);pointer-events:none}

/* ——— нижний лист ——— */
.sheet-wrap{position:absolute;inset:0;z-index:40;pointer-events:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .4s var(--sheet)}
.sheet-open .scrim{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(720px,100%);max-height:calc(100% - var(--sat) - 22px);display:flex;flex-direction:column;will-change:transform;
  border-radius:28px 28px 0 0;background:#F2EDE7;color:var(--tx);transform:translate3d(0,105%,0);transition:transform .45s var(--sheet);pointer-events:auto;box-shadow:0 -8px 30px rgba(0,0,0,.3);
  --tx:#1B1714;--tx1:#3A322C;--tx2:#5E554E;--tx3:#8A8078;--ln:rgba(52,36,24,.11);--card:#FAF7F3;--chip:#fff;--sunk:rgba(52,36,24,.06);--ghost:rgba(52,36,24,.05);--gold:#A54A0C;--or2:#C9560D;--goodtx:#15803D;color-scheme:light}
.sheet-open .sheet{transform:translate3d(0,0,0)}
/* пока печатаете: лист у верха экрана, высотой не больше видимой над клавиатурой части */
.sheet.typing .sh-h small,.sheet.typing .sh-acts{display:none}
.sheet.typing .inp{margin-top:8px}
.sheet.typing .sh-sec{margin-top:12px;margin-bottom:8px}
.sheet.typing .igrid{gap:6px}
.sheet.typing .igrid button{height:42px;border-radius:12px}
.sheet.drag{transition:none}
.grab{flex:none;height:26px;display:grid;place-items:center;touch-action:none;cursor:grab}
.grab i{width:38px;height:5px;border-radius:3px;background:rgba(52,36,24,.2)}
.sh-x{position:absolute;right:14px;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(52,36,24,.07);color:var(--tx2);z-index:2}
.sh-x svg{width:16px;height:16px}
.sh-body{overflow-y:auto;overscroll-behavior:contain;padding:4px max(20px,var(--sal)) calc(var(--sab) + 24px);-webkit-overflow-scrolling:touch}
#txMore.fade{animation:fIn .25s ease-out both}
@keyframes fIn{from{opacity:0}}
.sh-h{display:flex;align-items:center;gap:var(--gap);padding-right:40px;touch-action:none}
.sh-h.c{justify-content:center;text-align:center;padding:0 40px}
.sh-h .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(226,102,18,.12);color:#D25F10;flex:none}
.sh-h .ic svg{width:22px;height:22px}
.sh-h b{display:block;font-size:18px;letter-spacing:-.02em;overflow-wrap:anywhere}
.sh-h small{font-size:13px;color:var(--tx3)}
.sh-amt{font-size:40px;font-weight:600;letter-spacing:-.045em;margin-top:var(--pad);line-height:1.05}
.sh-amt.c{text-align:center}
.sh-amt.in{color:#15803D}
.sh-sub{font-size:14px;color:var(--tx2);margin-top:6px}
.sh-gap{margin-top:var(--pad)}
.st{display:inline-flex;align-items:center;gap:6px;margin-top:var(--gap);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px}
.st.ok{color:#15803D;background:#E7F7EC}.st.wait{color:#A54A0C;background:#FCEBDD}.st.void{color:#8A8078;background:rgba(52,36,24,.07)}
.st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.kv{margin:var(--pad) 0 0;padding:2px var(--pad);border-radius:18px;background:#FAF7F3;border:1px solid var(--ln)}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:14.5px}
.kv div+div{border-top:1px solid var(--ln)}
.kv dt{color:var(--tx3)}
.kv dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
.kv dd.fee{color:#C9560D}.kv dd.in{color:#15803D}
.sh-sec{font-size:13px;font-weight:600;color:var(--tx3);margin:var(--sec) 4px var(--gap)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cgrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;font-size:12.5px;font-weight:500;background:#fff;border:1px solid var(--ln);transition:transform .12s,border-color .2s,background-color .2s}
.cgrid button svg{width:20px;height:20px;color:#D25F10}
.cgrid button:active{transform:scale(.94)}
.cgrid button.on{border-color:rgba(226,102,18,.7);background:#FFF1E5;box-shadow:inset 0 0 0 1px rgba(226,102,18,.4)}
.raw{padding:14px;border-radius:14px;background:#1B1714;color:#E1D9D2;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.raw small{display:block;color:#857B73;margin-bottom:6px;font-family:var(--ff)}
.raw em{display:block;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,236,220,.12);font:400 13px/1.5 var(--ff);font-style:normal;color:#B9AFA6}
.sh-acts{display:flex;gap:8px;margin-top:var(--sec)}
.sh-acts .btn{flex:1}
.sheet .btn.ghost{background:#fff}
.sheet .btn.danger{color:#B42318}
.sheet .btn.danger.armed{background:#B42318;color:#fff;border-color:transparent}
.sh-note{margin-top:var(--gap);font-size:12.5px;color:var(--tx3);text-align:center}
.inp{display:block;width:100%;height:50px;margin-top:var(--pad);padding:0 14px;border-radius:14px;border:1px solid var(--ln);background:#fff;color:var(--tx);font-size:17px;-webkit-appearance:none}
.inp:focus{border-color:rgba(226,102,18,.6)}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.igrid button{height:52px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid var(--ln);color:#D25F10;transition:transform .12s,border-color .2s,background-color .2s}
.igrid button:active{transform:scale(.92)}
.igrid button.on{border-color:rgba(226,102,18,.7);background:#FFF1E5;box-shadow:inset 0 0 0 1px rgba(226,102,18,.4)}
.igrid svg{width:22px;height:22px}

/* кошельки в листе */
.wal{margin-top:var(--pad)}
.wal-h{margin-top:var(--gap);text-align:center}.wal-h small{font-size:12.5px;color:var(--tx3)}
.wal-b{text-align:center}.wal-b small{font-size:13.5px;color:var(--tx3)}
.wal-bar{height:6px;border-radius:4px;background:var(--sunk);margin-top:var(--gap);overflow:hidden}
.wal-bar i{display:block;height:100%;background:linear-gradient(90deg,#F2853A,#E26612);transform-origin:0 50%;border-radius:4px}
.wal .kv{background:#FAF7F3}
.wal .btn{margin-top:var(--gap)}
.wal+.wal{margin-top:var(--sec)}

/* ——— свой календарь ——— */
.chips-row.in-sheet{margin:var(--pad) calc(-1 * max(20px,var(--sal))) 0;padding:2px max(20px,var(--sal))}
.cal{margin-top:var(--pad);padding:var(--gap);border-radius:20px;background:#FAF7F3;border:1px solid var(--ln)}
.cal-h{display:flex;align-items:center;justify-content:space-between}
.cal-h button{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--tx2);transition:background-color .2s,transform .12s}
.cal-h button:active{transform:scale(.92);background:rgba(52,36,24,.07)}
.cal-h button:disabled{opacity:.25}
.cal-h .cal-m{width:auto;padding:0 12px;font-size:16px;font-weight:600;color:var(--tx)}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-w{margin-top:8px}
.cal-w span{text-align:center;font-size:12px;color:var(--tx3);padding:4px 0}
.cal-g{row-gap:4px;touch-action:pan-y}
.cal-g button{position:relative;height:44px;display:grid;place-items:center;font-size:15.5px;font-weight:500}
.cal-g button span{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:background-color .2s,color .2s,transform .12s}
.cal-g button:active span{transform:scale(.9)}
.cal-g button.today span{box-shadow:inset 0 0 0 1.5px rgba(226,102,18,.6)}
.cal-g button.fut{color:rgba(52,36,24,.25)}
.cal-g button.in::before,.cal-g button.a:not(.one)::before,.cal-g button.b:not(.one)::before{content:"";position:absolute;top:2px;bottom:2px;left:0;right:0;background:rgba(226,102,18,.12)}
.cal-g button.in.rs::before,.cal-g button.b.rs:not(.one)::before{left:2px;border-radius:20px 0 0 20px}
.cal-g button.in.re::before,.cal-g button.a.re:not(.one)::before{right:2px;border-radius:0 20px 20px 0}
.cal-g button.in.rs.re::before{border-radius:20px}
.cal-g button.a:not(.one)::before{left:50%}
.cal-g button.b:not(.one)::before{right:50%}
.cal-g button.a span,.cal-g button.b span{background:var(--or);color:#fff;box-shadow:0 6px 16px -6px rgba(226,102,18,.9)}
#calOk{margin-top:var(--pad)}

/* ——— всплывающее сообщение ——— */
.toast{position:absolute;z-index:60;left:50%;top:calc(var(--sat) + 10px);transform:translate3d(-50%,-130%,0);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:11px 16px 11px 12px;border-radius:18px;font-size:14px;font-weight:500;
  background:rgba(34,28,24,.97);border:1px solid rgba(255,236,220,.12);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:opacity .25s var(--ez),transform .45s var(--sheet)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0)}
.toast .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(74,222,128,.14);color:var(--goodtx);flex:none}
.toast .ic svg{width:15px;height:15px}

/* загрузка: экран чуть тускнеет сразу после нажатия, пока сервер отвечает */
.root,.feed{transition:opacity .2s ease-out}
.busy{opacity:.55;pointer-events:none}

/* ——— планшет и широкие экраны ——— */
@media (min-width:700px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .big{font-size:72px}
  .cgrid{grid-template-columns:repeat(4,1fr)}
  .sheet{bottom:20px;border-radius:28px;max-height:calc(100% - var(--sat) - 60px)}
}
@media (max-width:359px){ .big{font-size:38px} .stat b{font-size:18px} .tabbar button{font-size:9.5px} .period .pl{padding:0 4px} }

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .bars button i,.cat .tr i,.rates .gap{transition:none}
  #txMore.fade{animation:none}
  .view,.view.on{transition:none;transform:none}
  .sheet,.scrim,.tabbar{transition-duration:.01s}
}
@media (prefers-reduced-transparency:reduce){ .tabbar{background:#1E1916;-webkit-backdrop-filter:none;backdrop-filter:none} }

/* никакого масштаба и сдвига вбок: только вертикальная прокрутка (щипок, двойной тап и жесты iOS глушит app.js) */
html,body,.app,.views,.view{overscroll-behavior:none;touch-action:pan-y}
input,textarea,select{font-size:max(16px,1em)}

/* ═════════ Настройки (0.29) ═════════ */
.prof{display:flex;align-items:center;gap:var(--gap);width:100%;margin-top:var(--sec);margin-bottom:var(--gap);padding:14px var(--pad);border-radius:var(--r);background:var(--card);border:1px solid var(--ln);text-align:left;transition:transform .12s ease-out}
.prof:active{transform:scale(.985)}
.prof .t{flex:1;min-width:0}.prof b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}.prof small{display:block;font-size:13px;color:var(--tx3)}
.prof .chev{width:16px;height:16px;color:var(--tx3)}
.ava{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,#F2853A,#B4470A);color:#fff;font-size:20px;font-weight:600}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.big{width:84px;height:84px;font-size:34px}
.ava.brandava{background:none}.ava.brandava svg{width:100%;height:100%}
.pf-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 var(--sec);text-align:center}
.pf-head b{margin-top:8px;font-size:21px;font-weight:600;letter-spacing:-.02em}.pf-head small{font-size:14px;color:var(--tx3)}
.note{font-size:13px;line-height:1.45;color:var(--tx3);margin:10px 6px var(--sec)}
.note.c{text-align:center}
.grp .rowl .v{max-width:48%;overflow:hidden;text-overflow:ellipsis}
.grp .rowl .v.ok{color:var(--goodtx)}.grp .rowl .v.bad{color:var(--or2)}
.grp .rowl.soon .t,.grp .rowl.soon .ic{opacity:.55}
.grp .rowl.col{flex-direction:column;align-items:stretch;gap:10px}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.segs button{flex:1 0 auto;height:36px;padding:0 12px;border-radius:11px;font-size:13.5px;font-weight:500;color:var(--tx2);background:rgba(255,255,255,.05);border:1px solid var(--ln);transition:background-color .2s,color .2s,transform .12s}
.segs button:active{transform:scale(.95)}
.segs button.on{color:#fff;background:var(--or);border-color:transparent}
.segs.light button{background:#fff;color:var(--tx2)}.segs.light button.on{background:var(--or);color:#fff}
/* переключатель как в iOS */
.sw{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color .25s}
.sw i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.sw.on{background:linear-gradient(180deg,#F2853A,#E26612)}.sw.on i{transform:translateX(20px)}
.sw.off{opacity:.45}
/* страницы вглубь */
.spages{position:absolute;inset:0;z-index:5;pointer-events:none}
.spage{position:absolute;inset:0;pointer-events:auto;transform:translate3d(100%,0,0);transition:transform .44s cubic-bezier(.32,.72,0,1);box-shadow:-24px 0 48px -24px rgba(0,0,0,.7);
  background:radial-gradient(520px 420px at 0% 0%,rgba(226,102,18,.18),transparent 70%),var(--bg)}
.spage.on{transform:none}
.spage.out{transform:translate3d(100%,0,0)}
.sp-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior-y:contain;scrollbar-width:none;padding-top:calc(var(--sat) + 12px);padding-bottom:calc(var(--tabh) + var(--tabb) + var(--sec))}
.sp-scroll::-webkit-scrollbar{display:none}
#v-more .scroll,.spage.under{transition:transform .44s cubic-bezier(.32,.72,0,1),opacity .44s ease-out}
#v-more .scroll.under,.spage.under{transform:translate3d(-26%,0,0);opacity:.45}
.sp-back{display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 14px 0 8px;border-radius:999px;background:var(--card);border:1px solid var(--ln);font-size:15px;font-weight:500;color:var(--tx1);transition:transform .12s}
.sp-back:active{transform:scale(.95)}.sp-back svg{width:18px;height:18px;color:var(--or2)}
.sp-ttl{margin:14px 0 var(--gap)}
/* своя карта банка — в фирменных цветах, без чужих картинок */
.bcard.gen{background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,var(--c1),var(--c2));color:var(--ctx);box-shadow:0 12px 28px -14px rgba(0,0,0,.8)}
.bcard.gen::after{content:'';position:absolute;right:-18%;bottom:-40%;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid currentColor;opacity:.12}
.g-name{position:absolute;left:7%;top:9%;font-size:clamp(11px,3.4vw,17px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:86%}
.g-chip{position:absolute;left:7%;top:36%;width:13%;aspect-ratio:1.3;border-radius:4px;background:linear-gradient(135deg,#F4D58A,#B88B2E)}
.bcard.gen .bc-bal{color:var(--ctx);text-shadow:none}
.g-num{position:absolute;left:7%;bottom:9%;font-size:clamp(9px,2.6vw,13px);font-weight:600;opacity:.85;letter-spacing:.06em}
.g-net{position:absolute;right:7%;bottom:8%;font-size:clamp(10px,3vw,15px);font-weight:800;font-style:italic;letter-spacing:-.01em}
/* раскладка карт: одна — во всю ширину, три и больше — стопкой */
.wcards.w1{grid-template-columns:1fr}
.wstack{display:grid;margin-top:var(--sec);padding-bottom:calc((var(--n) - 1) * 54px)}
.wstack .wcard{grid-area:1/1;transform:translateY(calc(var(--i) * 54px));z-index:var(--i);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.wstack .wcard:active{transform:translateY(calc(var(--i) * 54px)) scale(.985)}
.wcards.w1 .bc-bal,.wstack .bc-bal{font-size:24px}
.wcards.w1 .g-name,.wstack .g-name{font-size:19px}.wcards.w1 .g-net,.wstack .g-net{font-size:18px}.wcards.w1 .g-num,.wstack .g-num{font-size:14px}
.wprev .wcards,.wprev .wstack{margin-top:0}
.grp .rowl .mini{width:52px;flex:none}.grp .rowl .mini .bcard{border-radius:6px;box-shadow:none}
.grp .rowl .mini .g-name,.grp .rowl .mini .g-num,.grp .rowl .mini .g-net{display:none}
.grp .rowl .del{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--tx3);transition:background-color .2s,color .2s}
.grp .rowl .del svg{width:16px;height:16px}.grp .rowl .del.armed{background:#B42318;color:#fff}
.cprev{max-width:300px;margin:4px auto 0}
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips-wrap button{height:32px;padding:0 12px;border-radius:999px;font-size:13px;background:#fff;border:1px solid var(--ln);color:var(--tx2);transition:transform .12s}
.chips-wrap button:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.spage,#v-more .scroll,.wstack .wcard,.sw i{transition:none}}
.spage .grp .rowl .t small{white-space:normal}

/* ═════════ 0.30 ═════════ */
/* уведомление сверху — в одну строку */
.toast{width:max-content;max-width:calc(100% - 24px)}
.toast>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* мягкое затухание сверху: контент уходит под шапку Telegram плавно, а не обрезается */
/* в листе: когда пролистали вниз, верх содержимого плавно растворяется под ручкой листа, а не режется */
.sh-body{transition:-webkit-mask-size .2s}
.sh-body.scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px)}
/* плотнее в настройках и листах */
.spage .sec-h{margin:24px 0 10px}.spage .sec-h h2{font-size:20px}
.spage .note{margin:8px 6px 0}
.sp-ttl{margin:12px 0 6px}
.sheet .sh-sec{margin:18px 4px 8px}
.sheet .sh-sec small{font-weight:500;color:var(--tx3);opacity:.8;margin-left:4px}
.sheet .sh-acts{margin-top:20px}
.sheet .inp{margin-top:0}
.sheet .note.c{margin:8px 0 0}
/* категории ровными рядами */
.tagc{flex-direction:column;flex-wrap:nowrap;gap:8px}
.tagc .crow{display:flex;gap:8px}
.tagc .crow button{flex:1 1 auto;justify-content:center;min-width:0}
.tagc .crow button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newcat{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.newcat .inp{margin-top:0;background:var(--card);color:var(--tx);border-color:var(--ln)}
.newcat .btn svg{width:18px;height:18px}
/* пока печатаете вне листа — нижнее меню прячется */
.kbd .tabbar{transform:translate3d(-50%,140%,0);opacity:0}
/* новая карта */
#cType{margin-bottom:12px}
#cType button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px}
#cType button svg{width:17px;height:17px}
#cType button .usdt{width:17px;height:17px}
.g-ut{position:absolute;right:7%;top:8%;width:12%;max-width:30px}.g-ut .usdt{width:100%;height:auto}
.chips-wrap button.on{background:var(--or);border-color:transparent;color:#fff}
.btn.cphoto{margin-top:16px;gap:8px;background:#fff}.btn.cphoto svg{width:17px;height:17px;color:#D25F10}
.sheet.typing .cprev{max-width:190px;transition:max-width .3s}
.sheet.typing #cHint,.sheet.typing .cnet-blk,.sheet.typing .cphoto,.sheet.typing #cType{display:none}
.sheet #cNets,.sheet #cType{margin-top:0}

/* ═════════ 0.31 ═════════ */
.wm img{margin-bottom:0}
/* «+» в центре меню */
.tabbar .tab-add{display:grid;place-items:center}
.tabbar .tab-add span{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(180deg,#F2853A,#E26612);color:#fff;box-shadow:0 8px 22px -8px rgba(226,102,18,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.tabbar .tab-add svg{width:24px;height:24px;color:#fff}
.tab-ind{transition:transform .4s var(--ez),opacity .25s}
/* разбор на главной — тихая карточка, только когда что-то ждёт */
.qnote{display:flex;align-items:center;gap:var(--gap);width:100%;margin-top:var(--gap);padding:12px var(--pad);border-radius:var(--r);text-align:left;background:linear-gradient(180deg,rgba(226,102,18,.16),rgba(226,102,18,.06));border:1px solid rgba(242,133,58,.35);transition:transform .12s ease-out}
.qnote:active{transform:scale(.985)}
.qnote .ic{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(226,102,18,.18);color:var(--or2);flex:none}
.qnote .ic svg{width:20px;height:20px}
.qnote .ic i{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--or);color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:18px;text-align:center}
.qnote .t{flex:1;min-width:0}.qnote b{display:block;font-size:15px;font-weight:600}.qnote small{display:block;font-size:12.5px;color:var(--tx3)}
.qnote .go{width:18px;height:18px;color:var(--or2)}
#v-queue .sp-back{margin-bottom:10px}
#addMode{margin-bottom:12px}
#addMode button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px}
#addMode button svg{width:16px;height:16px}
.sheet #addMode,.sheet #outAcc{margin-top:0}
[hidden]{display:none!important}

/* ═════════ 0.32 ═════════ */
/* шапка: справа колокольчик разбора и месяц */
.top-r{display:flex;align-items:center;gap:8px;flex:none}
.bell{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--ln);color:var(--tx2);transition:transform .12s}
.bell:active{transform:scale(.92)}
.bell svg{width:20px;height:20px}
.bell i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--or);color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg);transition:transform .3s var(--sheet)}
.bell i.z{transform:scale(0)}
/* листы выезжают мягче */
.sheet{transition:transform .55s var(--sheet)}
.scrim{transition:opacity .5s var(--sheet)}
/* новый блок в листе проявляется, а не выскакивает */
@keyframes fadein{from{opacity:0;transform:translate3d(0,8px,0)}}
.fadein{animation:fadein .32s var(--ez) both}
/* ровные отступы в листах: блок от блока — 12, подпись раздела — 18 сверху и 8 снизу */
.sheet .sh-h{margin-bottom:14px}
.sheet .sh-h small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet #addMode,.sheet #cType{margin-bottom:12px}
.fstack{display:flex;flex-direction:column;gap:10px}
.sheet .kinds{margin-top:0}
.sheet .cgrid{margin-top:0}
.sheet .cgrid+.inp,.sheet .kinds+.inp{margin-top:12px}
/* светлый блок в настройках — как на главной */
#v-more .light .grp .rowl .ic{background:rgba(226,102,18,.1);color:#C9560D}
#v-more .light .grp button.rowl:active{background:rgba(52,36,24,.04)}
#v-more .light{padding-bottom:calc(var(--tabh) + var(--tabb) + var(--sec) + 24px);margin-bottom:calc(-1 * (var(--tabh) + var(--tabb) + var(--sec)))}

/* ═════════ 0.34: пример главного экрана в настройках ═════════ */
.hprev{display:flex;flex-direction:column;padding:12px;margin-top:6px;border-radius:var(--r);background:var(--card);border:1px solid var(--ln)}
.hp-cap{font-size:12px;font-weight:600;color:var(--tx3);text-align:center;margin-bottom:4px}
/* блок плавно складывается по высоте и гаснет, когда его выключили */
.hp-b{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .4s var(--sheet),opacity .3s ease-out,margin .4s var(--sheet);margin-top:8px}
.hp-b>div{min-height:0;overflow:hidden;display:grid;gap:8px}
.hp-b.off{grid-template-rows:0fr;opacity:0;margin-top:0}
.hp-b.pair>div{grid-template-columns:1fr 1fr}
.hp-t{display:flex;flex-direction:column;justify-content:center;align-items:center;height:46px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--ln);font-size:12.5px;font-weight:600;color:var(--tx1);text-align:center}
.hp-t small{font-size:11px;font-weight:500;color:var(--tx3)}
.hp-b.wide .hp-t{height:38px}

/* 0.35: итог месяца, «извне / свои» в «Пришло», сверка с банком под балансом */
.ft .own{color:var(--tx3);opacity:.8}
.ft-res .res-two{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--gap)}
.ft-res .res-two>span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 8px}
.ft-res .res-two>span+span{border-left:1px solid var(--ln)}
.ft-res .res-two>span>small{font-size:12.5px;color:var(--tx3)}
.ft-res .res-two b{font-size:clamp(19px,5.6vw,23px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:var(--tx)}
.ft-res .res-two b.in{color:var(--goodtx)}
.ft-res .res-two i{align-self:stretch;height:6px;border-radius:4px;margin-top:4px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.ft-res .res-two i::before{content:'';position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--w));background:linear-gradient(90deg,#3FA866,#86EFAC)}
.ft-res .res-two i.o::before{background:linear-gradient(90deg,#B04A08,#F2853A)}
.ft-res .res-d{display:block;margin-top:var(--gap);padding-top:var(--gap);border-top:1px solid var(--ln)}
.ft-res .res-d>small{display:block;font-size:12.5px;color:var(--tx3)}
.ft-res .res-d b{display:block;margin-top:2px;font-size:clamp(26px,8vw,34px);font-weight:600;letter-spacing:-.035em;white-space:nowrap}
.ft-res .res-d b.neg{color:var(--or2)}.ft-res .res-d b.pos{color:var(--goodtx)}
.ft-res .res-d b small{color:inherit;opacity:.75}

.rc{display:flex;flex-direction:column;align-items:center;margin:12px 0 16px}
.rc-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 13px;border-radius:999px;font-size:13px;font-weight:600;transition:background-color .3s,color .3s,transform .12s ease-out}
.rc-pill:active{transform:scale(.96)}
.rc-pill.ok{background:rgba(74,222,128,.12);color:var(--goodtx)}
.rc-pill.bad{background:rgba(242,133,58,.15);color:var(--or2)}
.rc-pill .i{width:14px;height:14px;transform:rotate(90deg);transition:transform .35s cubic-bezier(.32,.72,0,1);opacity:.8}
.rc.open .rc-pill .i{transform:rotate(-90deg)}
.rc-more{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .4s cubic-bezier(.32,.72,0,1)}
.rc-more>div{min-height:0;overflow:hidden}
.rc.open .rc-more{grid-template-rows:1fr}
.rc-more>div>*:first-child{margin-top:12px}
.rc-more p{font-size:13.5px;line-height:1.45;color:var(--tx2);text-align:center;padding:0 6px}
.rc-more p.mut{font-size:12.5px;color:var(--tx3);margin-top:8px}
.rc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--ln);font-size:14px;text-align:left}
.rc-row small{display:block;font-size:12px;color:var(--tx3)}
.rc-row b{font-weight:600;white-space:nowrap}
.rc-demo{display:block;width:100%;margin-top:12px;padding:10px;border-radius:14px;border:1px dashed rgba(242,133,58,.45);font-size:13px;font-weight:600;color:var(--or2)}
.rc-demo small{display:block;font-size:11.5px;font-weight:500;color:var(--tx3);margin-top:1px}
.kinds button:nth-child(5){grid-column:1/-1}
/* «Деньги»: число начала месяца */
.stepper{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;width:100%}
.stepper button{height:40px;border-radius:12px;font-size:20px;font-weight:500;color:var(--or2);background:rgba(255,255,255,.05);border:1px solid var(--ln);transition:transform .12s,opacity .2s}
.stepper button:active{transform:scale(.92)}.stepper button:disabled{opacity:.35}
.stepper b{text-align:center;font-size:18px;font-weight:600}
.segs.cur{display:grid;grid-template-columns:repeat(4,1fr)}
.segs.cur button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:54px;padding:0 4px;font-size:11.5px;line-height:1.15}
.segs.cur button b{font-size:17px;font-weight:600}

/* 0.36: графики над операциями и схема «откуда и куда» */
.ft-n.tap{color:var(--or2);font-weight:500}

/* графики над операциями */
#viz{margin:var(--gap) 0}
.vz{position:relative;padding:var(--pad)}
.vz-two{display:grid;grid-template-columns:1fr 1fr;text-align:center}
.vz-two>div+div{border-left:1px solid var(--ln)}
.vz-two small,.vz-one small{display:block;font-size:12.5px;color:var(--tx3)}
.vz-two b{display:block;margin:3px 0 2px;font-size:clamp(20px,6vw,25px);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.vz-two span,.vz-one span{display:block;font-size:12px;color:var(--tx3)}
.vz b.in{color:var(--goodtx)}
.vz-one{text-align:center}
.vz-one b{display:block;margin:4px 0;font-size:clamp(30px,9vw,38px);font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.vz-bars{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;height:120px;margin-top:16px}
.vz-bars button{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0;border-radius:4px}
.vz-bars i{display:block;width:100%;min-height:2px;border-radius:3px;transform-origin:50% 100%;animation:vzUp .7s cubic-bezier(.22,.8,.24,1) both;animation-delay:calc(var(--i) * 18ms)}
.vz-bars .bi{background:linear-gradient(180deg,#86EFAC,#3FA866);height:calc(var(--h) * 100%)}
.vz-bars .bo{background:linear-gradient(180deg,#F2853A,#B04A08);height:calc(var(--h) * 100%)}
.vz-bars.both button{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:100%}
.vz-bars.both button::before{content:'';position:absolute;left:-1px;right:-1px;top:50%;height:1px;background:var(--ln)}
.vz-bars.both .bi{align-self:end;height:calc(var(--h) * 100%);border-radius:3px 3px 0 0}
.vz-bars.both .bo{align-self:start;height:calc(var(--h) * 100%);transform-origin:50% 0;border-radius:0 0 3px 3px;background:linear-gradient(0deg,#F2853A,#B04A08)}
.vz-bars button.tod{box-shadow:inset 0 0 0 1px rgba(242,133,58,.45)}
.vz-bars button.sel{background:rgba(255,255,255,.08)}
@keyframes vzUp{from{transform:scaleY(0)}}
.vz-ax{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px;color:var(--tx3)}
.vz-ax #vzDay{flex:1;text-align:center;color:var(--tx2)}
.vz-ax em{font-style:normal;font-weight:600;color:var(--or2)}.vz-ax em.in{color:var(--goodtx)}
.vz-split{display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--ln)}
.vz-dn{position:relative;width:100px;height:100px}
.dn{width:100%;height:100%}
.dn circle{fill:none;stroke-width:5;animation:dnIn .9s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--d)}
@keyframes dnIn{from{stroke-dasharray:0 100}}
.vz-dn span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px}
.vz-dn small{font-size:10.5px;color:var(--tx3);line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-dn b{font-size:20px;font-weight:600}
.vz-lg{list-style:none;display:grid;gap:7px}
.vz-lg li{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;font-size:12.5px}
.vz-lg li.own{color:var(--tx3)}.vz-lg li.own i{background:transparent;border:1px dashed var(--tx3)}.vz-lg li.own span{color:var(--tx3)}
.vz-note{margin-top:8px;font-size:11.5px;line-height:1.4;color:var(--tx3)}
.vz-lg i{width:10px;height:10px;border-radius:3px}
.vz-lg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx1)}
.vz-lg b{font-weight:600;white-space:nowrap}
.vz-top{margin-top:16px;padding-top:14px;border-top:1px solid var(--ln);display:grid;gap:10px}
.vz-top>small{font-size:12.5px;color:var(--tx3)}
.vz-top div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px}
.vz-top div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-top div b{font-weight:600}
.vz-top div i{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.vz-top div i::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#B04A08,#F2853A);transform-origin:0 50%;transform:scaleX(var(--w))}

/* схема «откуда и куда» */
.sk-wrap{margin:6px 0 4px}
.sk{width:100%;height:auto;display:block;overflow:visible}
.sk text{font-family:var(--ff);fill:var(--tx1)}
.sk .t{font-size:11.5px;font-weight:600}
.sk .v{font-size:11px;fill:var(--tx2)}
.sk .w{font-size:11px;font-weight:700;fill:#fff}
.sk .own{stroke:#857B73;stroke-width:2;stroke-dasharray:4 3;fill:none;animation:none}
.sk .ow{font-size:11px;font-weight:600;fill:#857B73}

.sk path{animation:skIn .8s ease both}
@keyframes skIn{from{opacity:0}}
.sk-own{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed var(--ln);font-size:12.5px;line-height:1.45;color:var(--tx2)}
.sk-sum{margin-top:12px;display:grid;gap:6px}
.sk-sum div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);font-size:13.5px}
.sk-sum dt{color:var(--tx2)}.sk-sum dd{font-weight:600;white-space:nowrap}
.sk-sum dd.in{color:var(--goodtx)}
.sk-sum .tot{background:rgba(226,102,18,.1)}
.sk-sum .tot dt{color:var(--tx);font-weight:600}

/* переключатель вида графика */
.vz-var{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;margin:-4px -4px 14px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--ln)}
.vz-var button{height:30px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--tx3);transition:background-color .25s,color .25s}
.vz-var button.on{background:rgba(242,133,58,.16);color:var(--or2)}
.vz.v2 .vz-one b,.vz.v3 .vz-one b{font-size:clamp(28px,8.5vw,36px)}
/* вариант 2: кривая */
.vz-cmp{margin:8px auto 0;width:max-content;max-width:100%;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600}
.vz-cmp.bad{background:rgba(242,133,58,.14);color:var(--or2)}.vz-cmp.good{background:rgba(74,222,128,.12);color:var(--goodtx)}
.vz-cw{position:relative;margin-top:14px;height:150px}
.vz-curve{width:100%;height:100%;display:block;overflow:visible}
.vz-curve .gl{stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.vz-curve .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:2000;animation:vzDraw 1.2s cubic-bezier(.22,.8,.24,1) both}
.vz-curve .pv{fill:none;stroke:var(--tx3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.7}
.vz-curve .ar{animation:skIn 1s .3s ease both}
@keyframes vzDraw{from{stroke-dashoffset:2000}}
.vz-dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--or2);box-shadow:0 0 0 4px rgba(242,133,58,.22);animation:vzPulse 2s ease-in-out infinite}
.vz-dot.in{background:var(--good);box-shadow:0 0 0 4px rgba(74,222,128,.2)}
@keyframes vzPulse{50%{box-shadow:0 0 0 8px rgba(242,133,58,.05)}}
.vz-ax .pvl{color:var(--tx3);font-weight:500}
.vz-stack{display:flex;gap:2px;height:12px;margin-top:18px;border-radius:6px;overflow:hidden}
.vz-stack i{display:block;min-width:4px;animation:vzUp .8s both;transform-origin:0 50%}
.vz-chips{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:12.5px;color:var(--tx2)}
.vz-chips span{display:inline-flex;align-items:center;gap:6px}
.vz-chips i{width:8px;height:8px;border-radius:50%}
.vz-chips b{color:var(--tx);font-weight:600}
/* вариант 3: календарь */
.vz-cal{margin-top:16px}
.vz-cal .wk,.vz-cal .cells{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.vz-cal .wk span{font-size:10.5px;color:var(--tx3);text-align:center;padding-bottom:4px}
.vz-cal .cells>*{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;font-size:12px}
.vz-cal .cells button{background:rgba(242,133,58,calc(.08 + var(--a) * .8));color:#fff;animation:skIn .5s both;animation-delay:calc(var(--i) * 12ms)}
.vz-cal.in .cells button{background:rgba(74,222,128,calc(.08 + var(--a) * .7))}
.vz-cal .cells button.z{background:rgba(255,255,255,.04);color:var(--tx3)}
.vz-cal .cells button b{font-weight:600;font-size:12.5px}
.vz-cal .cells button small{font-size:9.5px;opacity:.85;line-height:1}
.vz-cal .cells button.tod{box-shadow:inset 0 0 0 1.5px var(--or2)}
.vz-cal .cells button.sel{box-shadow:inset 0 0 0 2px #fff}
.vz-cal .cells .fut{color:var(--tx3);opacity:.35;border:1px dashed var(--ln)}
.vz.v3 .vz-ax span:first-child{display:flex;align-items:center;gap:3px}
.vz-ax .lg0,.vz-ax .lg1,.vz-ax .lg2{width:10px;height:10px;border-radius:3px;background:rgba(242,133,58,.15)}
.vz-ax .lg1{background:rgba(242,133,58,.5)}.vz-ax .lg2{background:rgba(242,133,58,.9)}
.vz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.vz-tile{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--ln)}
.vz-tile .ic{grid-row:span 2;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c)}
.vz-tile .ic svg{width:17px;height:17px}
.vz-tile .t{font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-tile b{font-size:14px;font-weight:600;white-space:nowrap}
.vz-tile>i{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.vz-tile>i::before{content:'';position:absolute;inset:0;background:var(--c);transform-origin:0 50%;transform:scaleX(var(--w))}
.ft-chk{display:block;margin-top:10px;padding:8px 10px;border-radius:12px;font-size:12.5px;line-height:1.4;font-weight:500}
.ft-chk.ok{background:rgba(74,222,128,.1);color:var(--goodtx)}
.ft-chk.bad{background:rgba(242,133,58,.12);color:var(--or2)}
.sk-sum dt small{display:block;font-size:11.5px;color:var(--tx3);margin-top:2px}

/* 0.37: обучение «Как пользоваться» */
#tour{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;padding:calc(var(--sat) + 12px) 0 calc(var(--sab) + 20px);background:radial-gradient(520px 420px at 50% 0%,rgba(226,102,18,.22),transparent 70%),var(--bg);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.32,.72,0,1);overflow:hidden;touch-action:pan-y}
#tour.in{opacity:1;transform:none}
.tour-skip{align-self:flex-end;margin:0 var(--pad);height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--tx2);background:var(--card);border:1px solid var(--ln)}
.tour-track{flex:1;display:flex;transition:transform .5s cubic-bezier(.32,.72,0,1);min-height:0}
.tour-s{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;overflow:hidden}
.tour-s h2{margin-top:26px;font-size:26px;letter-spacing:-.03em;line-height:1.15}
.tour-s p{margin-top:10px;max-width:340px;font-size:15px;line-height:1.5;color:var(--tx2)}
.tour-pic{width:100%;max-width:330px;min-height:236px;padding:16px;border-radius:24px;background:var(--card);border:1px solid var(--ln);box-shadow:0 24px 60px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:left;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .45s .1s,transform .55s .1s cubic-bezier(.32,.72,0,1)}
.tour-s.on .tour-pic{opacity:1;transform:none}
.tour-dots{display:flex;justify-content:center;gap:7px;margin:18px 0 16px}
.tour-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.18);transition:width .35s cubic-bezier(.32,.72,0,1),background .3s;cursor:pointer}
.tour-dots i.on{width:22px;background:var(--or)}
.tour-next{margin:0 var(--pad);width:calc(100% - 2 * var(--pad));max-width:420px;align-self:center}
/* картинки */
.tp-src{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tp-src span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12.5px;font-weight:500}
.tp-arrow{text-align:center;color:var(--or2);font-size:18px;line-height:1}
.tp-list{display:grid;gap:6px}
.tp-list>div{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.04);font-size:13px}
.tp-list i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;background:rgba(226,102,18,.15)}
.tp-list i.in{background:rgba(74,222,128,.14)}
.tp-list small{display:block;font-size:11px;color:var(--tx3)}
.tp-list b{font-weight:600;white-space:nowrap}.tp-list b.in{color:var(--goodtx)}
.tp-list.sm>div{padding:6px 10px}
.tp-bal{text-align:center}
.tp-bal small{display:block;font-size:12px;color:var(--or2);font-weight:600}
.tp-bal b{display:block;margin:4px 0 8px;font-size:30px;font-weight:600;letter-spacing:-.03em}
.tp-ok{display:inline-block;padding:5px 11px;border-radius:999px;background:rgba(74,222,128,.12);color:var(--goodtx);font-size:12px;font-weight:600;text-align:center;align-self:center}
.tp-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-cards i{aspect-ratio:1.6;border-radius:12px;padding:9px;font-style:normal;font-weight:700;font-size:13px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.tp-cards small{font-weight:600;font-size:12px}
.tp-cards .b{background:linear-gradient(135deg,#3E9C8F,#0A4D45)}.tp-cards .p{background:linear-gradient(135deg,#F47A48,#D9482A)}
.tp-res{display:grid;grid-template-columns:1fr 1fr;text-align:center}
.tp-res>div+div{border-left:1px solid var(--ln)}
.tp-res small{display:block;font-size:11.5px;color:var(--tx3)}
.tp-res b{display:block;margin:3px 0 6px;font-size:19px;font-weight:600}.tp-res b.in{color:var(--goodtx)}
.tp-res i{display:block;height:5px;margin:0 10px;border-radius:3px;transform-origin:0 50%;transform:scaleX(var(--w))}
.tp-res .g{background:linear-gradient(90deg,#3FA866,#86EFAC)}.tp-res .o{background:linear-gradient(90deg,#B04A08,#F2853A)}
.tp-diff{text-align:center;padding-top:8px;border-top:1px solid var(--ln)}
.tp-diff small{font-size:11.5px;color:var(--tx3)}.tp-diff b{display:block;font-size:24px;font-weight:600;color:var(--goodtx)}
.tp-bars{display:flex;align-items:flex-end;gap:3px;height:96px}
.tp-bars i{flex:1;height:var(--h);border-radius:3px;background:linear-gradient(180deg,#F2853A,#B04A08);transform-origin:50% 100%;transform:scaleY(0);transition:transform .6s cubic-bezier(.22,.8,.24,1);transition-delay:calc(.2s + var(--i) * 30ms)}
.tour-s.on .tp-bars i{transform:none}
.tp-chat{display:grid;gap:7px;font-size:12.5px;line-height:1.4}
.tp-chat .bot{justify-self:start;max-width:88%;padding:8px 10px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.07)}
.tp-chat .bot b{display:block}
.tp-chat .me{justify-self:end;padding:7px 11px;border-radius:14px 14px 4px 14px;background:linear-gradient(180deg,#F2853A,#E26612);color:#fff;font-weight:500}
.tp-chat .kb{display:flex;gap:5px;margin-top:7px}
.tp-chat .kb span{flex:1;padding:5px 6px;border-radius:9px;background:rgba(255,255,255,.08);text-align:center;font-size:11.5px;white-space:nowrap}
.tp-rules{display:grid;gap:8px}
.tp-rules>div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.04);font-size:12.5px;color:var(--tx2);line-height:1.35}
.tp-rules i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-size:16px;background:rgba(226,102,18,.14);color:var(--or2)}
.tp-rules b{display:block;color:var(--tx);font-size:13.5px}
.tp-set{display:grid;gap:8px}
.tp-set>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);font-size:13.5px}
.tp-set b{color:var(--or2);font-weight:600;white-space:nowrap}
.tp-set .sw{transform:scale(.8);transform-origin:100% 50%}
@media (prefers-reduced-motion:reduce){#tour,.tour-track,.tour-pic,.tp-bars i{transition:none!important}}
.tp-cards i span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-cards.n3{grid-template-columns:repeat(3,1fr);gap:6px}
.tp-cards.n3 i{font-size:11.5px;padding:7px;border-radius:10px}.tp-cards.n3 small{font-size:10.5px}
.tp-src span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* обучение: выбор валюты для нового человека */
.tp-cur{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tp-cur button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:62px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--ln);font-size:11px;color:var(--tx2);transition:background-color .2s,border-color .2s,transform .12s}
.tp-cur button b{font-size:20px;font-weight:600;color:var(--tx)}
.tp-cur button:active{transform:scale(.95)}
.tp-cur button.on{background:rgba(226,102,18,.18);border-color:rgba(242,133,58,.7);color:var(--or2)}
.tour-next:disabled{opacity:.45}
.card.fresh{padding:var(--pad);margin:4px 0 14px;text-align:center}
.card.fresh b{display:block;font-size:15.5px}
.card.fresh p{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--tx2)}
.fresh-b{display:flex;gap:8px;justify-content:center;margin-top:12px}
.tp-cards.n1{grid-template-columns:minmax(0,62%);justify-content:center}
.tp-cards .ph{border:1.5px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03)!important;color:var(--tx2)!important}

/* «Почта»: свой адрес для писем банка, анимированный конверт */
.mailhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 0 4px}
.mailhero>b{font-size:16px;margin-top:4px}
.mailhero>small{font-size:13px;color:var(--tx3)}
.mailhero.ok>small{color:var(--goodtx)}
.mailhero.code>small{color:var(--or2)}
/* конверт: объём, мягкий свет, клапан открывается в 3D, письмо выезжает и возвращается; письма приходят — открыт, печать зелёная */
.env3{position:relative;width:164px;height:124px;margin:6px 0 4px;perspective:520px}
.env3>span,.env3>em{position:absolute}
.e-glow{inset:-26px -34px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,133,58,.32),transparent 72%);filter:blur(6px);animation:eGlow 5.6s ease-in-out infinite}
.mailhero.ok .e-glow{background:radial-gradient(closest-side,rgba(74,222,128,.26),transparent 72%)}
.e-back{left:6px;right:6px;bottom:6px;height:86px;border-radius:14px;background:linear-gradient(170deg,#2E241D,#1B1511);box-shadow:0 22px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.e-letter{left:22px;right:22px;bottom:14px;height:78px;border-radius:10px;padding:14px 14px 0;background:linear-gradient(180deg,#FBF6EF,#EFE6DB);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);z-index:2;animation:eLetter 5.6s cubic-bezier(.32,.72,0,1) infinite}
.e-letter i{display:block;height:5px;border-radius:3px;background:rgba(60,40,24,.16);margin-bottom:7px}
.e-letter i:nth-child(1){width:58%}.e-letter i:nth-child(2){width:84%}.e-letter i:nth-child(3){width:70%}
.e-seal{position:absolute;right:12px;top:10px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFB36B,#E26612 70%);box-shadow:0 2px 6px rgba(226,102,18,.5),inset 0 -2px 3px rgba(0,0,0,.15);display:grid;place-items:center;transition:background .5s}
.e-seal svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s .2s ease}
.mailhero.ok .e-seal{background:radial-gradient(circle at 35% 30%,#8EF0B4,#22A35A 72%);box-shadow:0 2px 8px rgba(34,163,90,.55)}
.mailhero.ok .e-seal svg{stroke-dashoffset:0}
.e-front{left:6px;right:6px;bottom:6px;height:86px;border-radius:0 0 14px 14px;z-index:3;background:linear-gradient(180deg,#3B2D23,#2A2019);clip-path:polygon(0 0,50% 63%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.e-front::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,215,170,.10) 50%,transparent 60%);background-size:260% 100%;animation:eShine 5.6s ease-in-out infinite}
.e-flap{left:6px;right:6px;top:32px;height:57px;z-index:4;transform-origin:50% 0;background:linear-gradient(180deg,#4A372A,#33261D);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:14px 14px 0 0;animation:eFlap 5.6s cubic-bezier(.32,.72,0,1) infinite;backface-visibility:visible}
.e-flap::before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,rgba(242,133,58,.28),transparent 60%)}
.env3>em{left:50%;bottom:60px;width:5px;height:5px;border-radius:50%;background:#FFC48A;box-shadow:0 0 10px 2px rgba(242,133,58,.7);opacity:0;animation:eSpark 5.6s ease-out infinite}
.env3>em:nth-of-type(1){margin-left:-38px;animation-delay:1.5s}.env3>em:nth-of-type(2){margin-left:22px;animation-delay:1.8s}
.env3>em:nth-of-type(3){margin-left:-10px;animation-delay:2.1s;width:4px;height:4px}.env3>em:nth-of-type(4){margin-left:40px;animation-delay:2.4s;width:3px;height:3px}
@keyframes eFlap{0%,8%{transform:rotateX(0);z-index:4}22%{transform:rotateX(178deg);z-index:1}80%{transform:rotateX(178deg);z-index:1}94%,100%{transform:rotateX(0);z-index:4}}
@keyframes eLetter{0%,20%{transform:translateY(0)}38%{transform:translateY(-46px) rotate(-1.5deg)}50%{transform:translateY(-42px) rotate(.8deg)}64%{transform:translateY(-46px) rotate(-.5deg)}80%,100%{transform:translateY(0)}}
@keyframes eGlow{0%,100%{opacity:.55;transform:scale(.94)}45%{opacity:1;transform:scale(1.04)}}
@keyframes eShine{0%,30%{background-position:120% 0}55%,100%{background-position:-60% 0}}
@keyframes eSpark{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}60%{opacity:0;transform:translateY(-58px) scale(1)}100%{opacity:0}}
/* письма приходят: конверт открыт, письмо наверху и слегка парит */
.mailhero.ok .e-flap{animation:none;transform:rotateX(178deg);z-index:1}
.mailhero.ok .e-letter{animation:eFloat 4s ease-in-out infinite}
.mailhero.ok .env3>em{display:none}
@keyframes eFloat{0%,100%{transform:translateY(-44px)}50%{transform:translateY(-50px)}}
@media (prefers-reduced-motion:reduce){.e-glow,.e-letter,.e-flap,.e-front::after,.env3>em{animation:none!important}.mailhero.ok .e-letter{transform:translateY(-44px)}}
.maddr{display:flex;align-items:center;gap:10px;max-width:100%;padding:12px 12px 12px 16px;border-radius:16px;background:rgba(226,102,18,.1);border:1px solid rgba(242,133,58,.4);font-size:15px;font-weight:600;color:var(--tx);overflow-wrap:anywhere;text-align:left;transition:transform .12s}
.maddr:active,.mcode:active{transform:scale(.97)}
.maddr span,.mcode span{flex:none;padding:6px 10px;border-radius:10px;background:var(--or);color:#fff;font-size:12.5px;font-weight:600}
.mcode{display:flex;align-items:center;gap:10px;max-width:100%;margin-top:4px;padding:10px 10px 10px 14px;border-radius:16px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.35);font-size:19px;font-weight:700;letter-spacing:.04em;color:var(--goodtx)}
.mcode small{display:block;font-size:11px;font-weight:500;letter-spacing:0;color:var(--tx3);margin-right:4px;max-width:70px;text-align:left;line-height:1.2}
.msteps{display:grid;gap:8px;counter-reset:ms}
.msteps>div{position:relative;padding:12px 14px 12px 50px;border-radius:16px;background:var(--card);border:1px solid var(--ln);font-size:14px;line-height:1.4}
.msteps>div::before{counter-increment:ms;content:counter(ms);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(226,102,18,.18);color:var(--or2);font-size:13px;font-weight:700}
.msteps b{display:block;font-weight:600}.msteps small{display:block;margin-top:3px;font-size:12.5px;color:var(--tx3)}.msteps small b{display:inline;color:var(--tx2)}
/* адрес по имени: имя ярко, домен спокойнее */
.maddr2{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;max-width:100%;margin-top:2px;padding:14px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(226,102,18,.16),rgba(226,102,18,.06));border:1px solid rgba(242,133,58,.45);box-shadow:0 14px 34px -22px rgba(226,102,18,.9)}
.maddr2 .ml{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--tx);overflow-wrap:anywhere}
.maddr2 .md{font-size:17px;font-weight:500;color:var(--or2)}
.mbtns{display:flex;gap:8px;justify-content:center;margin-top:2px}
.minp{display:flex;align-items:center;gap:6px}
.minp .inp{flex:1;min-width:0;font-weight:600}
.minp span{flex:none;font-size:14.5px;color:var(--tx3)}
/* конверт: кромка, боковые складки, блик */
.e-back{border:1px solid rgba(255,214,180,.10)}
.e-front::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 22%,transparent 78%,rgba(0,0,0,.22)),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.18));clip-path:inherit}
.e-front{background:linear-gradient(180deg,#403126,#2B2119)}
.e-flap{background:linear-gradient(180deg,#56402F,#3A2B20)}
.e-flap::after{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%,50% 96%,96% 2%,4% 2%,50% 96%,50% 100%);background:rgba(255,214,180,.16)}
.e-letter{border:1px solid rgba(255,255,255,.6)}
/* кармашек: скруглённые нижние углы как у конверта — форма V рисуется внутри скруглённой рамки */
.e-front{clip-path:none!important;background:none!important;overflow:hidden;border-radius:0 0 14px 14px}
.e-front::before{clip-path:polygon(0 0,50% 63%,100% 0,100% 100%,0 100%)!important;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 22%,transparent 78%,rgba(0,0,0,.22)),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.18)),linear-gradient(180deg,#403126,#2B2119)!important}
.e-front::after{clip-path:polygon(0 0,50% 63%,100% 0,100% 100%,0 100%)}
/* шаги почты: кнопки «открыть» и «скопировать» */
.macts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mbtn{height:34px;padding:0 12px;border-radius:11px;font-size:13px;font-weight:600;color:var(--tx1);background:rgba(255,255,255,.06);border:1px solid var(--ln);transition:transform .12s,background-color .2s}
.mbtn.pri{background:linear-gradient(180deg,#F2853A,#E26612);border-color:transparent;color:#fff}
.mbtn:active{transform:scale(.95)}
.mother{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--tx3)}
.mpc{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--ln);text-align:left;font-size:14.5px;transition:transform .12s}
.mpc:active{transform:scale(.98)}
.mpc .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(226,102,18,.15);color:var(--or2);flex:none}
.mpc .ic svg{width:18px;height:18px}
.mpc .t{flex:1}.mpc small{display:block;margin-top:2px;font-size:12.5px;color:var(--tx3)}

/* инструкция «версия для компьютера»: снимки со скруглёнными углами, стрелка и пульсирующая точка — куда нажать */
.msteps>div.gwrap{padding:14px;counter-increment:none}
.msteps>div.gwrap::before{display:none}
.gh{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.gh>b{font-size:14.5px}
.gos{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.gsteps{display:grid;gap:16px}
.gstep{display:grid;gap:8px}
.gshot{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#1c1916;border:1px solid var(--ln);box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.gshot img{display:block;width:100%;height:100%;object-fit:cover}
.gdot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2.5px solid #F2853A;box-shadow:0 0 0 4px rgba(242,133,58,.25),0 0 18px rgba(242,133,58,.7);animation:gPulse 1.8s ease-in-out infinite;pointer-events:none}
@keyframes gPulse{50%{transform:scale(1.18);box-shadow:0 0 0 9px rgba(242,133,58,.12),0 0 22px rgba(242,133,58,.8)}}
.garr{position:absolute;width:46px;height:46px;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.garr svg{width:100%;height:100%;fill:none;stroke:#F2853A;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.garr.a-r{margin:-30px 0 0 22px;transform:scaleX(-1) rotate(-20deg)}
.garr.a-l{margin:-30px 0 0 -70px;transform:rotate(-20deg)}
.garr.a-tl{margin:-66px 0 0 -62px;transform:rotate(55deg)}
.garr.a-bl{margin:22px 0 0 -64px;transform:rotate(-40deg)}
.gbox{position:absolute;border-radius:14px;border:2.5px solid #F2853A;box-shadow:0 0 0 4px rgba(242,133,58,.22),0 0 22px rgba(242,133,58,.55);animation:gBox 1.8s ease-in-out infinite;pointer-events:none}
@keyframes gBox{50%{box-shadow:0 0 0 8px rgba(242,133,58,.1),0 0 26px rgba(242,133,58,.75)}}
.gcap b{display:flex;align-items:center;gap:8px;font-size:14px}
.gcap b i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--or);color:#fff;font-style:normal;font-size:12px;font-weight:700}
.gcap small{display:block;margin:3px 0 0 30px;font-size:12.5px;line-height:1.4;color:var(--tx3)}
/* нарисованные экраны Chrome на Android */
.gm-bar{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 5%;background:#F1F3F4;color:#3C4043;font-family:Roboto,system-ui,sans-serif}
.gm-ic{font-size:22px}
.gm-url{flex:1;display:flex;align-items:center;gap:8px;height:56%;padding:0 14px;border-radius:999px;background:#fff;font-size:15px}
.gm-url i{font-style:normal;font-size:12px}
.gm-tabs{width:22px;height:22px;border:2px solid #3C4043;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700}
.gm-dots{font-size:24px;font-weight:700;width:20px;text-align:center}
.gm-menu{position:absolute;inset:0;padding:3% 0;background:#fff;color:#202124;font-family:Roboto,system-ui,sans-serif;display:flex;flex-direction:column}
.gm-row{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:14px}
.gm-row.ic{justify-content:space-around;font-size:18px;color:#5F6368;border-bottom:1px solid #E8EAED}
.gm-row.pc b{width:18px;height:18px;border:2px solid #5F6368;border-radius:3px}
@media (prefers-reduced-motion:reduce){.gdot,.gbox{animation:none}}
.garr.a-t{margin:-70px 0 0 -23px;transform:rotate(135deg)}

/* «Почта»: сквозные шаги 1–5 */
.ms2{display:grid;gap:10px}
.ms2>section{padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--ln)}
.ms2 h4{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;line-height:1.3}
.ms2 h4 i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#F2853A,#E26612);color:#fff;font-style:normal;font-size:13px;font-weight:700}
.ms2 p{margin:6px 0 0 36px;font-size:13px;line-height:1.45;color:var(--tx3)}
.ms2 .macts{margin:10px 0 0 36px}
/* переключатель iPhone / Android — отдельно над картинками */
.ms2 .gos{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:14px 0 12px;padding:4px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--ln)}
.ms2 .gos button{height:36px;border-radius:10px;font-size:14px;font-weight:600;color:var(--tx3);background:none;border:0}
.ms2 .gos button.on{background:var(--or);color:#fff}
/* картинки «а, б, в» */
.ms2 .gsteps{display:grid;gap:14px}
.ms2 .gstep{margin:0;display:grid;gap:8px}
.ms2 .gshot{position:relative;width:100%;border-radius:22px;overflow:hidden;isolation:isolate;background:#0F0D0B;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 32px -20px rgba(0,0,0,.9)}
.ms2 .gshot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:22px}
.ms2 figcaption{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--tx1)}
.ms2 figcaption i{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(226,102,18,.18);color:var(--or2);font-style:normal;font-size:12.5px;font-weight:700}
.ms2 .gdot{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid #F2853A;box-shadow:0 0 0 5px rgba(242,133,58,.22),0 0 20px rgba(242,133,58,.75);animation:gPulse 1.8s ease-in-out infinite;pointer-events:none}
.ms2 .gbox{position:absolute;border-radius:16px;border:3px solid #F2853A;box-shadow:0 0 0 5px rgba(242,133,58,.2),0 0 24px rgba(242,133,58,.55);animation:gBox 1.8s ease-in-out infinite;pointer-events:none}
/* нарисованный Chrome на Android */
.ms2 .gm-bar{position:absolute;inset:0;display:flex;align-items:center;gap:4%;padding:0 3% 0 4%;background:#F1F3F4;color:#444746;font-family:Roboto,system-ui,sans-serif}
.ms2 .gm-i{width:7%;aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ms2 .gm-url{flex:1;display:flex;align-items:center;gap:8px;height:52%;padding:0 4%;border-radius:999px;background:#fff;font-size:clamp(12px,3.6vw,15px);color:#1F1F1F}
.ms2 .gm-url svg{width:14px;height:14px;fill:none;stroke:#444746;stroke-width:2}
.ms2 .gm-tabs{width:6.4%;aspect-ratio:1;border:2px solid #444746;border-radius:5px;display:grid;place-items:center;font-size:clamp(9px,2.6vw,11px);font-weight:700}
.ms2 .gm-dots{width:6.4%;display:flex;flex-direction:column;align-items:center;gap:3px}
.ms2 .gm-dots i{width:4px;height:4px;border-radius:50%;background:#444746}
.ms2 .gm-menu{position:absolute;inset:0;padding:2% 0 3%;background:#fff;color:#1F1F1F;font-family:Roboto,system-ui,sans-serif;display:flex;flex-direction:column}
.ms2 .gm-row{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:clamp(12px,3.6vw,14.5px)}
.ms2 .gm-row.ic{justify-content:space-between;padding:0 9%;border-bottom:1px solid #E8EAED}
.ms2 .gm-row.ic svg{width:20px;height:20px;fill:none;stroke:#444746;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms2 .gm-row.pc b{width:18px;height:18px;border:2px solid #444746;border-radius:3px}
/* кнопки шага — всегда в одну строку, поровну по ширине */
.ms2 .macts{display:flex;flex-wrap:nowrap;gap:8px;margin:12px 0 0}
.ms2 .macts .mbtn{flex:1 1 0;min-width:0;height:40px;padding:0 10px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms2 p.gor{margin:14px 0 8px;font-size:12.5px;font-weight:600;color:var(--tx2)}
.ms2 .gshot img[src*="gmail-gear"]{object-fit:cover}
.ms2 p.gor + p.gor{margin-top:10px}
.ms2 p.gor{line-height:1.45}
.ms2 .glink{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--acc,#f07a2a);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* разница «пришло − потратили» на странице операций */
.vz-net{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;margin:12px 0 0;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.035);text-align:center}
.vz-net span{font-size:12.5px;color:var(--tx3)}
.vz-net b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.vz-net b.neg{color:var(--tx)}
.vz-net small{flex-basis:100%;font-size:11.5px;color:var(--tx3)}
.vz-note b{color:var(--tx2);font-weight:600}