:host {
    --page-padding: 16px;
    --card-border-radius: 16px;
    --card-background: #ffffff;
    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    --primary-warm: #f5f5f5;
    --secondary-warm: #e0e0e0;
    --accent-warm: #eeeeee;
}

ion-content {
    --background: linear-gradient(135deg, var(--primary-warm) 0%, var(--secondary-warm) 100%);
}

// 头部样式
.header-container {
    display: flex;
    align-items: center;
    padding: 8px var(--page-padding);
    gap: 12px;

    .custom-searchbar {
        flex: 1;
        --background: rgba(255, 255, 255, 0.9);
        --border-radius: 12px;
        --placeholder-color: #666;
        --icon-color: #666;
        padding: 0;
        margin: 0;
    }

    .header-actions {
        display: flex;
        gap: 8px;

        .action-button {
            --padding-start: 8px;
            --padding-end: 8px;
            height: 40px;

            ion-icon {
                font-size: 20px;
                color: #5d4037;
            }
        }
    }
}

// 个人信息卡片
.profile-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);

    .profile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;

        .profile-info {
            display: flex;
            align-items: center;
            gap: 16px;

            .avatar-container {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                overflow: hidden;
                background: #f4f5f8;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .user-info {
                h2 {
                    margin: 0;
                    font-size: 20px;
                    font-weight: 600;
                    color: var(--ion-color-dark);
                }

                p {
                    margin: 4px 0 0;
                    font-size: 14px;
                    color: var(--ion-color-medium);
                }
            }
        }

        .profile-action {
            --padding-start: 8px;
            --padding-end: 8px;
            height: 36px;

            ion-icon {
                font-size: 20px;
                color: var(--ion-color-medium);
            }
        }
    }

    .stats-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 16px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: linear-gradient(to right, rgba(230, 185, 128, 0.1), rgba(234, 205, 163, 0.1));

        .stat-item {
            text-align: center;

            h3 {
                margin: 0;
                font-size: 20px;
                font-weight: 600;
                color: #5d4037;

                span {
                    font-size: 12px;
                    margin-left: 2px;
                }
            }

            p {
                margin: 4px 0 0;
                font-size: 12px;
                color: #8d6e63;
            }
        }
    }

    .invite-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        background: linear-gradient(to right, var(--accent-warm), var(--secondary-warm));
        color: #5d4037;
        font-size: 14px;
        font-weight: 500;

        ion-icon {
            font-size: 18px;
            color: #5d4037;
        }
    }
}

// 功能卡片
.feature-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    padding: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #5d4037;
        }

        .view-all {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #8d6e63;
            font-size: 14px;
        }
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 8px;
            border-radius: 12px;
            transition: all 0.3s;
            text-align: center;
            min-height: 100px;
            background: rgba(255, 255, 255, 0.5);

            &:hover {
                background: rgba(255, 255, 255, 0.8);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            }

            ion-icon {
                font-size: 28px;
                color: #666;
                margin-bottom: 4px;
            }

            .text-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                width: 100%;
            }

            p {
                margin: 0;
                font-size: 14px;
                color: #333;
                width: 100%;
            }

            .amount,
            .highlight {
                font-size: 12px;
                margin-top: 2px;
            }

            .amount {
                color: #666;
            }

            .highlight {
                color: #ff5722;
            }
        }

        .feature-item.wide {
            grid-column: span 2;
            display: flex;
            flex-direction: column;
            padding: 16px;
            min-height: 100px;

            .text-container {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }

            p {
                text-align: center;
            }

            .amount,
            .highlight {
                margin-top: 0;
                margin-left: 8px;
            }
        }
    }

    // 我的内容卡片特殊样式
    &:last-child {
        .card-header {
            margin-bottom: 12px; // 减小头部和内容的间距
        }

        .feature-grid {
            margin-bottom: 12px; // 减小网格的下边距

            &.single-row {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px; // 减小项目间距
                margin-bottom: 0; // 移除最后一个网格的下边距
            }

            .feature-item {
                min-height: 80px; // 减小每个项目的高度
                padding: 12px 8px; // 减小内边距

                ion-icon {
                    font-size: 24px; // 稍微减小图标大小
                    margin-bottom: 2px; // 减小图标和文字的间距
                }

                .text-container {
                    gap: 2px; // 减小文字内部的间距
                }

                p {
                    font-size: 13px; // 稍微调整文字大小
                }
            }
        }
    }
}

// 添加头部毛玻璃效果
ion-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);

    ion-toolbar {
        --background: transparent;
    }
}