*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}
body{background:#f5f7fb;color:#212121;font-size:14px;line-height:1.4;padding:40px 5vw}

/* ===== Hero 区域 ===== */
.hero-section{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:20px;
    padding:60px 40px;
    margin-bottom:40px;
    text-align:center;
    color:#fff;
    box-shadow:0 10px 30px rgba(102,126,234,.3);
}
.hero-title{font-size:36px;font-weight:700;margin-bottom:16px;animation:fadeInDown .8s ease}
.hero-subtitle{font-size:18px;margin-bottom:30px;opacity:.9;animation:fadeInDown .8s ease .2s both}
.ai-generator{display:flex;gap:12px;max-width:600px;margin:0 auto;animation:fadeInDown .8s ease .4s both}
.ai-input{flex:1;height:56px;padding:0 24px;font-size:16px;border:none;border-radius:28px;box-shadow:0 4px 20px rgba(0,0,0,.1);outline:none;transition:.3s}
.ai-input:focus{box-shadow:0 4px 30px rgba(0,0,0,.15);transform:translateY(-2px)}
.ai-button{height:56px;padding:0 32px;font-size:16px;font-weight:600;border:none;border-radius:28px;background:#fff;color:#667eea;cursor:pointer;transition:.3s;box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;align-items:center;gap:8px}
.ai-button:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(0,0,0,.15)}
.ai-button:active{transform:translateY(0)}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}

/* ===== 模板列表 ===== */
.section-title{font-size:24px;font-weight:600;margin-bottom:20px;color:#333}
.list{display:flex;flex-wrap:wrap;gap:20px}
.template-card{
    position:relative;
    width:calc(33.333% - 14px);
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    animation:fadeIn .3s ease forwards;
    display:flex;
    flex-direction:column;
    transition:.3s;
}
#loading { display: none; }
.template-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.1)}
@media(max-width:1024px){.template-card{width:calc(50% - 10px)}}
@media(max-width:640px){.template-card{width:100%}}
.img-box{position:relative;width:100%;flex:1;background:#fafafa;display:flex;align-items:center;justify-content:center}
.img-box img{display:block;width:100%;height:auto}
.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.loader.hidden{opacity:0;pointer-events:none}
.loader::after{content:'';width:32px;height:32px;border:3px solid #eee;border-top-color:#4a90e2;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.mask{
    position:absolute;top:0;left:0;right:0;bottom:52px;
    background:rgba(255,255,255,.72);backdrop-filter:blur(10px);z-index:3;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    transform:translateY(-100%);transition:transform .35s ease;
}
.template-card:hover .mask{transform:translateY(0)}
.btn{width:160px;padding:14px 0;font-size:16px;border:none;border-radius:24px;cursor:pointer;transition:.25s;text-decoration:none;color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 6px 16px rgba(102,126,234,.35)}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(102,126,234,.5)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(102,126,234,.35)}
.bottom-bar{height:52px;display:flex;align-items:center;padding:0 16px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.5);z-index:4}
.card-title{font-size:16px;font-weight:400}
.loading-more{width:100%;padding:20px;text-align:center;font-size:14px;color:#999}
.loading-more::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid #ddd;border-top-color:#4a90e2;border-radius:50%;margin-left:8px;animation:spin .8s linear infinite}
.loading-more.hidden{display:none}

/* ===== 原有样式完全不变，仅追加按钮样式 ===== */
.load-more-btn{
  display: block;
  margin: 20px auto 40px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  box-shadow: 0 6px 16px rgba(102,126,234,.35);
  cursor: pointer;
  transition: .25s;
}
.load-more-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(102,126,234,.5)}
.load-more-btn:active{transform:translateY(0)}
.load-more-btn:disabled{background:#ccc;cursor:not-allowed;box-shadow:none}