/* ================= 全局基础 ================= */
:root {
    --primary-bg: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    --glass-bg: rgba(255, 255, 255, 0.90);
    --glass-border: rgba(255, 255, 255, 0.6);
    --accent-color: #409EFF;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--primary-bg);
    color: #2c3e50;
    height: 100vh; /* 目标：一屏显示 */
    overflow: hidden; /* 隐藏 Body 滚动条，实现一屏应用感 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #a29bfe;
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: #74b9ff;
}

/* 修改点：主容器 Flex 布局，让中间内容自适应高度，底部按钮固定 */
.main-container {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止主容器出现双滚动条 */
}

/* 头部 */
header {
    text-align: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    position: relative;
}

.brand-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(45deg, #2d3436, #409EFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.user-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ================= 核心布局：调整为自适应填满剩余空间 ================= */
.layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 修改点：改为 2行 等分剩余空间 (1fr 1fr)，并允许最小为0防止撑开 */
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 10px;
    /* 关键修改：让 Grid 占据 Flex 容器的剩余空间 */
    flex: 1;
    min-height: 0; /* 允许 Flex 子项缩小 */
    overflow: hidden;
}

.glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    height: 100%; /* 充满 Grid 单元格 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止卡片整体溢出 */
}

    .glass-card .el-card__body {
        flex: 1;
        padding: 15px !important;
        display: flex;
        flex-direction: column;
        overflow-y: auto; /* 修改点：如果屏幕矮，内容在卡片内部滚动 */
        min-height: 0;
    }

.card-header-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #606266;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================= 上传组件 UI ================= */
.upload-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 120px;
}

/* 无图状态 */
.upload-container.is-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .upload-container.is-empty .el-upload--picture-card {
        width: 100% !important;
        height: 100% !important;
        max-height: 220px;
        line-height: normal;
        border: 2px dashed #dcdfe6;
        background-color: rgba(255,255,255,0.5);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

        .upload-container.is-empty .el-upload--picture-card:hover {
            border-color: #409EFF;
            color: #409EFF;
            background: #fff;
        }

/* 有图状态 */
:root {
    --el-upload-picture-card-size: 70px;
}

.upload-container.has-files .el-upload--picture-card {
    width: 70px !important;
    height: 70px !important;
    border: 1px dashed #dcdfe6;
    margin: 0 8px 8px 0;
    background: transparent;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 70px !important;
    height: 70px !important;
    margin: 0 8px 8px 0 !important;
}

/* 清空按钮 */
.clear-btn-wrapper {
    text-align: right;
    margin-top: 5px;
}

/* ================= 内部控件微调 ================= */
.el-form-item {
    margin-bottom: 8px;
}

.form-label {
    font-size: 13px;
    font-weight: bold;
    color: #606266;
    margin-bottom: 4px;
    display: block;
}

/* 说明文字 */
.info-tip {
    font-size: 11px;
    color: #909399;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.5);
    padding: 6px;
    border-radius: 6px;
}

/* AR 按钮 (改为 Grid 布局以整齐排列) */
.ar-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制一行4个 */
    gap: 8px;
    margin-top: 5px;
}

.ar-btn {
    width: 100%;
    padding: 6px 0;
    text-align: center;
    margin: 0 !important;
}

/* 底部操作区 */
.action-area {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0; /* 防止被挤压 */
    padding-bottom: 10px; /* 底部留一点空隙 */
}

.model-selector-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.model-option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 180px;
}

    .model-option-card:hover {
        background: #fff;
        transform: translateY(-2px);
    }

    .model-option-card.selected {
        background: #fff;
        border-color: var(--accent-color);
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.2);
    }

.generate-btn {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    margin: 0 auto;
}

.footer-note {
    font-size: 0.8rem;
    color: #909399;
    margin: 8px 0 0 0;
}

/* 结果遮罩层 */
.results-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.98);
    z-index: 2000;
    padding: 40px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* 修改点：结果页头部布局 (标题 + 按钮) */
.results-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    gap: 20px;
}

/* 自定义大图查看器 (Lightbox) */
.custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 85%;
    max-height: 85%;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    border-radius: 4px;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .nav-btn:hover {
        background: rgba(255,255,255,0.3);
    }

    .nav-btn.left {
        left: 40px;
    }

    .nav-btn.right {
        right: 40px;
    }

/* AR 图标 */
.ar-shape {
    display: inline-block;
    background: #909399;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.shape-1-1 {
    width: 14px;
    height: 14px;
}

.shape-2-3 {
    width: 10px;
    height: 15px;
}

.shape-3-2 {
    width: 15px;
    height: 10px;
}

.shape-3-4 {
    width: 11px;
    height: 15px;
}

.shape-4-3 {
    width: 15px;
    height: 11px;
}

.shape-9-16 {
    width: 9px;
    height: 16px;
}

.shape-16-9 {
    width: 16px;
    height: 9px;
}

.el-button--primary .ar-shape {
    background: #fff;
}

/* ================= 修改点：核心卖点输入框样式 ================= */
/* 强制覆盖 Element Plus Textarea 样式，使其看起来像单行，但支持回车隐藏 */
.multi-line-fixed-input .el-textarea__inner {
    height: 40px !important; /* 强制固定高度，和普通输入框一致 */
    min-height: 40px !important;
    line-height: 1.5; /* 行高 */
    padding-top: 8px; /* 垂直居中调整 */
    padding-bottom: 8px;
    resize: none; /* 禁止手动拉伸 */
    overflow-y: hidden; /* 隐藏垂直滚动条，实现内容自动上顶效果 */
    white-space: pre-wrap; /* 保留回车换行符 */
}

[v-cloak] {
    display: none;
}