Telegram 共享费用管理应用设计

Design a clean, modern Telegram Web App interface for managing shared expenses between friends.
The app has a light mode, rounded UI, and mobile-first layout. Use Telegram style: white background, blue accents, and clean sans-serif fonts.

🎯 Main screen (Home):

"My Groups" title at the top

List of groups the user is part of

Each group tile shows:

Group name

Total spent

How much the user owes or is owed

Small group avatar or emoji

Button at the bottom: "➕ Create Group"

📂 Group details screen:

Header with group name (e.g. “Trip to Sochi”)

Summary section:

Total expenses

User’s balance

Number of members

List of expenses:

Each expense shows:

Description (e.g. “Dinner”)

Amount

Who paid

Split between whom

Date

Floating button: "➕ Add Expense"

➕ Add Expense modal/screen:

Input: description

Input: amount

Select: who paid (dropdown, pre-filled with Telegram ID)

Multi-select: participants (Telegram users in group)

Button: “Add”

👤 Optional user menu:

Telegram username

Logout button (or just “Reset session”)

Keep everything simple, fast, intuitive. Prioritize clean layout and minimal distractions. Should look great on iPhone and Android screens in Telegram WebView.