*{
box-sizing:border-box;
}


body{

margin:0;

background:#f5f7fb;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Segoe UI",
sans-serif;

color:#111;

}


.container{

max-width:430px;

margin:auto;

padding:18px;

padding-bottom:100px;

}


/* 顶部钱包 */

.wallet{

background:
linear-gradient(
135deg,
#1677ff,
#5ac8fa
);

border-radius:32px;

padding:26px;

color:white;

box-shadow:
0 18px 40px rgba(22,119,255,.25);

}


.wallet-head{

display:flex;

justify-content:space-between;

align-items:center;

}


.wallet-title{

font-size:22px;

font-weight:800;

}


.wallet-sub{

font-size:14px;

opacity:.8;

margin-top:8px;

}


.asset{

font-size:42px;

font-weight:800;

margin-top:22px;

}



/* 通用卡片 */

.card{

background:white;

border-radius:26px;

padding:22px;

margin-top:18px;

box-shadow:
0 8px 25px rgba(0,0,0,.04);

}


.card-title{

font-size:20px;

font-weight:800;

margin-bottom:18px;

}



/* 本月概览 */

.summary{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:12px;

}


.summary-box{

background:#f6f7fb;

border-radius:20px;

padding:16px 8px;

text-align:center;

}


.summary-box span{

font-size:13px;

color:#777;

}


.summary-box b{

display:block;

font-size:20px;

margin-top:8px;

}



/* 图表 */

.chart{

height:130px;

display:flex;

align-items:flex-end;

gap:12px;

padding:10px;

}


.bar{

flex:1;

background:
linear-gradient(
180deg,
#1677ff,
#8ed1fc
);

border-radius:15px 15px 5px 5px;

}



.bar:nth-child(1){

height:45%;

}


.bar:nth-child(2){

height:75%;

}


.bar:nth-child(3){

height:55%;

}


.bar:nth-child(4){

height:90%;

}


/* 快捷功能 */

.actions{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:12px;

}


.action{

text-align:center;

}


.action-icon{

width:56px;

height:56px;

border-radius:20px;

background:#f1f5ff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin:auto;

}


.action span{

display:block;

font-size:13px;

margin-top:10px;

}



/* 最近记录 */

.record{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

border-bottom:1px solid #eee;

}


.record:last-child{

border:none;

}


.record-left{

display:flex;

align-items:center;

gap:12px;

}


.record-icon{

width:44px;

height:44px;

border-radius:50%;

background:#f2f4f8;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}


.green{

color:#00a86b;

font-weight:700;

}


.red{

color:#ff3b30;

font-weight:700;

}


.yellow{

color:#ff9500;

font-weight:700;

}



/* 底部导航 */


.nav{

position:fixed;

bottom:15px;

left:50%;

transform:translateX(-50%);

width:390px;

max-width:90%;

height:72px;

background:white;

border-radius:30px;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:
0 15px 40px rgba(0,0,0,.12);

}


.nav a{

text-decoration:none;

color:#777;

font-size:12px;

text-align:center;

}


.nav span{

display:block;

font-size:25px;

margin-bottom:4px;

}


.nav .active{

color:#1677ff;

}



/* 点击按钮 */

button{

border:none;

}