/* ============================================================
   AI Image Generator - 样式文件
   ============================================================ */

/* 全局 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
}

/* 图片卡片 */
.image-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
}

.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.image-card .card-img-top {
    height: 280px;
    object-fit: cover;
    background: #f8f9fa;
}

/* 结果区域图片 */
#resultArea .image-card .card-img-top {
    height: 240px;
}

/* 充值金额选择 */
.amount-radio {
    display: none;
}

.amount-radio + label {
    cursor: pointer;
    display: block;
    padding: 8px 0;
    border-radius: 8px;
    transition: all 0.2s;
}

.amount-radio:checked + label {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* 导航栏 */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 提示框动画 */
.alert {
    border-radius: 8px;
}

/* 模态框图片 */
#previewImage {
    max-height: 70vh;
    object-fit: contain;
}

/* 按钮美化 */
.btn {
    border-radius: 6px;
}

/* 卡片 */
.card {
    border-radius: 10px;
    border: none;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 14px 20px;
}

/* 表单 */
.form-control, .form-select {
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}

/* 风格模板卡片 */
.template-card {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.template-card.border-primary {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    #resultArea .image-card .card-img-top {
        height: 180px;
    }
    .image-card .card-img-top {
        height: 200px;
    }
}