/* === 淘宝暗色配色变量 === */
:root{
  --max:1100px;
  --radius:12px;

  /* 重新定义主色：顺滑四色渐变（蓝→紫→粉→红） */
  --tb-primary:linear-gradient(135deg,#456df0 0%,#a06ce8 35%,#fc60aa 70%,#ff456c 100%);

  --tb-dark:#111;
  --tb-gray:#1a1a1a;
  --tb-light:#333;
  --tb-white:#fff;

  /* 6 组深色渐变 */
  --g1:linear-gradient(135deg,#232526,#414345);
  --g2:linear-gradient(135deg,#232526,#414345);
  --g3:linear-gradient(135deg,#232526,#414345);
  --g4:linear-gradient(135deg,#232526,#414345);
  --g5:linear-gradient(135deg,#232526,#414345);
  --g6:linear-gradient(135deg,#232526,#414345);
}

/* === 全局重置 === */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
  line-height:1.6;
  background:var(--tb-dark);
  color:var(--tb-white);
}

/* === 容器 === */
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* === 头部（淘宝橙渐变）=== */
header{
  background:linear-gradient(135deg,#456df0 0%,#ff456c 75%);
  color:var(--tb-white);
  padding:clamp(40px,6vw,70px) 20px;
  text-align:center;
}
header h1{font-size:clamp(26px,5vw,42px);margin-bottom:6px}
header p{font-size:clamp(14px,2vw,18px);opacity:.9}

/* === 卡片网格 === */
.grid{
  display: grid;
  gap: clamp(14px, 2.5vw, 22px);
  /* 默认移动端优先: 2列 */
  grid-template-columns: repeat(2, 1fr);
  margin: clamp(30px, 4vw, 50px) 0;
}

/* 中等屏幕以上: 3列 */
@media (min-width: 768px) {
  .grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 大屏幕: 保持3列但调整最小宽度 */
@media (min-width: 1024px) {
  .grid{
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

/* 超小屏幕调整: 确保在小手机上也能正常显示 */
@media (max-width: 360px) {
  .grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .card-inner{
    padding: 18px;
  }
}

/* === 深色霓虹卡片 === */
.card{
  display:block;
  border-radius:var(--radius);
  padding:0;
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  transition:.3s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.7)}

.card-inner{
  height:100%;
  padding:clamp(22px,3vw,30px);
  background:var(--bg);   /* 逐卡渐变 */
  color:var(--tb-white);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-shadow:0 0 2px rgba(0,0,0,.5);
}

.card strong{font-size:clamp(19px,4vw,25px);margin-bottom:6px}
.card span{font-size:clamp(12px,1.8vw,14px);opacity:.9}

/* 逐卡背景 */
.card:nth-child(1){--bg:var(--g1);}
.card:nth-child(2){--bg:var(--g2);}
.card:nth-child(3){--bg:var(--g3);}
.card:nth-child(4){--bg:var(--g4);}
.card:nth-child(5){--bg:var(--g5);}
.card:nth-child(6){--bg:var(--g6);}

/* === 通用元素 === */
.center{text-align:center;margin:40px 0}

/* === 图片画廊 - 响应式设计 === */
.gallery{
  display: grid;
  gap: 15px;
  justify-content: center;
  margin: 30px 0;
  /* 默认移动端: 1列 */
  grid-template-columns: repeat(1, minmax(250px, 1fr));
}

/* 小屏幕: 2列 */
@media (min-width: 480px) {
  .gallery{
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

/* 中等屏幕: 3列 */
@media (min-width: 768px) {
  .gallery{
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

/* 大屏幕: 4列 */
@media (min-width: 1024px) {
  .gallery{
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}

.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.gallery img{
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--tb-light);
  transition: transform 0.5s ease;
}

.gallery-item:hover img{
  transform: scale(1.05);
}

/* 图片标题（可选） */
.gallery-caption{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  font-size: 14px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-caption{
  transform: translateY(0);
}

/* === 淘宝橙按钮 === */
.btn{
  display:inline-block;
  background:var(--tb-primary);
  color:#fff;
  padding:12px 30px;
  border-radius:30px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 4px 12px rgba(255,80,0,.35);
}
.btn:hover{opacity:.9;transform:translateY(-1px)}

/* === 页脚 === */
footer{
  background:var(--tb-gray);
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#aaa;
}

/* === 页脚导航 === */
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap; /* 允许换行 */
}

.footer-nav a {
  color: var(--tb-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
  white-space: nowrap; /* 防止文本换行 */
}

.footer-nav a:hover {
  color: var(--tb-primary);
}

/* === 小屏幕响应式设计 === */
@media (max-width: 600px) {
  .footer-nav {
    flex-direction: column; /* 在小屏幕上垂直排列 */
    align-items: center; /* 水平居中对齐 */
    gap: 10px; /* 调整间距 */
  }

  .footer-nav a {
    font-size: 12px; /* 调整字体大小 */
  }
}