/* 响应式布局与样式增强 */

.container {
  transition: all 0.3s ease;
}

/* 移动端导航增强 */
@media (max-width: 768px) {
  nav .container {
    flex-wrap: nowrap !important;
  }

  nav ul {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  nav ul li {
    flex-shrink: 0;
  }
}

/* 卡片悬停效果 */
[style*="background: #fff"][style*="border-radius"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[style*="background: #fff"][style*="border-radius"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* 链接过渡效果 */
a {
  transition: color 0.2s ease;
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: #2563eb;
  color: #fff !important;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
}

.btn:hover {
  background: #1d4ed8;
  text-decoration: none;
}

/* UI风格变体（基于body的ui-style-X类）*/
.ui-style-0 { --primary-color: #2563eb; --secondary-color: #10b981; }
.ui-style-1 { --primary-color: #dc2626; --secondary-color: #f59e0b; }
.ui-style-2 { --primary-color: #7c3aed; --secondary-color: #ec4899; }
.ui-style-3 { --primary-color: #059669; --secondary-color: #06b6d4; }
.ui-style-4 { --primary-color: #ea580c; --secondary-color: #8b5cf6; }
.ui-style-5 { --primary-color: #0891b2; --secondary-color: #10b981; }
.ui-style-6 { --primary-color: #4f46e5; --secondary-color: #f59e0b; }
.ui-style-7 { --primary-color: #be123c; --secondary-color: #0891b2; }
.ui-style-8 { --primary-color: #0d9488; --secondary-color: #dc2626; }
.ui-style-9 { --primary-color: #c026d3; --secondary-color: #059669; }
.ui-style-10 { --primary-color: #ca8a04; --secondary-color: #4f46e5; }
.ui-style-11 { --primary-color: #0284c7; --secondary-color: #ea580c; }
.ui-style-12 { --primary-color: #16a34a; --secondary-color: #be123c; }
.ui-style-13 { --primary-color: #9333ea; --secondary-color: #0d9488; }
.ui-style-14 { --primary-color: #db2777; --secondary-color: #ca8a04; }
.ui-style-15 { --primary-color: #047857; --secondary-color: #c026d3; }

/* 返回顶部按钮 */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

#backToTop:hover {
  background: #1d4ed8;
  transform: translateY(-4px);
}

#backToTop.show {
  display: flex;
}

/* 响应式文字大小 */
@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
  }

  p {
    font-size: 0.95rem !important;
  }
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* 图片占位 */
.img-placeholder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}