* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.safe-top {
  padding-top: env(safe-area-inset-top, 0);
}

.zt-mobile-container {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.zt-sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.zt-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.zt-scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.zt-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.zt-touch-button {
  min-height: 44px;
}

.zt-image-frame {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
}

.zt-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zt-line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.zt-skeleton {
  position: relative;
  overflow: hidden;
  background: #eef0f3;
}

.zt-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: zt-skeleton-shimmer 1.2s infinite;
}

@keyframes zt-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}