/* ============================================================
   Mimi Finanças 💜  —  tema roxo, fofo e cheio de animação
   ============================================================ */
:root{
  --p50:#faf5ff; --p100:#f3e8ff; --p200:#e9d5ff; --p300:#d8b4fe; --p400:#c084fc;
  --p500:#a855f7; --p600:#9333ea; --p700:#7e22ce; --p800:#6b21a8; --p900:#3b0764;
  --pink:#ff8fcf; --pink-d:#f472b6; --mint:#5eead4; --mint-d:#14b8a6; --rose:#fb7185; --gold:#fde68a;
  --ink:#3b1d5a; --ink-soft:#7a5a9b;
  --glass:rgba(255,255,255,.62);
  --r:28px;
  --shadow:0 18px 40px -14px rgba(126,34,206,.35), 0 4px 10px rgba(168,85,247,.12);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --font-h:'Fredoka','Baloo 2','Comic Sans MS',system-ui,sans-serif;
  --font-b:'Quicksand','Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b); font-weight:600; color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  background:linear-gradient(135deg,#f5e9ff,#efe0ff 35%,#fbe4f6 70%,#e8dcff);
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='24' font-size='22'>🐾</text></svg>") 4 4, auto;
}
@keyframes bgShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

/* ---------- fundo ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.7;will-change:transform;animation:blobMove 30s ease-in-out infinite}
.b1{width:46vmax;height:46vmax;background:radial-gradient(circle,#c9a0ff,transparent 68%);top:-18vmax;left:-12vmax}
.b2{width:38vmax;height:38vmax;background:radial-gradient(circle,#ffb3e1,transparent 68%);bottom:-14vmax;right:-8vmax;animation-delay:-6s;animation-duration:26s}
.b3{width:28vmax;height:28vmax;background:radial-gradient(circle,#a5b4fc,transparent 68%);top:35%;left:55%;animation-delay:-11s;opacity:.4}
.b4{width:24vmax;height:24vmax;background:radial-gradient(circle,#e9c5ff,transparent 68%);bottom:5%;left:10%;animation-delay:-3s;opacity:.5}
@keyframes blobMove{
  0%,100%{transform:translate(0,0) scale(1) rotate(0)}
  33%{transform:translate(8vmax,6vmax) scale(1.15) rotate(40deg)}
  66%{transform:translate(-6vmax,10vmax) scale(.9) rotate(-30deg)}
}
.floaties{position:absolute;inset:0}
.floaty{
  position:absolute;bottom:-60px;left:var(--x);font-size:var(--s);opacity:0;
  animation:floatUp var(--d) linear var(--dl) infinite;
  will-change:transform;
}
@keyframes floatUp{
  0%{transform:translate(0,0) rotate(0) scale(.6);opacity:0}
  10%{opacity:.75}
  50%{transform:translate(var(--sway),-55vh) rotate(180deg) scale(1)}
  90%{opacity:.6}
  100%{transform:translate(calc(var(--sway) * -1),-115vh) rotate(360deg) scale(.8);opacity:0}
}
.fx-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.spark{position:absolute;font-size:16px;animation:sparkFade .9s ease-out forwards;color:var(--p400)}
@keyframes sparkFade{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(180deg);opacity:0}}
.rain-item{position:absolute;top:-40px;left:var(--x);font-size:var(--s);animation:rainDown var(--d) cubic-bezier(.3,.6,.6,1) var(--dl) forwards}
@keyframes rainDown{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translateY(112vh) rotate(var(--rot));opacity:1}}

/* ---------- layout ---------- */
.app{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:26px 22px 40px;display:flex;flex-direction:column;gap:22px}

.top{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;justify-content:space-between;animation:dropIn .8s var(--bounce) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-30px) scale(.96)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:14px}
.brand-icon{
  width:58px;height:58px;display:grid;place-items:center;font-size:30px;border-radius:20px;
  background:linear-gradient(145deg,var(--p400),var(--pink));box-shadow:var(--shadow);
  animation:paw 3.2s ease-in-out infinite;
}
@keyframes paw{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(10deg) scale(1.08)}}
h1{font-family:var(--font-h);font-size:clamp(28px,4vw,40px);font-weight:700;line-height:1;color:var(--p800);letter-spacing:.3px}
h1 em{
  font-style:normal;background:linear-gradient(90deg,var(--p500),var(--pink-d),var(--p500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes gradSlide{to{background-position:200% center}}
.brand p{font-size:14px;color:var(--ink-soft);margin-top:4px}

.month-switch{
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.85);box-shadow:var(--shadow);border:2px solid #fff;
}
.month-label{font-family:var(--font-h);font-weight:600;font-size:19px;min-width:170px;text-align:center;text-transform:capitalize;color:var(--p700)}
.month-label.flip{animation:flip .5s var(--bounce)}
@keyframes flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
.icon-btn{
  width:40px;height:40px;border-radius:50%;font-size:24px;font-weight:700;color:#fff;line-height:1;
  background:linear-gradient(145deg,var(--p400),var(--p600));box-shadow:0 6px 14px -4px rgba(147,51,234,.6);
  transition:transform .25s var(--bounce);
}
.icon-btn:hover{transform:scale(1.15) rotate(-6deg)}
.icon-btn:active{transform:scale(.88)}

.top-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-family:var(--font-h);font-weight:600;font-size:16px;color:#fff;
  box-shadow:0 10px 20px -8px rgba(126,34,206,.55);transition:transform .3s var(--bounce),box-shadow .3s;
}
.btn::after{
  content:"";position:absolute;top:0;left:0;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-200%) skewX(-20deg);
  animation:btnShine 4s ease-in-out infinite;will-change:transform;
}
@keyframes btnShine{0%,60%{transform:translateX(-200%) skewX(-20deg)}100%{transform:translateX(400%) skewX(-20deg)}}
.btn:hover{transform:translateY(-4px) scale(1.06) rotate(-1.5deg);box-shadow:0 16px 26px -8px rgba(126,34,206,.6)}
.btn:active{transform:scale(.94)}
.btn span{font-size:18px;font-weight:700}
.btn-in{background:linear-gradient(135deg,#34d3b5,#6ee7b7 60%,#a7f3d0);color:#064e3b}
.btn-out{background:linear-gradient(135deg,var(--pink-d),var(--rose))}
.btn-sub{background:linear-gradient(135deg,var(--p500),var(--p700))}
.btn-big{width:100%;justify-content:center;background:linear-gradient(135deg,var(--p500),var(--pink-d));font-size:18px;padding:15px;margin-top:6px}

/* ---------- cartões ---------- */
.card{
  position:relative;background:rgba(255,255,255,.8);
  border:2.5px solid rgba(255,255,255,.9);border-radius:var(--r);box-shadow:var(--shadow);
  animation:cardIn .8s var(--bounce) both;animation-delay:calc(var(--i,0) * .09s + .15s);
  transition:transform .35s var(--bounce),box-shadow .35s;
}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 48px -16px rgba(126,34,206,.45)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:22px}
.cat-card{display:flex;flex-direction:column;align-items:center;padding:18px 20px 22px;gap:8px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(243,232,255,.6))}
.cat-card>*{position:relative;z-index:1}
.cat-stage{position:relative;width:100%;max-width:330px;aspect-ratio:260/250;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.stage-glow{position:absolute;inset:14% 10% 6%;border-radius:50%;background:radial-gradient(circle,rgba(192,132,252,.55),transparent 68%);animation:glow 3.5s ease-in-out infinite;transition:background .6s}
@keyframes glow{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.cat{position:relative;width:100%;height:100%;overflow:visible}
.cat *{transform-box:fill-box}
.cat-fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.fx-pop{position:absolute;left:var(--x,50%);top:var(--y,40%);font-size:var(--s,24px);animation:fxPop var(--d,1.6s) ease-out forwards}
@keyframes fxPop{
  0%{transform:translate(-50%,0) scale(.2);opacity:0}
  15%{opacity:1;transform:translate(-50%,-10px) scale(1.2)}
  100%{transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(.9) rotate(var(--rot,0));opacity:0}
}

/* movimento base */
.cat-all{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
.head{transform-origin:50% 90%}
@keyframes headTilt{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.tail-wrap{transform-origin:86% 80%;animation:wag 2.4s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(9deg)}}
.eye-blink{transform-origin:50% 50%;animation:blink 4.4s infinite}
.eyes-sad .eye-blink{animation-duration:3.2s}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.ear{transition:transform .6s var(--bounce)}
.el{transform-origin:70% 100%}.er{transform-origin:30% 100%}

@keyframes earL{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-9deg)}96%{transform:rotate(3deg)}}
@keyframes earR{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(9deg)}90%{transform:rotate(-3deg)}}
.bow{transform-origin:81px 61px}
@keyframes bowBob{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)}}
.coin-belly{transform-origin:50% 50%;opacity:.95}
@keyframes coinFlip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
.paw{transition:transform .5s var(--bounce)}

@keyframes blushPulse{0%,100%{opacity:.6}50%{opacity:.95}}
.whiskers{transform-origin:50% 50%}
@keyframes whisk{0%,100%{transform:rotate(0)}50%{transform:rotate(.8deg)}}

/* estados: tudo escondido por padrão */
.eyes,.mouth,.cloud,.stars,.tear{opacity:0;transition:opacity .45s}
.mouth{transition:opacity .35s}

/* NEUTRO */
.mood-neutral .eyes-normal,.mood-neutral .m-neutral{opacity:1}

/* FELIZ */
.mood-happy .eyes-happy,.mood-happy .m-happy,.mood-happy .stars{opacity:1}
.mood-happy .tail-wrap{animation:wagFast .55s ease-in-out infinite}
@keyframes wagFast{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
.mood-happy .cat-all{animation:happyBounce 1.8s ease-in-out infinite}
@keyframes happyBounce{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-8px) scale(.99,1.02)}50%{transform:translateY(0) scale(1.02,.98)}}
.mood-happy .stage-glow{background:radial-gradient(circle,rgba(255,143,207,.6),rgba(192,132,252,.25) 55%,transparent 70%)}
.st{transform-origin:50% 50%;animation:twinkle 1.6s ease-in-out infinite}
.s2{animation-delay:-.5s}.s3{animation-delay:-1s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1.25) rotate(35deg);opacity:1}}

/* EMPOLGADA (cheer) */
.mood-cheer .eyes-happy,.mood-cheer .m-happy,.mood-cheer .stars{opacity:1}
.mood-cheer .cat-all{animation:jump .55s var(--bounce) 4}
@keyframes jump{0%,100%{transform:translateY(0) scale(1.03,.96)}45%{transform:translateY(-34px) scale(.96,1.06) rotate(-3deg)}75%{transform:translateY(-10px) rotate(3deg)}}
.mood-cheer .tail-wrap{animation:wagFast .3s ease-in-out infinite}
.mood-cheer .stage-glow{background:radial-gradient(circle,rgba(253,230,138,.85),rgba(255,143,207,.4) 55%,transparent 70%)}
.mood-cheer .paw.pl{transform:translateY(-8px) rotate(-14deg)}
.mood-cheer .paw.pr{transform:translateY(-8px) rotate(14deg)}
.mood-cheer .st{animation-duration:.6s}

/* PREOCUPADA */
.mood-worry .eyes-sad,.mood-worry .m-neutral{opacity:1}
.mood-worry .tear{opacity:0!important}
.mood-worry .head{animation:worryTilt 2.6s ease-in-out infinite}
@keyframes worryTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(2deg)}}
.mood-worry .tail-wrap{animation:wagSlow 3.4s ease-in-out infinite}
@keyframes wagSlow{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(4deg)}}
.mood-worry .el{transform:rotate(-6deg);animation:none}.mood-worry .er{transform:rotate(6deg);animation:none}
.mood-worry .stage-glow{background:radial-gradient(circle,rgba(165,180,252,.6),transparent 68%)}
.mood-worry .cat-all{animation:shiver .35s linear infinite,breathe 3.6s ease-in-out infinite}
@keyframes shiver{0%,100%{translate:0 0}25%{translate:-1px 0}75%{translate:1px 0}}

/* TRISTE */
.mood-sad .eyes-sad,.mood-sad .m-sad,.mood-sad .cloud,.mood-sad .tear{opacity:1}
.mood-sad .cat-all{animation:sadBreath 4.4s ease-in-out infinite}
@keyframes sadBreath{0%,100%{transform:translateY(4px) scale(1.01,.97)}50%{transform:translateY(7px) scale(1,.95)}}
.mood-sad .head{animation:sadHead 5s ease-in-out infinite;transform:rotate(-5deg) translateY(4px)}
@keyframes sadHead{0%,100%{transform:rotate(-6deg) translateY(5px)}50%{transform:rotate(-3deg) translateY(8px)}}
.mood-sad .el{transform:rotate(-24deg) translateY(4px);animation:none}
.mood-sad .er{transform:rotate(24deg) translateY(4px);animation:none}
.mood-sad .tail-wrap{animation:tailSad 5s ease-in-out infinite;transform:rotate(38deg)}
@keyframes tailSad{0%,100%{transform:rotate(40deg)}50%{transform:rotate(46deg)}}
.mood-sad .blush{opacity:.35;animation:none}
.mood-sad .whiskers{transform:rotate(9deg);animation:none}
.mood-sad .coin-belly{animation:none;opacity:.55}
.mood-sad .stage-glow{background:radial-gradient(circle,rgba(129,140,248,.55),rgba(147,197,253,.2) 55%,transparent 70%);animation-duration:6s}
.mood-sad .bow{animation:none;transform:rotate(-12deg)}
.cloud-body{animation:cloudFloat 4s ease-in-out infinite}
@keyframes cloudFloat{0%,100%{transform:translateX(-4px)}50%{transform:translateX(6px)}}
.drop{animation:dropFall 1s linear infinite}
.d2{animation-delay:-.35s}.d3{animation-delay:-.7s}
@keyframes dropFall{0%{transform:translateY(-4px);opacity:0}20%{opacity:1}100%{transform:translateY(60px);opacity:0}}
.tear{transform-origin:50% 0;animation:tearRoll 1.8s ease-in infinite}
.t2{animation-delay:-.9s}
@keyframes tearRoll{0%{transform:translateY(-6px) scale(.5);opacity:0}25%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(44px) scale(.8);opacity:0}}
.mood-sad .cat-stage,.cat-stage.shake{}
.cat-stage.shake .cat{animation:shake .5s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.cat-stage.petted .cat{animation:petted .6s var(--bounce)}
@keyframes petted{0%{transform:scale(1)}30%{transform:scale(1.1,.9)}60%{transform:scale(.95,1.06)}100%{transform:scale(1)}}

/* balão + medidor */
.cat-info{width:100%;display:flex;flex-direction:column;gap:14px}
.bubble{
  position:relative;padding:14px 18px;border-radius:22px;background:#fff;text-align:center;font-weight:700;font-size:15.5px;line-height:1.4;
  box-shadow:0 10px 22px -10px rgba(126,34,206,.4);border:2px solid var(--p200);color:var(--p800);
}
.bubble::before{
  content:"";position:absolute;top:-11px;left:50%;width:20px;height:20px;background:#fff;border-left:2px solid var(--p200);border-top:2px solid var(--p200);
  transform:translateX(-50%) rotate(45deg);border-radius:4px 0 0 0;
}
.bubble.pop{animation:bubblePop .6s var(--bounce)}
@keyframes bubblePop{0%{transform:scale(.7) rotate(-3deg);opacity:.3}100%{transform:none;opacity:1}}
.mm-head{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);margin-bottom:6px}
.mm-head b{font-family:var(--font-h);color:var(--p700);font-size:16px}
.mm-track{position:relative;height:18px;border-radius:99px;background:rgba(255,255,255,.8);box-shadow:inset 0 2px 5px rgba(126,34,206,.18)}
.mm-fill{height:100%;width:50%;border-radius:99px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,#818cf8,var(--p400),var(--pink));transition:width 1.2s var(--bounce),background .6s}
.mm-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.35) 0 10px,transparent 10px 20px);}
@keyframes stripes{to{background-position:28px 0}}
.mm-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;transition:left 1.2s var(--bounce);animation:beat 1.1s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(168,85,247,.5))}
@keyframes beat{0%,100%{scale:1}50%{scale:1.3}}

/* ---------- estatísticas ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stat{padding:22px 24px;display:flex;flex-direction:column;gap:4px;overflow:hidden;justify-content:center}
.stat-ico{
  position:absolute;top:16px;right:18px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:28px;
  background:rgba(255,255,255,.75);box-shadow:0 8px 16px -6px rgba(126,34,206,.35);
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(6deg)}}

.stat:hover .stat-ico{animation:bob 1.2s ease-in-out infinite}
.stat-label{font-size:14px;color:var(--ink-soft);font-weight:700;letter-spacing:.3px}
.stat-val{font-family:var(--font-h);font-size:clamp(26px,3.2vw,36px);font-weight:700;line-height:1.1;margin-top:6px}
.stat small{font-size:13px;color:var(--ink-soft);margin-top:2px}
.shine{position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);pointer-events:none}
.stat:hover .shine{animation:shineSweep .9s ease}
@keyframes shineSweep{to{left:140%}}
.s-balance{background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(216,180,254,.55))}
.s-in .stat-val{color:#0d9488}
.s-out .stat-val{color:#e11d74}
.s-pend .stat-val{color:var(--p700)}
.s-balance .stat-val.neg{color:#e11d48;animation:negPulse 1.5s ease-in-out infinite}
.s-balance .stat-val.pos{color:var(--p700)}
@keyframes negPulse{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 18px rgba(251,113,133,.7)}}

/* ---------- insights ---------- */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.insight{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.7);border:2px dashed var(--p300);
 animation:cardIn .7s var(--bounce) both;animation-delay:calc(var(--i) * .08s + .5s);
  transition:transform .3s var(--bounce),background .3s;
}
.insight:hover{transform:translateY(-4px) rotate(-1deg);background:#fff}
.insight .ei{font-size:26px}
.insight:hover .ei{animation:bob 1s ease-in-out infinite}
.insight small{display:block;font-size:12px;color:var(--ink-soft)}
.insight b{font-family:var(--font-h);font-size:17px;color:var(--p800)}

/* ---------- painéis ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{padding:22px 22px 16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
h2{font-family:var(--font-h);font-size:21px;font-weight:600;color:var(--p800);display:flex;align-items:center;gap:8px}
.wiggle{display:inline-block}
.panel-head:hover .wiggle{animation:wiggle 1s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg) scale(1.15)}}
.chip-btn{padding:8px 16px;border-radius:99px;background:var(--p100);color:var(--p700);font-weight:700;font-size:14px;border:2px solid var(--p200);transition:.3s var(--bounce)}
.chip-btn:hover{background:var(--p500);color:#fff;transform:scale(1.08) rotate(-2deg)}
.filter{display:flex;gap:4px;padding:4px;background:var(--p100);border-radius:99px}
.filter button{padding:6px 13px;border-radius:99px;font-size:13px;font-weight:700;color:var(--ink-soft);transition:.3s var(--bounce)}
.filter button.on{background:#fff;color:var(--p700);box-shadow:0 4px 10px -3px rgba(126,34,206,.35);transform:scale(1.06)}
.list{display:flex;flex-direction:column;gap:10px;max-height:470px;overflow-y:auto;padding:4px 6px 8px 2px;scrollbar-width:thin;scrollbar-color:var(--p300) transparent}
.list::-webkit-scrollbar{width:8px}.list::-webkit-scrollbar-thumb{background:var(--p300);border-radius:9px}

/* item movimentação */
.tx{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:11px 14px;border-radius:20px;background:rgba(255,255,255,.75);
  border:2px solid transparent;animation:slideIn .55s var(--bounce) both;animation-delay:calc(var(--i) * .04s);
  transition:transform .3s var(--bounce),border-color .3s,box-shadow .3s;
}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px) scale(.92)}to{opacity:1;transform:none}}
.tx:hover{transform:translateX(5px) scale(1.015);border-color:var(--p300);box-shadow:0 8px 18px -8px rgba(126,34,206,.35)}
.tx-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;font-size:21px}
.tx.in .tx-ico{background:linear-gradient(145deg,#ccfbf1,#99f6e4)}
.tx.out .tx-ico{background:linear-gradient(145deg,#ffe4f1,#fbcfe8)}
.tx-main b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-main small{font-size:12px;color:var(--ink-soft)}
.tx-val{font-family:var(--font-h);font-weight:600;font-size:17px;white-space:nowrap}
.tx.in .tx-val{color:#0d9488}.tx.out .tx-val{color:#e11d74}
.del{width:30px;height:30px;border-radius:50%;font-size:14px;opacity:.35;transition:.3s var(--bounce)}
.del:hover{opacity:1;background:#ffe4e6;transform:rotate(90deg) scale(1.15)}

/* item mensalidade */
.sub{
  position:relative;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.78);border:2px solid transparent;
  animation:slideIn .55s var(--bounce) both;animation-delay:calc(var(--i) * .06s);transition:transform .3s var(--bounce),border-color .3s,box-shadow .3s;overflow:hidden;
}
.sub:hover{transform:translateY(-3px) scale(1.012);border-color:var(--p300);box-shadow:0 10px 20px -10px rgba(126,34,206,.4)}
.sub.paid{background:linear-gradient(120deg,rgba(204,251,241,.7),rgba(255,255,255,.8))}
.sub.late{background:linear-gradient(120deg,rgba(255,228,230,.85),rgba(255,255,255,.8));border-color:#fda4af;animation:slideIn .55s var(--bounce) both,lateWobble 2.6s ease-in-out infinite}
@keyframes lateWobble{0%,90%,100%{rotate:0deg}93%{rotate:-.8deg}96%{rotate:.8deg}}
.sub-top{display:flex;align-items:center;gap:12px}
.sub-ico{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,var(--p100),var(--p200))}
.sub-title{flex:1;min-width:0}
.sub-title b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-title small{font-size:12.5px;color:var(--ink-soft)}
.sub-val{font-family:var(--font-h);font-weight:600;font-size:18px;color:var(--p700)}
.sub-bar{margin-top:11px;height:12px;border-radius:99px;background:var(--p100);overflow:hidden;box-shadow:inset 0 1px 3px rgba(126,34,206,.15)}
.sub-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--p400),var(--pink));position:relative;animation:grow 1.4s var(--bounce) both}
.sub-bar i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.4) 0 8px,transparent 8px 16px);}
@keyframes grow{from{width:0}}
.sub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.tag{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--p100);color:var(--p700)}
.tag.warn{background:#fef3c7;color:#b45309}.tag.bad{background:#ffe4e6;color:#be123c}.tag.ok{background:#ccfbf1;color:#0f766e}
.sub-actions{margin-left:auto;display:flex;gap:6px}
.pay{padding:7px 14px;border-radius:99px;font-size:13px;font-weight:700;background:linear-gradient(135deg,var(--p500),var(--pink-d));color:#fff;transition:.3s var(--bounce);box-shadow:0 6px 12px -5px rgba(147,51,234,.6)}
.pay:hover{transform:scale(1.1) rotate(-2deg)}
.pay.undo{background:var(--p100);color:var(--p700);box-shadow:none}

.empty{text-align:center;padding:34px 14px;color:var(--ink-soft);font-size:15px}
.empty .big{font-size:52px;display:block;animation:bob 3s ease-in-out infinite;margin-bottom:6px}

/* ---------- gráficos ---------- */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;min-height:220px}
.donut{position:relative;width:200px;height:200px;flex:none}
.donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.donut circle{fill:none;stroke-width:22;transition:stroke-width .3s;cursor:pointer}
.donut .seg-c{animation:draw 1.3s cubic-bezier(.3,.8,.3,1) both;animation-delay:calc(var(--i) * .12s);stroke-linecap:butt}
.donut .seg-c:hover{stroke-width:28}
@keyframes draw{from{stroke-dasharray:0 340}}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.donut-center b{font-family:var(--font-h);font-size:20px;color:var(--p800);display:block}
.donut-center small{font-size:12px;color:var(--ink-soft)}
.d-legend{display:flex;flex-direction:column;gap:8px;min-width:170px}
.d-item{display:flex;align-items:center;gap:9px;font-size:14px;animation:slideIn .5s var(--bounce) both;animation-delay:calc(var(--i) * .08s + .3s)}
.d-item i{width:14px;height:14px;border-radius:5px;flex:none}
.d-item span{flex:1}
.d-item b{font-family:var(--font-h);color:var(--p800)}

.bars{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;height:240px;padding:10px 4px 0;border-bottom:3px dashed var(--p200);position:relative}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px;position:relative}
.bpair{display:flex;align-items:flex-end;gap:4px;height:calc(100% - 26px);width:100%;justify-content:center}
.bar{
  width:min(26px,42%);height:var(--h);min-height:4px;border-radius:12px 12px 4px 4px;transform-origin:bottom;position:relative;
  animation:barUp 1.1s var(--bounce) both;animation-delay:calc(var(--i) * .1s);transition:filter .3s,transform .3s var(--bounce);
}
.bar.bin{background:linear-gradient(180deg,var(--p400),var(--p600))}
.bar.bout{background:linear-gradient(180deg,#ffb3dc,var(--pink-d))}
.bar:hover{filter:brightness(1.12);transform:scaleX(1.15)}
.bar::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none;
  background:var(--p800);color:#fff;font-size:11px;padding:4px 8px;border-radius:9px;white-space:nowrap;transition:.25s var(--bounce);z-index:3}
.bar:hover::after{opacity:1;transform:translateX(-50%) scale(1)}
@keyframes barUp{from{transform:scaleY(0)}}
.bcol.cur .blabel{background:var(--p500);color:#fff;border-radius:99px;padding:2px 9px}
.blabel{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:capitalize;position:absolute;bottom:-32px}
.bars{margin-bottom:30px}
.legend{display:flex;gap:12px;font-size:13px;color:var(--ink-soft)}
.legend span{display:flex;align-items:center;gap:5px}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.d-in{background:var(--p500)}.d-out{background:var(--pink-d)}

.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 6px;color:var(--ink-soft);font-size:14px}
.link-btn{padding:6px 12px;border-radius:99px;font-weight:700;color:var(--p700);font-size:13.5px;transition:.3s var(--bounce)}
.link-btn:hover{background:rgba(255,255,255,.8);transform:scale(1.07)}

/* ---------- dialogs ---------- */
.dlg{
  border:none;border-radius:32px;padding:0;width:min(470px,92vw);margin:auto;background:transparent;overflow:visible;
}
.dlg[open]{animation:dlgIn .55s var(--bounce)}
@keyframes dlgIn{from{opacity:0;transform:translateY(60px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
.dlg::backdrop{background:rgba(76,29,149,.35);animation:fade .35s}
@keyframes fade{from{opacity:0}}
.dlg form{
  position:relative;padding:28px 26px 26px;border-radius:32px;background:linear-gradient(160deg,#fff,#f8f0ff);border:3px solid #fff;
  box-shadow:0 40px 80px -20px rgba(88,28,135,.6);display:flex;flex-direction:column;gap:14px;
}
.dlg form::before{content:"🎀";position:absolute;top:-22px;left:24px;font-size:38px;animation:bowBob 2.5s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(244,114,182,.5))}
.dlg h3{font-family:var(--font-h);font-size:25px;color:var(--p800);margin-top:4px}
.dlg-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--p100);color:var(--p700);font-weight:700;transition:.3s var(--bounce)}
.dlg-x:hover{transform:rotate(90deg) scale(1.15);background:var(--p200)}
.field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.field span{font-size:13px;font-weight:700;color:var(--ink-soft);padding-left:6px}
.field input,.field select{
  padding:12px 16px;border-radius:18px;border:2.5px solid var(--p200);background:#fff;font-size:16px;font-weight:600;outline:none;width:100%;
  transition:border-color .25s,box-shadow .25s,transform .25s var(--bounce);
}
.field input:focus,.field select:focus{border-color:var(--p400);box-shadow:0 0 0 5px rgba(192,132,252,.25);transform:scale(1.02)}
.row2{display:flex;gap:12px}
.hint{font-size:13px;color:var(--ink-soft);background:var(--p50);padding:9px 13px;border-radius:14px;border:2px dashed var(--p200)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:99px;background:var(--p100)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:2;text-align:center;padding:10px;font-family:var(--font-h);font-weight:600;color:var(--ink-soft);cursor:pointer;transition:color .3s}
.seg-pill{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:99px;background:#fff;box-shadow:0 5px 12px -4px rgba(126,34,206,.4);transition:transform .45s var(--bounce)}
.seg input#tIn:checked ~ .seg-pill{transform:none}
.seg input#tOut:checked ~ .seg-pill{transform:translateX(100%)}
.seg input#tIn:checked + label{color:#0d9488}
.seg input#tOut:checked + label{color:#e11d74}

/* toasts */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{padding:12px 22px;border-radius:99px;background:#fff;color:var(--p800);font-weight:700;box-shadow:0 14px 30px -10px rgba(88,28,135,.55);border:2px solid var(--p200);animation:toastIn .5s var(--bounce),toastOut .4s ease 2.6s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(30px) scale(.7)}}
@keyframes toastOut{to{opacity:0;transform:translateY(20px) scale(.9)}}

/* ---------- responsivo ---------- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .cat-card{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .cat-info{max-width:420px}
  .duo{grid-template-columns:1fr}
}
@media(max-width:620px){
  .app{padding:16px 12px 30px}
  .top{justify-content:center}
  .top-actions{justify-content:center}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:16px}
  .stat-ico{width:40px;height:40px;font-size:20px;top:10px;right:10px}
  .tx{grid-template-columns:auto 1fr auto;}
  .tx .del{display:none}
  .row2{flex-direction:column}
  .month-label{min-width:130px;font-size:17px}
  .bars{height:200px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- bruxinha ---------- */
.hat{transform-origin:130px 74px;transition:transform .6s var(--bounce)}
.mood-sad .hat{transform:rotate(-9deg) translate(-3px,5px)}
.mood-worry .hat{transform:rotate(-4deg)}
.mood-cheer .hat,.mood-happy .hat{transform:rotate(3deg)}

/* ---------- formulário extra ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{padding:6px 12px;border-radius:99px;font-size:13px;font-weight:700;background:var(--p100);color:var(--p700);border:2px solid var(--p200);transition:.3s var(--bounce)}
.chips button:hover{background:var(--p500);color:#fff;transform:scale(1.07) rotate(-2deg)}
.check{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:18px;background:var(--p50);border:2px dashed var(--p300);cursor:pointer;font-weight:700;color:var(--p700);font-size:14.5px}
.check input{width:20px;height:20px;accent-color:var(--p500);flex:none}
.check.hide{display:none}

/* ---------- a receber ---------- */
.tx.pending{background:repeating-linear-gradient(135deg,rgba(255,255,255,.8) 0 12px,rgba(243,232,255,.85) 12px 24px);border:2px dashed var(--p300)}
.tx.pending .tx-val{opacity:.75}
.recv{margin-top:5px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700;background:linear-gradient(135deg,#34d3b5,#6ee7b7);color:#064e3b;transition:.3s var(--bounce)}
.recv:hover{transform:scale(1.1) rotate(-2deg)}
.tag.soon{background:#ede9fe;color:#6d28d9}

/* ---------- login ---------- */
.logged-out .app{display:none}
.auth{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;overflow:auto}
.auth[hidden]{display:none}
.auth-card{
  position:relative;width:min(420px,100%);padding:30px 28px 26px;border-radius:32px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(160deg,#fff,#f8f0ff);border:3px solid #fff;box-shadow:0 40px 80px -20px rgba(88,28,135,.55);
  animation:dlgIn .7s var(--bounce);
}
.auth-emoji{text-align:center;font-size:44px;animation:bob 3s ease-in-out infinite}
.auth-card h2{justify-content:center;font-size:28px}
.auth-sub{text-align:center;color:var(--ink-soft);font-size:14px;margin-top:-8px}
.auth-tabs{align-self:center}
.auth-err{min-height:20px;text-align:center;color:#be123c;font-size:14px;font-weight:700}
.user-chip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:99px;background:rgba(255,255,255,.85);border:2px solid #fff;box-shadow:var(--shadow);font-size:14px}
.user-chip b{color:var(--p700)}
.user-chip button[hidden]{display:none}
.admin-box{position:relative;padding:28px 24px 24px;border-radius:32px;background:linear-gradient(160deg,#fff,#f8f0ff);border:3px solid #fff;box-shadow:0 40px 80px -20px rgba(88,28,135,.6);display:flex;flex-direction:column;gap:14px;max-height:88vh;overflow:auto}
.admin-box h3{font-family:var(--font-h);font-size:25px;color:var(--p800)}
.admin-list{max-height:240px}
.admin-new{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:2px dashed var(--p200)}
.u-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.85);border:2px solid var(--p100)}
.u-row .u-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.u-row small{color:var(--ink-soft)}
.u-row button{padding:5px 11px;border-radius:99px;font-size:13px;font-weight:700;background:var(--p100);color:var(--p700);transition:.3s var(--bounce)}
.u-row button:hover{background:var(--p500);color:#fff;transform:scale(1.06)}
.u-row button.danger:hover{background:#e11d48}
.user-chip button{padding:5px 12px;border-radius:99px;background:var(--p100);color:var(--p700);font-weight:700;font-size:13px;transition:.3s var(--bounce)}
.user-chip button:hover{background:var(--p500);color:#fff;transform:scale(1.08)}
.dlg .admin-new{padding:12px 0 0;background:none;border:0;border-top:2px dashed var(--p200);box-shadow:none;border-radius:0}
.dlg .admin-new::before{content:none}

/* ---------- empréstimos e carteira ---------- */
.btn-loan{background:linear-gradient(135deg,#f59e0b,#f472b6)}
.seg input#lLent:checked ~ .seg-pill{transform:translateX(100%)}
.seg input#lBorrow:checked + label{color:#be123c}
.seg input#lLent:checked + label{color:#0d9488}
.wallet{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wcard{padding:18px 20px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.w-ico{position:absolute;top:12px;right:14px;font-size:26px;animation:bob 3.4s ease-in-out infinite}
.w-label{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.w-val{font-family:var(--font-h);font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.15;margin-top:4px}
.wcard small{font-size:12.5px;color:var(--ink-soft)}
.w-cash{background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(216,180,254,.55))}
.w-cash .w-val{color:var(--p700)}
.w-debt .w-val{color:#e11d48}
.w-owed .w-val{color:#0d9488}
.w-free{background:linear-gradient(145deg,rgba(255,251,235,.95),rgba(253,230,138,.6))}
.w-free .w-val{color:#b45309}
.w-val.neg{color:#e11d48!important}
.loan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;max-height:none;overflow:visible}
.loan.borrowed .sub-ico{background:linear-gradient(145deg,#ffe4e6,#fecdd3)}
.loan.lent .sub-ico{background:linear-gradient(145deg,#ccfbf1,#99f6e4)}
.sub-val small.of{display:block;font-size:11px;font-weight:600;color:var(--ink-soft);font-family:var(--font-b);text-align:right}
.loan-note{margin-top:8px;font-size:13px;color:var(--ink-soft)}
.pchip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:99px;background:var(--p50);border:1.5px dashed var(--p300);font-size:12px;font-weight:700;color:var(--p700)}
.pchip button{width:18px;height:18px;border-radius:50%;font-size:10px;opacity:.5;transition:.25s var(--bounce)}
.pchip button:hover{opacity:1;background:#ffe4e6;transform:rotate(90deg)}
@media(max-width:1000px){.wallet{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.wallet{gap:10px}.wcard{padding:14px}.loan-grid{grid-template-columns:1fr}}

/* ---------- categorias, divisão, calculadora ---------- */
.cat-link{align-self:flex-start;padding:2px 8px;font-size:12.5px}
.emoji-f{flex:0 0 96px}
.emoji-f input{text-align:center;font-size:22px}
.cat-sub{font-family:var(--font-h);color:var(--p800);margin-top:4px}
.cat-list{max-height:170px}
.split-box{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:20px;background:var(--p50);border:2px dashed var(--p300);animation:cardIn .4s var(--bounce)}
.split-box[hidden]{display:none}

.calc-fab{
  position:fixed;right:18px;bottom:18px;z-index:55;width:60px;height:60px;border-radius:50%;font-size:28px;color:#fff;
  background:linear-gradient(145deg,var(--p400),var(--pink-d));box-shadow:0 14px 26px -8px rgba(126,34,206,.7);
  transition:transform .3s var(--bounce);animation:bob 3.4s ease-in-out infinite;
}
.calc-fab:hover{transform:scale(1.14) rotate(-8deg);animation:none}
.calc-fab:active{transform:scale(.9)}
.calc{
  position:fixed;right:18px;bottom:90px;z-index:56;width:min(320px,calc(100vw - 24px));padding:14px 14px 16px;border-radius:28px;
  background:linear-gradient(160deg,#fff,#f5e9ff);border:3px solid #fff;box-shadow:0 30px 60px -18px rgba(88,28,135,.65);
  animation:calcIn .5s var(--bounce);transform-origin:bottom right;
}
.calc[hidden]{display:none}
@keyframes calcIn{from{opacity:0;transform:translateY(30px) scale(.7) rotate(4deg)}to{opacity:1;transform:none}}
.calc header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--p800);font-family:var(--font-h);font-size:17px}
.calc header button{width:30px;height:30px;border-radius:50%;background:var(--p100);color:var(--p700);font-weight:700;transition:.3s var(--bounce)}
.calc header button:hover{transform:rotate(90deg) scale(1.12)}
.calc-screen{padding:12px 16px;border-radius:20px;background:linear-gradient(145deg,#4c1d95,#6d28d9);color:#fff;text-align:right;min-height:84px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;box-shadow:inset 0 3px 8px rgba(0,0,0,.25)}
#calcExpr{font-family:var(--font-h);font-size:26px;word-break:break-all;line-height:1.15}
#calcRes{font-size:15px;color:#f5d0fe;min-height:20px;font-weight:700}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.calc-keys button{height:46px;border-radius:16px;font-family:var(--font-h);font-size:20px;font-weight:600;background:#fff;color:var(--p800);box-shadow:0 4px 0 var(--p200);transition:transform .15s var(--bounce),box-shadow .15s}
.calc-keys button:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--p200)}
.calc-keys button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--p200)}
.calc-keys .k-op{background:var(--p100);color:var(--p700)}
.calc-keys .k-c{background:#ffe4e6;color:#be123c;box-shadow:0 4px 0 #fecdd3}
.calc-keys .k-eq{grid-column:1 / -1;background:linear-gradient(135deg,var(--p500),var(--pink-d));color:#fff;box-shadow:0 4px 0 #a21caf}
.calc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.calc-actions button{padding:10px 8px;border-radius:99px;font-family:var(--font-h);font-size:14px;font-weight:600;transition:.3s var(--bounce)}
.calc-actions button:hover{transform:scale(1.06) rotate(-1.5deg)}
.ca-in{background:linear-gradient(135deg,#34d3b5,#6ee7b7);color:#064e3b}
.ca-out{background:linear-gradient(135deg,var(--pink-d),var(--rose));color:#fff}
@media(max-width:620px){.calc{right:12px;bottom:84px}.calc-fab{right:12px;bottom:14px}}

/* ---------- pago por outra pessoa ---------- */
.field[hidden]{display:none}
.tx.ext{border:2px dashed #c4b5fd;background:linear-gradient(120deg,rgba(237,233,254,.75),rgba(255,255,255,.8))}
.tx.ext.out .tx-val{color:var(--ink-soft)}

/* listas: os itens mantêm o tamanho e a lista rola */
.list > *{flex:none}
.list{scroll-behavior:smooth;overscroll-behavior:contain}