/* style.css - 前台 H5 页面样式 (优化版) */

:root {
    --primary-color: #1a73e8;
    --background-light: #f0f2f5;
    --card-background: #ffffff;
    --text-dark: #333;
    --text-light: #666;
    --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* --- 页面背景风格 --- */
/* 默认浅灰 (纯色) */
.bg-default {
    background-color: #f0f2f5;
}

/* 蓝色海洋 (渐变) - 增加 Webkit 前缀以增强兼容性 */
.bg-blue-gradient {
    background: -webkit-linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

/* 粉色浪漫 (渐变) - 增加 Webkit 前缀以增强兼容性 */
.bg-pink-gradient {
    background: -webkit-linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}

/* 绿色森林 (渐变) */
.bg-green-forest {
    background: -webkit-linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
    background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
}

/* 日落余晖 (渐变) */
.bg-sunset-glow {
    background: -webkit-linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
}

/* 深海之蓝 (渐变) */
.bg-deep-ocean {
    background: -webkit-linear-gradient(135deg, #203a43 0%, #2c5364 100%);
    background: linear-gradient(135deg, #203a43 0%, #2c5364 100%);
    color: #fff; /* 确保文字在深色背景下可见 */
}

/* 黄金时刻 (渐变) */
.bg-golden-hour {
    background: -webkit-linear-gradient(135deg, #f7d74e 0%, #f7941d 100%);
    background: linear-gradient(135deg, #f7d74e 0%, #f7941d 100%);
}

/* 活力红 (渐变) */
.bg-vibrant-red {
    background: -webkit-linear-gradient(135deg, #ff4e50 0%, #f9d423 100%);
    background: linear-gradient(135deg, #ff4e50 0%, #f9d423 100%);
}

/* 赛博紫 (渐变) */
.bg-cyber-purple {
    background: -webkit-linear-gradient(135deg, #5b247a 0%, #1b0042 100%);
    background: linear-gradient(135deg, #5b247a 0%, #1b0042 100%);
    color: #fff; /* 确保文字在深色背景下可见 */
}

/* 深色纹理 (图片) - 确保背景覆盖整个视口 */
.bg-dark-texture {
    background-color: #333;
    background-image: url('uploads/dark_texture.png');
    background-repeat: repeat;
    background-size: auto; /* 纹理重复 */
}

/* 浅色纹理 (图片) - 确保背景覆盖整个视口 */
.bg-light-texture {
    background-color: #fff;
    background-image: url('uploads/light_texture.png');
    background-repeat: repeat;
    background-size: auto; /* 纹理重复 */
}

/* 自定义图片背景 */
.bg-custom-image {
    /* 实际图片路径将在 index.php 中以内联样式设置 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* 固定背景，滚动时内容移动 */
}

/* --- 页面主体样式 --- */
body {
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-dark);
    line-height: 1.6;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    flex-grow: 1;
}

.logo-wrapper {
    margin-bottom: 20px;
}

.top-logo {
    max-width: 150px; /* 限制 LOGO 最大宽度 */
    height: auto;
    display: block;
    margin: 0 auto; /* 居中 */
}

.banner-wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.top-banner {
    max-width: 100%; /* 确保横幅在移动端自适应 */
    height: auto;
    display: block;
    margin: 0 auto; /* 居中 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    color: var(--primary-color);
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
    padding-top: 10px;
}

.qr-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* 增加网格间距 */
    padding: 10px 0;
}

.qr-item {
    width: 100%; /* 默认全宽，移动端友好 */
    max-width: 320px; /* 略微增加最大宽度 */
    background-color: var(--card-background);
    border-radius: 18px; /* 更圆润的边角 */
    box-shadow: var(--shadow-base);
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-item:hover {
    transform: translateY(-8px); /* 增加悬停提升效果 */
    box-shadow: var(--shadow-hover);
}

.qr-item h2 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.qr-code-wrapper {
    width: 100%;
    max-width: 250px; /* 限制图片最大尺寸 */
    aspect-ratio: 1 / 1; /* 保持 1:1 比例 */
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff; /* 确保二维码背景是白色 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease;
}

.qr-item p {
    font-size: 0.95em;
    color: var(--text-light);
    margin: 0;
}

/* 多彩风格样式 - 增强视觉效果 */

/* 1. 蓝色渐变 */
.blue-gradient {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
}
.blue-gradient h2 { color: #fff; }
.blue-gradient .qr-code-wrapper { background-color: rgba(255, 255, 255, 0.95); }
.blue-gradient p { color: rgba(255, 255, 255, 0.8); }

/* 2. 橙色活力 */
.orange-vibrant {
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%);
    color: #fff;
}
.orange-vibrant h2 { color: #fff; }
.orange-vibrant .qr-code-wrapper { background-color: #fff; }
.orange-vibrant p { color: rgba(255, 255, 255, 0.8); }

/* 3. 绿色自然 */
.green-nature {
    background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
    color: var(--text-dark);
}
.green-nature h2 { color: var(--text-dark); }
.green-nature .qr-code-wrapper { background-color: #fff; }
.green-nature p { color: var(--text-light); }

/* 4. 紫色梦幻 */
.purple-dream {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: var(--text-dark);
}
.purple-dream h2 { color: var(--text-dark); }
.purple-dream .qr-code-wrapper { background-color: #fff; }
.purple-dream p { color: var(--text-light); }

/* 5. 默认白色 */
.default {
    background-color: var(--card-background);
    color: var(--text-dark);
}
.default .qr-code-wrapper { background-color: #fff; }

/* 6. 深色酷炫 */
.dark-cool {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #f0f0f0;
}
.dark-cool h2 { color: #fff; }
.dark-cool .qr-code-wrapper { background-color: #fff; }
.dark-cool p { color: rgba(255, 255, 255, 0.7); }

/* 7. 清新淡雅 */
.fresh-elegant {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    color: var(--text-dark);
}
.fresh-elegant h2 { color: var(--text-dark); }
.fresh-elegant .qr-code-wrapper { background-color: #fff; }
.fresh-elegant p { color: var(--text-light); }

/* 8. 卡通可爱 */
.cartoon-cute {
    background: linear-gradient(135deg, #ffc3a0 0%, #ffafbd 100%);
    color: var(--text-dark);
}
.cartoon-cute h2 { color: var(--text-dark); }
.cartoon-cute .qr-code-wrapper { background-color: #fff; }
.cartoon-cute p { color: var(--text-light); }

/* 9. 透明轻盈 (30% 透明) */
.transparent-light {
    background-color: rgba(255, 255, 255, 0.3); /* 30% 透明白色背景 */
    backdrop-filter: blur(5px); /* 增加毛玻璃效果，提升可读性 */
    -webkit-backdrop-filter: blur(5px);
    color: var(--text-dark);
    border: 1px solid rgba(255, 255, 255, 0.5); /* 增加轻微边框 */
}
.transparent-light h2 { color: var(--text-dark); }
.transparent-light .qr-code-wrapper { background-color: #fff; }
.transparent-light p { color: var(--text-light); }
.default {
    background-color: var(--card-background);
    color: var(--text-dark);
}
.default .qr-code-wrapper { background-color: #fff; }

/* 媒体查询：平板和桌面端 */
@media (min-width: 600px) {
    .qr-item {
        width: calc(50% - 25px); /* 两列布局 */
    }
}

@media (min-width: 900px) {
    .qr-item {
        width: calc(33.333% - 25px); /* 三列布局 */
    }
}

footer {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    color: var(--text-light);
    font-size: 0.85em;
}