*{box-sizing:border-box;margin:0;padding:0}
:root{--swiper-theme-color:#007aff;--swiper-navigation-size:44px}
body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px; line-height:1.4; color:#212121; background:#f5f7fb;
  padding-top:60px;
}

/* ===== 顶部导航（Logo自动换色版） ===== */
.sy-header{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  position:fixed; top:0; width:100%; height:60px; z-index:1024;
  margin:0 auto; color:#ebebeb; min-width:1240px;
  background:#000000; box-shadow:0 5px 5px rgba(0,0,0,.07);
  transition:background .5s;
  --logo-url:url(../img/white_logo.png);
}
.sy-header.is-scrolled{background-color:#ffffff; color:#333; --logo-url:url(../img/logo.png);}

.nav-wrap{
  width:100%; height:100%; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo a{display:block; width:150px; height:35px; background:var(--logo-url) center/contain no-repeat;}

/* 高亮色变量 */
:root{--highlight:#ffffff;}

/* 分类文字：仅文字高亮，无背景色块 */
.nav-center ul{list-style:none; display:flex; gap:24px;}
.nav-center li a{
  color:inherit; text-decoration:none; padding:8px 12px; border-radius:8px;
  transition:color .2s; position:relative;font-size: 15px;
}
/* 鼠标移入：仅文字高亮 */
.nav-center li a:hover{color:var(--highlight);}
.sy-header.is-scrolled .nav-center li a:hover{color:var(--highlight);}

/* 当前选中：底部蓝色杠 */
.nav-center .nav-active a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px;
  height:3px; background:#ffffff; border-radius:2px;
}
.sy-header.is-scrolled .nav-center .nav-active a::after{background:#ffffff;}

/* 登录按钮 */
.login-btn{display:inline-block; padding:8px 18px; font-size:15px; border:1px solid rgba(255,255,255,.85); border-radius:999px; color:inherit; cursor:pointer; transition:all .2s;}
.sy-header.is-scrolled .login-btn{border-color:#d7dbe6; background:#f7f9fc;}
.login-btn:hover{transform:translateY(-2px);}

/* ===== 主视觉 ===== */
.hero{
  height:270px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff;
  background:url('../img/hero-bg.png') center bottom / 1919px 270px no-repeat;
  margin-bottom:24px;
}
.hero h1{font-size:42px; margin-bottom:5px}
.hero p{font-size:18px; opacity:.92; margin-bottom:20px}
.ai-generator,.ai-form,.hero-section,.list,.bottom-bar,.mask{display:-webkit-box;display:-ms-flexbox;display:flex;}
.ai-form{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}
.ai-button,.ai-input,.load-more-btn,.btn{-webkit-transition:.25s;transition:.25s;}
.hero-section{position:relative;height:270px;margin-bottom:20px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:#fff;background:url('../img/hero-bg.png') center bottom / 1919px 270px no-repeat;}
.hero-title,.hero-subtitle,.ai-generator{position:relative;z-index:2}
.hero-title{font-size:36px;font-weight:700;margin-bottom:16px}
.hero-subtitle{font-size:18px;margin-bottom:30px;opacity:.9}
.ai-form{width:500px;max-width:600px;height:45px;border:2px solid #ffffff;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(237,51,51,.18);}
.ai-form:focus-within{box-shadow:0 8px 30px rgba(237,51,51,.3);-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.ai-input{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;padding:0 18px;font-size:15px;border:none;outline:none;color:#333;}
.ai-input::placeholder{color:#999}
.ai-button{width:50px;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:none;background:#614cff;color:#fff;cursor:pointer;}
.ai-button:hover{background:#242ee8}
.ai-button:active{background:#242ee8}

/* =============== 列表布局（兼容全浏览器） =============== */
.list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  justify-content: center;
  padding: 20px 50px;
  margin: 0;
}

/* 用子项 margin 回退 gap:20px */
.list > .template-card,
.list > .skeleton-card{ margin: 10px; }

/* =============== 卡片主体（上图下标题，完美贴合） =============== */
.template-card{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(25% - 20px);
          flex: 0 0 calc(25% - 20px);

  min-width: 400px;
  box-sizing: border-box;

  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;

  -webkit-transition: .25s;
  transition: .25s;
}
.template-card:hover{
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* =============== 图片容器（由图片自然高度撑开） =============== */
.img-box{
  position: relative;
  width: 100%;
  background: #fafafa;
  overflow: hidden;
  line-height: 0; /* 去 inline 基线缝隙 */
}

/* 关键：图片等比 & 与卡片无缝贴合 */
.img-box > img{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.img-box.is-loaded > img{ opacity: 1; }

/* =============== 加载骨架 + 转圈（卡片内部） =============== */
.img-box:not(.is-loaded){
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.10), rgba(0,0,0,.04));
  background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.10), rgba(0,0,0,.04));
  background-size: 200% 100%;
  -webkit-animation: shimmer 1.1s linear infinite;
  animation: shimmer 1.1s linear infinite;
}
.loader{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 36px; height: 36px;
  z-index: 2;
  pointer-events: none;
}
.loader::after{
  content: "";
  display: block;
  width: 100%; height: 100%;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: #667eea;
  border-radius: 50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
.img-box.is-loaded .loader{ opacity: 0; visibility: hidden; }
@-webkit-keyframes shimmer{ to{ background-position: -200% 0; } }
@keyframes shimmer{ to{ background-position: -200% 0; } }
@-webkit-keyframes spin{ to{ -webkit-transform: rotate(360deg); transform: rotate(360deg);} }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =============== 标题条（紧贴图片） =============== */
.bottom-bar{
  height: 48px;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  padding: 0 14px;
  border-top: 1px solid #eee;
  background: #fff;
}
.card-title{
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============== 悬浮蒙层（使用模板） =============== */
.hover-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: rgba(0,0,0,.55);

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  opacity: 0;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
  z-index: 5;
}
.template-card:hover .hover-bar{ opacity: 1; }
.use-btn{
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #2b7cff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* =============== 骨架屏（首屏友好感） =============== */
.skeleton-card{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(25% - 20px);
          flex: 0 0 calc(25% - 20px);
  min-width: 400px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  background: #fff;
}
.skel-thumb{
  height: 0;
  padding-top: calc(1132 / 800 * 100%); /* 800x1132 比例，占位防跳动 */
  background: linear-gradient(90deg, #f2f3f5 0%, #e9ebee 50%, #f2f3f5 100%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
.skel-title{
  height: 48px;
  border-top: 1px solid #eee;
  background: #f6f7f8;
}

/* 翻页小转圈（列表底部） */
.list .list-spinner{
  width: 36px; height: 36px; margin: 16px auto;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* 加载失败条 */
.list .load-error{
  margin: 12px auto; padding: 10px 14px;
  border-radius: 8px; background:#fff5f5; color:#b00020;
  border:1px solid #ffd6d6; font-size:14px;
  display:flex; align-items:center; gap:10px;
}
.list .retry-btn{
  margin-left: auto; padding:6px 10px; border:0; border-radius:6px;
  background:#2b7cff; color:#fff; cursor:pointer; font-size:13px;
}

/* =============== 自适应列数（与卡片/骨架一致） =============== */
@media (max-width: 1024px){
  .template-card, .skeleton-card{ -ms-flex: 0 0 calc(33.333% - 20px); flex: 0 0 calc(33.333% - 20px); }
}
@media (max-width: 768px){
  .template-card, .skeleton-card{ -ms-flex: 0 0 calc(50% - 20px);     flex: 0 0 calc(50% - 20px); }
}
@media (max-width: 480px){
  .template-card, .skeleton-card{ -ms-flex: 0 0 calc(100% - 20px);    flex: 0 0 calc(100% - 20px); min-width: 0; }
}