/* Home screen: savings card and basket rail. */
/* ---------- savings card ---------- */
.savings {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: var(--s5);
  background: radial-gradient(120% 140% at 100% 0%, #7C45FF 0%, var(--purple) 55%, #5317D6 100%);
  color: #fff; box-shadow: var(--shadow-lg); min-height: 168px;
  display: flex; flex-direction: column; gap: var(--s2);
}
.savings .label { font-weight: 700; opacity: .92; font-size: 15px; max-width: 60%; }
.savings .amount { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.savings .hint { font-size: 12.5px; opacity: .85; max-width: 62%; }
.savings .mascot { position: absolute; inset-inline-end: -8px; bottom: 14px; width: 150px; height: 125px; transform: rotate(-6deg); }
[dir="ltr"] .savings .mascot { transform: rotate(6deg) scaleX(-1); }
.savings .coin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #9A6B00; }
.savings .btn { align-self: flex-start; margin-top: auto; background: #fff; color: var(--purple); min-height: 42px; font-size: 14.5px; position: relative; z-index: 1; }

/* ---------- basket cards (home, horizontal) ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--s3); overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; }
.rail::-webkit-scrollbar { display: none; }
.bcard {
  scroll-snap-align: start; border: 0; text-align: center; border-radius: var(--r); padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow);
  min-height: 150px; transition: transform .15s;
}
.bcard:active { transform: scale(.97); }
.bcard .ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.12)); }
.bcard .nm { font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.bcard .ct { font-size: 12.5px; color: var(--ink-2); }
.t-lilac { background: #EFE6FF; } .t-mint { background: var(--mint-50); } .t-yellow { background: #FFF5D1; } .t-rose { background: #FFE9EF; } .t-sky { background: #E5F0FF; }
.bcard.add { background: var(--surface); box-shadow: none; border: 2px dashed var(--lilac); color: var(--purple); justify-content: center; }
.bcard.add .plus { width: 44px; height: 44px; border-radius: 50%; background: var(--lilac-50); display: grid; place-items: center; font-size: 26px; font-weight: 800; }


/* no baskets yet: invite to build the first one */
.first-basket {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center;
  padding: 18px; border-radius: var(--r-lg); background: #F6F1FF; box-shadow: inset 0 0 0 2px var(--purple-300);
}
.first-basket .mascot { width: 72px; height: 60px; }
.first-basket h2 { margin: 0; font-size: 18px; font-weight: 800; }
.first-basket p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.first-basket .btn { grid-column: 1 / -1; }

/* average-family saving (no baskets yet) */
.savings.family .amount small { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.savings.family .hint { max-width: 66%; line-height: 1.45; }
.fam-note { margin-top: calc(var(--s2) * -1); }