/* Анимации лендинга «Финансовый трекер» (разметка — scripts/build-finance.mjs, поведение — finance-demo.js).
   Телефон — общий с демо клинера (swipe-demo.css: .sd, .sd-phone, .sd-screen, .sd-status, .sd-try); размеры — в em от --w.
   Экран — как главная приложения: тонкое кольцо расходов, итоги зелёным и красным, чипы категорий, баланс счёта снизу. */

/* ---------- 1) Демо в hero: главная ---------- */
.fd .sd-phone { background: #111114; box-shadow: 0 3em 6em rgba(0,0,0,.22), 0 .6em 1.6em rgba(0,0,0,.12), inset 0 0 0 .12em rgba(255,255,255,.1); }
.fd-screen { background: #fff; color: #111; text-align: left; font-variant-numeric: tabular-nums; }
.fd-screen svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fd-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3.1em; padding: 0 1.4em; border-bottom: .08em solid #ececf0; }
.fd-nav > svg { width: 1.75em; height: 1.75em; }
.fd-nav b { font-size: 1.3em; font-weight: 700; }
.fd-nav span { justify-self: end; display: flex; gap: .9em; }
.fd-nav span svg { width: 1.6em; height: 1.6em; }
.fd-month { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.5em .8em; color: #3a3a3c; font-size: 1.1em; }
.fd-month svg { width: 1.2em; height: 1.2em; color: #8e8e93; }
.fd-card { margin: 0 1.2em; padding: 1.3em 1.1em 1.1em; border: .08em solid #e5e5ea; border-radius: 2.6em; }
.fd-donut { position: relative; width: 14.6em; margin: 0 auto; }
.fd-donut svg { display: block; width: 100%; height: auto; }
.fd-donut .seg { fill: none; stroke: var(--c); stroke-width: 1.5; transition: stroke-dasharray .9s cubic-bezier(.3,.7,.3,1), stroke-dashoffset .9s cubic-bezier(.3,.7,.3,1); }
.fd-totals { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em; }
.fd-totals span { padding: .3em .75em; border-radius: 1.2em; font-size: 1.3em; white-space: nowrap; }
.fd-inc { color: #1fae4b; background: #eaf8ee; }
.fd-exp { color: #e5303f; background: #fdecee; transition: transform .3s ease; }
.fd-exp.bump, .fd-inc.bump { animation: fd-bump .5s ease; }
@keyframes fd-bump { 40% { transform: scale(1.1); } }
.fd-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; margin-top: 1.1em; }
.fd-chips span { display: flex; align-items: center; gap: .3em; padding: .42em .5em; border-radius: 1.3em; background: #f5f5f7; font-size: .92em; white-space: nowrap; }
.fd-chips i { width: .6em; height: .6em; border-radius: 50%; background: var(--c); flex: none; }
.fd-chips b { font-weight: 500; }

.fd-bar {
  position: absolute; left: .9em; right: .9em; bottom: 1.3em; z-index: 3; display: flex; align-items: center; gap: .6em;
  padding: .8em .9em .8em 1.4em; border-radius: 2.4em; background: #fff; box-shadow: 0 .5em 2em rgba(0,0,0,.12), 0 0 0 .06em rgba(0,0,0,.04);
}
.fd-bar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-bar small { font-size: .8em; color: #8e8e93; }
.fd-bar b { font-size: 1.55em; font-weight: 700; white-space: nowrap; }
.fd-btn { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.9em; line-height: 1; font-weight: 400; cursor: pointer; flex: none; }
.fd-btn.minus { background: #ff3b30; }
.fd-btn.plus { background: #34c759; }
.fd-btn.tap { animation: fd-tap .45s ease; }
@keyframes fd-tap { 40% { transform: scale(.86); } }

/* Лист «Новый расход / доход» */
.fd-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.fd.sheet .fd-screen::after { opacity: 1; }
.fd-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .8em;
  padding: 1.6em 1.6em 2.4em; border-radius: 2.4em 2.4em 0 0; background: #fff; box-shadow: 0 -.5em 2em rgba(0,0,0,.12);
  transform: translateY(110%); transition: transform .5s cubic-bezier(.2,.9,.25,1);
}
.fd.sheet .fd-sheet { transform: none; }
.fd-sheet small { font-size: 1.05em; font-weight: 700; }
.fd-cat { padding: .4em .9em; border-radius: 1.2em; border: .08em solid #e5e5ea; font-size: .95em; }
.fd-amt { font-size: 2.6em; font-weight: 700; letter-spacing: -.02em; min-height: 1.2em; }
.fd-add { align-self: stretch; text-align: center; padding: .85em; border-radius: 1em; background: #111; color: #fff; font-weight: 600; font-size: 1.05em; }
.fd-add.tap { animation: fd-tap .4s ease; }

/* Тост «операция добавлена» */
.fd-toast {
  position: absolute; left: 1.2em; right: 1.2em; top: 4.6em; z-index: 6; display: flex; align-items: center; gap: .5em;
  padding: .8em 1.1em; border-radius: 1.4em; background: #111; color: #fff; font-size: 1em; font-weight: 600;
  opacity: 0; transform: translateY(-1em) scale(.96); transition: opacity .35s ease, transform .5s cubic-bezier(.2,1.4,.4,1); pointer-events: none;
}
.fd-toast b { margin-left: auto; color: #ff7b7b; white-space: nowrap; }
.fd-toast.inc b { color: #5ee08a; }
.fd.toast .fd-toast { opacity: 1; transform: none; }
.fd .sd-try { bottom: 7.4em; }
.fd.sheet .sd-try { opacity: 0; animation: none; }

/* ---------- 2) Счета в любой валюте ---------- */
.fa { position: relative; max-width: 560px; margin: 0 auto; padding: 26px; border-radius: 24px; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.06); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .fa { padding: 22px 16px; } }
.fa-total small { display: block; color: var(--muted); font-size: 14px; }
.fa-total b { display: block; font-size: 34px; letter-spacing: -.6px; line-height: 1.2; }
.fa-total b.pulse { animation: fd-bump .6s ease; }
.fa-list { margin-top: 14px; }
.fa-acc { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 160ms); }
.fa.reset .fa-acc { opacity: 0; transform: translateX(-18px); }
.fa-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.fa-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-acc.card .fa-ic { background: #e7f7ec; color: #12924a; }
.fa-acc.cash .fa-ic { background: #fff3df; color: #d98200; }
.fa-acc.crypto .fa-ic { background: #f0e9fe; color: #7c3aed; }
.fa-name { min-width: 0; }
.fa-name b { display: block; font-size: 16px; }
.fa-name small { color: var(--muted); font-size: 13px; }
.fa-sum { text-align: end; }
.fa-sum b { display: block; font-size: 17px; white-space: nowrap; transition: color .3s ease; }
.fa-sum small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.fa-sum b.down { color: #e5303f; }
.fa-sum b.up { color: #1fae4b; }
@media (max-width: 360px) { .fa-sum b { font-size: 15px; } .fa-acc { grid-template-columns: 38px 1fr auto; gap: 10px; } .fa-ic { width: 38px; height: 38px; } }
.fa-transfer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; padding: 12px 16px; border-radius: 14px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .22); font-size: 14.5px;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.3,.4,1);
}
.fa-transfer b { margin-inline-start: auto; white-space: nowrap; }
.fa-tr-ic { font-size: 17px; color: var(--ok); }
.fa.pre-tr .fa-transfer { opacity: 0; transform: translateY(8px) scale(.98); }

/* ---------- 3) Периоды ---------- */
.fp { position: relative; max-width: 760px; margin: 0 auto 6px; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .fp { padding: 22px 16px; } }
.fp-title { display: block; font-size: 20px; letter-spacing: -.3px; }
.fp-sub { margin: 4px 0 18px; color: var(--muted); font-size: 14.5px; }
.fp-seg { display: flex; max-width: 420px; padding: 3px; border-radius: 12px; background: #ececef; }
.fp-seg span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 9px; font-size: 14px; font-weight: 500; color: #3a3a3c; cursor: pointer; white-space: nowrap; transition: background .3s ease, box-shadow .3s ease; user-select: none; -webkit-user-select: none; }
.fp-seg span.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; color: #111; }
.fp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 16px; }
.fp-sum small { display: block; color: var(--muted); font-size: 13.5px; }
.fp-sum b { display: block; font-size: 24px; letter-spacing: -.4px; white-space: nowrap; }
@media (max-width: 360px) { .fp-sum b { font-size: 20px; } }
.fp-sum .inc { color: #1fae4b; }
.fp-sum .exp { color: #e5303f; }
.fp-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #ececef; }
.fp-bar i { flex: var(--w) 1 0; min-width: 0; background: var(--c); box-shadow: inset -2px 0 0 var(--card); transition: flex-grow .7s cubic-bezier(.3,.7,.3,1); }
.fp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.fp-legend span { display: inline-flex; align-items: center; gap: 5px; transition: opacity .4s ease; }
.fp-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.fp-legend b { color: var(--text); font-weight: 600; }
.fp-legend span.zero { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .fd-donut .seg, .fd-sheet, .fa-acc, .fp-bar i { transition: none; }
}