/**
 * 移动端共享样式
 * 包含导航、Banner、容器、按钮、页脚等所有页面共用的样式
 * Author: @vvpixel
 * 
 * 注意：bootstrap-icons 通过 CDN 在 base.html 中加载
 */

/* =============== 移动端字体大小基准 =============== */
/* 为移动端设置合理的根字体大小，使用 rem 单位实现更好的响应式效果 */
html {
  font-size: 14px; /* 移动端基准字体大小 */
}

/* 针对小屏幕设备（320px-375px）进一步优化 */
@media (max-width: 375px) {
  html {
    font-size: 13px;
  }
}

/* 针对大一些的移动设备（>= 414px）适当增大 */
@media (min-width: 414px) {
  html {
    font-size: 15px;
  }
}

/* 针对平板等更大设备 */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* =============== Banner 轮播图 =============== */
.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
  margin-top: 56px; /* 为导航栏留出空间 */
}

#mobile-banner-carousel {
  width: 100%;
  position: relative;
}

.carousel-item {
  width: 100%;
  position: relative;
  aspect-ratio: 2 / 1; /* 宽高比2:1 */
}

.carousel-item-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.carousel-item-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  text-decoration: none;
}

/* 轮播图指示器容器 */
.carousel-indicators-wrapper {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}

/* 轮播图指示器 */
.carousel-indicators {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  z-index: 10;
  pointer-events: auto;
}

.carousel-indicator-item {
  position: relative;
  width: 40px;
  height: 4px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-indicator-progress {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.carousel-indicator-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: 2px;
  transition: width linear;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.carousel-indicator-item.active .carousel-indicator-progress {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.carousel-indicator-item:not(.active) .carousel-indicator-progress {
  background-color: rgba(255, 255, 255, 0.25);
}

.carousel-indicator-item:not(.active) .carousel-indicator-progress-bar {
  width: 0% !important;
}

.carousel-indicator-item:hover .carousel-indicator-progress {
  background-color: rgba(255, 255, 255, 0.5);
}

/* 轮播图控制按钮 */
.carousel-control-prev,
.carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.carousel-control-prev {
  left: 10px;
}

.carousel-control-next {
  right: 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* 查看详情按钮 */
.carousel-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: auto;
}

.mobile-banner-cta-btn {
  font-size: 1rem;
  padding: 8px 24px;
  border-radius: 20px;
  border-width: 1.5px;
  border-style: solid;
  border-color: rgba(14, 165, 233, 0.9);
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.12);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
}

.mobile-banner-cta-btn:hover,
.mobile-banner-cta-btn:active {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.2);
  transform: translateY(-1px) scale(1.02);
  text-decoration: none;
}

/* 在较大屏幕上仅调整控制按钮尺寸，不再强制高度 */
@media (min-width: 576px) {
  .mobile-banner-cta-btn {
    font-size: 1.14rem;
    padding: 10px 28px;
  }
}

@media (min-width: 768px) {
  .carousel-control-prev,
  .carousel-control-next {
    width: 50px;
    height: 50px;
  }
}

/* =============== 移动端导航样式 =============== */
.mobile-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 移动端导航栏 - 浅色主题 */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

/* 移动端导航栏滚动后增强效果 */
.mobile-navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  min-height: 56px;
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin: 0 8px;
}

/* 当有返回按钮时，减少品牌区域的左边距 */
.nav-back[style*="flex"] + .nav-brand {
  margin-left: 4px;
}

.nav-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-right: 6px;
  flex-shrink: 0; /* 防止logo被压缩 */
}

.nav-back {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: 4px;
  color: var(--text-primary);
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-back:active {
  background: rgba(59, 166, 179, 0.1);
  color: var(--brand-primary);
}

.nav-back i {
  font-size: 20px;
  line-height: 1;
}

.nav-back + .nav-brand {
  margin-left: 0;
}

.brand-text {
  font-size: 1rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  color: var(--brand-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* 确保 ellipsis 生效 */
}

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 360px;
  height: 100dvh;
  max-height: 100vh;
  background-color: var(--bg-base);
  background-image: radial-gradient(circle at -100px 20%, rgba(224, 255, 255, 0.3) 0%, transparent 50%);
  color: var(--text-primary);
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.3s;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  /* 确保侧边栏背景完全不透明 */
  opacity: 1;
}

/* 侧边栏独立实现系统底色视觉效果 - 背景圆形1 */
.mobile-panel::before {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #ffffff 0%, #e8fafa 50%, #f0fefd 100%);
  width: 1200px;
  height: 600px;
  border-radius: 50%;
  bottom: -400px;
  left: -400px;
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}

/* 侧边栏独立实现系统底色视觉效果 - 背景圆形2 */
.mobile-panel::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #ddf5ff 0%, #c6ecfa 50%, #e6faff 100%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  top: -400px;
  right: -400px;
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

.mobile-panel.open {
  transform: translateX(0);
}

.mobile-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
  background: #F7F9FA !important;
  position: relative;
  z-index: 10;
  opacity: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-panel-title {
  font-size: 1.29rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

/* 关闭按钮样式 - 无边框、无背景 */
.panel-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.panel-close:hover,
.panel-close:active {
  color: var(--brand-primary);
}

.mobile-panel-body {
  padding: 16px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  color: inherit;
  background: #F7F9FA !important;
  position: relative;
  z-index: 10;
  opacity: 1;
}

.mobile-panel .mobile-panel-title,
.mobile-panel .nav-link,
.mobile-panel .accordion-button,
.mobile-panel .sub-item,
.mobile-panel .sub-item .mega-card-title {
  color: var(--text-primary);
}

.mobile-panel .accordion-button {
  background-color: transparent;
}

.mobile-panel .accordion-item,
.mobile-panel .accordion-collapse,
.mobile-panel .accordion-body {
  background-color: #F7F9FA !important;
}

.mobile-panel .accordion-button:not(.collapsed) {
  background-color: #F7F9FA !important;
  color: var(--text-primary);
  box-shadow: none;
}

.mobile-panel .sub-item {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  border-radius: 12px;
  margin-bottom: 8px;
  text-decoration: none;
}

.mobile-panel .accordion-button:focus {
  box-shadow: none;
}

.mobile-panel .nav-link-item {
  padding: 12px 16px;
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mobile-panel .nav-link-item:hover {
  background-color: rgba(59, 166, 179, 0.1);
  color: var(--brand-primary);
}

.mobile-panel .nav-link-item.active {
  background-color: rgba(59, 166, 179, 0.15);
  color: var(--brand-primary);
  font-weight: 600;
}

.mobile-panel .mobile-primary-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.mobile-panel .mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.mobile-panel .mobile-nav-link i {
  font-size: 1.43rem;
  width: 24px;
  text-align: center;
}

.mobile-panel .mobile-nav-link:hover {
  background-color: rgba(59, 166, 179, 0.1);
  color: var(--brand-primary);
}

.mobile-panel .mobile-nav-link.active {
  background-color: rgba(59, 166, 179, 0.15);
  color: var(--brand-primary);
  font-weight: 600;
}

/* 语言切换按钮组 */
.lang-switcher-group {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
}

.lang-btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #0ea5e9;
  background: #FFFFFF;
  color: #0ea5e9;
}

.lang-btn:hover {
  background: rgba(14, 165, 233, 0.1);
}

.lang-btn.active {
  background: #0ea5e9;
  color: #FFFFFF;
  border-color: #0ea5e9;
}

/* 移动端导航面板底部区域 */
.mobile-panel-footer {
  position: relative;
  flex: 0 0 auto;
  padding: 16px;
  border-top: 1px solid var(--border-color);
  background: #F7F9FA !important;
  z-index: 10;
  opacity: 1;
}

.mobile-panel-footer-content {
  position: relative;
}

.mobile-panel-footer .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-panel-footer .btn-primary:hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 166, 179, 0.3);
}

/* =============== 通用区块 =============== */
.section {
  padding: 32px 0;
}

body.mobile-home {
  /* 移动端首页背景透明，使用common.css中的浅青动效曲线渐变 */
  background: transparent;
}

/* 缩小移动端首页各区块之间的间距 */
body.mobile-home .section {
  padding: 16px 0;
  background: transparent !important;
}

.section-heading {
  text-align: center;
  margin-bottom: 20px;
}

.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, #1f83ff, #6f5bff);
  border-radius: 999px;
}

.section-tagline {
  font-size: 1.29rem;
  letter-spacing: 6px;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 600;
}

.section-title {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0;
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-card {
  border-radius: 20px;
  background: var(--bg-card);
  border: 5px solid var(--border-color);
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.mobile-card-media {
  flex: 0 0 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: #1f2937;
}

.mobile-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-card-body {
  flex: 1;
}

.mobile-card-body img {
  width: 100% !important;
}

.mobile-card-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.mobile-card-title {
  font-size: 1.29rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.mobile-card-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

.news-card {
  flex-direction: column;
  padding: 0;
  background: #FFFFFF !important;
}

.news-card .mobile-card-media {
  width: 100%;
  height: 180px;
  border-radius: 20px 20px 0 0;
}

.news-card .mobile-card-body {
  padding: 12px;
}

.team-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFFFF !important;
}

.team-card .mobile-card-body {
  width: 100%;
}

.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(14, 165, 233, 0.2);
  margin-bottom: 12px;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-position {
  font-size: 1rem;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}

.btn-outline:hover {
  background: var(--brand-primary);
  color: #fff;
}

.btn-disabled {
  border-color: var(--border-color) !important;
  color: var(--text-disabled) !important;
  pointer-events: none;
}

.about-hero {
  background: var(--bg-card);
  border: 5px solid var(--border-color);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 移动端首页关于我们部分移除边框 */
.mobile-home .about-hero {
  border: none;
}

.about-hero-media {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #1f2937;
}

.about-hero-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.about-hero-content {
  color: var(--text-primary);
}

.about-hero-quote {
  font-size: 1.43rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.about-hero-desc {
  font-size: 1.07rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-hero-rich {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.about-hero-rich p {
  margin-bottom: 10px;
}

.about-hero-rich p img {
  width: 100%;
}

.about-hero-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =============== 列表页 =============== */
.mobile-archive-page {
  /* 移动端归档页背景透明，使用common.css中的浅青动效曲线渐变 */
  background: transparent;
  min-height: 100vh;
}

.mobile-archive-hero {
  padding: 0;
  margin-top: 0;
  background: transparent !important;
}

.mobile-archive-hero .container {
  background: #FFFFFF;
  border: 5px solid var(--border-color);
  border-radius: 0;
  padding: 24px 20px;
  margin: 15px 0 12px 0;
}

body.mobile-archive-page .mobile-detail-label {
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

body.mobile-archive-page .mobile-detail-title {
  font-size: 1.43rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
  text-align: center;
}

body.mobile-archive-page .mobile-detail-subtitle {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}

.mobile-archive-body {
  padding: 15px 0 80px;
}

.mobile-archive-body .container {
  padding-top: 0;
}

.mobile-archive-hero-card {
  background: transparent;
  border: 5px solid var(--border-color);
  border-bottom: none;
  border-radius: 0;
  padding: 16px 20px;
  padding-bottom: 28px;
  margin-bottom: 16px;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.mobile-archive-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -12px;
  background: #FFFFFF;
  border: 5px solid var(--border-color);
  border-bottom: none;
  border-radius: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), 99% calc(100% - 8px), 98% calc(100% - 10px), 97% calc(100% - 6px), 96% calc(100% - 9px), 95% calc(100% - 7px), 94% calc(100% - 11px), 93% calc(100% - 5px), 92% calc(100% - 10px), 91% calc(100% - 8px), 90% calc(100% - 12px), 88% calc(100% - 6px), 86% calc(100% - 9px), 84% calc(100% - 7px), 82% calc(100% - 11px), 80% calc(100% - 5px), 78% calc(100% - 10px), 76% calc(100% - 8px), 74% calc(100% - 12px), 72% calc(100% - 6px), 70% calc(100% - 9px), 68% calc(100% - 7px), 66% calc(100% - 11px), 64% calc(100% - 5px), 62% calc(100% - 10px), 60% calc(100% - 8px), 58% calc(100% - 12px), 56% calc(100% - 6px), 54% calc(100% - 9px), 52% calc(100% - 7px), 50% calc(100% - 11px), 48% calc(100% - 5px), 46% calc(100% - 10px), 44% calc(100% - 8px), 42% calc(100% - 12px), 40% calc(100% - 6px), 38% calc(100% - 9px), 36% calc(100% - 7px), 34% calc(100% - 11px), 32% calc(100% - 5px), 30% calc(100% - 10px), 28% calc(100% - 8px), 26% calc(100% - 12px), 24% calc(100% - 6px), 22% calc(100% - 9px), 20% calc(100% - 7px), 18% calc(100% - 11px), 16% calc(100% - 5px), 14% calc(100% - 10px), 12% calc(100% - 8px), 10% calc(100% - 12px), 8% calc(100% - 6px), 6% calc(100% - 9px), 4% calc(100% - 7px), 2% calc(100% - 11px), 0% calc(100% - 12px), 0% 100%);
  z-index: -1;
  pointer-events: none;
}

.mobile-archive-section {
  margin-bottom: 32px;
}

.mobile-archive-head {
  text-align: center;
}

.mobile-archive-head h2 {
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.mobile-archive-head p {
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.mobile-archive-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-archive-card {
  background: #FFFFFF !important;
  border: 5px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.mobile-archive-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.mobile-archive-card-media {
  width: 100%;
  height: 160px;
  background: #1f2937;
}

.mobile-archive-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-archive-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-archive-card-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.mobile-archive-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.mobile-archive-card-sub,
.mobile-archive-card-desc {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
}

.mobile-archive-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-primary);
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: rgba(59, 166, 179, 0.05);
  transition: all 0.3s ease;
  text-decoration: none;
}

.mobile-archive-card-link:hover .mobile-archive-card-cta {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 166, 179, 0.2);
}

/* 产品列表 */
.product-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg-card);
  border: 5px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1f2937;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.product-info p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.product-category {
  font-size: 0.85rem;
  color: var(--brand-primary);
}

/* 新闻列表 */
.news-item {
  display: flex;
  padding: 12px;
  background: #FFFFFF !important;
  border: 5px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.news-image {
  width: 100px;
  height: 80px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1f2937;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-info {
  flex: 1;
}

.news-info h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
}

.news-info h3 a {
  color: var(--text-primary);
  text-decoration: none;
}

.news-info h3 a:hover {
  color: var(--brand-primary);
}

.news-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.news-excerpt {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* 团队列表 */
.team-item {
  text-align: center;
  padding: 20px 12px;
  background: #FFFFFF !important;
  border: 5px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.team-item .team-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(14, 165, 233, 0.2);
}

.team-item .team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-info h3 {
  font-size: 1.29rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.team-item .team-position {
  font-size: 1rem;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.team-intro {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* 关于我们 */
.about-content {
  padding: 0 16px;
  text-align: center;
}

.about-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.founder-avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.founder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 联系我们 */
.contact-info {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-main {
  flex: 1;
}

.contact-extra {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.contact-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item strong {
  color: var(--text-primary);
  min-width: 60px;
  flex-shrink: 0;
}

.contact-item .qr-code {
  width: 100px;
  height: 100px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: #fff;
  padding: 4px;
  transition: transform 0.3s ease;
  transform-origin: center;
  cursor: pointer;
}

.contact-item:hover .qr-code {
  transform: scale(1.2);
}

.contact-qr-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.contact-qr-card {
  text-align: center;
  color: #f8fafc;
  transition: transform 0.3s ease;
  transform-origin: center;
}

.contact-qr-card:hover .qr-code,
.contact-qr-card:hover {
  transform: scale(1.2);
}

.contact-qr-card .qr-code {
  transition: transform 0.3s ease;
  transform-origin: center;
  cursor: pointer;
}

.contact-qr-label {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  letter-spacing: 1px;
}

.contact-social {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-social-link {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.contact-social-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* =============== 按钮 =============== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
}

.btn-primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-primary-hover);
  color: #fff;
}

.text-center {
  text-align: center;
}

/* 移动端首页查看更多按钮间距和样式 */
.mobile-home .services-section .text-center,
.mobile-home .products-section .text-center,
.mobile-home .news-section .text-center,
.mobile-home .team-section .text-center {
  margin-top: 16px;
}

.mobile-home .btn-primary {
  font-weight: 400 !important;
  font-size: 0.93rem !important;
  background: rgba(59, 166, 179, 0.15) !important;
  color: var(--brand-primary) !important;
  border: 1px solid rgba(59, 166, 179, 0.3) !important;
}

.mobile-home .btn-primary:hover {
  background: rgba(59, 166, 179, 0.25) !important;
  color: var(--brand-primary) !important;
  border-color: rgba(59, 166, 179, 0.4) !important;
}

/* =============== 移动端首页卡片样式 =============== */
/* 确保首页产品卡片、最新咨询卡片、团队卡片使用白色背景和深色文字 */
.mobile-home .mobile-card,
.mobile-home .product-card,
.mobile-home .news-card,
.mobile-home .team-card {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 产品卡片文字颜色 */
.mobile-home .product-card .mobile-card-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.mobile-home .product-card .mobile-card-meta {
  color: var(--text-secondary) !important;
}

.mobile-home .product-card .mobile-card-desc {
  color: var(--text-secondary) !important;
}

/* 最新咨询卡片文字颜色 */
.mobile-home .news-card .mobile-card-title,
.mobile-home .news-card .mobile-card-meta,
.mobile-home .news-card .mobile-card-desc {
  color: var(--text-primary) !important;
}

.mobile-home .news-card .mobile-card-meta {
  color: var(--text-secondary) !important;
}

/* 团队卡片文字颜色 */
.mobile-home .team-card .mobile-card-title,
.mobile-home .team-card .mobile-card-meta,
.mobile-home .team-card .mobile-card-desc,
.mobile-home .team-card .mobile-card-body,
.mobile-home .team-card .mobile-card-body p {
  color: var(--text-primary) !important;
}

.mobile-home .team-card .team-position {
  color: var(--brand-primary) !important;
}

/* =============== 页脚 =============== */
.footer {
  background: rgba(0, 0, 0, 0.9);
  color: #FFFFFF;
  padding: 30px 0 20px;
}

.footer .container {
  padding: 0 16px;
}

.footer-contact {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 联系信息 */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.footer-contact-item strong {
  color: #FFFFFF;
  font-weight: 500;
  min-width: 75px;
  flex-shrink: 0;
}

.footer-contact-item span,
.footer-contact-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-item a:hover {
  color: #FFFFFF;
}

/* 二维码区域 */
.footer-qr-section {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-qr-image {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 4px;
  object-fit: cover;
}

.footer-qr-label {
  font-size: 0.85rem;
  color: #FFFFFF;
  text-align: center;
}

/* 社交按钮区域 */
.footer-social-section {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background: transparent;
  color: #FFFFFF;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-social-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.footer-social-btn i {
  font-size: 1.14rem;
}

.footer-copyright {
  text-align: center;
  padding-top: 16px;
}

.footer-copyright p {
  margin: 4px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-copyright #footer-icp {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-copyright a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-copyright a:hover {
  color: #FFFFFF;
}

/* =============== 移动端侧边栏 =============== */
.mobile-sidebar {
  position: fixed;
  right: 12px;
  bottom: 80px;
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-sidebar-item {
  position: relative;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.mobile-sidebar-item:hover,
.mobile-sidebar-item:active {
  background: var(--brand-primary);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(59, 166, 179, 0.3);
  border-color: var(--brand-primary);
}

.mobile-sidebar-icon {
  font-size: 1.57rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar-icon svg {
  width: 24px;
  height: 24px;
}

.mobile-sidebar-tooltip {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.93rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  border: 1px solid var(--border-color);
}

.mobile-sidebar-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid rgba(0, 0, 0, 0.85);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.mobile-sidebar-item:hover .mobile-sidebar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* =============== 加载占位效果 =============== */
.content-loading {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.content-loaded {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  background: #FFFFFF;
  border: 5px solid var(--border-color);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
}

.skeleton-image {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
}

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 8px;
}

.skeleton-subtitle {
  height: 16px;
  width: 40%;
  margin-bottom: 8px;
}

.skeleton-text {
  height: 14px;
  width: 100%;
  margin-bottom: 8px;
}

.skeleton-text:last-child {
  width: 80%;
}

.skeleton-list-item {
  background: #FFFFFF;
  border: 5px solid var(--border-color);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
}

.skeleton-list-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.skeleton-list-content {
  flex: 1;
}

.skeleton-detail-header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.skeleton-detail-title {
  height: 28px;
  width: 70%;
  margin-bottom: 10px;
}

.skeleton-detail-subtitle {
  height: 18px;
  width: 50%;
  margin-bottom: 12px;
}

.skeleton-detail-meta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.skeleton-badge {
  height: 20px;
  width: 60px;
  border-radius: 10px;
}

/* Banner图片加载占位 - 参考列表占位视觉效果 */
.carousel-item-image.banner-image-loading {
  background: #FFFFFF !important;
  border: 5px solid var(--border-color) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
}

.carousel-item-image.banner-image-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.carousel-item-image.banner-image-loaded {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.carousel-item-image.banner-image-loaded.show {
  opacity: 1;
}