Add banking overview UI and enhance currency tab functionality

- Introduced a new banking overview section with account details for checking, savings, and charity balances.
- Implemented a tabbed interface for the currency section, allowing users to switch between leaderboard and banking views.
- Enhanced user experience with animations and improved layout for better visibility of account information.
- Maintained existing functionality while integrating new banking features seamlessly.

assets/css/style.css

@@ -609,6 +609,50 @@ body.header-tone-light .app-header .tab.active {
     font-weight: 600;
 }
 
+.banking-hero {
+    border-radius: 0.8rem;
+    padding: 0.9rem 1rem;
+    background: linear-gradient(135deg, rgba(74, 144, 226, 0.12), rgba(74, 226, 168, 0.1));
+    border: 1px solid rgba(74, 144, 226, 0.2);
+}
+
+.banking-overview-card {
+    overflow: hidden;
+    position: relative;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .banking-overview-card {
+        animation: banking-card-in 0.55s var(--fh-ease-out) both;
+    }
+
+    .banking-overview-card:nth-child(1) { animation-delay: 0.04s; }
+    .banking-overview-card:nth-child(2) { animation-delay: 0.1s; }
+    .banking-overview-card:nth-child(3) { animation-delay: 0.16s; }
+    .banking-overview-card:nth-child(4) { animation-delay: 0.22s; }
+}
+
+.banking-overview-card::after {
+    content: "";
+    position: absolute;
+    inset: auto -20% -45% auto;
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    opacity: 0.2;
+    pointer-events: none;
+}
+
+.banking-overview-checking::after { background: #4a90e2; }
+.banking-overview-savings::after { background: #2fbf71; }
+.banking-overview-charity::after { background: #8f65ff; }
+.banking-overview-donated::after { background: #f2994a; }
+
+@keyframes banking-card-in {
+    from { opacity: 0; transform: translateY(10px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,