:host {
    --primary-color: var(--ion-color-primary);
    --background-color: #f5f5f5;
}

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

        ion-title {
            font-size: 18px;
            font-weight: 600;
        }

        ion-progress-bar {
            --progress-background: var(--primary-color);
        }
    }
}

.creation-container {
    padding: 16px;

    // 输入区域样式
    .input-section {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h2 {
            margin: 0 0 8px;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }

        .subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .prompt-input {
            --background: #f5f5f5;
            --padding-start: 16px;
            --padding-end: 16px;
            --padding-top: 12px;
            --padding-bottom: 12px;
            border-radius: 8px;
            margin-top: 8px;

            &::part(native) {
                color: #333;
                font-size: 15px;
            }
        }
    }

    // 按钮样式
    .action-section {
        margin-bottom: 24px;

        .create-button {
            --border-radius: 8px;
            --box-shadow: none;
            margin: 0;
            height: 48px;

            ion-icon {
                margin-right: 8px;
            }
        }
    }

    // AI解读区域
    .interpretation-section {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h3 {
            margin: 0 0 12px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .interpretation-text {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
        }
    }

    // 结果展示区域
    .results-section {
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            padding: 16px;

            .image-card {
                background: white;
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                transition: transform 0.3s ease;

                &:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

                    .image-overlay {
                        opacity: 1;
                    }
                }

                .image-wrapper {
                    position: relative;
                    width: 100%;
                    padding-bottom: 100%; // 1:1 aspect ratio
                    overflow: hidden;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.3s ease;
                    }

                    .image-overlay {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: rgba(0, 0, 0, 0.5);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        opacity: 0;
                        transition: opacity 0.3s ease;

                        .overlay-content {
                            display: flex;
                            gap: 16px;

                            .action-button {
                                --color: white;
                                font-size: 14px;

                                ion-icon {
                                    font-size: 24px;
                                    margin-bottom: 4px;
                                }

                                span {
                                    display: block;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }

                .image-info {
                    padding: 16px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .info-text {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;

                        .creation-time {
                            font-size: 14px;
                            color: #666;
                        }

                        .resolution {
                            font-size: 12px;
                            color: #999;
                        }
                    }

                    .action-buttons {
                        display: flex;
                        gap: 8px;

                        ion-button {
                            --padding-start: 8px;
                            --padding-end: 8px;

                            ion-icon {
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }

        .status-display {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;

            .generating {
                text-align: center;

                ion-spinner {
                    width: 48px;
                    height: 48px;
                    --color: var(--primary-color);
                }

                p {
                    margin-top: 16px;
                    color: #666;
                }

                .generating-tip {
                    color: #999;
                    font-size: 14px;
                    margin-top: 8px;
                }
            }

            .empty-state {
                text-align: center;
                color: #999;

                ion-icon {
                    font-size: 48px;
                    margin-bottom: 12px;
                }

                p {
                    margin: 0;
                    font-size: 14px;
                }

                .empty-tip {
                    color: #999;
                    font-size: 14px;
                    margin-top: 8px;
                    max-width: 240px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
    }
}

// 添加动画效果
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.input-section,
.interpretation-section,
.image-card {
    animation: fadeIn 0.5s ease-out;
}