/* ═══ Экран «Деньги» (задача 4) ══════════════════════════════════
   Revolut по-нашему: сумма месяца героем в глянцевой карточке, как цель на «Сегодня»
   (градиент, свечение и волосок оттуда же), под ней круглые быстрые действия.
   Вторым блоком долги: общий крупно, степ-график по срезам, строки по картам.
   Дальше плитки как на «Клиентах» и операции карточкой.
   Телефон: всё одной колонкой. От 1180: слева сумма и долги, справа плитки и операции. */
.money, .mn-grid, .mn-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* круглой кнопки записи тут нет, как на «Клиентах»: она закрывала бы суммы справа,
   а записать приход, расход и остатки можно круглыми кнопками под суммой месяца */
body[data-route="money"] .fab { display: none; }

/* ── герой ────────────────────────────────────────────────────── */
.mn-hero {
  position: relative; overflow: hidden; border-radius: 32px; padding: 24px 16px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: radial-gradient(120% 75% at 50% 12%, #3A2622 0%, #1C1719 48%, #121214 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .5);
}
.mn-glow {
  position: absolute; left: 50%; top: 20px; width: 280px; height: 150px; margin-left: -140px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 150, 110, .4), rgba(234, 131, 105, .1) 62%, rgba(234, 131, 105, 0));
  filter: blur(14px); pointer-events: none;
}
.mn-hero > :not(.mn-glow) { position: relative; }
.mn-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #B7B2AA; }
.mn-sum {
  margin-top: 4px; font-family: var(--disp); font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  white-space: nowrap; color: #FFF8F3; text-shadow: 0 0 24px rgba(244, 150, 110, .45);
}
.mn-sum.long { font-size: 32px; }
.mn-pill {
  height: 30px; padding: 0 12px; border-radius: 14px; display: flex; align-items: center; white-space: nowrap;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #D8D3CC;
}
.mn-prev { font-size: 13px; color: #A9A59E; }
.mn-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 12px; }
.mn-act { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 2px 0 4px; border-radius: 18px; color: #CFCAC3; }
.mn-act-ic {
  width: 52px; height: 52px; border-radius: 26px; display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background-color .15s, transform .15s var(--ease);
}
.mn-act-ic.in { color: #5CC49A; }
.mn-act-ic.out { color: #EE7A8A; }
.mn-act:active .mn-act-ic { transform: scale(.92); }
.mn-act-t { font-size: 12px; line-height: 1.25; }

/* ── долги ────────────────────────────────────────────────────── */
.mn-debt {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 24px;
  background: linear-gradient(180deg, #1C1B22 0%, #161618 100%); border: 1px solid rgba(255, 255, 255, .06);
}
.dc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; }
.dc-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #B7B2AA; }
.dc-chip, .dc-rest { transition: opacity .15s; }
.mn-debt.scrubbing .dc-chip, .mn-debt.scrubbing .dc-rest { opacity: 0; }
.dc-total { font-family: var(--disp); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; }
.dc-sub { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.dc-when { color: var(--ink-2); }
.dc-stale { color: #F2C14E; }
.mn-debt > .muted { margin: 4px 0 8px; }

/* график: координаты 1000 × 300 растянуты на карточку, точки и подписи поверх в процентах */
.dc-plot {
  position: relative; height: 112px; margin: 16px 44px 0 0; cursor: crosshair;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.dc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dc-line { fill: none; stroke: url(#dc-stroke); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dc-area { fill: url(#dc-fill); }
.dc-tick { stroke: rgba(255, 255, 255, .09); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.dc-rule { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dc-y { position: absolute; left: calc(100% + 12px); transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: #6F6B65; white-space: nowrap; pointer-events: none; }
.dc-end, .dc-knob { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; background: #FFF6F0; }
.dc-end { left: 100%; box-shadow: 0 0 0 4px rgba(234, 131, 105, .22), 0 0 14px 2px rgba(244, 150, 110, .7); }
.dc-knob { box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); opacity: 0; }
.dc-guide { position: absolute; top: -8px; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(255, 255, 255, .24); opacity: 0; pointer-events: none; }
.mn-debt.scrubbing .dc-knob, .mn-debt.scrubbing .dc-guide { opacity: 1; }
.dc-axis { position: relative; height: 16px; margin: 6px 44px 2px 0; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.dc-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dc-axis span.edge { transform: none; }

.dc-rows { display: flex; flex-direction: column; margin-top: 8px; }
.dc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; border-top: 1px solid var(--line); }
.dc-row-l, .dc-row-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-row-r { flex: none; align-items: flex-end; }
.dc-name { font-size: 15px; font-weight: 500; }
.dc-date, .dc-delta { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.dc-date { color: var(--ink-3); }
.dc-val { font-family: var(--disp); font-size: 15px; font-weight: 600; white-space: nowrap; }
.dc-val.up, .dc-delta.down { color: #5CC49A; }
.dc-delta.up { color: #EE7A8A; }
.dc-recv .dc-name, .dc-recv .dc-val { color: var(--ink-2); }
.dc-update { width: 100%; gap: 10px; margin-top: 10px; }
.dc-update svg { color: var(--ink-3); }

/* ── плитки оборота: как на «Клиентах» ────────────────────────── */
.mn-sec { display: flex; flex-direction: column; gap: 10px; }
.mn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mn-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
}
.mn-tile-v { font-family: var(--disp); font-size: 22px; font-weight: 700; white-space: nowrap; }
.mn-tile-k { font-size: 12px; color: var(--ink-3); }
.mn-tile-s { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: #75716B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── операции карточкой ───────────────────────────────────────── */
.mn-ops { display: flex; flex-direction: column; padding: 6px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.mn-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.mn-flow-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .035); }
.mn-flow-k { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-flow-v { font-family: var(--disp); font-size: 17px; font-weight: 600; white-space: nowrap; }
.mn-flow-v.up, .op-sum.up, .opd-sum.up, .ops-gs .up { color: #5CC49A; }
.mn-empty { padding: 14px 10px; }
.mn-sec button.sec-link { color: var(--coral); }
.mn-ops .op:nth-of-type(n+7) { display: none; }       /* на телефоне шесть, на компьютере десять */
.op {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px; border-radius: 18px;
  text-align: left; color: var(--ink); transition: background-color .15s;
}
.op-ic { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; }
.op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.op-name, .op-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-name { font-size: 15px; font-weight: 500; }
.op-sub { font-size: 13px; color: var(--ink-3); }
.op-sum { flex: none; font-family: var(--disp); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ── шторки: все операции и одна операция ─────────────────────── */
.ops-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 16px; padding: 2px 20px; scrollbar-width: none; }
.ops-chips::-webkit-scrollbar { display: none; }
.ops-chips .chip { flex: none; }
.ops-groups { display: flex; flex-direction: column; gap: 20px; }
.ops-group { display: flex; flex-direction: column; }
.ops-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ops-gm { font-family: var(--disp); font-size: 14px; font-weight: 600; }
.ops-gs { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ops-list .op { padding: 10px 2px; }

.opd-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.opd-sum { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.opd-list { display: flex; flex-direction: column; margin: 0 0 22px; border-top: 1px solid var(--line); }
.opd-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.opd-list dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.opd-list dd { margin: 0; font-size: 15px; text-align: right; }
.opd-del { width: 100%; color: #EE7A8A; border-color: rgba(238, 122, 138, .3); }

/* ── скелет и появление ───────────────────────────────────────── */
.sk-mn-hero { height: 326px; border-radius: 32px; }
.sk-mn-debt { height: 440px; border-radius: 24px; }
.money.anim .dc-svg { animation: dc-reveal 1s var(--ease) both; }
.money.anim .dc-end { animation: dc-pop .35s .8s var(--ease) both; }
@keyframes dc-reveal { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } }
@keyframes dc-pop { from { transform: scale(0); opacity: 0; } }

/* наведение только там, где есть мышь: на телефоне :hover залипает после тапа */
@media (hover: hover) {
  .mn-act:hover .mn-act-ic { background: rgba(255, 255, 255, .13); }
  .mn-sec button.sec-link:hover { color: var(--coral-hi); }
  .op:hover { background: rgba(255, 255, 255, .04); }
  .opd-del:hover { color: #F59AA6; background: rgba(238, 122, 138, .08); }
}

/* ── компьютер ────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .money { max-width: 600px; }
}
@media (min-width: 1180px) {
  .money { max-width: 1120px; gap: 26px; }
  .mn-grid { display: grid; grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .mn-col { gap: 22px; }
  .dc-plot { height: 140px; }
  .mn-ops .op:nth-of-type(n+7) { display: flex; }
}