.search-popup-overlay {
  margin-top: 10px;
}

/* Header搜索弹窗特定样式 */
.header-search-popup {
 
}

.search-popup {
  border-radius: 8px;
  background: white;
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: min(690px, 100%);
}

.search-popup-section {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.search-popup-section:last-child {
  border-bottom: none;
}

.search-popup-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.search-popup-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  padding: 12px 12px 0 12px;
  position: relative;
  z-index: 2;
}

.search-popup-clear-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
}

.search-popup-history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-popup-history-tag {
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.search-popup-history-tag:hover {
  background: #e0e0e0;
}

.search-popup-activities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-popup-activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
}

.search-popup-activity-item:hover {
  background: #f0f0f0;
}

.search-popup-activity-image {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.search-popup-activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-popup-activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.search-popup-activity-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.search-popup-activity-location {
  font-size: 12px;
  color: #666;
}

.search-popup-activity-price {
  font-size: 14px;
  font-weight: 600;
  color: #ff6b6b;
}

.search-popup-destinations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-popup-destination-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
}

.search-popup-destination-item:hover {
  background: #f0f0f0;
}

.search-popup-destination-image {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.search-popup-destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-popup-destination-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.search-popup-destination-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.search-popup-destination-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.search-popup-destination-tag {
  padding: 2px 6px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.search-popup-cities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-popup-province {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-popup-province-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.search-popup-city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-popup-city-tag {
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.search-popup-city-tag:hover {
  background: #e0e0e0;
}

/* PC端布局 */
.search-popup-pc-layout {
  display: flex;
  gap: 24px;
}

.search-popup-pc-column {
  flex: 1;
  position: relative;
  border: 1px solid #f0f0f0;
 border-radius: 8px;
}

/* 顶部渐变效果 */
.search-popup-pc-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(200,240,200,0.9), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 1;
  border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.search-popup-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-popup-list-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.search-popup-list-item:hover {
  background: #f9f9f9;
}

.search-popup-list-item-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.search-popup-list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-popup-list-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.search-popup-list-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

/* 移动端布局 */
.search-popup-mobile-sections {
  margin-top: 16px;
  padding: 0 16px;
}

.search-popup-mobile-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.search-popup-mobile-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.search-popup-mobile-tab.active {
  color: #333;
  font-weight: 600;
  border-bottom-color: var(--color-brand);
}

.search-popup-mobile-content {
  overflow: hidden;
}

.search-popup-mobile-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.search-popup-mobile-item {
  max-width: 100px;
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.search-popup-mobile-item-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

.search-popup-mobile-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-popup-mobile-item-name {
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滚动条样式 */
.search-popup::-webkit-scrollbar {
  width: 6px;
}

.search-popup::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.search-popup::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.search-popup::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 移动端滚动条隐藏 */
.search-popup-mobile-tabs::-webkit-scrollbar,
.search-popup-mobile-scroll::-webkit-scrollbar {
  display: none;
}

.search-popup-mobile-tabs,
.search-popup-mobile-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.content-layout{
  margin-bottom: 44px;
  display: flex;
}

.content-list{
  background: white;
  min-height: 100vh;
  margin: 22px 0;
  border-radius: 15px;
  padding: 16px;
}
 
.navigation {
  position: relative;
  width: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.navigation-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  height: var(--hdr-ctl-h);
  position: relative; /* 添加相对定位 */
}

.navigation-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-4) var(--sp-4);
  position: relative;
}

.navigation-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;  /* 改为 bottom: 0 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-brand);
 
}

.navigation-tab-title {
  font-size: var(--fz-15);
  font-weight: var(--fw-medium);
  color: var(--color-fg);
}



.navigation-dropdown {
  border-top: 1px solid var(--color-border);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;

  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  overflow-y: auto;
  height: 309px;
}

.navigation-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.navigation-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));

  max-width: 100%;

  margin: 0 auto;
  padding: 0;
}

.navigation-dropdown-item {
  width: 275px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
  margin-top: 13.5px;
}

.navigation-dropdown-item:last-child{
  margin-bottom: 13.5px;
}

.navigation-dropdown-item:hover {
  /* transform: translateY(-4px); */
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.navigation-dropdown-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: var(--sp-2);
  flex-shrink: 0;
  margin-right: var(--sp-2);
}

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

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

.navigation-dropdown-flex {
  width: calc(100% - 58px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.navigation-dropdown-title {
  width: 100%;
  text-align: left;
  color: var(--color-fg-muted);
  font-size: var(--fz-xs);
  font-weight: var(--fw-normal);
  line-height: 1.32;
}

.navigation-dropdown-name {
  width: 100%;
  font-size: var(--fz-sm);
  color: var(--color-fg);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-banner {
  position: relative;
  height: 308px;

  background: #f5f5f5;
}

.site-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.site-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.site-banner-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.site-banner-bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.site-banner-inner {
  position: relative;
  height: 100%;
}

.site-banner-content {
  position: relative;
  z-index: 2;

  padding-top: 56px;
  margin: 0 auto;
}

.site-banner-title {
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: var(--fz-5xl);
  font-weight: 700;
  line-height: 1.2;
}

.site-banner-subDesc {
  width: 100%;
  margin: 8px 0 0;
  border: 0;
  resize: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.site-banner-search {
  display: flex;
  align-items: center;
  margin-top: 50px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  width: min(690px, 100%);
}

.site-banner-searchIcon i {
  font-size: 22px;
}

.site-banner-searchIcon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 48px;
}

.site-banner-searchInput {
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  font-size: 16px;
  color: #333;
  background: transparent;
}

.site-banner-searchBtn {
  width: 96px;
  height: 100%;
  border: 0;
  background: var(--color-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.site-banner-searchBtn:hover {
  opacity: 0.9;
}

.site-banner-searchBtn:active {
  opacity: 0.8;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .site-banner {
    height: 200px;
  }

  .site-banner-inner {
    padding: 0 16px;
  }

  .site-banner-content {
    width: 100%;
    padding-top: 40px;
  }

  .site-banner-title {
    font-size: 28px;
  }

  .site-banner-subDesc {
    font-size: 14px;
    line-height: 1.4;
  }

  .site-banner-search {
    margin-top: 15px;
    height: 40px;
  }

  .site-banner-searchIcon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 40px;
  }


  .site-banner-searchInput {
    /*font-size: 14px;*/
    width: calc(100% - 115px);
  }

  .site-banner-searchBtn {
    width: 72px;
    font-size: 14px;
  }
}

/* 吸顶搜索框样式 */
.site-banner-search-sticky {
  position: fixed;
  top: var(--gta-header-h) !important;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 998;
  padding: 10px 0;
}

.site-banner-search-sticky-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.site-banner-search-sticky .site-banner-search {
  margin-top: 0;
}

@media (max-width: 768px) {
  .site-banner-search-sticky .site-banner-search {
    border:1px solid var(--color-brand);
  }
}
.slide-track.website-slide-track {
  position: relative;
  width: 100%;
}

.slide-track.website-slide-track .slide-track-viewport {
  overflow: hidden;
  width: 100%;
}

.slide-track.website-slide-track .slide-track-rail {
  display: flex;
  will-change: transform;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 2px 0px 2px 0px;
}

.slide-track.website-slide-track .slide-track-item {
  box-sizing: border-box;
  padding-left: 2.5px;
  padding-right: 2.5px;
  min-width: 0;
}

.slide-track.website-slide-track .slide-track-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 48px;
  height: 48px;

  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.78);
  color: #111;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.slide-track.website-slide-track .slide-track-arrow::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  border-radius: 9999px;
  background: transparent;
  pointer-events: none;
}

.slide-track.website-slide-track .slide-track-arrow i {
  display: block;
  line-height: 1;
  color: inherit;
}

.slide-track.website-slide-track:hover .slide-track-arrow,
.slide-track.website-slide-track:focus-within .slide-track-arrow {
  opacity: 1;
  pointer-events: auto;
}

.slide-track.website-slide-track .slide-track-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

.slide-track.website-slide-track .slide-track-arrow:active {
  transform: translateY(-50%) scale(0.96);
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.slide-track.website-slide-track .slide-track-arrow-left {
  left: 12px;
}

.slide-track.website-slide-track .slide-track-arrow-right {
  right: 12px;
}

.card-track-website .article-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.card-track-website .article-cover-wrap {
  position: relative;
  padding-bottom: 22px;
}

.card-track-website .article-cover {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #f4f6f8;
}

.card-track-website .article-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .article-meta {
  position: absolute;
  left: 5px;
  bottom: 20px;
  transform: translateY(50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.card-track-website .article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

.card-track-website .article-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .article-name {
  font-size: 14px;
  font-weight: var(--fw-medium);
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  color: #333;
  line-height: 1;
  padding-bottom: 2px;
}

.card-track-website .article-body {
  padding: 12px;
  padding-top: 6px;
}

.card-track-website .article-title {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: #333;
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 
.card-track-website .article-summary {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-track-website .trip-card {
  border-radius: 14px;
  height: 100%;
  border: 1px solid #eef2f7;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-track-website .trip-media {
  position: relative;
  overflow: hidden;
  background: #f4f6f8;
  width: 100%;
  flex-shrink: 0;
}

.card-track-website .trip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .trip-body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card-track-website .trip-title {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  min-height: 20px; /* 固定最小高度 */
}

/* 描述区域包装器 - 固定高度 */
.card-track-website .trip-sub-wrapper {
  min-height: 40px; /* 2行文字的高度 */
  margin-bottom: 2px;
}

.card-track-website .trip-sub-website {
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 36px; /* 2行文字的最大高度 */
}

/* 描述占位符 - 当没有描述时使用 */
.card-track-website .trip-sub-placeholder {
  height: 36px; /* 与有描述时保持一致 */
  background: transparent;
}

.card-track-website .trip-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 16px; /* 固定最小高度 */
  margin: 2px 0;
}

.card-track-website .trip-star {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1;
  position: relative;
  bottom: 1.5px;
}

.card-track-website .trip-score {
  font-weight: 700;
  color: #333;
}

.card-track-website .trip-rating-muted {
  color: #666;
}

.card-track-website .trip-rating-dot {
  color: #666;
}

.card-track-website .trip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px; /* 固定最小高度 */
  margin-top: auto; /* 推到底部 */
}

.card-track-website .trip-price-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #222;
}

.card-track-website .trip-price-sym {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.card-track-website .trip-price-val {
  font-size: 16px;
  font-weight: 800;
  color: #222;
}

.card-track-website .trip-price-from {
  font-size: 12px;
  font-weight: 700;
  color: #666;
}

.card-track-website .trip-price-inquiry {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #333;
}

/* 确保所有卡片高度一致 */
.card-track-website .card-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .card-track-website .trip-rating {
    gap: 4px;
  }
}

.card-track-website .card-item.shorts-card {
  border: 0 !important;
  padding: 0;
  margin: 0;
  background: transparent;
  height: 100%;
}

.card-track-website .shorts-thumb {
  position: relative;
  overflow: hidden;
  background: #f4f6f8;
  border-radius: 12px;
}

.card-track-website .shorts-thumb-img,
.card-track-website .shorts-thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .shorts-topbar {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 10px;
  padding: 8px 10px;
}

.card-track-website .shorts-topbar-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  color: #ffcf2e;
  letter-spacing: 0.2px;
}

.card-track-website .shorts-badges {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.card-track-website .shorts-badge {
  pointer-events: none;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.card-track-website .shorts-info {
  padding: 10px 2px 0 2px;
}

.card-track-website .shorts-title {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: #222;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-track-website .shorts-views {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #6b7280;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-track-website .shorts-views:first-child {
  margin-left: 4px;
}

.card-track-website .shorts-views:last-child {
  margin-right: 4px;
}


.card-track-website .shorts-flex {
  margin-left: 1px;
  margin-right: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.card-track-website .card-item.video-card {
  border: 1px solid #e7e7e7;
  padding: 0;
  margin: 0;
  background: transparent;
  height: 100%;
}

.card-track-website .video-surface {
  background: transparent;
}

.card-track-website .video-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #f4f6f8;
}

.card-track-website .video-thumb img {

  object-fit: cover;

}


.card-track-website .video-thumb.broken {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.card-track-website .video-thumb.broken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.04) 6px,
      rgba(0, 0, 0, 0.06) 6px,
      rgba(0, 0, 0, 0.06) 12px);
}

.card-track-website .video-thumb.broken::after {
  content: "🖼️";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 28px;
  opacity: 0.65;
  pointer-events: none;
}

.card-track-website .video-thumb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.card-track-website .video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.card-track-website .video-info {
  padding: var(--control-px);
  position: relative;
}

.card-track-website .video-title {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.card-track-website .video-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: absolute;
  top: -25px;
  left: 5px;
  z-index: 3;
}

.card-track-website .video-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
  flex: 0 0 auto;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.card-track-website .video-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .video-channel {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #333;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-track-website .video-submeta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-track-website .video-dot {
  opacity: 0.8;
}

/* 移动端优化 */
 

@media (max-width: 1400px) {
   .card-track-website .card-item.video-card {
    border: 1px solid #eef2f7 !important;
  }

  .card-track-website .video-title {
    margin-top: 30px !important;
  }

  .card-track-website .video-row {
    align-items: flex-end;
  }
}

.card-track-website .city-card {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  min-height: clamp(160px, 18vw, 350px);
}

.card-track-website .city-cover {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f6f8;
}

.card-track-website .city-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .city-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: #fff;
  max-width: calc(100% - 24px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}

.card-track-website.card-track--scenic .card-item {
  height: auto;
  min-height: clamp(160px, 18vw, 220px);
}

.card-track-website .city-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.card-track-website .scenicSpot-card {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  min-height: clamp(160px, 18vw, 220px);
}

.card-track-website .scenicSpot-cover {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f6f8;
}

.card-track-website .scenicSpot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.card-track-website .scenicSpot-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
 
  color: #fff;
  max-width: calc(100% - 24px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}

.card-track-website.card-track--scenic .card-item {
  height: auto;
  min-height: clamp(160px, 18vw, 220px);
}

.card-track-website .scenicSpot-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

@media (max-width: 768px) {
  .card-track-website .scenicSpot-card {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    min-height: clamp(160px, 18vw, 220px);
  }

}
.photo-wall-track {
  width: 100%;
}

.photo-wall-page {
  display: flex;
  gap: 16px;
  width: 100%;
}

.photo-wall-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.photo-wall-item {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  width: 100%;
}

.photo-wall-item:hover {
  transform: translateY(-4px);
}

.photo-wall-image {
  width: 100%;
  object-fit: cover;
  display: block;
}

.photo-wall-placeholder {
  width: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.photo-wall-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: #fff;
  max-width: calc(100% - 24px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}

.photo-wall-item {
  position: relative;
}

.photo-wall-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.photo-wall-empty {
  padding: 60px 40px;
  text-align: center;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .photo-wall-page {
    gap: 8px;
  }
  
  .photo-wall-column {
    gap: 8px;
  }
  
  /* 移动端优化：减小内边距和圆角 */
  .photo-wall-item {
    border-radius: 6px;
  }
  
  /* 可选：移动端降低悬停效果 */
  .photo-wall-item:hover {
    transform: translateY(-2px);
  }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
  .photo-wall-page {
    gap: 6px;
  }
  
  .photo-wall-column {
    gap: 6px;
  }
}
.consultant-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 130, 71, 0.15);
  min-height: 360px;
  height: auto;
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.1),
    0 8px 24px -6px rgba(22, 130, 71, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.consultant-card:hover {
  box-shadow:
    0 30px 60px -12px rgba(22, 130, 71, 0.25),
    0 12px 32px -8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(22, 130, 71, 0.3);
}


.consultant-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(22, 130, 71, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(22, 130, 71, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg,
      rgba(22, 130, 71, 0.02) 0px,
      rgba(22, 130, 71, 0.02) 2px,
      transparent 2px,
      transparent 8px);
  z-index: 0;
  border-radius: inherit;
}

.consultant-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.consultant-card:hover::after {
  opacity: 1;
}

.consultant-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
}


.consultant-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  mix-blend-mode: soft-light;
}

.consultant-glow--top {
  top: -30px;
  left: 10px;
  width: 200px;
  height: 100px;
  background: rgba(22, 130, 71, 0.2);
  border-radius: 999px;
  animation: floatGlow 8s infinite ease-in-out;
}

.consultant-glow--bottom {
  right: 20px;
  bottom: 20px;
  width: 180px;
  height: 180px;
  background: rgba(34, 197, 94, 0.18);
  border-radius: 999px;
  animation: floatGlow 6s infinite ease-in-out reverse;
}

@keyframes floatGlow {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-5px, -5px) scale(1.05);
  }
}


.consultant-main {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}


.consultant-info {
  flex: 1;
  min-width: 0;
}


.consultant-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.consultant-name-zh {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.consultant-name-en {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}


.consultant-title {
  display: inline-block;
  white-space: nowrap;
  margin: 8px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #168247;
  background: linear-gradient(135deg, rgba(22, 130, 71, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid rgba(22, 130, 71, 0.2);
  backdrop-filter: blur(4px);
  letter-spacing: -0.3px;
}

.consultant-subtitle {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  opacity: 0.8;
  font-weight: 400;
  letter-spacing: 0.2px;
}


.consultant-avatar-wrap {
  width: 100px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #f8fafc 0%, #eef2f6 100%);
  box-shadow:
    0 15px 30px -10px rgba(22, 130, 71, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.5);
  /* transform: rotate(2deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

.consultant-card:hover .consultant-avatar-wrap {
  transform: rotate(0deg);
  box-shadow: 0 20px 30px -8px rgba(22, 130, 71, 0.25);
}

.consultant-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.consultant-card:hover .consultant-avatar {
  transform: scale(1.08);
}


.consultant-contact-list {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: grid;
  gap: 12px;
}


.consultant-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(22, 130, 71, 0.15);
  border-radius: 20px;
  padding: 14px 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.consultant-contact-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.consultant-contact-item:hover::before {
  transform: translateX(100%);
}

.consultant-contact-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(22, 130, 71, 0.3);
  box-shadow: 0 8px 20px -8px rgba(22, 130, 71, 0.2);
}


.consultant-contact-left {
  min-width: 0;
  flex: 1;
}

.consultant-contact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #168247;
  margin-bottom: 4px;
  opacity: 0.8;
}

.consultant-contact-value {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: "tnum";
}


.consultant-contact-right {
  flex-shrink: 0;
}

.consultant-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 40px;
  background: linear-gradient(135deg, #168247 0%, #22c55e 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 130, 71, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
}

.consultant-action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.6s ease;
}

.consultant-action-btn:hover::before {
  left: 100%;
}

.consultant-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 130, 71, 0.35);
  background: linear-gradient(135deg, #1a9c55 0%, #2ed573 100%);
}

.consultant-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(22, 130, 71, 0.2);
}


.consultant-action-btn--ghost {
  background: transparent;
  color: #168247;
  border: 1.5px solid rgba(22, 130, 71, 0.3);
  box-shadow: none;
  backdrop-filter: blur(4px);
}

.consultant-action-btn--ghost::before {
  background: linear-gradient(90deg, transparent, rgba(22, 130, 71, 0.1), transparent);
}

.consultant-action-btn--ghost:hover {
  background: rgba(22, 130, 71, 0.05);
  color: #0f5f35;
  border-color: #168247;
  box-shadow: 0 4px 12px rgba(22, 130, 71, 0.15);
  transform: translateY(-2px);
}


@media (max-width: 768px) {
  .consultant-card {
    border-radius: 20px;
    min-height: auto;
    height: auto;
  }

  .consultant-card-inner {
    padding: 24px;
  }

  .mesInfoCard-content .slide-track-rail {
    display: block;
    margin: unset;
    padding: 2px;
  }

  .mesInfoCard-content .slide-track-item {
    margin-bottom: 8px;
  }

  .consultant-main-flex{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    gap: 20px;
  }

  .consultant-main {
    width: 100% !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px !important;
    margin-bottom: 0px !important;
  }


  .consultant-info {
    flex: 1;
    min-width: 0;
  }


  .consultant-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
  }

  .consultant-name-zh {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
  }

  .consultant-name-en {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
  }


  .consultant-title {
    display: inline-block;
    margin: 8px 0 6px;
    font-size: 12px !important;
    font-weight: 700;
    color: #168247;
    background: linear-gradient(135deg, rgba(22, 130, 71, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
    padding: 4px 12px;
    border-radius: 30px;
    border: 1px solid rgba(22, 130, 71, 0.2);
    backdrop-filter: blur(4px);
    letter-spacing: -0.3px;
  }

  .consultant-subtitle {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    opacity: 0.8;
    font-weight: 400;
    letter-spacing: 0.2px;
  }


  .consultant-avatar-wrap {
    width: 80px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px !important;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc 0%, #eef2f6 100%);
    box-shadow:
      0 15px 30px -10px rgba(22, 130, 71, 0.15),
      inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
    /* transform: rotate(2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease; */
  }

  .consultant-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
  }


  .consultant-contact-list {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: grid;
    gap: 12px;
  }
  .consultant-contact-item-btn {
    width: 100%;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #168247 0%, #22c55e 100%);
    border-radius: 40px;
    border: 0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
  }


  .consultant-contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(22, 130, 71, 0.15);
    border-radius: 20px;
    padding: 8px 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .consultant-contact-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }

  .consultant-contact-item:hover::before {
    transform: translateX(100%);
  }

  .consultant-contact-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(22, 130, 71, 0.3);
    box-shadow: 0 8px 20px -8px rgba(22, 130, 71, 0.2);
  }


  .consultant-contact-left {
    min-width: 0;
    flex: 1;
  }

  .consultant-contact-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #168247;
    margin-bottom: 4px;
    opacity: 0.8;
  }

  .consultant-contact-value {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-feature-settings: "tnum";
  }


  .consultant-contact-right {
    flex-shrink: 0;
  }

  .consultant-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 40px;
    background: linear-gradient(135deg, #168247 0%, #22c55e 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 130, 71, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
  }

  .consultant-action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent);
    transition: left 0.6s ease;
  }

  .consultant-action-btn:hover::before {
    left: 100%;
  }

  .consultant-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 130, 71, 0.35);
    background: linear-gradient(135deg, #1a9c55 0%, #2ed573 100%);
  }

  .consultant-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(22, 130, 71, 0.2);
  }


  .consultant-action-btn--ghost {
    background: transparent;
    color: #168247;
    border: 1.5px solid rgba(22, 130, 71, 0.3);
    box-shadow: none;
    backdrop-filter: blur(4px);
  }

  .consultant-action-btn--ghost::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(22, 130, 71, 0.1),
        transparent);
  }

  .consultant-action-btn--ghost:hover {
    background: rgba(22, 130, 71, 0.05);
    color: #0f5f35;
    border-color: #168247;
    box-shadow: 0 4px 12px rgba(22, 130, 71, 0.15);
    transform: translateY(-2px);
  }

  /* .consultant-card:hover .consultant-avatar-wrap {
    transform: rotate(0deg);
    box-shadow: 0 20px 30px -8px rgba(22, 130, 71, 0.25);
  } */

  .consultant-card:hover .consultant-avatar {
    transform: scale(1.08);
  }
}

/* 抽屉内容样式 */
.consultant-drawer-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consultant-drawer-content .consultant-contact-item {
  margin-bottom: 0;
}




@media (min-width: 769px) and (max-width: 1024px) {
  .consultant-card {
    min-height: 340px;
  }

  .consultant-card-inner {
    padding: 0px;
  }

  .consultant-name-zh {
    font-size: 22px;
  }

  .consultant-name-en {
    font-size: 13px;
  }

  .consultant-avatar-wrap {
    width: 90px;
    height: 120px;
  }

  .consultant-contact-value {
    font-size: 13px;
  }
}

.card-track-website .province-card {
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  min-height: clamp(160px, 10vw, 350px);
}

.card-track-website .province-cover {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f6f8;
}

.card-track-website .province-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-track-website .province-title {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 100%;
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: #fff;
  max-width: calc(100% - 24px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}

.card-track-website.card-track--scenic .card-item {
  height: auto;
  min-height: clamp(160px, 18vw, 220px);
}

.card-track-website .province-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

 .search-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

 .search-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

 .search-cover-wrap {
  position: relative;
 
}

 .search-cover {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #f4f6f8;
}

 .search-cover.broken {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

 .search-cover.broken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.04),
    rgba(0,0,0,0.04) 6px,
    rgba(0,0,0,0.06) 6px,
    rgba(0,0,0,0.06) 12px
  );
}

 .search-cover.broken::after {
  content: "🖼️";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 28px;
  opacity: 0.65;
  pointer-events: none;
}

 .search-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

 .search-card:hover .search-img {
  transform: scale(1.05);
}

 .search-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

 .search-meta {
  position: absolute;
  left: 5px;
  bottom: 20px;
  transform: translateY(50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

 .search-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

 .search-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

 .search-name {
  font-size: 14px;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  line-height: 1;
  padding-bottom: 2px;
  color: #333;
}

 .search-body {
  padding: 12px;
  padding-top: 6px;
}

 .search-title {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: #333;
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 .search-summary {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 .search-summary-placeholder {
  min-height: 36px;
  width: 100%;
}

 .search-favorite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  color: white;
}

 .search-favorite-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

 .search-favorite-btn.favorited {
  background: #4CAF50;
  color: white;
}

 .search-favorite-btn.favorited i {
  color: white;
}

 .search-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
}

 .search-tag.ellipsis-tag {
  background: transparent;
  border: none;
  color: #666;
  padding: 2px 4px;
}

 .search-tag {
  padding: 2px 8px;
  background: white;
  border: 1px solid var(--color-brand);
  font-size: 12px;
  color: var(--color-brand);
  white-space: nowrap;
  text-align: center;
}

 .search-type-tag {
  background: var(--color-brand);
  color: white;
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: 8px;
}

 .search-tags-placeholder {
  height: 24px;
  width: 100%;
}

 .search-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 16px;
  margin-top: 8px;
}

 .search-star {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1;
  position: relative;
  bottom: 1.5px;
}

 .search-score {
  font-weight: 700;
  color: #333;
}

 .search-rating-muted {
  color: #666;
}

 .search-rating-dot {
  color: #666;
}

.coupon-card {
 
  padding: 0 4px;
  box-sizing: border-box;
}

.coupon-cover {
  position: relative;
  width: 100%;
  padding-top: 42.75%; /* 171/400 = 0.4275 */
  overflow: hidden;
  border-radius: 8px;

}

.coupon-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
    overflow: hidden;
  transition: transform 0.3s ease;
}

.coupon-card:hover .coupon-img {
  transform: scale(1.05);
}
.view-record-card{
  width: 100%;
  height: 200px;
  display: inline-block;
}

.card-track-website {
  width: 100%;
  --card-track-item-h: auto;
}

.card-grid-page {
  display: grid;
  gap: 14px;
  align-items: stretch;
  grid-auto-rows: auto;
}

.card-item {
  background: #fff;
  border-radius: var(--sp-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: var(--card-track-item-h);
}

.card-item--placeholder {
  background: #fafbfc;
  border: 1px dashed #d0d7de;
}

.card-item--add {
  cursor: pointer;
  border: 1px dashed #d0d7de;
  background: #fafbfc;
}

.card-cover {
  width: 100%;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

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

.card-body {
  padding: 12px;
  min-height: 50px;
  flex: 1 1 auto;
}

.card-title {
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.add-plus {
  font-size: 32px;
  color: #6b7280;
  user-select: none;
}

.card-wrap {
  position: relative;
}

.card-toolbar-overlay {
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.55);
  padding: 5px;
  border-radius: var(--sp-2);
}

.card-btn.gta-btn {
  height: auto;
  line-height: normal;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.card-btn.gta-btn .gta-icon[data-size="custom"] {
  --gta-icon-size: var(--fz-lg);
}

.card-track-website [aria-live],
.card-track-website .dnd-kit-screen-reader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.card-sort-area {
  display: contents;
}


.swipe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  user-select: none;
}

.swipe-wrapper {
  width: 100%;
  overflow: hidden;
}

.swipe-wrapper--card {
  padding: 0 16px !important;
  position: relative;
}

.swipe-track {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.swipe-item {
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, z-index 0.3s ease;
  will-change: transform, opacity;
  position: relative;
}

.swipe-item--active {
  transform: scale(1) translateZ(0);
  z-index: 3;
  opacity: 1;
  position: relative;
}

.swipe-item--adjacent {
  transform: scale(0.85) translateZ(0);
  z-index: 2;
  opacity: 0.8;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

.swipe-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  gap: 8px;
}

.swipe-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.swipe-indicator--active {
  width: 24px;
  border-radius: 4px;
  background-color: #333;
}
.infinite-swiper {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: grab;
  padding: 0 20px 0 20px;
  overflow: hidden;
}

.infinite-swiper:active {
  cursor: grabbing;
}

.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-item {
  position: absolute;
  background: white;
  border-radius: 8px;
 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.3s ease;
  user-select: none;
}

/* .swiper-item:nth-child(even) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.swiper-item:nth-child(odd) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
} */
.infinite-scroll-component {
  overflow: hidden !important; /* 去掉滚动 */
}

.paginated-list-wrapper {
  position: relative;
  width: 100%;
}

.paginated-list-carousel {
  overflow: hidden;
  position: relative;
}

.paginated-list-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

.paginated-list-track > .paginated-list-page {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.pagination-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.nav-button {
  position: absolute;
  width: 45px;
  height: 45px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.nav-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.nav-button.left {
  left: -22px;
}

.nav-button.right {
  right: -22px;
}

.nav-button:disabled {
  opacity: 0;
  cursor: not-allowed;
}

.paginated-list-loading {
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 16px;
}

.paginated-list-done {
  text-align: center;
  font-size: 13px;
  color: #ccc;
  padding: 20px 0;
}

 .main-content {
   background: var(--color-surface);
   min-height: 95vh;
   padding-bottom: 50px;
 }

 .main-content .home-section-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 0 12px;
 }

 .main-content .home-section-title {
   display: inline-flex;
   align-items: baseline;
   gap: var(--sp-1);
   color: var(--color-fg);
 }

 .main-content .home-section-title-main {
   font-size: var(--fz-lg);
   font-weight: var(--fw-bold);
   line-height: 1.2;
 }

 .main-content .home-section-title-sub {
   font-size: var(--fz-lg);
   font-weight: var(--fw-semibold);
   line-height: 1.2;
   color: var(--color-fg);
 }

 .main-content .home-section-full {
   grid-column: 1 / -1;
   margin-top: 25px;
 }


 .main-nav-top-box {
   position: relative;
   width: min(690px, 100%);
 }

 .main-content .card-grid-page {
   gap: 18px;
 }


 .fixed-page-container {
   position: fixed;
   right: 30px;
   bottom: 120px;
   z-index: 990;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   transform: translateY(20px);
   transition: all 0.3s ease;
 }
.cd-mask {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-start;;
  justify-content: center;
}

.cd-wrapper {
  background: #fff;
  border-radius: 12px;
  width: 360px;
  margin-top: 400px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  animation: cd-fade-in-soft 0.25s ease-out;
  overflow: hidden;
}


.cd-header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.cd-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
}

.cd-body {
  padding: 12px 24px 20px;
}

.cd-message {
  font-size: 14px;
  color: #4f4f4f;
  line-height: 1.6;
  margin: 0;
}

.cd-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px 20px;
  gap: 12px;
}

.cd-btn {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cd-btn.cancel {
  background-color: #f2f3f5;
  color: #1f1f1f;
}

.cd-btn.cancel:hover {
  background-color: #e6e8eb;
}

.cd-btn.confirm {
  background-color: #00b96b;
  color: #fff;
}

.cd-btn.confirm:hover {
  background-color: #00a164;
}

@keyframes cd-fade-in-soft {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1000;
    overflow: auto;
}

.form-dialog .form-dialog-wrapper {
    background: #fff;
    width: 800px;
    border-radius: 12px;
    overflow: visible;
    animation: fadeInUp 0.25s ease;
    margin-top: 100px;
}

.form-dialog .form-dialog-resize {
    resize: both;
    overflow: visible;
}

.form-dialog .form-dialog-header {
    padding: 24px;
    font-size: 18px;
    font-weight: 600;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.form-dialog-header-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-width: 0;
}

.form-dialog-header-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.form-dialog .form-dialog-title {
    margin: 0;
    line-height: 1;
    flex: 0 0 auto;
}

.form-dialog .form-dialog-close {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    position: static;
}

.form-dialog-header-topRow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.form-dialog-queryWrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 1 auto;
}

.form-dialog-filter-panel {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
}

.form-dialog-filter-panel--full {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
}

.fd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fd-row+.fd-row {
    margin-top: 8px;
}

.fd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 220px;
}

.fd-item--range {
    flex: 2 1 360px;
}

.fd-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.fd-control {
    flex: 1 1 auto;
    min-width: 0;
}

.fd-checks {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-dialog .form-dialog-body {
    padding: 24px;
}

.form-dialog .form-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid #f0f0f0;
}

.form-dialog .gta-btn {
    padding: 8px 20px;
    height: auto;
    line-height: 1.5;
}

.form-dialog .gta-btn--secondary {
    background-color: #d5bebe;
}

/* ===== 胶囊搜索框 ===== */
.form-dialog-query {
    display: flex;
    align-items: center;
    height: 36px;
    width: 520px;
    max-width: 56vw;
    min-width: 320px;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    background: #fff;
    padding: 0 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex: 0 1 auto;
}

.form-dialog-query:focus-within {
    border-color: #00c48c;
    box-shadow: 0 0 0 4px rgba(0, 196, 140, 0.14);
}

.form-dialog-queryInput {
    flex: 1 1 auto;
    height: 34px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    background: transparent;
    padding: 0 8px 0 12px;
    min-width: 0;
}

.form-dialog-queryInput::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.form-dialog-queryBtn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.2s ease;
    flex: 0 0 auto;
    position: relative;
}

.form-dialog-queryBtn:hover {
    background: rgba(0, 0, 0, 0.07);
}

.form-dialog-queryBtn::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(0, 0, 0, 0.45);
    border-radius: 50%;
}

.form-dialog-queryBtn::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 9px;
    height: 2px;
    background: rgba(0, 0, 0, 0.45);
    transform: rotate(45deg);
    border-radius: 2px;
}

.form-dialog-typeSeg2 {
    display: inline-flex;
    align-items: center;
    font-size: 500;
    gap: 4px;
    padding: 2px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.form-dialog-typeBtn2 {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 28px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.form-dialog-typeBtn2:hover {
    background: rgba(0, 0, 0, 0.04);
}

.form-dialog-typeBtn2.is-active {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.65);
}

.form-dialog-queryDivider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 8px;
    flex: 0 0 auto;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 查看摘要弹窗内容 */
.summary-view {
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 6px 2px 2px;
}

.summary-view--list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: var(--content-lh, 1.65);
  color: #1f2329;
}

.summary-view--list>li {
  margin: 0 0 8px 0;
  white-space: normal;
  word-break: break-word;
}


.summary-view--list>li.summary-view--title {
  list-style: none;
  margin: 12px 0 8px 0;
}


.summary-view--list>li.summary-view--title {
  margin-left: calc(-1 * 1.4em);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;

  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: drawer-mask-in 160ms ease-out forwards;

  display: flex;
  justify-content: flex-end;

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

.drawer-overlay--closing {
  animation: drawer-mask-out 160ms ease-in forwards;
}

.drawer-overlay--left {
  justify-content: flex-start;
}

.drawer-panel {
  width: var(--drawer-w, 360px);
  height: 100%;
  background: #fff;

  display: flex;
  flex-direction: column;

  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.12);
  will-change: transform;

  transform: translateX(100%);
  animation: drawer-panel-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.drawer-overlay--left .drawer-panel {
  transform: translateX(-100%);
  animation: drawer-panel-in-left 200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.drawer-overlay--closing .drawer-panel {
  animation: drawer-panel-out 180ms ease-in forwards;
}

.drawer-overlay--closing.drawer-overlay--left .drawer-panel {
  animation: drawer-panel-out-left 180ms ease-in forwards;
}

.drawer-header {
  position: relative;
  height: 56px;
  flex: 0 0 auto;
  margin-top: var(--gta-header-h);
  display: flex;
  align-items: center;
  justify-content: center;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.drawer-close {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;

  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #111;

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

.drawer-close:active {
  background: rgba(0, 0, 0, 0.06);
}

.drawer-header-content {
  width: 100%;
  min-width: 0;
  padding: 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
}

@keyframes drawer-mask-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes drawer-mask-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes drawer-panel-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes drawer-panel-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes drawer-panel-in-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes drawer-panel-out-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

 
.content-header {
    --content-lh: 1.65;
    --summary-padding-y: 14px;
    --summary-padding-start: 8px;
    --summary-padding-end: 24px;
    --collapse-rows: 4;
    --summary-marker-gap: 16px;
    --more-icon-size: 16px;
    --more-icon-gap: 4px;
    --color-text-strong: #1f2329;
    --color-text-muted: #3b4048;
    --color-surface-1: var(--color-surface-2, #f7f8fa);
    --color-surface-2: #fcf6f2;
    --color-border: rgba(31, 35, 41, .08);
}

.content-header {
    padding: 0;
}

.content-header .content-header--field {
    position: relative;
    padding: 0 20px;
}

.content-header .content-header--value {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.6;

}

.content-header .content-header--summary {
    padding-block: var(--summary-padding-y);
    padding-inline: var(--summary-padding-start) var(--summary-padding-end);
    font-size: 15px;
    line-height: var(--content-lh);
    color: var(--color-text-muted);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: justify;
    text-justify: inter-ideograph;
    white-space: pre-line;
}

.content-header .content-header--summarybox {
    padding-block: var(--summary-padding-y);
    padding-inline: var(--summary-padding-start) var(--summary-padding-end);
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.content-header .content-header--summary-clip {
    position: relative;
}

.content-header .content-header--summary-clip[data-collapsed="true"] {
    max-height: calc(var(--content-lh) * 1em * var(--collapse-rows));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0));
}

.content-header .content-header--summary-list-website {
    list-style-type: disc !important;
    list-style-position: outside;
    margin: 0;

    font-size: 15px;
    line-height: var(--content-lh);
 
    text-align: justify;
    text-justify: inter-ideograph;
}

.content-header .content-header--summary-list-website>li {
    margin: 0;
    line-height: var(--content-lh);
    white-space: normal;
    color: inherit;
}

.content-header .content-header--summary-list-website>li::marker {
    font-size: 1em;
    color: currentColor;
}

.content-header .content-header--morebar-inside {
    padding: 2px 0 10px;
    padding-left: var(--summary-padding-start);
}

.content-header .content-header--morebtn.gta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--more-icon-gap);
    color: #212121;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    position: relative;
}


.content-header .content-header--morebtn.gta-btn:hover {
    color: var(--color-brand);
}

.content-header .content-header--morebtn .gta-icon.gta-icon-chev {
    display: inline-block;
    width: var(--more-icon-size);
    height: var(--more-icon-size);
    transform: rotate(-90deg) translateY(1px);
    transform-origin: 50% 50%;
}

.content-header .content-header--morebtn .gta-icon[data-size="custom"] {
    --gta-icon-size: var(--more-icon-size);
}

.content-header .content-header--morebtn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    background: currentColor;
    opacity: .6;
    transform: scaleY(.5);
    transform-origin: bottom;
    pointer-events: none;
}

.content-header .content-header--toolbar {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    backdrop-filter: saturate(160%) blur(6px);
    align-items: center;
    z-index: 10;
}

.content-header .content-header--field:hover .content-header--toolbar,
.content-header .content-header--field:focus-within .content-header--toolbar {
    display: inline-flex;
}

.content-header .content-header--field[data-actions="hidden"] .content-header--toolbar {
    display: none !important;
}

.content-header .content-header--btn,
.content-header .content-header--btn.gta-btn {
    padding: 0 5px;
    height: auto;
    line-height: normal;
    background: transparent;
    color: #fff;
    border: 0;
    cursor: pointer;
}

.content-header .gta-btn .gta-icon[data-size="custom"] {
    --gta-icon-size: var(--fz-lg);
}

.content-header .content-header--add {
    width: 100%;
    display: grid;
    place-items: center;
    gap: 0;
    margin: var(--sp-5) 0;
    min-height: 150px;
    padding: var(--sp-6) var(--sp-4);
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
}

.content-header .content-header--add--pulas .gta-icon[data-size="custom"] {
    --gta-icon-size: 48px;
    color: #e5b5b5;
}

.content-header .content-header--add:hover {
    background: color-mix(in srgb, var(--color-surface-2) 92%, black 8%);
    border-color: color-mix(in srgb, var(--color-border) 85%, black 15%);
}

.content-header .content-header--add:active {
    transform: scale(.997);
}

.content-header .content-header--add--label {
    font-size: 14px;
    color: #8f959e;
    margin-bottom: 4px;
}

.content-header .content-header--add--hint {
    font-size: 12px;
    color: #b4bac3;
}


.content-header--summary-list-website .content-header--summary-title {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}


.content-header--summary-list-website .content-header--summary-title {
    position: relative;
    left: calc(-1 * 1.2em);
}

.content-header .content-header--name {
    margin: 0;
    color: var(--color-text-strong);
    padding-top: 10px;
    font-size: var(--fz-5xl);
    font-weight: var(--fw-semibold);
    letter-spacing: .2px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}



/* 移动端样式 */
@media (max-width: 768px) {
    .content-header .content-header--summarybox {
        background-color: transparent;
        position: relative;
    }

    .content-header .content-header--field {
        padding: 0px;
    }


    .content-header .content-header--morebtn.gta-btn {
      
        position: absolute;
        
        font-size: var(--fz-xs);
        cursor: pointer;
        color: var(--toastify-color-light);
        z-index: 10;
        height: var(--control-h-sm);
    }

    .content-header--summary-clip {
        display: none;
    }
}
.faq-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.faq-acc-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.faq-acc-item:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.faq-acc-q {
  width: 100%;
  padding: 20px 24px;
  background: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: background-color 0.2s ease;
}

.faq-acc-q:hover {
  background: #fafafa;
}

.faq-acc-qtext {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.faq-accordion  .faq-acc-icon {
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.3s ease;
  color: #666;
  font-size: 20px;
}

.faq-accordion  .faq-acc-icon--open {
  transform: rotate(180deg);
}

.faq-acc-q[aria-expanded="true"] {
  padding-bottom: 14px;
  background: #fafafa;
}

.faq-acc-a {
  padding: 0 24px 0 24px;
  background: #fff;
}

.faq-acc-atext {
  display: block;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.faq-acc-atext strong {
  font-weight: 700;
  color: #333;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .faq-acc-q {
    padding: 16px 20px;
  }

  .faq-acc-qtext {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .faq-acc-a {
    padding: 0 20px 0 20px;
  }

  .faq-acc-atext {
    padding: 14px;
    font-size: 14px;
  }

  .faq-accordion  .faq-acc-icon {
    width: 14px;
    height: 14px;
  }
}

.province-list {
  background: var(--color-surface);
  min-height: 95vh;
  padding-bottom: 50px;
}

.province-list .city-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 12px;
}

.province-list .city-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  color: var(--color-fg);
}

.province-list .city-section-title-main {
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.province-list .city-section-title-sub {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-fg);
}

.province-list .city-section-full {
  grid-column: 1 / -1;
  margin-top: 25px;
}

.province-list .city-track .card-grid-page {
  gap: 17px;
}



 
.province-faq-wrapper {
  width: 100%;
  /* max-width: 900px; */
  margin: 0 auto;
}

/* 移动端样式 */
@media (max-width: 768px) {

  .province-list .city-track .slide-track-arrow {
    display: none !important;
  }

  .province-list .city-track .slide-track,
  .province-list .city-track .slide-track-viewport {
    overflow: visible !important;
    height: auto !important;
  }

  .province-list .city-track .slide-track-rail {
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: unset;
    padding: 2px;
  }


  .province-list .city-track .slide-track-item {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }


  .province-list .city-track .card-grid-page {
    display: grid !important;
    gap: 12px !important;
    align-items: start !important;
  }


  .province-list .city-track .card-wrap {
    width: 100% !important;
    margin: 0 !important;
  }


  .province-list .city-track .card-item {
    height: auto !important;
    width: 100% !important;
  }


  .province-list .city-track .scenicSpot-cover {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
  }


  .province-list .city-track .scenicSpot-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: var(--fz-sm) !important;
    line-height: 1.4 !important;
    padding: 8px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.5);
  }

  /* 封面底部渐变阴影增强 */
  .province-list .city-track .scenicSpot-cover::after {
    height: 70% !important;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.65) 25%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.15) 75%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }

 
  .province-list .city-track .card-item--placeholder {
    display: none !important;
  }
}

/* 小屏幕优化 */
@media (max-width: 375px) {
  .province-list .city-track .card-grid-page {
    gap: 10px !important;
  }
}

.banner-edit {
  position: relative;
  width: 100%;
  overflow: hidden;

}

.banner-edit-wrap {
  padding: 0;
}

.banner-edit-inner {
  position: relative;
  display: flex;
  justify-content: center;
}

.banner-edit-bg {
  position: absolute;
  inset: -60px;
  background-size: cover;
  background-position: center;
  transform: scale(1.25);
  filter: blur(26px) saturate(1.75) contrast(1.45) brightness(0.85);
  opacity: 0.95;
}

.banner-edit-bgmask {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 20% 10%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(0, 0, 0, 0.26) 55%,
      rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.28) 45%,
      rgba(0, 0, 0, 0.16) 100%);
}

.banner-edit-panel {
  width: 100%;
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  overflow: hidden;
  align-items: stretch;
  border-radius: var(--radius-lg);
  z-index: 2;
}

.banner-edit-left {
  background: #fff;
  display: flex;
  min-width: 0;
}

.banner-edit-left-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;

}

.banner-edit .content-header--value {
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-size: var(--fz-lg);
}

.banner-edit .content-header {
  margin-left: 10px;
  margin-right: 10px;
}

.banner-edit .content-header--summarybox {
  padding: 10px 0;
  border: none !important;
}

.banner-edit .content-header--add {
  margin: 10px 0;
}

.banner-edit-right {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 34vw, 340px);
  overflow: hidden;
}

.banner-edit-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.banner-edit-fade {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.banner-edit-fade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
  user-select: none;
}

.banner-edit-fade-img.is-front {
  z-index: 1;
  opacity: 1;
}

.banner-edit-fade-img.is-back {
  z-index: 2;
  opacity: 0;
  transition: opacity 360ms ease;
}

.banner-edit-fade-img.is-back.is-fading {
  opacity: 1;
}

.banner-edit-image-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 3;
  pointer-events: none;
}

.banner-edit-progress {
  position: absolute;
  left: var(--fz-sm);
  right: var(--fz-sm);
  top: var(--fz-xs);
  display: flex;
  gap: var(--sp-2);
  z-index: 60;
}

.banner-edit-progress-item {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.banner-edit-progress-item:hover {
  background: rgba(255, 255, 255, 0.35);
}

.banner-edit-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(255, 255, 255, 0.92);
}

.banner-edit-progress-item.is-done .banner-edit-progress-bar {
  transform: scaleX(1);
}

.banner-edit-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px var(--sp-2);
  box-shadow: 0 2px var(--sp-2) rgba(0, 0, 0, 0.2);
  backdrop-filter: saturate(120%) blur(2px);
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
}

.banner-edit-panel:hover .banner-edit-toolbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.banner-edit-toolbar-btn {
  padding: 0 5px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.banner-edit-noimg .banner-edit-bg {
  background-image: none !important;
  filter: none;
  transform: none;
  inset: 0;
  background: radial-gradient(1200px 420px at 20% 0%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(245, 245, 245, 0.95) 55%,
      rgba(238, 238, 238, 1) 100%);
}

.banner-edit-noimg .banner-edit-bgmask {
  background: rgba(0, 0, 0, 0.06);
}

.banner-edit-empty-card {
  position: absolute;
  inset: 10px;
  border-radius: var(--sp-2);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: rgba(248, 236, 236, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.banner-edit-empty-plus {
  font-size: 48px;
  font-weight: 300;
  color: rgba(214, 120, 120, 0.65);
}

.banner-edit-empty-text {
  font-size: var(--fz-sm);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

.banner-edit .banner-edit-toolbar-btn.gta-btn {
  padding: 0 5px;
  height: auto;
  line-height: normal;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.banner-edit .banner-edit-toolbar-btn.gta-btn .gta-icon[data-size="custom"] {
  --gta-icon-size: 18px;
}

.banner-edit .banner-edit-toolbar-btn.gta-btn .gta-icon {
  display: inline-block;
  width: var(--gta-icon-size, 18px);
  height: var(--gta-icon-size, 18px);
}

.banner-edit-progress-bar {
  transform: scaleX(0);
  transform-origin: left center;
}

.banner-edit-progress-bar.is-anim {
  animation-name: bannerProgressFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes bannerProgressFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* 移动端样式 */
@media (max-width: 768px) {
  .banner-edit-inner.container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .banner-edit-panel {
    grid-template-columns: 1fr;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .banner-edit-right {
    aspect-ratio: 16/9;
    width: 100%;
    min-height: auto;
  }

  .banner-edit-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
  }

  .banner-edit-left {
    padding-bottom: 10px !important;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.6) 20%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0.05) 80%,
      rgba(0, 0, 0, 0) 100%);
    z-index: 10;
    padding: 0;
    /* border-radius: 25px 25px 0 0; */
    backdrop-filter: blur(2px);
  }

  .banner-edit-left-inner {
    margin-top: var(--sp-2);
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
 
  }

  .banner-edit-fade {
    aspect-ratio: 16/9;
    position: relative;
    width: 100%;
  }

  .banner-edit-fade-img {
    aspect-ratio: 16/9;
    position: relative;
    width: 100%;
    height: auto;
  }


  .banner-edit .content-header--value,
  .banner-edit .content-header--name,
  .banner-edit .content-header--summary,
  .banner-edit .content-header--summary-title,
  .banner-edit .content-header--summary-list,
  .banner-edit .content-header--empty-label {
    color: var(--toastify-color-light) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  }


  .banner-edit .content-header--value {
    padding: 0px;
    font-size: var(--fz-xs) !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .banner-edit .content-header--name {
    font-size: var(--fz-3xl);
    font-weight: bold;
  }

  .banner-edit .content-header--summary {
    font-size: var(--fz-sm);
  }

  .banner-edit .content-header--summary-list {
    padding-left: var(--sp-5);
  }

  .banner-edit .content-header--summary-list li {
    margin-bottom: 4px;
  }

  .banner-edit-progress {
    position: absolute;
    left: var(--sp-2);
    right: var(--sp-2);
    top: 10px;
    bottom: var(--sp-2);
    display: flex;
    gap: var(--sp-2);
    z-index: 60;
  }
}
.intro-card {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  padding: 26px 26px 22px;
  margin-bottom: 20px;
}

.intro-card .intro-head.intro-head--full {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 0 18px;
}

.intro-card .intro-title {
  font-size: 20px;
  font-weight: 500;
  color: #111;
  margin: 0;
}

.intro-card .intro-unit {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

.intro-card .intro-unit-btn {
  border: 0;
  background: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.intro-card .intro-unit-btn.is-active {
  background: #111;
  color: #fff;
}

.intro-card .intro-body {
  padding: 0;
}

.intro-card .intro-weather {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
}

.intro-card .intro-weather-item {
  padding-top: 6px;
}

.intro-card .intro-weather-month {
  font-size: 13px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 8px;
}

.intro-card .intro-weather-temp {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.intro-card .intro-weather-high {
  font-size: 28px;
  font-weight: 500;
  color: #111;
}

.intro-card .intro-weather-low {
  font-size: 22px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.4);
}

.intro-card .intro-divider {
  margin: 18px 0 14px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.intro-card .intro-grid {
  display: grid;
  gap: 18px 22px;
  min-height: 140px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.intro-card .intro-grid-item {
  min-width: 0;
}

.intro-card .intro-grid-label {
  font-size: 12px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.55);
}

.intro-card .intro-grid-value {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-card .intro-grid-hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.intro-card .intro-grid-value.intro-grid-value--multiline {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.intro-card .intro-bestTimes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intro-card .intro-bestTime-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intro-card .intro-bestTime-month {
  font-size: 16px;
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.intro-card .intro-bestTime-season {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .intro-card {
    padding: 16px 16px 12px;
  }

  .intro-card .intro-head.intro-head--full {
    padding: 0 0 12px;
  }

  .intro-card .intro-title {
    font-size: 18px;
  }

  .intro-card .intro-weather {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .intro-card .intro-weather-high {
    font-size: 24px;
  }

  .intro-card .intro-weather-low {
    font-size: 18px;
  }

  .intro-card .intro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* 桌面端默认样式保持不变 */
.destination {
  background: var(--color-surface);
  min-height: 95vh;
  padding-bottom: 50px;
}

.destination .city-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 12px;
}

.destination .city-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  color: var(--color-fg);
}

.destination .city-section-title-main {
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.destination .city-section-title-sub {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-fg);
}

.destination .city-section-full {
  grid-column: 1 / -1;
  margin-top: var(--sp-6);
}



/* 移动端瀑布流样式 */
.card-track-mobile {
  overflow: visible;
  width: 100%;
}

.card-track-masonry {
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
  width: 100%;
}

/* 默认 PC 端：每个 slide-track-item 里的卡片一行四个 */
.city-track .card-grid-page {
  display: grid;
  /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
  gap: 17px;
}

/* 移动端样式 */
@media (max-width: 768px) {

  /* 隐藏翻页箭头 */
  .city-track .slide-track-arrow {
    display: none !important;
  }


  .city-track .slide-track,
  .city-track .slide-track-viewport {
    overflow: visible !important;
    height: auto !important;
  }

  .city-track .slide-track-rail {
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: unset;
    padding: 2px;
  }

  /*  每个 slide-track-item 都显示，并上下排列 */
  .city-track .slide-track-item {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }


  .city-track .card-grid-page {
    display: grid !important;
    /* grid-template-columns: repeat(1, 1fr) !important; */
    gap: var(--fz-xs) !important;
    align-items: start !important;
  }


  .city-track .card-wrap {
    width: 100% !important;
    margin: 0 !important;
  }


  .city-track .card-item {
    height: auto !important;
    width: 100% !important;
  }


  .city-track .scenicSpot-cover {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
  }

  /* 标题最多两行 */
  .city-track .scenicSpot-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: var(--fz-sm) !important;
    line-height: 1.4 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0;
    bottom: 0;
    padding: var(--sp-2) 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
  }



  .city-track .card-item--placeholder {
    display: none !important;
  }

 

  .card-track-website .video-title {
    font-size: var(--fz-md);
    font-weight: var(--fw-medium);
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* 小屏幕优化 */
@media (max-width: 375px) {
  .city-track-website .card-grid-page {
    gap: 10px !important;
  }
}

.website-scenic-banner {
  position: relative;
  height: 254px;
  overflow: hidden;
}

.website-scenic-banner-inner {
  position: relative;
  height: 100%;
}

.website-scenic-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.website-scenic-banner-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.25) 65%,
      rgba(0, 0, 0, 0) 100%);
}

.website-scenic-banner-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}

.website-scenic-banner-content--name {
  width: 100%;
  text-align: left;
  font-size: 34px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  padding-bottom: 5px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.website-scenic-banner .content-header .content-header--name {
  color: #fff;
}

.website-scenic-banner-content--text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.website-scenic-banner .content-header {
  width: 100%;
  margin-bottom: 10px;
}

.website-scenic-banner .content-header--field {
  position: relative;
  padding: unset !important;  
  background: transparent;
  border: 0;
  box-shadow: none;
}

.website-scenic-banner .content-header--value {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.35;
  text-shadow: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.website-scenic-banner .content-header--summary,
.website-scenic-banner .content-header--summarybox,
.website-scenic-banner .content-header--summary-clip,
.website-scenic-banner .content-header--summary-list {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}

.website-scenic-banner .content-header--summary {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.website-scenic-banner .content-header--summarybox {
  position: relative;
}

.website-scenic-banner .content-header--summary-clip {
  max-height: none;
}

.website-scenic-banner .content-header--summary-list {
  list-style: none;
}

.website-scenic-banner .content-header--morebar-inside {
  padding: 2px 0 10px;
  padding-left: 0;
}

.website-scenic-banner .content-header--toolbar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: saturate(120%) blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.website-scenic-banner .content-header--field:hover .content-header--toolbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.website-scenic-banner .content-header--btn.gta-btn {
  padding: 0 5px;
  height: auto;
  line-height: normal;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.website-scenic-banner .content-header--btn.gta-btn .gta-icon[data-size="custom"] {
  --gta-icon-size: 18px;
}

.website-scenic-banner .content-header--add {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}

.website-scenic-banner .content-header--morebtn.gta-btn {
  color: rgba(255, 255, 255, 0.92);
}

.website-scenic-banner .content-header--morebtn.gta-btn:hover {
  color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .website-scenic-banner {
    height: 200px;
  }
  
  .website-scenic-banner-content--name {
    font-size: 24px;
  }

 
  
  .website-scenic-banner .content-header--value {
    width: 100%;
    max-width: 100%;
    font-size: var(--fz-xs) !important;
  }
  
  .website-scenic-banner .content-header--summary,
  .website-scenic-banner .content-header--summarybox,
  .website-scenic-banner .content-header--summary-clip,
  .website-scenic-banner .content-header--summary-list {
    width: 100%;
    max-width: 100%;    
  }

  .website-scenic-banner-content--text {
   margin-bottom: 20px;
  }
}
/* 侧边栏容器 */
.scenic-aside {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.scenic-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 卡片通用样式 */
.scenic-card {
  border: 1px solid rgba(31, 35, 41, 0.08);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.06);
}

.scenic-card-head {
  margin-bottom: 16px;
}

.scenic-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.scenic-card-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.scenic-card-button {
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scenic-card-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 营业时间样式 */
.business-hours {
  position: relative;
}

.business-hours--row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.business-hours--row-between {
  justify-content: space-between;
}

.business-hours--title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.business-hours--chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(31, 35, 41, 0.55);
  border-bottom: 2px solid rgba(31, 35, 41, 0.55);
  transform: rotate(45deg);
  margin-top: 2px;
  transition: transform 0.3s ease;
}

.business-hours--status {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f7a3a;
}

.business-hours--hours {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 2;
  gap: 12px;
  font-size: 14px;
  color: rgba(31, 35, 41, 0.85);
}

.business-hours--day {
  font-weight: 600;
}

.business-hours--time {
  text-align: right;
  color: rgba(31, 35, 41, 0.8);
}

.business-hours--header {
  cursor: pointer;
  user-select: none;
}

.business-hours.is-open .business-hours--chevron {
  transform: rotate(-135deg);
}

.business-hours--expanded {
  margin-top: 10px;
}

.business-hours--time.is-empty {
  color: rgba(31, 35, 41, 0.45);
}

.business-hours--empty {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(31, 35, 41, 0.45);
}

/* 移动端样式 */
@media (max-width: 768px) {
  .scenic-card {
    padding: 16px;
  }

  .scenic-card-title {
    font-size: 16px;
  }

  .scenic-card-desc {
    font-size: 13px;
  }

  .scenic-card-button {
    padding: 10px 16px;
    font-size: 14px;
  }

  .business-hours--title {
    font-size: 16px;
  }

  .business-hours--status {
    font-size: 14px;
  }

  .business-hours--hours {
    font-size: 13px;
  }
}

.scenic-list {
  position: relative;
  width: 100%;
  min-height: 95vh;
  background: var(--color-surface);
  padding-bottom: 50px;
}



/* Guide & Overview 行 - 与侧边栏水平对齐 */
.scenic-overview-row {
  display: block;
  margin-top: 25px;
}

.scenic-overview-row.has-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.scenic-overview-content {
  min-width: 0;
  width: 100%;
}

.scenic-aside-wrapper {
  width: 360px;
  position: relative;
  top: 40px;
}

/* 复用 city-section 样式 */
.scenic-list .city-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 12px;
}

.scenic-list .city-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  color: var(--color-fg);
}

.scenic-list .city-section-title-main {
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.scenic-list .city-section-title-sub {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-fg);
}

.scenic-list .city-section-full {
  margin-top: 25px;
}

.scenic-list .city-section-full:first-child {
  margin-top: 0;
}

/* FAQ 包装器 */
.scenic-faq-wrapper {
  width: 100%;
  margin: 0 auto;
}

.city-section.city-section-full .content-header .content-header--summary{
  background: unset;
}

 .city-section.city-section-full .content-header .content-header--field{
  padding: unset;
 }

 .scenic-track .card-grid-page{
  gap: 12px;
 }


/* 移动端样式 */
@media (max-width: 768px) {
  .scenic-list {
    padding-bottom: 30px;
  }



  /* Guide & Overview 行改为单列 */
  .scenic-overview-row {
    display: block;
    margin-top: 20px;
  }

  .scenic-aside-wrapper {
    display: none;
  }

  .scenic-mobile-aside {
    padding: 0 var(--container-padding-x) 0 var(--container-padding-x);
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* 隐藏翻页箭头 */
  .scenic-list .city-track .slide-track-arrow {
    display: none !important;
  }

  /* 重置 SlideTrack 容器 */
  .scenic-list .city-track .slide-track,
  .scenic-list .city-track .slide-track-viewport {
    overflow: visible !important;
    height: auto !important;
  }

  .scenic-list .city-track .slide-track-rail {
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: unset;
    padding: 2px;
  }

  /* 每个 slide-track-item 都显示 */
  .scenic-list .city-track .slide-track-item {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* 卡片改为两列布局 */
  .scenic-list .city-track .card-grid-page {
    display: grid !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* 卡片包装器 */
  .scenic-list .city-track .card-wrap {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 卡片高度自适应 */
  .scenic-list .city-track .card-item {
    height: auto !important;
    width: 100% !important;
  }

  /* 标题样式 */
  .scenic-list .city-section-head {
    padding: 6px 0 10px;
  }

  .scenic-list .city-section-title-main,
  .scenic-list .city-section-title-sub {
    font-size: var(--fz-md);
  }

  /* 隐藏占位卡片 */
  .scenic-list .city-track .card-item--placeholder {
    display: none !important;
  }
}

/* 小屏幕优化 */
@media (max-width: 375px) {
  .scenic-list .city-track .card-grid-page {
    gap: 10px !important;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.article-page {
  font-size: 16px;

  .article-main {
    max-width: 1000px;
    margin: auto;
    display: flex;
    padding: 30px 16px;

    .article-content {
      margin-top: 8px;
      font-size: 1em;
      line-height: 1.8;
    }

    .article-main-left {
      overflow: hidden;
      word-break: break-all;
      flex: 1;
    }

    .article-main-right {
      min-width: 260px;
      max-width: 260px;
      margin-left: 60px;
      word-break: break-all;
      position: sticky;
      z-index: 100;
      height: 100%;
      text-align: left;
      padding: 10px 16px;
      margin-top: 30px;

      .article-title-list {
        margin-top: 30px;
      }

      .article-recommend {
        height: 100%;

        .article-recommend--list {
          margin-top: 20px;
          .recommend-recommend--item {
            padding: 8px 0px;
          }
        }
      }

      .article-title-list-sticky {
        position: sticky;
        transition: position 0.3s ease, top 0.3s ease;
        /* 平滑过渡 */
      }

      .article-title-list-sticky.sticky {
        position: fixed;
        /* 吸附效果 */
        top: 85px;
        /* 固定在顶部 */
        width: 260px;
        /* 确保宽度与父元素一致 */
        z-index: 20;
        height: 100%;
        /* 保证在其他元素之上 */
      }
    }
  }

  .article-header {
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border, #e5e6eb);
    position: relative;

  }


}
.article-page .article-header-2{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.recommend-tips--top {
  .tips-title--text {
    font-size: var(--fz-3xl);
    font-weight: bold;
    margin-bottom: 8px;
  }

  .underline-1 {
    border-bottom: 1px solid rgba(31, 35, 41, .08);
  }
}

@media (max-width: 768px) {
  .article-page {
    font-size: 16px;
    .article-main {
      padding: 5px 16px !important;
    }

    .article-title {
      font-size: var(--fz-3xl) !important;
      line-height: 1.35 !important;
      word-break: break-word;
    }
    .article-summary{
      font-size: 0.75em!important;
      margin-top: 4px!important;
      margin-bottom: 2px!important;
    }

    .article-content {
      font-size: 1em;
    }

    .article-content .rich-video--card {
      flex-direction: column;
    }

    .article-content .rich-video--thumb img {
      width: 100% !important;
      height: 100% !important;
    }

    .article-content .rich-video--card .rich-video--thumb {
      width: auto !important;
      height: auto !important;
    }

    .article-content .rich-video--body .rich-video--footer {
      display: none !important;
    }

    .article-content .rich-trip--card {
      flex-direction: column;
    }

    .article-content .rich-trip--thumb {
      width: auto !important;
      height: auto !important;
    }

    .article-content .rich-trip--thumb img {
      width: 100% !important;
      height: 100% !important;
    }
  }

  .article-page .article-recommend--list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .article-page .article-recommend--list .recommend-recommend--item{
    min-width: 40vw;
    max-width: 40vw;
  }
  .article-main-right {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0px !important;
    position: relative;
    padding: 0px !important;
  }

  .article-main {
    flex-direction: column;

  }

  .article-title-list {
    display: none;
  }
  .article-page .article-body{
    background: linear-gradient(#0000 0%, #3d3d3d 100% 100%)!important;
  }
}

.article-page .article-author{
  display: flex;
}
.article-page .article-author .article-author-nickname{
  font-weight: 600;
  color: #1f2329;
  line-height: 1.8;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fz-sm);
}
.article-page .article-author .article-author-time{
  font-size: 12px;
  color: #8f959e;
  line-height: 1.8;
}
.article-page .article-author .article-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 4px;
}

.article-page {
  .article-content{
    .article-summary{
      padding-block: 14px;
      padding-inline: 8px 24px;
      font-size: var(--fz-sm);
      line-height: 1.65;
      color: #3b4048;
      background: #fcf6f2;
      border: 1px solid rgba(31, 35, 41, .08);
      border-radius: 8px;
      text-align: justify;
      text-justify: inter-ideograph;
      white-space: pre-line;
    }
  }
}

.article-abstract {
  margin-top: 12px;
  background: #fff;
  color: #212121;
  overflow: scroll;
  height: calc(100% - var(--gta-header-h) - 200px);
  li{
    text-align: left;
    list-style: none;
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }
  li.is-active{
    background: rgba(59, 130, 246, .08);
    color: #1f2329;
    font-weight: 600;
  }
  li:hover{
    background: #f7f8fa;
    color: #1f2329;
  }
  .abstract-dot{
    background-color: #000;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    display: inline-block;
  }
  .ml-abstract-item{
    margin-left: 22px;
  }
  .article-abstract--item{
    a {
      position: relative;
      display: block;
      font-size: var(--fz-md);
      line-height: 1.6;
      color: #212121;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 16px;
      flex: 1;
    }
  }

}

.article-abstract .article-abstract--hd {
  padding: 12px 16px 10px;
  font-weight: 700;
  font-size: 14.5px;
  color: #1f2329;
  border-bottom: 1px solid rgba(31, 35, 41, .08);
}

.article-abstract.article-abstract--center .article-abstract--hd {
  text-align: center;
}

.article-abstract .article-abstract--list {
  margin: 0;
  padding: 8px 16px 12px 16px;
  list-style: none;
  max-height: 60vh;
  overflow: auto;
  position: relative;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
}

.article-abstract .article-abstract--list::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(31, 35, 41, .10);
}

.article-abstract .article-abstract--list>.article-abstract--item.toc-l2 {
  margin-top: 6px;
}

.article-abstract .article-abstract--list>.article-abstract--item.toc-l2:first-child {
  margin-top: 0;
}

.article-abstract .article-abstract--item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  /* 20 - 5 */
  height: 1px;
  background: rgba(31, 35, 41, .16);
  transform: translateY(-50%) scaleY(0.5);
  transform-origin: center;
  pointer-events: none;
}

.article-abstract .toc-l3 a {
  padding-left: 34px;
  font-size: 13.5px;
}

.article-abstract .toc-l3 a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 29px;
  height: 1px;
  background: rgba(31, 35, 41, .16);
  transform: translateY(-50%) scaleY(0.5);
  transform-origin: center;
  pointer-events: none;
}

.article-abstract .article-abstract--item.toc-l3.is-active>a::before {
  background: #3b82f6;
}


@media screen and (max-width: 768px) {
  .article-abstract {
    height: auto;
  }
}

.article-page {
  .article-main {
    .article-content-html {
      margin-top: 22px;
      width: 100%;
    }

    .article-content .rich-trip--card {
      margin: 10px 0;
      padding: 16px;

      display: flex;
      gap: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #fff;
      align-items: stretch;

      position: relative;
    }

    .article-content .rich-trip--overlay-link {
      position: absolute;
      inset: 0;
      display: block;
      z-index: 1;
      text-decoration: none;
      border-radius: 14px;
    }

    .article-content .rich-trip--thumb,
    .article-content .rich-trip--body {
      position: relative;
      z-index: 2;
    }

    .article-content .rich-trip--thumb {
      width: 164px;
      height: 164px;
      overflow: hidden;
      display: inline-block;
      flex: 0 0 auto;
      border-radius: 10px;
    }

    .article-content .rich-trip--thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .article-content .rich-trip--body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .article-content .rich-image--figure {
      position: relative;
      z-index: 2;
    }
    
    .article-content .rich-image--caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 8px 12px;
      padding-top: calc(8px + var(--cap-grad));
      margin: 0;
      color: #fff;
      font-size: 0.875em; /* 14px */
      line-height: 1.4;
      text-align: center;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      z-index: 1;
    }

    .article-content .rich-image--caption::before {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--cap-grad)) 0 0 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, 0) 100%);
      z-index: -1;
    }

    .article-content .rich-trip--title {
      margin: 0;
      font-size: 1em; /* 16px */
      line-height: 1.3;
      font-weight: 600;
      color: #111827;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .article-content .rich-trip--footer {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .article-content .rich-trip--price {
      margin: 0;
      font-size: 1em; /* 16px */
      font-weight: 700;
      color: #111827;
    }

    .article-content .rich-trip--actions {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: 3;
    }


    .article-content .rich-video--card {
      margin: 10px 0;
      padding: 16px;

      display: flex;
      gap: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #fff;
      align-items: stretch;

      position: relative;
      text-decoration: none;
      color: inherit;
    }

    .article-content .rich-video--card:hover {
      border-color: #d1d5db;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }

    .article-content .rich-video--thumb,
    .article-content .rich-video--body {
      position: relative;
      z-index: 2;
    }

    .article-content .rich-video--thumb {
      width: 164px;
      height: 164px;
      overflow: hidden;
      display: inline-block;
      flex: 0 0 auto;
      border-radius: 12px;
      background: #f3f4f6;
    }

    .article-content .rich-video--thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .article-content .rich-video--play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    .article-content .rich-video--play-icon {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.45);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
      position: relative;
    }

    .article-content .rich-video--play-icon::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 18px;
      width: 0;
      height: 0;
      border-left: 16px solid #fff;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      opacity: 0.95;
    }

    .article-content .rich-video--body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .article-content .rich-video--title {
      margin: 0;
      font-size: 1em; /* 16px */
      line-height: 1.3;
      font-weight: 700;
      color: #111827;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .article-content .rich-video--summary {
      margin: 0;
      font-size: 0.75em; /* 12px */
      line-height: 1.5;
      color: #6b7280;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .article-content .rich-video--tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .article-content .rich-video--tag {
      display: inline-flex;
      align-items: center;
      height: 26px;
      padding: 0 5px;
      border-radius: 5px;

      font-size: 0.75em; /* 12px */
      color: #374151;

      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      user-select: none;
    }

    .article-content .rich-video--footer {
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px dashed #e5e7eb;

      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .article-content .rich-video--actions {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: 3;
    }

    .article-content .rich-image--figure img {
      /*aspect-ratio: 16/9;*/
      width: 100%;
    }
  }
}
.recommend-recommend--item .article-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.recommend-recommend--item .article-cover-wrap {
  position: relative;
  padding-bottom: 22px;
}

.recommend-recommend--item .article-cover {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #f4f6f8;
}

.recommend-recommend--item .article-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recommend-recommend--item .article-meta {
  position: absolute;
  left: 5px;
  bottom: 20px;
  transform: translateY(50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.recommend-recommend--item .article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

.recommend-recommend--item .article-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recommend-recommend--item .article-name {
  font-size: 14px;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  line-height: 1;
  padding-bottom: 2px;
}

.recommend-recommend--item .article-body {
  padding: 12px;
  padding-top: 6px;
}

.recommend-recommend--item .article-title {
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: #222;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.recommend-recommend--item .article-summary {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.recommend-recommend--item{
  position: relative;
  padding: 0!important;
  margin-bottom: 12px;
  .article-cover-wrap{
    padding: 0;
  }
  .article-body.aside{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 8px;
    background: linear-gradient(#0000 0%, #3d3d3d 80% 100%);
    .article-title{
      margin: 0;
      font-size: 14px !important;
      color: white;
    }
    .article-summary{
      margin-top: 8px;
      margin-bottom: 4px;
      font-size: 11px;
      color: #f5f5f5;
    }
  }
}

.metabar-share {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
  margin-top: auto;
  --gta-icon-size: 32px;
  --metabar-avatar-size: 56px;
  --metabar-gap: 14px;
}

.metabar-share-btn.gta-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface, #fff);
}


.metabar-share-btn:hover {
  background: var(--color-surface-2, #f7f8fa);
}

.metabar-share-btn:active {
  transform: scale(.97);
}

.article-fixed {
  position: fixed;
  bottom: 15px;
  right: 50%;
  transform: translate(50%);
  box-shadow: 0 0 4px #0000001f;
  font-size: var(--fz-md);
  font-weight: 600;
  color: var(--color-fg);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 25px;
  max-width: calc(100vw - 40px);
  gap: 8px;
  .article-fixed-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    i{
      margin-right: 4px;
    }
  }
  .article-fixed-item:first-child {
    
    border-right: 1px solid var(--color-border, #e5e6eb);
  }
  .favorite-item.favorited {
    color: var(--color-brand);
  }
  .favorite-item.favorited i {
    color: var(--color-brand);
  }
}
.trip-page {
  width: 1280px;
  max-width: 100%;
  margin: auto;
  padding: 0 40px;
  padding-bottom: 200px;

  .trip-page-h-title {
    margin-top: 40px;
    font-size: 28px;
    font-weight: 600;
  }

  .trip-content {
    margin-top: 48px;

    .trip-title-2 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 24px;
      line-height: 1.25;
      position: relative;
      padding-left: 20px;

      &:before {
        content: "";
        background-color: var(--color-brand);
        border-radius: 3px;
        width: 4px;
        height: 22px;
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
      }
    }

    h3 {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.3;
      margin: 0;
    }

    h4 {
      color: #757575;
      margin-bottom: 12px;
      font-size: 16px;
    }

    .combo-evaluate {
      margin-bottom: 48px;
    }

    .trip-introduction {
      margin-bottom: 48px;
    }

    .trip-faq {
      margin-top: 44px;
    }
  }

  .trip-tags {}

  .trip-tips {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-top: 8px;

    .left {
      display: flex;

      .score {
        background: var(--brand-100);
        padding: 2px 4px;
        border-radius: 2px;
        font-size: 13px;
        font-weight: bold;
      }

      .score-num {
        margin-left: 4px;
        cursor: pointer;
        text-decoration: underline;
      }

      .part-num {
        margin-left: 4px;
      }

      .tips-address {
        margin-left: 16px;
        font-size: 12px;

        span {
          margin-right: 8px;
          vertical-align: middle;
        }
      }
    }

    .gta-icon {
      font-size: 14px;
    }

    .favorite-btn {
      border: unset;

      cursor: pointer;
      padding: 2px 5px;
      border-radius: 5px;
    }
  }
}

@media (max-width: 768px) {
  .trip-page {
    padding: 0 16px;
    padding-bottom: 100px;

    .trip-page-h-title {
      font-size: 24px;
      margin-top: 24px;
    }

    .trip-content {
      margin-top: 32px;

      .trip-title-2 {
        font-size: 18px;
        margin-bottom: 16px;

        &:before {
          height: 18px;
          top: 2px;
        }
      }

      h3 {
        font-size: 18px;
      }

      h4 {
        font-size: 14px;
      }

      .trip-faq {
        margin-top: 32px;
      }
    }

    .trip-tips {
      flex-direction: row;
      align-items: flex-end;
      gap: 12px;
      position: relative;
      .left {
        flex-direction: column;
        white-space: nowrap;
        gap: 8px;

        .tips-address {
          margin-left: 0;
          line-height: 1;
          white-space: nowrap;
        }
      }

      .right {
        position: absolute;
        right: 10px;
        bottom: 15px;
      }

      .favorite-btn {
        padding: 0;
        font-size: 14px;
        line-height: 1;
        padding: 4px;
        white-space: nowrap;
      }
    }
  }
}

.image-album{
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  height: 400px;
  position: relative;
  .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    img{
      width: 100%;
      display: unset;
      z-index: 100;
      position: relative;
      height: 100%;
      object-fit: cover;
    }
  }
  .show-album-icon{
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: #0009;
    border-radius: 5px;
    z-index: 100;
    color: white;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
  }
}

.image-album.only{
  .gaussian-blur{
    width: 100%;
    height: 100%;
    background: radial-gradient(900px 420px at 20% 10%, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.26) 55%, rgba(0, 0, 0, 0.36) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.16) 100%);
    transform: scale(1.25);
    filter: blur(26px) saturate(1.75) contrast(1.45) brightness(0.85);
    opacity: 0.95;
    position: absolute;
    top: 0;
    z-index: 0;
  }
  display: flex;
  align-items: center;
  justify-content: center;
  .image{
    height: 95%;
    max-width: 60%;
    border-radius: 30px;
    overflow: hidden;
  }
}

.image-album{
  display: grid;
  gap: 8px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  .image:first-child{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}
.three-mode.image-album{
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  .image:first-child{
    grid-row: 1 / 3;
  }
}

@media (max-width: 768px) {
  .image-album, .three-mode.image-album {
    height: 240px !important; /* 使用 !important 覆盖组件内部的 inline style */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    .image:first-child {
      grid-column: unset;
      grid-row: unset;
    }
    .image:nth-child(n+5) {
      display: none;
    }
    .show-album-icon {
      font-size: 12px;
      padding: 2px 6px;
      right: 8px;
      bottom: 8px;
    }
  }

  .image-album.two-mode{
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none;
  }

  .image-album.only {
    height: 240px !important;
    .image {
      max-width: 100%;
      height: 100%;
      border-radius: 12px; /* 移动端不要那么圆润，和容器保持一致 */
    }
    .gaussian-blur {
      display: none; /* 移动端背景虚化可能影响性能且由于图片占满所以看不见 */
    }
  }
}

.gta-images-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;


  .image-main img {
    max-width: 80vw;
    max-height: 70vh;
    object-fit: contain;
  }
  .close-btn {
    position: absolute;
    top: 40px;
    right: 50px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 10000;
  }

  .close-btn:hover{
    color: #bebebe;
  }

  .zoom-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    pointer-events: none;
  }

  .image-main {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    cursor: grab;
    width: 100%;
    height: 100%;
    touch-action: none;
  }

  .image-main:active {
    cursor: grabbing;
  }

  .image-main img {
    transition: transform 0.05s linear;
    user-select: none;
    -webkit-user-drag: none;
    max-width: none;
    max-height: none;
    pointer-events: none;
    will-change: transform;
  }
  .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    user-select: none;
    z-index: 10001;
    pointer-events: auto;
  }
  .nav:hover{
    color: #bebebe;
  }

  .nav.left {
    left: 40px;
  }

  .nav.right {
    right: 40px;
  }

  .image-list {
    position: absolute;
    bottom: 20px;
    margin-top: 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
  }

  .image-list img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    pointer-events: auto;
  }

  .image-list .image.active {
    opacity: 1;
    border-color: #fff;
  }

  .image-list .image{
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.6;
    border: 2px solid transparent;
  }

  .fade-img {
    animation-duration: 0.35s;
    animation-fill-mode: both;
    transition: transform 0.05s linear;
  }

  .fade-img.right {
    animation-name: slideInFromRight;
  }

  .fade-img.left {
    animation-name: slideInFromLeft;
  }

}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.trip-page{
  .trip-header{
    .trip-album{
      margin-top: 24px;
    }
  }
  .header-summary{
    flex: 1;
  }
  .trip-header--summary{
    display: flex;
    margin-top: 24px;
    .trip-summary--text{
      padding: 8px 24px;
      font-size: var(--fz-sm);
      line-height: 1.65;
      color: #3b4048;
      background: #fcf6f2;
      border: 1px solid rgba(31, 35, 41, .08);
      border-radius: 16px;
      text-align: justify;
      white-space: pre-line;
    }
  }
  .trip-combo-tip{
    width: 320px;
    height: 120px;
    margin-left: 24px;
    text-align: center;
    .combo-tip--content{
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 20px;
      .gta-btn--primary{
        width: 100%;
        margin-top: 12px;
        font-size: var(--fz-md);
      }
      .count-price{
        color: #212121;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.32;
        text-align: left;
      }
    }
  }
  .combo-tip--content.sticky{
    position: fixed;
    top: 128px;
    width: 320px;
    background: white;
    z-index: 999;
  }
}

@media (max-width: 768px) {
  .trip-page {
    .trip-header {
      .trip-album {
        margin-top: 16px;
      }
    }
    .trip-header--summary {
      flex-direction: column;
      margin-top: 16px;
      .trip-summary--text {
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 12px;
      }
    }
    .trip-combo-tip {
      width: 100%;
      height: auto;
      margin-left: 0;
      margin-top: 16px;
      .combo-tip--content {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .count-price {
          font-size: 20px;
        }
        .gta-btn--primary {
          width: auto;
          margin-top: 0;
          padding: 8px 16px;
        }
      }
    }
    .combo-tip--content.sticky {
      position: fixed;
      top: 96px;  
      left: 0;
      width: 100%;
      border-radius: 0;
      border-left: none;
      border-right: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  }
}

.trip-page{

  .trip-content--combo{
    border-radius: 12px;
    display: flex;
    width: 100%;
    .combo-left{
      flex: 1;
    }
    .combo-right{
      width: 320px;
      margin-left: 24px;
    }
  }

  .combo-info{
    position: relative;
    background-color: #f5f5f5;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 24px 40px;
    margin-bottom: 24px;
    .combo-info--title{
      justify-content: space-between;
      align-items: center;
      display: flex;
      margin-bottom: 24px;
      .text-btn{
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        text-decoration-line: underline;
      }
    }
    .combo-info--date{
      margin-bottom: 12px;
      font-size: 14px;
    }
    .combo-info--type{
      margin-bottom: 12px;
      font-size: 14px;
      .type-list{
        display: flex;
        flex-wrap: wrap;
        .gta-btn--primary{
          background: white;
          color: black;
          font-size: 14px;
          font-weight: 700;
          margin: 0 8px 8px 0;
          a{
            width: 100%;
            height: 100%;
          }
        }
        .gta-btn--primary.active{
          border-color: var(--color-brand);
          background:
            color-mix(in srgb, var(--color-brand) 12%, transparent);
          color: var(--color-brand);
        }
      }
    }
    .combo-info--number{
      margin-bottom: 12px;
      font-size: 14px;
      .number-list{
        .number-item{
          background-color: #fff;
          border-radius: 8px;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px;
          display: flex;
          margin-bottom: 8px;
          .number-title{
            font-size: 16px;
            font-weight: 700;
          }
          .number-btns{
            .gta-btn{
              width: 32px;
              height: 32px;
              line-height: 32px;
              font-size: 18px;
              background: #f5f5f5;
              color: #333333;
              margin: 8px;
            }
            .number{
              display: inline-block;
              font-size: 18px;
              font-weight: 700;
              min-width: 21px;
              text-align: right;
            }
          }
        }
      }
    }
    .combo-info--total{
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .combo-amount{
        font-size: 24px;
        color: #212121;
        font-weight: 700;
        line-height: 1.32;
      }
      .amount-tip{
        color: #757575;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
      }
      .combo-order-btns{
        button{
          border: none;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          padding: 12px 20px;
          height: unset;
        }
        button:first-child{
          margin-right:16px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .trip-page {
    .combo-detail{
      border-radius: 8px;
       background-color: #ffffff !important;
    }
    .trip-content--combo {
      flex-direction: column;
      .combo-right {
        display: block;
        
                width: 100%;
                margin-top: 10px;
                margin-left: 0px;
      }
    }

    .combo-info {
      padding: 16px;
      border-radius: 12px;
      .combo-info--title {
        margin-bottom: 16px;
        .title-3 {
          font-size: 16px;
        }
        .text-btn {
          font-size: 14px;
        }
      }
      
      .combo-info--number {
        .number-list {
          .number-item {
            padding: 8px 12px;
            .number-title {
              font-size: 14px;
            }
            .number-btns {
              .gta-btn {
                width: 28px;
                height: 28px;
                line-height: 28px;
                font-size: 16px;
                margin: 4px;
              }
              .number {
                font-size: 16px;
              }
            }
          }
        }
      }

      .combo-info--total {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        .combo-amount {
          font-size: 20px;
        }
        .combo-order-btns {
          width: 100%;
          margin-top: 16px;
          display: flex;
          button {
            flex: 1;
            padding: 10px;
            font-size: 14px;
          }
          button:first-child {
            margin-right: 8px;
          }
        }
      }
    }
  }
}

.trip-page .trip-contents .combo-detail,
.mobile-drawer-component .combo-detail{
  background-color: #f5f5f5;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 24px;
  max-height: 750px;
  overflow-y: auto;
  font-size: 12px;
  position: relative;
}

.trip-page .trip-contents .combo-detail .combo-expand-btn,
.mobile-drawer-component .combo-detail .combo-expand-btn{
  font-size: 20px;
  cursor: pointer;
}

.trip-page .trip-contents .combo-detail .title,
.mobile-drawer-component .combo-detail .title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trip-page .trip-contents .combo-detail .title-3,
.mobile-drawer-component .combo-detail .title-3{
  margin-bottom: 12px;
}

.trip-page .trip-contents .combo-detail .combo-detail--tips,
.mobile-drawer-component .combo-detail--tips,
.mobile-drawer-component .combo-detail .combo-detail--tips{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail .combo-detail--content,
.mobile-drawer-component .combo-detail--content,
.mobile-drawer-component .combo-detail .combo-detail--content{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail .combo-detail--tip,
.mobile-drawer-component .combo-detail--tip,
.mobile-drawer-component .combo-detail .combo-detail--tip{
  color: rgb(117, 117, 117);
  border:1px solid #757575;
  background-color: rgb(245, 245, 245);
  border-radius: 6px;
  font-size: 12px;
  padding: 2px 4px;
  margin-right: 8px;
}

.trip-page .trip-contents .combo-detail .combo-detail--line,
.mobile-drawer-component .combo-detail--line,
.mobile-drawer-component .combo-detail .combo-detail--line{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail .combo-detail--line .trip-line--images,
.mobile-drawer-component .combo-detail--line .trip-line--images,
.mobile-drawer-component .combo-detail .combo-detail--line .trip-line--images{
  height: 100px;
}

.trip-page .trip-contents .combo-detail .combo-detail--price,
.mobile-drawer-component .combo-detail--price,
.mobile-drawer-component .combo-detail .combo-detail--price{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail .combo-detail--price .combo-fee,
.mobile-drawer-component .combo-detail--price .combo-fee,
.mobile-drawer-component .combo-detail .combo-detail--price .combo-fee{
  color: #555;
  padding: 0 8px;
  word-break: break-all;
  white-space: pre-line;
}

.trip-page .trip-contents .combo-detail .combo-detail--car,
.mobile-drawer-component .combo-detail--car,
.mobile-drawer-component .combo-detail .combo-detail--car{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail .combo-detail--car .combo-car,
.mobile-drawer-component .combo-detail--car .combo-car,
.mobile-drawer-component .combo-detail .combo-detail--car .combo-car{
  color: #555;
  padding: 0 8px;
}

.trip-page .trip-contents .combo-detail .combo-detail--desc,
.mobile-drawer-component .combo-detail--desc,
.mobile-drawer-component .combo-detail .combo-detail--desc{
  margin-bottom: 24px;
}

.trip-page .trip-contents .combo-detail--text,
.mobile-drawer-component .combo-detail--text{
  p{
    font-size: 12px;
    color: #555;
  }
}

.trip-page .trip-contents .trip-combo-line,
.mobile-drawer-component .trip-combo-line{
  padding: 12px 10px;
  color: #555;
}

.trip-page .trip-contents .trip-combo-line .show-album-icon,
.mobile-drawer-component .trip-combo-line .show-album-icon{
  right: 8px;
  bottom: 8px;
}

.trip-page .trip-contents .trip-combo-line .image-album,
.mobile-drawer-component .trip-combo-line .image-album{
  gap:4px;
}

.trip-page .trip-contents .trip-combo-line .trip-line--items,
.mobile-drawer-component .trip-combo-line .trip-line--items{
  font-size: 12px;
  border-left: 1px dashed #ccc;
  padding: 0 15px 20px;
  position: relative;
  word-break: break-all;
}

.trip-page .trip-contents .trip-combo-line .trip-line--items:last-child,
.mobile-drawer-component .trip-combo-line .trip-line--items:last-child{
  padding-bottom: 0;
}

.trip-page .trip-contents .trip-combo-line .trip-line--address .address-text,
.mobile-drawer-component .trip-combo-line .trip-line--address .address-text{
  line-height: 22px;
}

.trip-page .trip-contents .trip-combo-line .trip-line--address .arrow,
.mobile-drawer-component .trip-combo-line .trip-line--address .arrow{
  margin: 0 8px;
}

.trip-page .trip-contents .trip-combo-line .trip-line--dining,
.mobile-drawer-component .trip-combo-line .trip-line--dining{
  margin-top: 12px;
}

.trip-page .trip-contents .trip-combo-line .trip-line--stay,
.mobile-drawer-component .trip-combo-line .trip-line--stay{
  margin: 12px 0;
}

.trip-page .trip-contents .trip-combo-line .item-icon,
.mobile-drawer-component .trip-combo-line .item-icon{
  background-color: rgba(26, 97, 4, 0.8);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  height: 20px;
  left: -10px;
  line-height: 20px;
  position: absolute;
  text-align: center;
  width: 20px;
}

.trip-page .trip-contents .trip-combo-line .gta-icon.item-icon,
.mobile-drawer-component .trip-combo-line .gta-icon.item-icon{
  background: #333;
}

.combo-detail .dining-text>span,
.mobile-drawer-component .combo-detail .dining-text>span{
  margin-right: 8px;
}

.trip-page .form-dialog .combo-detail--content,
.mobile-drawer-component .combo-detail--content{
  max-height: 50vh;
  overflow-y: auto;
}

.form-dialog .card-content,
.mobile-drawer-component .card-content{
  font-size: 14px;
}

.card-expand{
  border-bottom: 1px solid #eee;
}
.card-expand .card-content-wrapper {
  overflow-y: hidden;
  transition: height 0.2s ease;
  padding: 0 0; /* 初始没有内边距 */
}

.card-expand .card-expand--title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}
.card-expand .expand-title--text{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.card-expand .card-content{
  padding-bottom: 12px;
}

.card-expand .faq-acc-icon {
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.3s ease;
  color: #666;
  font-size: 20px;
}
.card-expand .faq-acc-icon--open {
  transform: rotate(180deg);
}

.trip-introduction--detail{
  padding: 0 12px;

  .trip-detail--items--inner {
    border-left: 1px dashed #ccc;
    padding: 0 10px 20px;
    position: relative;
    word-break: break-all;
  }

  .trip-detail--items--inner:last-child{
    padding-bottom: 0;
  }

  .trip-detail--items--title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .trip-detail--items--day-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    margin: 10px 20px 10px 10px;
    text-align: justify;
    flex: 1;
    min-width: 0;
  }

  .trip-detail--items--day-icon {
    background-color: rgba(26, 97, 4, 0.8);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    left: -13px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 24px;
  }

  .trip-detail--items--body {
    margin-top: 12px;
  }

  .trip-detail--items--row {
    display: flex;
    margin-bottom: 2px;
    position: relative;
  }

  .trip-detail--items--row-intro {
    align-items: flex-start;
  }

  .trip-detail--items--icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    left: -23px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 26px;
    transform: translateY(-50%);
  }

  .trip-detail--items--body .gta-icon[data-size="custom"] {
    --gta-icon-size: 24px;
  }

  .trip-detail--items--row-text,
  .trip-detail--items--intro-text {
    color: #555;
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    margin: 10px 20px 10px 10px;
    text-align: justify;
    text-justify: inter-word;
    word-break: break-word;
  }

  .trip-detail--items--intro-text {
    white-space: pre-wrap;
  }

  .trip-detail--items--dining {
    display: inline-flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .trip-detail--items--row-key {
    font-weight: 700;
    color: #333;
  }

  .trip-detail--toolbar {
    position: absolute;
    top: -20px;
    right: 0;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: saturate(160%) blur(6px);
    z-index: 10;
  }

  .trip-detail--items--card:hover>.trip-detail--items--inner>.trip-detail--toolbar,
  .trip-detail--items--card[data-actions="always"]>.trip-detail--items--inner>.trip-detail--toolbar {
    display: inline-flex;
  }

  .trip-detail--toolbar-btn.gta-btn {
    padding: 0 5px;
    color: #fff;
    height: auto;
    line-height: normal;
  }

  .trip-detail--toolbar-btn.gta-btn .gta-icon[data-size="custom"] {
    --gta-icon-size: 18px;
  }


  .trip-detail--items--day-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .trip-detail--items--route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    max-width: 100%;
  }

  .trip-detail--items--route-from,
  .trip-detail--items--route-to {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trip-detail--items--route-arrow {
    flex: 0 0 auto;
    user-select: none;
    line-height: 1;
  }
  .slide-image{
    width: 100%;
    height: 260px;
    display: block;
    border: 1px solid #eee;
    background: #fafafa;
    overflow: hidden;
    border-radius: 8px;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

}

@media (max-width: 768px) {
  .trip-introduction--detail {
    padding: 0;

    .trip-detail--items--inner {
      padding: 0 0 20px 24px;
      margin-left: 12px;
    }
    .trip-detail--items--day-icon {
      left: -12px;
      width: 24px;
      height: 24px;
      font-size: 12px;
    }
    .trip-detail--items--day-text {
      font-size: 16px;
      margin: 8px 0;
      .trip-detail--items--route-from,
      .trip-detail--items--route-to {
        max-width: 120px;
      }
    }
    .trip-detail--items--row-text,
    .trip-detail--items--intro-text {
      font-size: 14px;
      margin: 4px 0;
      line-height: 1.6;
    }
    .trip-detail--items--icon {
      left: -36px;
      top: 15px;
      width: 20px;
      height: 20px;
      --gta-icon-size: 20px !important;
    }
    .trip-detail--items--dining {
      gap: 8px;
    }
    .slide-image {
      height: 180px;
    }
  }
}

.GTACalendar {
  background: #fff;
  width: 100%;
  user-select: none;
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: 8px;
  --cal-pad: 15px;
  --cal-gap: 20px;
  --cell-size: 1fr;
}
.GTACalendar.mini{
  width: 320px;
}

.GTACalendar * {
  box-sizing: border-box;
}

.GTACalendar .GTACalendar-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-bottom: 8px;
}

.GTACalendar .GTACalendar-title {
  font-weight: 600;
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}

.GTACalendar .GTACalendar-nav {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.GTACalendar .GTACalendar-nav.is-hidden {
  visibility: hidden;
}

.GTACalendar .GTACalendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, var(--cell-size)));
  gap: 5px 0px;
  color: #151515;
}

.GTACalendar .GTACalendar-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
}

.GTACalendar .GTACalendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, var(--cell-size)));
}

.GTACalendar .GTACalendar-cell-wrap {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.GTACalendar .GTACalendar-cell {
  cursor: pointer;
  border: unset;
  background: unset;
  text-align: center;
}

.GTACalendar .GTACalendar-cell--empty {
  background: transparent;
  border: none;
  pointer-events: none;
}

.GTACalendar .GTACalendar-day {
  font-size: 16px;
  font-weight: 500;
  color: #111;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  margin: 3px 0;
  display: inline-block;
  font-weight: bold;
}
.GTACalendar .GTACalendar-cell--disabled .GTACalendar-day:hover{
  background: unset;
}
.GTACalendar .GTACalendar-day:hover{
  background: var(--brand-100);
}

.GTACalendar .GTACalendar-day.is-active{
  color: white;
  background: var(--color-brand);
}

.GTACalendar .GTACalendar-label {
  font-size: 12px;
  line-height: 1;
  color: #6b7280;
}

.GTACalendar .GTACalendar-label--price {
  color: #16a34a;
  font-weight: 500;
}

.GTACalendar .GTACalendar-cell--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.GTACalendar .GTACalendar-cell--blackout {
  cursor: not-allowed;
  opacity: 0.55;
}

.GTACalendar .GTACalendar-cell--selected {
  background: var(--color-brand, #16a34a);
  border-color: transparent;
  color: #fff;
}

.GTACalendar .GTACalendar-cell--selected .GTACalendar-day {
  color: #fff;
  font-weight: 900;
}

.GTACalendar .GTACalendar-cell--selected .GTACalendar-label {
  color: rgba(255, 255, 255, 0.92);
}

.GTACalendar .GTACalendar-cell--selected .GTACalendar-label--price {
  color: #fff;
  font-weight: 900;
}

.GTACalendar .date-label{
  font-size: 12px;
  line-height: 12px;
  height: 12px;
}
.date-tips{
  position: relative;
  .gta-icon{
    margin-right: 2px;
  }
  span{
    font-size: 12px;
    line-height: 12px;
  }
  .gta-btn--secondary{
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--btn-fg);
    z-index: 100;
  }
}
.combo-info--date .GTACalendar-cell.GTACalendar-cell--disabled{
  position: relative;
  .gta-icon-disable{
    display: block;
    position: absolute;
    top: 4px;
    left: 13px;
    font-size: 32px;
  }
}
.combo-info--date .GTACalendar-cell{
  .gta-icon-disable{
    display: none;
  }
}

.tag-list{
  display: flex;
  flex-wrap: wrap;
}
.tag{
  color: #757575;
  border-color: #F5F5F5;
  background-color: rgba(245, 245, 245, 255);
  border-radius: 2px;
  margin: 0 8px 8px 0;
  padding: 0 8px;
  font-size: 14px;
  white-space: nowrap;
}

.evaluate-section {
  padding-bottom: 24px;
}

/* 总体评分 */
.overall-rating {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.rating-header {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rating-header .gta-icon-manyi{
  background-image: var(--icon-url);
  background-size: cover;
  background-repeat: no-repeat;
  width: 45px;
  height: 45px;
  background-color: unset;
}

.rating-emoji {
  font-size: 40px;
  line-height: 1;
}

.rating-number {
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.rating-max {
  font-size: 20px;
  color: #999;
  font-weight: 500;
}

.rating-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}

.satisfaction-text {
  font-size: 16px;
  color: var(--color-brand);
  font-weight: 600;
}

.total-reviews {
  font-size: 14px;
  color: #999;
}

/* 细分评分 */
.sub-ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.sub-rating-item {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-rating-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.sub-rating-value {
  font-size: 18px;
  color: #000;
  font-weight: 600;
}

/* 分隔线 */
.divider {
  height: 1px;
  background: #e0e0e0;
  margin: 24px 0;
}

/* 评价列表 */
.reviews-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reviews-section .gta-btn--secondary{
  --color-surface-1: var(--color-surface-2, #f7f8fa);
  --color-surface-2: #fcf6f2;
  color: var(--btn-fg);
}
.reviews-section .page-container-btn{
  text-align: center;
  margin-top: 12px;
}
.reviews-section .page-container-btn .gta-btn{
  margin-right: 8px;
}
.reviews-title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* 排序和筛选 */
.sort-section,
.filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sort-label,
.filter-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.sort-options,
.filter-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sort-btn,
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--color-brand);
  border-radius: 20px;
  font-size: 14px;
  color: var(--color-brand);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.sort-btn:hover,
.filter-btn:hover {
  background: #fffbe6;
}

.sort-btn.active,
.filter-btn.active {
  background: var(--color-brand);
  color: #fff;
}

.sort-btn svg {
  margin-left: 2px;
}

/* 排序下拉框 */
.sort-dropdown {
  min-width: 180px;
  padding: 8px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 覆盖 popover 默认样式 */
.sort-section .gta-popover {
  background: transparent;
}

.sort-section .gta-popover-main {
  padding: 0;
  background: transparent;
  box-shadow: none;
  min-width: auto;
}

.sort-section .gta-popover-content {
  padding: 0;
}

.sort-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.sort-dropdown-item:hover {
  background: #f5f5f5;
}

.sort-dropdown-item.active {
  background: #fffbe6;
  color: var(--color-brand);
  font-weight: 600;
  position: relative;
}

.sort-dropdown-item.active .ps-status-icon {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 22px;
  position:absolute;
  right: 20px;
  top: 10px;
  width: 24px;
  height: 24px;
}

/* 评价列表 */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 评价头部 */
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar,
.user-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-placeholder {
  background: linear-gradient(135deg, var(--color-brand), var(--brand-400));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.review-date {
  font-size: 13px;
  color: #999;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-satisfaction {
  font-size: 14px;
  color: #6b5bff;
  font-weight: 500;
}

.rating-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(90deg, var(--color-brand), var(--brand-400));
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 评价内容 */
.review-content {
  font-size: 1em;
  line-height: 1.8;
  color: #333;
}

/* 评价标签 */
.review-tags {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 13px;
  color: #999;
  line-height: 24px;
}

.review-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  color: #666;
}

/* 翻译提示 */
.translation-notice {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

/* 评价图片 */
.review-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.review-image-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.review-image-thumb:hover {
  transform: scale(1.05);
}

/* 操作按钮 */
.review-actions {
  display: flex;
  gap: 16px;
  padding-top: 8px;
}

.review-actions.liked .action-btn{
  color: var(--color-brand);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: none;
  border: none;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;

  i{
    font-size: 18px;
    position: relative;
    top: -1px;
  }
}

.action-btn:hover {
  color: var(--color-brand);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.helpful-count {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .evaluate-section {
    padding-bottom: 16px;
  }

  .overall-rating {
    flex-direction: column;
    align-items: flex-start;
  }

  .rating-header {
    align-items: center;
  }

  .rating-number {
    font-size: 36px;
  }

  .rating-emoji {
    font-size: 32px;
  }

  .rating-max {
    font-size: 18px;
  }

  .satisfaction-text {
    font-size: 14px;
  }

  .total-reviews {
    font-size: 12px;
  }

  .sub-ratings {
    grid-template-columns: repeat(2, 1fr);
  }

  .sub-rating-name {
    font-size: 12px;
  }

  .sub-rating-value {
    font-size: 16px;
  }

  .reviews-title {
    font-size: 18px;
  }

  .sort-section,
  .filter-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sort-label,
  .filter-label {
    font-size: 12px;
  }

  .sort-btn,
  .filter-btn {
    font-size: 12px;
    padding: 6px 12px;
  }

  .sort-dropdown-item {
    font-size: 12px;
  }

  .user-name {
    font-size: 12px;
  }

  .review-date {
    font-size: 11px;
  }

  .review-satisfaction {
    font-size: 12px;
  }

  .review-content {
    font-size: 0.875em;
  }

  .review-images {
    grid-template-columns: repeat(3, 1fr);
  }

  .review-image-thumb {
    height: 80px;
  }

  .action-btn {
    font-size: 11px;
  }
}

/* 遮罩层 */
.evaluate-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 对话框容器 */
.evaluate-dialog-content {
  background: #fff;
  border-radius: 16px;
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  display: flex;
  overflow: hidden;
  animation: fadeInUp 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* 左侧：图片预览区域 */
.evaluate-dialog-images-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  min-width: 0;
}

/* 主图 */
.evaluate-dialog-main-image {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.evaluate-dialog-main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

/* 关闭按钮 */
.evaluate-dialog-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.evaluate-dialog-close-btn:hover {
  color: #333;
  background: #f5f5f5;
}

/* 右侧：评论信息区域 */
.evaluate-dialog-info-section {
  width: 420px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  position: relative;
  overflow-y: auto;
  flex-shrink: 0;
}

/* 用户信息 */
.evaluate-dialog-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.evaluate-dialog-avatar,
.evaluate-dialog-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.evaluate-dialog-avatar-placeholder {
  background: linear-gradient(135deg, #6b5bff, var(--color-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.evaluate-dialog-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.evaluate-dialog-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.evaluate-dialog-date {
  font-size: 12px;
  color: #999;
}

/* 评分 */
.evaluate-dialog-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.review-satisfaction {
  font-size: 14px;
  color: var(--color-brand);
  font-weight: 600;
}

.rating-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(90deg, var(--color-brand), var(--brand-400));
  color: #fff;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
}

/* Tags */
.evaluate-dialog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tags-label {
  font-size: 13px;
  color: #666;
}


/* 评价内容 */
.evaluate-dialog-review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  flex: 1;
  overflow-y: auto;
}

.evaluate-dialog-main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

/* 导航按钮 */
.evaluate-dialog-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
  color: #fff;
  font-size: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.evaluate-dialog-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.evaluate-dialog-nav-left {
  left: 20px;
}

.evaluate-dialog-nav-right {
  right: 20px;
}

/* 图片计数器 */
.evaluate-dialog-image-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 缩略图 */
.evaluate-dialog-thumbnails {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: #000;
  overflow-x: auto;
  justify-content: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.evaluate-dialog-thumbnail {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  opacity: 0.6;
}

.evaluate-dialog-thumbnail.active {
  opacity: 1;
  border-color: #6b5bff;
  box-shadow: 0 0 0 2px rgba(107, 91, 255, 0.3);
}

.evaluate-dialog-thumbnail:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.6);
}

.evaluate-dialog-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.fade-img {
  animation-duration: 0.35s;
  animation-fill-mode: both;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .evaluate-dialog-content {
    flex-direction: column;
    width: 95vw;
    max-width: 600px;
    height: 90vh;
    max-height: 90vh;
  }

  .evaluate-dialog-images-section {
    flex: 1;
    min-height: 50vh;
  }

  .evaluate-dialog-info-section {
    width: 100%;
    flex: 1;
    padding: 0;
  }

  .evaluate-dialog-user,
  .evaluate-dialog-rating,
  .evaluate-dialog-tags,
  .evaluate-dialog-review-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .evaluate-dialog-main-image {
    min-height: 300px;
  }

  .evaluate-dialog-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  .evaluate-dialog-nav-left {
    left: 15px;
  }

  .evaluate-dialog-nav-right {
    right: 15px;
  }

  .evaluate-dialog-thumbnails {
    padding: 12px 15px;
    gap: 10px;
  }

  .evaluate-dialog-thumbnail {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .evaluate-dialog-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .evaluate-dialog-user,
  .evaluate-dialog-rating,
  .evaluate-dialog-tags,
  .evaluate-dialog-review-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .evaluate-dialog-user {
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .evaluate-dialog-avatar,
  .evaluate-dialog-avatar-placeholder {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .evaluate-dialog-user-name {
    font-size: 15px;
  }

  .evaluate-dialog-rating {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .evaluate-dialog-satisfaction {
    font-size: 14px;
  }

  .evaluate-dialog-rating-badge {
    padding: 5px 14px;
    font-size: 14px;
  }

  .evaluate-dialog-tags {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 6px;
  }

  .evaluate-dialog-tag {
    padding: 5px 12px;
    font-size: 12px;
  }

  .evaluate-dialog-review-content {
    font-size: 14px;
    line-height: 1.7;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .evaluate-dialog-main-image {
    min-height: 250px;
  }

  .evaluate-dialog-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .evaluate-dialog-nav-left {
    left: 12px;
  }

  .evaluate-dialog-nav-right {
    right: 12px;
  }

  .evaluate-dialog-image-counter {
    bottom: 15px;
    padding: 6px 14px;
    font-size: 13px;
  }

  .evaluate-dialog-thumbnails {
    padding: 10px 12px;
    gap: 8px;
  }

  .evaluate-dialog-thumbnail {
    width: 50px;
    height: 50px;
  }

  .evaluate-dialog-close-btn {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
}

.trip-header-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  top: var(--gta-header-h, 60px);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform .18s ease, opacity .18s ease;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  .content {
    width: 1280px;
    margin: auto;
    padding: 0 40px;
    display: flex;

    div {
      height: 48px;
      line-height: 48px;
      padding: 0 24px;
      font-size: 16px;
      margin-bottom: -2px;
      cursor: pointer;
    }

    .active {
      color: var(--color-brand);
      border-bottom: 2px solid var(--color-brand);
    }

    div:hover {
      color: var(--color-brand);
      background: var(--brand-50);
      border-bottom: 2px solid var(--color-brand);
    }
  }
}

.trip-header-menu.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .trip-header-menu {
    top: var(--gta-header-h, 48px);

    .content {
      width: 100%;
      padding: 0 16px;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      div {
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        font-size: 14px;
        flex: 0 0 auto;
      }

      .active {
        color: var(--color-brand);
        border-bottom: 3px solid var(--color-brand);
      }

      div:hover {
        color: var(--color-brand);
        background: var(--brand-50);
        border-bottom: 3px solid var(--color-brand);
      }
    }
  }
}
.trip-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;

}

.trip-tips .left {
  flex: 1;
}



.trip-tips .score {
  font-size: 18px;
  font-weight: bold;
  color: #16a34a;
  margin-right: 12px;
}

.trip-tips .score-num {
  color: #666;
  margin-right: 12px;
  cursor: pointer;
}

.trip-tips .part-num {
  color: #666;
}

.trip-tips .tips-address {
  color: #666;
  font-size: 14px;
}

.trip-tips .right {
  margin-left: 20px;
}

.favorite-btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}



.favorite-btn.favorited {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #fff;
}



.favorite-btn i {
  margin-right: 8px;
}

/* 登录组件样式 */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .trip-tips .left>div:first-child {
    margin-bottom: 8px;
  }
}
@media (max-width: 768px) {
  .trip-mobile-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -1px;
    background: #fff;
    border-top: 1px solid var(--color-border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
  .trip-mobile-bottombar-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
  }

  .trip-mobile-bottombar-price {
    cursor: pointer;
    flex: 1;
  }

  .trip-mobile-bottombar-amount {
    font-size: 20px;
    color: #212121;
    font-weight: 700;
    line-height: 1.32;
  }

  .trip-mobile-bottombar-tip {
    color: #757575;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }

  .trip-mobile-bottombar-actions {
    display: flex;
    gap: 8px;
  }

  .trip-mobile-bottombar-actions button {
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 12px;
    height: unset;
    border-radius: 8px;
  }
}

.trip-combo-fab {
  display: none;
}

@media (max-width: 768px) {
  .trip-combo-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--color-brand);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    z-index: 1001;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    transition: opacity .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .trip-combo-fab.is-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }

  .trip-combo-fab.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==================== ProgressBar.css ==================== */
.progress-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
  margin: 0px auto;
  margin-bottom: 24px;
  padding: 0 20px;
}

.step-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 2;
  background-color: transparent;
}

/* 进度节点容器 */
.step-indicator-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 8px;
}

.step-indicator {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #d3d3d3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: background-color 0.2s;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 完成状态：绿色背景 */
.step-indicator.completed {
  background-color: #28a745;
}

/* 当前状态：绿色背景 */
.step-indicator.current {
  background-color: #28a745;
}

/* 待处理状态：灰色背景 */
.step-indicator.pending {
  background-color: var(--brand-100);
  box-shadow: 0;
}

/* 图标样式 */
.check-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}

.check-mark .ps-status-icon {
  font-size: 24px;
  top: 9px;
}


.dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1;
  position: relative;
  top: -1px
}

/* 文字样式 */
.step-text {
  font-size: 14px;
  color: #333;
  text-align: center;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  font-weight: 500;
}

/* 连接线 - 绝对定位版本 */
.connector-line {
  position: absolute;
  top: 24px; /* 节点中心位置 (44px/2 = 22px) */
  height: 4px;
  background-color: var(--brand-100); /* 默认灰色 */
  border-radius: 2px;
  transition: background-color 0.2s;
  z-index: 1;
  transform: translateY(-50%);
}

/* 连接线状态颜色 - 只有completed状态是绿色 */
.connector-line.completed {
  background-color: #28a745;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .step-indicator-wrapper {
    height: 40px;
  }
  
  .step-indicator {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .connector-line {
    top: 18px; /* 36px/2 = 18px */
    height: 3px;
  }
  
  .step-text {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
 
  }
  
  .dot {
    font-size: 14px;
    margin-top: -3px;
  }
  
  .check-mark {
    font-size: 20px;
  }
}

/* 小屏幕文字折行 */
@media (max-width: 400px) {
  .step-text {
    white-space: normal;
    height: auto;
    min-height: 32px;
    line-height: 1.3;
  }
}

/* 动画效果 */
.connector-line {
  transition: background-color 0.3s ease;
}

.step-indicator {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.step-indicator:hover {
  transform: scale(1.05);
}
/* 底部组件 */
.order-bottom-box{
    padding: 20px;
    background-color: #424242;
    border-radius: 8px;
    margin-bottom: 24px;
}

.order-bottom-label{
    color:var(--color-surface);
    font-size: var(--fz-xs);
}

.order-bottom-label>a{
    text-decoration: underline;
    line-height: 1.5;
}

.order-bottom-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 16px;
}

.order-bottom-item{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 8px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: var(--fz-sm);
    text-indent: 10px;
}

.order-item-red{
    color: var(--color-danger);
    background-color: #fcf6f2;
}

.order-item-green{
    color: var(--brand-700);
    background-color: #f6fcf2;
}

.order-bottom-pay-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 8px;
    border-radius: 8px;
    color:var(--color-surface);
}

.order-bottom-pay-label{
    font-size: var(--fz-sm);
}

.order-bottom-pay-btn{
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    background-color: var(--color-brand);
    color: var(--color-fg-contrast);
    border: none;
    font-size: var(--fz-sm);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .order-bottom-box {
        padding: 16px;
        margin-bottom: 20px;
    }
    
    .order-bottom-block {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    
    .order-bottom-item {
        padding: 10px 8px;
        margin-bottom: 10px;
        font-size: var(--fz-xs);
    }
    
    .order-bottom-pay-box {
        padding: 10px 8px;
    }

    .order-bottom-pay-label {
        width: calc(100% - 100px);
    }
    
    .order-bottom-pay-btn {
        width: 80px;
        height: 36px;
        line-height: 36px;
        font-size: var(--fz-xs);
    }
}
/* 右侧组件样式 */




.order-tips-box {
    background-color: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--color-shadow);
    color: var(--color-fg);
    font-size: var(--fz-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-height: 120vh;
    overflow-y: auto;
}

/* 整体滚动条宽度 */
.order-tips-box::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

/* 滚动条轨道 */
.order-tips-box::-webkit-scrollbar-track {
  background: transparent;
}

/* 滑块 */
.order-tips-box::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  transition: background 0.3s;
}

/* hover 效果 */
.order-tips-box::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.45);
}


.order-tips-order-mes{
    padding: 20px;
    
}


.order-tips-order-mes-title {
    font-size: var(--fz-md);
    font-weight: 600;
    color: var(--color-fg);
    margin-bottom: 8px;
}

.order-tips-order-mes-label {
    font-size: var(--fz-sm);
    color: var(--color-fg-muted);
    margin-bottom: 10px;
}


.order-tips-order-mes-tips {
    font-size: var(--fz-xs);
    color: var(--color-brand);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
}


.order-tips-box-ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.order-tips-box-li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
}

.order-tips-box-li:last-child {
    border-bottom: none;
    padding-top: 18px;
      padding-bottom: 18px;
}

.order-tips-box-li>span {
    max-width: 160px;
    white-space: nowrap;
    line-height: 18px;
    font-size: var(--fz-sm);
    color: #757575;
}

.order-tips-circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6f7f2;
    color: var(--color-brand);
    background-color: rgb(230, 247, 242);
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-tips-circle-p{
    font-size: 12px;
    color: var(--color-surface)
}

.order-tips-box-li-p {
    font-size: var(--fz-sm);
    color: #212121;
    white-space: nowrap;
}

.order-tips-box-li:first-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.li-p-dark {
    font-weight: var(--fw-semibold);
}


.order-tips-p-red {
    color: var(--color-danger);
}

.order-tips-li-green {
    color: var(--color-brand);
}

.order-tips-li-no-bottom {
    border-bottom: none;
}

.order-tips-box-li-p-red {
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #ff5b00;
}


.order-red-price {
    padding: 10px 20px;
    text-align: center;
    color: #ff5b00;
    background-color: rgba(255, 91, 0, .12);
    width: calc(100% - 40px);
    font-size: var(--fz-sm);
    margin-bottom: 20px;
    
}

.order-tips-li-grey{
    background-color: #ededed;
    margin-top: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .order-tips-box {
        font-size: var(--fz-xs);
        gap: 6px;
    }
    
    .order-tips-order-mes {
        padding: 16px;
        width: 100%;
    }
    
    .order-tips-order-mes-title {
        font-size: var(--fz-sm);
        margin-bottom: 6px;
    }
    
    .order-tips-order-mes-label {
        font-size: var(--fz-xs);
        margin-bottom: 8px;
    }
    
    .order-tips-order-mes-tips {
        font-size: var(--fz-xs);
        padding-bottom: 16px;
    }
    
    .order-tips-box-li {
        padding: 8px 16px;
    }
    
    .order-tips-box-li:last-child {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    
    .order-tips-box-li>span {
        max-width: 120px;
        font-size: var(--fz-xs);
    }
    
    .order-tips-circle {
        width: 16px;
        height: 16px;
    }
    
    .order-tips-circle-p {
        font-size: 10px;
    }
    
    .order-tips-box-li-p {
        font-size: var(--fz-xs);
    }
    
    .order-tips-box-li-p-red {
        font-size: 16px;
        line-height: 16px;
    }
    
    .order-red-price {
        padding: 8px 16px;
        width: calc(100% - 32px);
        font-size: var(--fz-xs);
        margin-bottom: 16px;
    }
}


.dynamic-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 新增按钮 */
.dynamic-add-btn {
    margin: 0 !important;
    width: auto !important;
    padding: 0 16px !important;
}

/* 动态项目 */
.dynamic-item {
    margin-top: 0;
}

.dynamic-item.has-margin-top {
    margin-top: 24px;
}

/* 项目头部 */
.dynamic-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 10px;
}

/* 项目标题 */
.dynamic-item-title {
    font-weight: 600;
    color: var(--color-brand);
    font-size: 15px;
    position: relative;
    padding-left: 12px;
}

.dynamic-item-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 45%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: var(--color-brand);
    border-radius: 2px;
}

/* 删除按钮 */
.dynamic-btn-delete {
    border: 1px solid #ffccc7;
    background: #fff1f0;
    color: #ff4d4f;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dynamic-btn-delete:hover {
    background: #ff4d4f;
    color: white;
    border-color: #ff4d4f;
}

/* 分隔线 */
.dynamic-divider {
    margin: 20px 0;
    border: none;
    border-top: 1px dashed #e0e0e0;
}

.traveler-list{
  display: flex;
  flex-wrap: wrap;
  --color-surface-1: var(--color-surface-2, #f7f8fa);
  --color-surface-2: #fcf6f2;
  padding: 0 12px;
  margin-top: -16px;
}

.traveler-list>div{
  margin-bottom: 8px;
}
.traveler-hover .gta-btn--secondary{
  color: var(--color-brand);
}

.traveler-list .gta-btn--tag{
  margin-right: 8px;
  position:relative;
}

.traveler-list .gta-btn--tag .gta-icon-close{
  position: absolute;
  top: -5px;
  right: -5px;
  color: var(--color-danger);
  opacity: 0;
  transition: opacity 100ms;
}

.traveler-list .gta-btn--tag:hover .gta-icon-close{
  opacity: 1;
}

.traveler-list .active .gta-btn--tag{
  background: var(--color-brand);
}

.traveler-list .active .gta-btn--tag span{
  color: white;
}
.traveler-list .gta-btn--tag.add {
  color: var(--btn-fg);
}

/* 出行人信息项 */
.traveler-info-item {
  padding: 16px;
  background: var(--color-surface-1, #f7f8fa);
  border-radius: 8px;
  margin-top: 12px;
  position: relative;
}

/* 编辑按钮 */
.traveler-info-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #999);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.traveler-info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}


.traveler-info-row:last-child {
  margin-bottom: 0;
}

.traveler-info-label {
  font-weight: 500;
  color: var(--color-text-secondary, #666);
  min-width: 80px;
  flex-shrink: 0;
  line-height: 26px;
}

.traveler-info-value {
  color: var(--color-text-primary, #333);
  font-weight: 400;
  line-height: 26px;
}

/* 联系人开关 */
.traveler-info-item .set-contact{
  position: absolute;
  bottom: 26px;
  right: 18px;
}

.contact-switch {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-brand);
}

.contact-switch:checked {
  accent-color: var(--color-brand);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .dynamic-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .dynamic-add-btn {
        width: 100% !important;
    }
    
    .dynamic-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .dynamic-btn-delete {
        align-self: flex-end;
    }
    
    .traveler-info-row {
        flex-direction: row;
        gap: 4px;
    }


    
    .traveler-info-label {
        min-width: auto;
    }
    
    .traveler-info-edit-btn {
        top: 8px;
        right: 8px;
    }
}

.textarea-container {
  position: relative;
  width: 100%;
}

.textarea-field {
  font-family: inherit;
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 4px;
  font-weight: 350;
}

.textarea-field:focus {
  outline: none;
  resize: none;
  box-shadow: none;
}

.textarea-counter {
  position: absolute;
  bottom: -14px;
  right: 0;
  font-size: 12px;
  color: #888;
}

.custom-form-item {
  display: flex;
  flex-direction: column;
}

.custom-form-item label {
  padding-left: 5px;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
}
.custom-form-item-span {
  color: #ff4d4f;
  margin-left: 4px;
}

.custom-form-item input {
  padding: 12px 8px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 6px;
  font-size: 16px;
  width: 100%;
}

.custom-form-item input:focus,
.custom-form-item select:focus {
  outline: none;
  box-shadow: none;
}

.custom-form-error {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
}
.custom-select-wrapper {
    position: relative;
    width: 100%;
    font-size: 14px;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s;
}


.custom-select-text.placeholder {
    color: #9d9d9d;
}

.custom-select-arrow {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.2s ease;
    filter: grayscale(100%);
}

.custom-select-arrow.rotated {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 4px 0 0;
    padding: 6px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.custom-select-option {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
}

.custom-select-option:hover {
    background-color: #eee;
}

.custom-select-option.selected {
    font-weight: bold;
    background-color: #e6f7ff;
}

.disabled .custom-select-trigger {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

 
.dynamic-form {
  padding: 0 10px;
}

 
.dynamic-form .custom-form {
  margin-bottom: 16px;
}

.dynamic-form input,
.dynamic-form select {
  width: 100%;
  padding: 12px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
  background-color: white; /* 强制白色背景 */
  appearance: none; /* 移除默认样式 */
}

.custom-select {
  width: 100%;
  padding: 12px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  appearance: none;
  
  background-size: 16px;
  transition: all 0.3s;
}

/* 下拉选项面板样式 */
.custom-select option {
  padding: 8px 12px;
  background: white !important;
}

 

 

/* 错误状态 */
.custom-select.error {
  border-color: #ff4d4f;
}
 

/* 焦点状态 */
.dynamic-form select:focus {
  outline: none;
 
}

.dynamic-form .form-item--full {
  grid-column: 1 / -1;
}

.addr-dlg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.addr-dlg .form-item--full {
  grid-column: 1 / -1;
}

 
.submit-btn {
  width: 100%;
  padding: 12px;
  margin-top: 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #45a049;
}

 
.dynamic-form textarea {
  min-height: 80px;
  padding: 12px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
}

.fd-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

/* 单个日期选择器 */
.fd-item--date {
  margin-bottom: 16px;
}

/* 日期范围选择器 */
.fd-item--range {
  margin-bottom: 16px;
}

.fd-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* 错误状态 */
.ant-picker-status-error {
  border-color: #ff4d4f;
}

.ant-picker .ant-picker{
  border: unset;
}

/* 遮罩层 */
.gta-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  padding-top: 100px;
}

/* 对话框容器 */
.gta-dialog {
  background: #fff;
  border-radius: 12px;
  overflow: visible;
  animation: fadeInUp 0.25s ease;
  max-width: 90vw;
  max-height: 90vh;
}

.gta-dialog-resize {
  resize: both;
  overflow: visible;
}

/* 头部区域 */
.gta-dialog-header {
  padding: 24px;
  font-size: 18px;
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.gta-dialog-header-left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  min-width: 0;
}

.gta-dialog-header-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.gta-dialog .gta-dialog-title {
  margin: 0;
  line-height: 1;
  flex: 0 0 auto;
}

/* 关闭按钮 */
.gta-dialog-close {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  position: static;
}

/* 内容区域 */
.gta-dialog-body {
  padding: 24px;
}

/* 底部区域 */
.gta-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #f0f0f0;
}

.gta-dialog .gta-btn {
  padding: 8px 20px;
  height: auto;
  line-height: 1.5;
}

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

.gta-dialog .gta-btn--secondary{
  color: var(--btn-fg-hover, var(--btn-fg));
  margin-right: 10px;
}
.gta-dialog .addr-dlg{
  gap: 10px 20px;
}

.order-top-box {
 
    padding: 0 10px 10px;
 
    margin-bottom: 16px;
}

.order-title-block {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fz-md);
}

.order-title-span {
    width: 4px;
    height: 24px;
    background: var(--color-brand);
    border-radius: 2px;
    display: block;
}

.order-title-word {
    color: var(--color-fg);
    font-size: var(--fz-lg);
    font-weight: 600;
}

.order-title-label {
    color: var(--color-fg-muted);
    font-size: var(--fz-xs);
    background-color: var(--color-surface);
    padding: 4px 8px;
    border-radius: 4px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .order-top-box {
        padding: 0 8px 8px;
        margin-bottom: 12px;
    }
    .orderPaymentStatus-label{
          padding: 0 8px 8px;
          white-space: unset !important;
    }
    
    .order-title-block {
        gap: 6px;
        font-size: var(--fz-sm);
    }
    
    .order-title-span {
        height: 20px;
    }
    
    .order-title-word {
        font-size: var(--fz-md);
    }
    
    .order-title-label {
        font-size: var(--fz-xs);
        padding: 3px 6px;
    }
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.4s;
  }
  
  .toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
  }
  
  /* 使用 :has() 伪类增强选中状态的样式 */
  .toggle-switch:has(input:checked) .toggle-slider {
    background-color: #17a43a !important;
  }
  
  .toggle-switch:has(input:checked) .toggle-slider::before {
    transform: translateX(26px) !important;
  }
  
  /* 保持原有的选择器兼容性 */
  .toggle-switch input:checked + .toggle-slider {
    background-color: #17a43a;
  }
  
  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(26px);
  }
  
  @media (max-width: 768px) {
    .toggle-switch {
      width: 40px;
      height: 20px;
    }
  
    .toggle-slider::before {
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
    }
  
    .toggle-switch:has(input:checked) .toggle-slider::before {
      transform: translateX(20px) !important;
    }
    
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px); 
    }
  }
  
.travel-info-card {
  background-color: var(--color-bg);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
}

.travel-info-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}

.travel-info-content {
  max-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 16px;
  flex-grow: 1;
  max-width: calc(100% - 116px);
  position: relative;
}

.travel-info-title {
  font-size: var(--fz-lg);
  color: var(--color-fg);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.travel-info-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.travel-info-subtitle {
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--color-fg-muted);
  font-size: var(--fz-sm);
  margin-top: 4px;
}
.travel-info-subtitle span{
  margin-left: 4px;
}

/* 优惠券组件 */
.order-ticket-block{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--color-brand-contrast);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--color-shadow);
    transition: all 0.3s ease;
}

.order-ticket-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--color-surface);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.order-ticket-item>p{
    color: #757575;;
}


.order-icon-ticket{
    font-size: var(--fz-5xl);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .order-ticket-block {
        padding: 8px;
        gap: 8px;
    }
    
    .order-ticket-item {
        padding: 8px;
    }
    
    .order-icon-ticket {
        font-size: var(--fz-4xl);
    }
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0 !important;
}

li {
    list-style: none;
}

p {
    margin-bottom: 0 !important;
    padding: 0;
}

.order-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 20px 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 网格布局 - 左右两列 */
.order-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

/* 左侧内容区 */
.order-page-grid-left {
    background-color: transparent;
}
.order-page-grid-right {
    position: relative;
    top: 90px;
    height: fit-content;
}


.order-page-grid-left .progress-container {
    margin-top: 0;
}

.order-title {
    color: var(--color-brand);
    font-size: 28px;
    margin: 30px 0 20px;
    font-weight: 600;
}

.order-info-block {
    margin-bottom: 24px;
    background-color: var(--color-brand-contrast);
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px var(--color-shadow);

}

.order-info-block:hover {
    box-shadow: 0 4px 16px var(--color-shadow);
}



.order-clk-btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    background-color: var(--color-surface);
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    font-size: var(--fz-sm);
    cursor: pointer;
    margin:0px 10px 20px;
    transition: all 0.3s ease-in-out;
    font-weight: 500;
}


/* 表单容器样式 */
.addr-dlg {
    background-color: transparent;
    margin-bottom: 10px;
}

.gta-btn--tag>span{
  color: var(--brand-900);
}

@media (max-width: 768px) {
        .addr-dlg{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
}







/* 响应式布局 - 当屏幕宽度小于1024px时改为单列 */
@media (max-width: 1024px) {
    .order-page-grid {
        grid-template-columns: 1fr;
    }

    .order-page-grid-right {
        position: static;
        margin-top: 30px;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .order-page-grid {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
    .order-page-grid-left{
        width: 100%;
    }
    .order-bottom-box{
       margin-bottom: 0px !important;
    }
    .order-page-grid-right{
        width: 100%;
        padding: 0px !important;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .order-title {
        font-size: 24px;
        margin: 20px 0 15px;
    }

    .order-info-block {
        padding: 12px;
    }

    .order-top-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .order-clk-btn {
        width: 100%;
    }

    .order-page-grid-right {
        padding: 15px;
    }
}


/* 详情面板样式 */
.order-pay-detail-panel {
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.detail-section {
    margin-bottom: 32px;
}

.detail-section:last-of-type {
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.section-line {
    width: 4px;
    height: 18px;
    background-color: var(--color-brand);
    border-radius: 2px;
    margin-right: 12px;
}

.section-title {
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
    color: #333;
}

.section-desc {
    font-size: var(--fz-xs);
    color: #999;
    margin-bottom: 16px;
}

/* 出行信息卡片 */
.trip-info-card {
    display: flex;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    align-items: center;
}

.trip-image {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0;
}

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

.trip-details {
    flex: 1;
}

.trip-title {
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
    color: #333;
    margin-bottom: 4px;
}

.trip-subtitle {
    font-size: var(--fz-sm);
    color: #666;
}

/* 信息展示组 */
.info-group {
    padding: 0 4px;
}

.info-type {
    font-size: var(--fz-sm);
    font-weight: var(--fw-medium);
    color: #333;
    margin-bottom: 12px;
}

.info-row {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.info-item {
    flex: 1;
}

.info-label {
    font-size: var(--fz-xs);
    color: #999;
    margin-bottom: 4px;
}

.info-value {
    font-size: var(--fz-sm);
    color: #333;
    word-break: break-all;
}

/* 优惠类型 */
.promo-box {
    padding: 0 4px;
}

.promo-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--fz-sm);
    color: #999;
    cursor: not-allowed;
}

.promo-btn i {
    margin-right: 6px;
}

/* 底部收起 */
.collapse-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #00c287;
    font-size: var(--fz-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    gap: 4px;
}

.collapse-icon {
    transform: rotate(180deg);
}

.order-pay-traveler-container {
    margin-bottom: 20px;
}

.order-pay-top-box {
    padding: 20px;
    background-color: rgb(230, 247, 242);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    color: var(--color-brand);
}

.order-pay-top-title{
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
}

.order-pay-top-label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    font-size: var(--fz-sm);
    cursor: pointer;
}

.order-pay-icon-ticket {
    font-size: var(--fz-md);
    transition: transform 0.3s ease;
    margin-left: 4px;
}

.order-pay-icon-ticket.expanded {
    transform: rotate(180deg);
}


.ps-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: ps-fadeIn 0.3s ease;
}


.ps-modal-container {
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: ps-slideUp 0.3s ease;
  overflow: hidden;
}


.ps-ssl-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  border-bottom: 1px solid #e6ecfe;
  color: #2d6a4f;
  font-size: 13px;
  font-weight: 500;
}

.ps-lock-icon {
  color: #2d6a4f;
}


.ps-content {
  padding: 32px 24px 24px;
  text-align: center;
}


.ps-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1f36;
  margin-bottom: 12px;
}


.ps-message {
  font-size: 15px;
  color: #4b5565;
  line-height: 1.6;
  margin-bottom: 20px !important;
}




/* 警告信息 */
.ps-warning {
  background: #fff7e6;
  border-left: 4px solid #f59e0b;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  text-align: left;
}

.ps-warning-icon {
  font-size: 20px;
  line-height: 1;
  color: #ff5b00;
}

.ps-warning-text {
  flex: 1;
}

.ps-warning-text strong {
  display: block;
  color: #92400e;
  font-size: 15px;
  margin-bottom: 4px;
}

.ps-warning-text span {
  font-size: 13px;
  color: #b45309;
  line-height: 1.5;
}

/* 进度条 */
.ps-progress-bar {
  width: 100%;
  height: 6px;
  background: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.ps-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d6a4f, #409f7a);
  border-radius: 3px;
  animation: ps-progress 2s ease-in-out infinite;
  width: 30%;
}


.ps-actions {
  margin-top: 24px;
}

.ps-btn {
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 200px;
}

.ps-btn-primary {
  background: #2d6a4f;
  color: white;
}

.ps-btn-primary:hover {
  background: #1e4b38;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(45, 106, 79, 0.2);
}

.ps-btn-secondary {
  background: #f3f4f6;
  color: #1f2937;
}

.ps-btn-secondary:hover {
  background: #e5e7eb;
}




@keyframes ps-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ps-slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ps-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(300%);
  }
}

/* 响应式调整 */
@media (max-width: 480px) {
  .ps-modal-container {
    width: 95%;
    border-radius: 20px;
  }

  .ps-content {
    padding: 24px 16px;
  }

  .ps-title {
    font-size: 18px;
  }

  .ps-message {
    font-size: 14px;
  }
}
.ps-content .payment-element {
  transition: opacity 1s ease-in-out;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.ps-content.paying .payment-element{
  opacity: 1;
  position: relative;
  pointer-events: unset;
}

.ps-content.processing .stripe-pay{
  padding-top: 60px;
}
.ps-content.start .stripe-pay{
  padding-top: 60px;
}

.ps-modal-overlay .cancel-pay-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  width: 100%;
}

.ps-modal-overlay .cancel-pay-btn:hover {
  background-color: #e8e8e8;
  border-color: #ccc;
}

.ps-modal-overlay .cancel-pay-btn:active {
  background-color: #d0d0d0;
}

.ps-modal-overlay .gta-btn {
  width: 100%;
  margin-top: 10px;
}
.ps-modal-overlay .gta-btn--secondary {
  --color-surface-1: var(--color-surface-2, #f7f8fa);
  --color-surface-2: #fcf6f2;
  color: var(--btn-fg);
}

 .ps-modal-container .ps-status-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .ps-status-icon svg {
   width: 40px;
   height: 40px;
 }

 /* 处理中状态 - 旋转动画 */
 .ps-processing {
   background: #f0f9ff;
 }

 .ps-spinner {
   position: relative;
   width: 48px;
   height: 48px;
 }

 .ps-spinner-circle {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 4px solid transparent;
   border-radius: 50%;

 }

 .ps-spinner-arc {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 4px solid transparent;
   border-top-color: #2d6a4f;
   border-radius: 50%;
   animation: ps-spin 1s linear infinite;
 }

 .ps-spinner-circle i {
   color: #2d6a4f;
   position: relative;
   top: 4px;
 }

 .ps-success {
   background: #e8f7f0;
   color: #2d6a4f;
 }

 .ps-success i {
   font-size: 40px;
   top: 10px;
 }

 .ps-error {
   background: #fff1f0;
   color: #dc2626;
 }

 .ps-error i {
   font-size: 40px;

 }

 @keyframes ps-spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }
.payment-side-box {
    margin-top: 20px;

    border-radius: 12px;
    background-color: var(--color-surface);
}

.payment-time-box {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.payment-time-title {
    font-size: var(---fz-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-brand);
}

.payment-time-li {
    font-size: var(--fz-sm);
    color: var(--color-fg-muted);
}

.payment-time-span {
    color: var(--color-brand);
    margin-left: 5px;
    font-weight: 600;
    font-family: monospace;
    font-size: var(--fz-md);
}

.payment-time-span--urgent {
    color: #dc2626;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.payment-tips {
    padding: 20px;
    background-color: #e7f7fb;
    color: #3444db;
    font-size: var(--fz-sm);

}

.payment-tips-icon {
    font-size: var(--fz-xl);
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.payment-section-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
}

.payment-section-item {
    width: calc(100% - 40px);
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 20px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    cursor: default;
    margin-bottom: 10px;
    position: relative;
}

.payment-section-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: all 0.2s ease;
}

.payment-section-item:hover {
    border-color: #cbd5e1;
    background-color: #fafafa;
}

.payment-section-item.selected::before {
    border-color: var(--color-brand);
}

.payment-section-item.selected {
    border-color: #e5e7eb;
}

.payment-section-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pay-sectop-left {
    display: flex;
    align-items: center;
    gap: 12px;
}


.pay-sectop-left>div:first-child {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #9ca3af;
    background-color: transparent;
    transition: all 0.15s;
    position: relative;
    box-sizing: border-box;
}


.payment-section-item.selected .pay-sectop-left>div:first-child {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}

.payment-section-item.selected .pay-sectop-left>div:first-child::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

.payment-method-text {
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
}

 

.payment-icon {
      display: flex;
    align-items: center;
    justify-content: space-between;
}


.payment-section-item .payment-icon-img {
    width: 60px;
    height: 32px;
    object-fit: contain;
}


.paymetn-section-bottom{
    width: 100%;
    margin-top: 20px;
}

.payment-tip {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  margin: 16px 0;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.coupon-pay-top-box {
    padding: 20px;
    background-color: #fff;
    color: var(--color-brand);
 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    margin-top: 20px;
}

.coupon-pay-top-title{
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
}

.coupon-pay-top-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--fz-sm);
}

.coupon-pay-icon-ticket {
    font-size: var(--fz-md);
    margin-right: 5px;
}

.coupon-right-icon-tran{
 
    font-size: var(--fz-xl);
    color: var(--color-fg-muted) !important;
}
 .jump-pay-top-box{
    padding: 20px;
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 20px;
    border-radius: 16px;
 }
 
.jump-pay-top-label {
  width: 100%;
    font-size: var(--fz-sm);
    color: var(--color-fg-muted);
    margin-bottom: 10px;
    gap: 4px;               /* 元素之间的间距 */
}

.jump-pay-top-label > a {
    color: var(--color-brand);
    text-decoration: underline;
    white-space: nowrap;     
}
 .jump-btn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--color-surface);
    background-color: var(--color-brand);
    font-size: var(--fz-md);
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
 }

  
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0 !important;
}

li {
    list-style: none;
}

p {
    margin-bottom: 0 !important;
    padding: 0;
}

.order-pay{
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 20px 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 网格布局 - 左右两列 */
.order-pay-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

/* 左侧内容区 */
.order-pay-page-grid-left {
    background-color: transparent;
}
.order-pay-page-grid-right {
 
    height: fit-content;
}

.order-pay .order-tips-box{
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 768px) {
    .order-pay-page-grid {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    .order-pay-page-grid-left{
        width: 100%;
    }
    .order-pay-page-grid-right{
        width: 100%;
        padding: 0px !important;
    }
   }

.order-payment-status-box{
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.orderPaymentStatus-top-circle{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgb(230, 247, 242);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.orderPaymentStatus-top-circle-pending{
    background-color: #eef6ff;
}

.orderPaymentStatus-top-circle-inner-circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #28a745;
    color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

 .orderPaymentStatus-title{
    font-size: var(--fz-5xl);
    font-weight: var(--fw-semibold);
    
 }

 .orderPaymentStatus-label{
    white-space: nowrap;
    font-size: var(--fz-md);
    color: var(--color-fg-muted);
    margin-top: 10px;
 }

 .orderPaymentStatus-label-span{
    color: var(--color-fg);

 }

.orderPaymentStatus-spinner{
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(22, 119, 255, 0.15);
}

.orderPaymentStatus-spinner-arc{
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #1677ff;
    animation: orderPaymentStatusSpin 1s linear infinite;
}

@keyframes orderPaymentStatusSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

 

.circle-label-img{
    flex-shrink: 1;
    width: 40px;
    height: 40px;

    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.circle-label-img>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.order-payment-toDo-box{
    padding: 0px 20px;
    background: var(--color-surface);
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.order-payment-toDo-block{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

.order-payment-toDo-list{
    margin-left: 20px;
}



.order-payment-toDo-title{
    font-size: var(--fz-sm);
}

.order-payment-toDo-label{
    color: var(--color-fg-muted);
    font-size: var(--fz-xs);
    width: 100%;
}
.couponPointsContent{
    padding: 20px;
    border-radius: 12px;
    background-color: var(--color-surface);
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.couponPointsContent-title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.couponPointsContent-title-label{
    font-size: var(--fz-md);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin-left: 8px;
    position: relative;
    top: 2px;
}


 .couponPointsContent-ul{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding: 10px 10px;
    background-color: #fafafa;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
 }
 .couponPointsContent-ul>span{
    font-size: var(--fz-sm);
    color: var(--color-fg);
 }

 .couponPointsContent-ul-p-red{
    font-size: var(--fz-md);
    color: var(--color-danger);
 }

 .couponPointsContent-label{
    width: 100%;
    font-size: var(--fz-sm);
    color: var(--color-fg-muted);
    margin-bottom: 10px;
 }

 
.manageOrder {
    padding: 20px;
    border-radius: 12px;
    background-color: var(--color-surface);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.manageOrder>h4 {
    width: 100%;
    text-align: left;
}

.manageOrder-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    margin-top: 10px;
}

.manageOrder-block-btn {
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #ffffff;
    background-color: var(--color-brand);
}

.manageOrder-block-btn>span {
    margin-left: 8px;
    font-size: var(--fz-sm);
}

.manageOrder-block-btn-white{
    background-color: #ffffff;
    color: var(--color-brand);
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0 !important;
}

li {
    list-style: none;
}

p {
    margin-bottom: 0 !important;
    padding: 0;
}

.orderpay-status{
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 20px 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 网格布局 - 左右两列 */
.orderpay-status-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

/* 左侧内容区 */
.orderpay-status-page-grid-left {
    background-color: transparent;
}
.orderpay-status-page-grid-right {
 
    height: fit-content;
}


@media (max-width: 768px) {
    .orderpay-status-page-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .orderpay-status-page-grid-left{
        width: 100%;
    }
    .orderpay-status-page-grid-right{
        width: 100%;
    }
}

.help-center-page {
  width: 100%;
  min-height: 95vh;
  background: #ffffff;
}

/* Banner 区域 */
.help-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 270px;
  /* 保留原结构，但换成冷色调渐变 */
  background: radial-gradient(30% 40% at 15% 40%, rgba(200, 220, 255, 0.2) 0%, transparent 60%),
    radial-gradient(25% 35% at 88% 20%, rgba(180, 200, 255, 0.15) 0%, transparent 60%),
    linear-gradient(125deg, #1a2a4a 0%, #2c3f66 50%, #4a6a8a 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* 底层山丘 —— 最远处（浅蓝灰色） */
.help-banner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background: rgba(100, 130, 170, 0.4);
  clip-path: polygon(
    0% 100%,
    0% 45%,
    6% 38%,
    12% 32%,
    18% 28%,
    25% 25%,
    32% 24%,
    40% 26%,
    48% 30%,
    56% 32%,
    64% 30%,
    72% 26%,
    80% 24%,
    88% 28%,
    94% 34%,
    100% 38%,
    100% 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* 中层山丘 —— 主轮廓（深蓝灰） */
.help-banner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, rgba(35, 55, 85, 0.6), rgba(55, 85, 115, 0.3));
  clip-path: polygon(
    0% 100%,
    0% 68%,
    5% 62%,
    12% 55%,
    20% 50%,
    28% 47%,
    36% 45%,
    44% 47%,
    52% 51%,
    60% 53%,
    68% 50%,
    76% 46%,
    84% 44%,
    92% 50%,
    100% 55%,
    100% 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* 前景沙地 —— 最近处（最深色） */
.help-banner .sand-foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(to top, rgba(25, 40, 65, 0.7), rgba(45, 65, 95, 0.4));
  clip-path: polygon(
    0% 100%,
    0% 58%,
    12% 52%,
    28% 62%,
    42% 55%,
    58% 60%,
    72% 52%,
    86% 58%,
    100% 50%,
    100% 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* 月亮光晕 —— 替代之前的太阳 */
.help-banner .moon-glow {
  position: absolute;
  top: 15%;
  right: 12%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(220, 235, 255, 0.5) 0%, rgba(150, 180, 220, 0.2) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

/* 增加一些星光点缀 */
.help-banner .stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 2px at 20% 30%, white, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 60% 15%, white, rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 85% 45%, white, rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 40% 55%, white, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 10% 70%, white, rgba(0, 0, 0, 0));
  background-repeat: no-repeat;
  background-size: 200px 200px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* 确保内容在最上层 */
.help-banner > *:not(.sand-foreground):not(.moon-glow):not(.stars) {
  position: relative;
  z-index: 10;
}

.help-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
}

.help-banner-jump-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  width: 100%;
}

.help-banner-jump-item {
  padding: 16px 20px;
  height: 93px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg);
  background: #ffffff;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.help-center-jump-left h3 {
  margin-bottom: unset !important;
}

.help-banner-title {
  margin: 0 0 30px;
  color: #ffffff;
  font-size: 32px !important;
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  text-align: center;
}

.help-banner-bigbox {
  width: 100%;
  /* max-width: 1280px;
  height: 220px;
  background-color: #f5f5f5; */

  /* max-width: 680px; */
}

.help-banner-bigbox .help-category-title {
  color: #ffffff;
}

.help-banner-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;

  height: 44px;
  padding: 6px 12px 6px 16px;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  max-width: 1040px;
}

.help-banner-search-input {
  flex: 1;
  height: 100%;
  padding: 0;
  color: #333333;
  font-size: 14px;
  background: transparent;
  border: none;
  outline: none;
}

.help-banner-search-input::placeholder {
  color: #c9c9c9;
}

.help-banner-search-btn {
  min-width: 58px;
  height: 30px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-brand);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-banner-search-btn:hover:not(:disabled) {
  opacity: 0.92;
}

.help-banner-search-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.help-banner-search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.help-banner-clear-btn {
  min-width: 50px;
  height: 30px;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-banner-clear-btn:hover {
  background: #e5e7eb;
}

.help-banner-clear-btn:active {
  transform: scale(0.98);
}

/* 容器 */
.help-center-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* FAQ 区域 */
.help-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 50px 0 0;
}

.help-content-title {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 20px;
  color: #111827;
  font-size: 24px;
  font-weight: 600;
}

.help-search-count {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 8px;
}

.help-content-list {
  width: 100%;
}

.help-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6b7280;
}

.help-search-empty p {
  margin: 0 0 20px;
  font-size: 16px;
}

.help-clear-search-btn {
  padding: 10px 24px;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--color-brand);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.help-clear-search-btn:hover {
  background: var(--color-brand);
  color: #ffffff;
}

/* 分类区域 */
.help-category-section {
  margin: 60px auto 60px;
}

.help-category-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.help-category-panel {

  background: #fff;
}

.help-category-grid {

  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 36px 28px;
}

.help-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 132px;
  padding: 20px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-category-card i {
  font-size: 72px;
  margin-bottom: 10px;
  color: var(--color-brand);
}

.help-category-card:hover {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.help-category-thumb {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #f3f4f6;
}

.help-category-name {
  font-size: 18px;
  line-height: 24px;
  color: #111827;
  text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .help-banner {
    height: 200px;
  }

  .help-banner-content {
    padding: 0 16px;
  }

  .help-banner-title {
    width: 100%;
    text-align: center;
    margin-bottom: 18px;
  }

  .help-banner-jump-item {
    height: 80px !important;
  }

  .help-banner-jump-box {
    grid-template-columns: unset !important;
  }

  .help-banner-search-box {
    height: 40px;
    padding: 5px 10px 5px 14px;
  }

  .help-banner-search-input {
    font-size: 16px;
    width: calc(100% - 65px);
  }

  .help-banner-search-btn {
    min-width: 50px;
    height: 28px;
    font-size: 12px;
  }

  .help-banner-clear-btn {
    min-width: 44px;
    height: 28px;
    font-size: 12px;
  }

  .help-center-container {
    padding: 0 16px;
  }

  .help-faq {
    margin: 30px 0 0;
  }

  .help-category-panel {
    border: none !important;
  }

  .help-content-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .help-category-section {
    margin: 40px auto 60px;
  }

  .help-category-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .help-category-grid {
    grid-template-columns: unset !important;
    gap: 20px 16px;
  }

  .help-category-card {
    min-height: 80px;
    padding: 16px 12px;
    flex-direction: row !important;
  }

  .help-category-card i {
    margin-right: 12px;
    margin-bottom: unset !important;
    font-size: 48px !important;
  }

  .help-category-thumb {
    width: 56px;
    height: 56px;
    margin-bottom: unset !important;
    margin-right: 12px;
    border-radius: 12px;
  }

  .help-category-name {
    font-size: 14px;
    line-height: 20px;
  }

  .help-search-empty {
    padding: 40px 16px;
  }

  .help-search-empty p {
    font-size: 14px;
  }

  .help-clear-search-btn {
    padding: 8px 20px;
    font-size: 13px;
  }
}
.mesInfoCard {
  padding-top: 30px;
  padding-bottom: 30px;
  transition: background-color 0.3s ease;
}

.mesInfoCard.bg-white {
  background-color: #ffffff;
}

.mesInfoCard.bg-light-gray {
  background-color: #fafafa;
}

.mesInfoCard:last-child {
  margin-bottom: 0;
}

.mesInfoCard-title {
  text-align: center;
  font-size: var(--fz-4xl);
}

.mesInfoCard-subtitle {
  width: 100%;
  text-align: center;
  line-height: 2;
  margin-bottom: 30px !important;
  color: #5c6b80;

}

.mesInfoCard:nth-child(1) .mesInfoCard-subtitle{

  text-indent: 20px;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  word-break: break-word;
  margin-bottom: 0px !important;

 

}

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.history-section {
  width: 100%;
  padding: 60px 0 80px;
  position: relative;
}

.history-empty-wrap {
  max-width: 500px;
  margin: 0 auto;
}

.history-empty-block {
  width: 100%;
  min-height: 280px;
  border: 2px dashed rgba(34, 164, 93, 0.3);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -12px rgba(34, 164, 93, 0.1);
  position: relative;
  overflow: hidden;
}

.history-empty-block::before {
  content: "⏳";
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 32px;
  color: #22a45d;
  opacity: 0.1;
  transform: rotate(-15deg);
}

.history-empty-block::after {
  content: "📅";
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 40px;
  color: #22a45d;
  opacity: 0.1;
  transform: rotate(10deg);
}

.history-empty-plus {
  font-size: 48px;
  color: #22a45d;
  opacity: 0.3;
  position: relative;
  z-index: 1;
}

/* 时间轴容器 */
.history-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 70px;
  row-gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 40px;
}

/* ==================== 流光动画时间轴线 ==================== */
.history-timeline::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(174, 230, 191, 0.9) 0%,
      rgba(34, 164, 93, 1) 20%,
      rgba(67, 185, 106, 0.95) 40%,
      rgba(34, 164, 93, 1) 60%,
      rgba(174, 230, 191, 0.9) 80%,
      rgba(34, 164, 93, 1) 100%);
  background-size: 100% 220px;
  animation: history-line-flow 4s linear infinite;
  z-index: 0;
  box-shadow:
    0 0 0 1px rgba(67, 185, 106, 0.04),
    0 0 18px rgba(67, 185, 106, 0.1);
}

/* 时间轴线流光动画 */
@keyframes history-line-flow {
  0% {
    background-position: 0 0;
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.06);
  }

  100% {
    background-position: 0 220px;
    filter: brightness(1);
  }
}

/* 时间轴光晕效果 */
.history-timeline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 164, 93, 0.05), transparent 18%),
    radial-gradient(circle at 82% 78%, rgba(34, 164, 93, 0.04), transparent 20%);
  z-index: 0;
}

/* 时间轴项目 */
.history-timeline-item {
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: calc(0.1s * var(--i, 0));
}

.history-timeline-item.left {
  grid-column: 1;
}

.history-timeline-item.right {
  grid-column: 2;
  margin-top: 100px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-timeline-card-wrap {
  position: relative;
}

/* 时间轴圆点 */
.history-timeline-dot {
  position: absolute;
  top: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22a45d 0%, #1a7a45 100%);
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 4px rgba(34, 164, 93, 0.15),
    0 0 20px rgba(34, 164, 93, 0.3);
  z-index: 3;
  transition: all 0.3s ease;
  animation: history-dot-breath 2.2s ease-in-out infinite;
}

/* 圆点呼吸动画 */
@keyframes history-dot-breath {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(34, 164, 93, 0.15),
      0 0 20px rgba(34, 164, 93, 0.3);
  }

  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 8px rgba(34, 164, 93, 0.25),
      0 0 30px rgba(34, 164, 93, 0.5);
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(34, 164, 93, 0.15),
      0 0 20px rgba(34, 164, 93, 0.3);
  }
}

.history-timeline-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(34, 164, 93, 0.1);
  z-index: -1;
  transition: all 0.3s ease;
}

.history-timeline-item:hover .history-timeline-dot::before {
  width: 45px;
  height: 45px;
}

.history-timeline-item.left .history-timeline-dot {
  right: -44px;
}

.history-timeline-item.right .history-timeline-dot {
  left: -44px;
}

/* 卡片 */
.history-timeline-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 32px;
  padding: 28px;
  border: 1px solid rgba(34, 164, 93, 0.15);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.1),
    0 8px 24px -6px rgba(34, 164, 93, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.history-timeline-card:hover {
  box-shadow:
    0 30px 60px -12px rgba(34, 164, 93, 0.25),
    0 12px 32px -8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(34, 164, 93, 0.3);
  transform: translateY(-4px);
}

/* 卡片背景装饰 */
.history-timeline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 164, 93, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(34, 164, 93, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg,
      rgba(34, 164, 93, 0.02) 0px,
      rgba(34, 164, 93, 0.02) 2px,
      transparent 2px,
      transparent 8px);
  z-index: 0;
  border-radius: inherit;
}

/* 流光扫光效果 */
.history-timeline-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.history-timeline-card:hover::after {
  opacity: 1;
}

/* 年份标签 */
.history-timeline-year {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #22a45d 0%, #1a7a45 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 40px;
  box-shadow: 0 8px 16px -6px rgba(34, 164, 93, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
  letter-spacing: 0.5px;
  overflow: hidden;
}

/* 年份流光效果 */
.history-timeline-year::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
}

.history-timeline-card:hover .history-timeline-year::before {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

/* 标题 */
.history-timeline-card-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: #1e2f23;
  line-height: 1.35;
  position: relative;
  z-index: 2;
  letter-spacing: -0.3px;
}

.history-timeline-card-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 50px;
  height: 2px;
  background: #22a45d;
  opacity: 0.3;
  transition: width 0.3s ease;
}

.history-timeline-card:hover .history-timeline-card-title::after {
  width: 100%;
  opacity: 0.5;
}

/* 描述 */
.history-timeline-card-desc {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6f64;
  position: relative;
  z-index: 2;
  padding-left: 16px;
  border-left: 2px solid rgba(34, 164, 93, 0.2);
}

/* 媒体区域 */
.history-timeline-media {
  margin: 20px 0 0;
  position: relative;
  z-index: 2;
}

.history-timeline-media-image-wrap {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f0f7f3;
  box-shadow: 0 15px 25px -10px rgba(34, 164, 93, 0.15);
  border: 1px solid rgba(34, 164, 93, 0.1);
  position: relative;
}

.history-timeline-media-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 164, 93, 0.1) 0%, transparent 50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.history-timeline-card:hover .history-timeline-media-image-wrap::before {
  opacity: 1;
}

.history-timeline-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.history-timeline-card:hover .history-timeline-media-image {
  transform: scale(1.05);
}

/* 标签 */
.history-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}

.history-timeline-tag {
  padding: 6px 16px;
  background: rgba(34, 164, 93, 0.08);
  backdrop-filter: blur(4px);
  color: #22a45d;
  font-size: 13px;
  font-weight: 500;
  border-radius: 30px;
  border: 1px solid rgba(34, 164, 93, 0.15);
  transition: all 0.2s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.history-timeline-tag::before {
  content: "#";
  margin-right: 4px;
  opacity: 0.5;
}

.history-timeline-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.history-timeline-tag:hover::after {
  transform: translateX(100%);
}

.history-timeline-tag:hover {
  background: #22a45d;
  color: #ffffff;
  border-color: #22a45d;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(34, 164, 93, 0.4);
}

/* 连接线 */
.history-timeline-item.left .history-timeline-card-wrap::before {
  content: "";
  position: absolute;
  top: 40px;
  right: -35px;
  width: 35px;
  height: 2px;
  background: linear-gradient(90deg, #22a45d 0%, rgba(34, 164, 93, 0.1) 100%);
  z-index: 1;
  border-radius: 2px;
}

.history-timeline-item.right .history-timeline-card-wrap::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -35px;
  width: 35px;
  height: 2px;
  background: linear-gradient(270deg, #22a45d 0%, rgba(34, 164, 93, 0.1) 100%);
  z-index: 1;
  border-radius: 2px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .history-section {
    padding: 0px !important;
  }

  .history-timeline-media-image-wrap {
    border-radius: 8px;
  }

  .history-timeline {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0 40px 0 !important;
  }

  /* 移动端时间轴线 - 放置在最左侧 */
  .history-timeline::before {
    left: 5px;
    transform: none;
    top: 30px;
    bottom: 30px;
  }

  .history-timeline-item.left .history-timeline-card-wrap::before,
  .history-timeline-item.right .history-timeline-card-wrap::before {
    display: none;
  }

  .history-timeline-item.left,
  .history-timeline-item.right {
    grid-column: 1;
    margin-top: 0;
  }

  .history-timeline-item:not(:first-child)  .history-timeline-dot{
    top: -21px;
  }

  .history-timeline-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(34, 164, 93, 0.1);
    z-index: -1;
    transition: all 0.3s ease;
  }

  .history-timeline-item:hover .history-timeline-dot::before {
    width: 30px;
    height: 30px;
  }

  .history-timeline-dot {
    left: 0px !important;
    right: auto !important;
    top: 0px;
    width: 16px;
    height: 16px;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(34, 164, 93, 0.15);
  }

  .history-timeline-card {
    position: relative !important;
    left: 10px !important;
    padding: 12px !important;
    border-radius: 8px;
    margin-left: 5px !important;
  }

  .history-timeline-year {
    font-size: 14px;
    padding: 6px 18px;
  }

  .history-timeline-card-title {
    font-size: 22px;
  }

  .history-timeline-card-desc {
    font-size: 14px;
    padding-left: 12px;
  }

  .history-timeline-tag {
    padding: 5px 14px;
    font-size: 12px;
  }

  .history-empty-block {
    min-height: 240px;
    border-radius: 28px;
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .history-timeline::before {
    left: 5px;
  }

  .history-timeline-card {
    margin-left: 25px;
    padding: 18px;
  }

  .history-timeline-dot {
    left: 0px !important;
    width: 14px;
    height: 14px;
  }

  .history-timeline-year {
    font-size: 13px;
    padding: 5px 16px;
  }

  .history-timeline-card-title {
    font-size: 20px;
  }

  .history-timeline-card-desc {
    font-size: 13px;
  }

  .history-empty-plus {
    font-size: 40px;
  }
}

@media (hover: none) {
  .history-timeline-card:hover {
    transform: none;
  }

  .history-timeline-card:hover .history-timeline-media-image {
    transform: none;
  }

  .history-timeline-tag:hover {
    background: rgba(34, 164, 93, 0.08);
    color: #22a45d;
    transform: none;
    box-shadow: none;
  }
}

.global-office-section {
  width: 100%;
  padding: 40px 0 60px;
  background: #f5faf8;
  position: relative;
}

.global-office-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


.global-office-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 164, 93, 0.15);
  box-shadow: 
    0 20px 40px -12px rgba(0, 0, 0, 0.1),
    0 8px 24px -6px rgba(34, 164, 93, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-office-card:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 30px 60px -12px rgba(34, 164, 93, 0.25),
    0 12px 32px -8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(34, 164, 93, 0.3);
}


.global-office-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 100% 0%, rgba(34, 164, 93, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(34, 164, 93, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, 
      rgba(34, 164, 93, 0.02) 0px, 
      rgba(34, 164, 93, 0.02) 2px,
      transparent 2px, 
      transparent 8px
    );
  z-index: 0;
  border-radius: inherit;
}


.global-office-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.global-office-card:hover::after {
  opacity: 1;
}

.global-office-card-inner {
  position: relative;
  z-index: 2;
  padding: 28px;
}


.global-office-country {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 40px;
  background: linear-gradient(135deg, #22a45d 0%, #1a7a45 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 16px -6px rgba(34, 164, 93, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 16px;
}


.global-office-city {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #1e2f23;
  letter-spacing: -0.3px;
  position: relative;
  /* display: inline-block; */
}

.global-office-city::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #22a45d;
  opacity: 0.3;
  transition: width 0.3s ease;
}

.global-office-card:hover .global-office-city::after {
  width: 100%;
  opacity: 0.5;
}

.global-office-name {
  font-size: 15px;
  color: #5b6f64;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 2px solid rgba(34, 164, 93, 0.2);
}


.global-office-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}


.global-office-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(34, 164, 93, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.global-office-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.global-office-item:hover::before {
  transform: translateX(100%);
}

.global-office-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(34, 164, 93, 0.3);
  box-shadow: 0 8px 20px -8px rgba(34, 164, 93, 0.15);
}


.global-office-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 164, 93, 0.1);
  color: #22a45d;
  font-size: 18px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(34, 164, 93, 0.15);
  transition: all 0.3s ease;
}

.global-office-item:hover .global-office-icon {
  background: #22a45d;
  color: #ffffff;
  transform: scale(1.05);
}


.global-office-item-content {
  min-width: 0;
  flex: 1;
}

.global-office-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #22a45d;
  margin-bottom: 4px;
  opacity: 0.8;
}

.global-office-value {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #1e2f23;
  word-break: break-word;
}

.global-office-value a {
  color: #1e2f23;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  display: inline-block;
}

.global-office-value a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #22a45d;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.global-office-value a:hover {
  color: #22a45d;
}

.global-office-value a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


@media (max-width: 992px) {
  .global-office-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}


@media (max-width: 768px) {
  .global-office-section {
    padding: 30px 0 40px;
  }

  .global-office-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0px !important;
  }

  .global-office-card {
    border-radius: 8px;
  }

  .global-office-card-inner {
    padding: 12px;
  }

  .global-office-city {
    font-size: 24px;
  }

  .global-office-name {
    font-size: 14px;
    margin-bottom: 16px;
    padding-left: 0px !important;
    border-left: none !important;
  }

  .global-office-item {
    padding: 12px 14px;
    border-radius: 8px !important;
  }

  .global-office-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .global-office-value {
    font-size: 13px;
  }
}

 


@media (hover: none) {
  .global-office-card:hover {
    transform: none;
    box-shadow: 
      0 20px 40px -12px rgba(0, 0, 0, 0.1),
      0 8px 24px -6px rgba(34, 164, 93, 0.08);
    border-color: rgba(34, 164, 93, 0.15);
  }

  .global-office-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(34, 164, 93, 0.15);
    box-shadow: none;
  }

  .global-office-item:hover .global-office-icon {
    background: rgba(34, 164, 93, 0.1);
    color: #22a45d;
    transform: none;
  }

  .global-office-value a:hover {
    color: #1e2f23;
  }

  .global-office-value a:hover::after {
    transform: scaleX(0);
  }
}
.site-banner {
  position: relative;
  height: 308px;

  background: #f5f5f5;
}

.site-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.site-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.site-banner-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.site-banner-bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.site-banner-inner {
  position: relative;
  height: 100%;
}

.site-banner-content {
  position: relative;
  z-index: 2;

  padding-top: 56px;
  margin: 0 auto;
}

.site-banner-title {
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: var(--fz-5xl);
  font-weight: 700;
  line-height: 1.2;
}

.site-banner-subDesc {
  width: 100%;
  margin: 8px 0 0;
  border: 0;
  resize: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.site-banner-search {
  display: flex;
  align-items: center;
  margin-top: 50px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  width: min(690px, 100%);
}

.site-banner-searchIcon i {
  font-size: 22px;
}

.site-banner-searchIcon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 48px;
}

.site-banner-searchInput {
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  font-size: 16px;
  color: #333;
  background: transparent;
}

.site-banner-searchBtn {
  width: 96px;
  height: 100%;
  border: 0;
  background: var(--color-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.site-banner-searchBtn:hover {
  opacity: 0.9;
}

.site-banner-searchBtn:active {
  opacity: 0.8;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .site-banner {
    height: 200px;
  }

  .site-banner-inner {
    padding: 0 16px;
  }

  .site-banner-content {
    width: 100%;
    padding-top: 40px;
  }

  .site-banner-title {
    font-size: 28px;
  }

  .site-banner-subDesc {
    font-size: 14px;
    line-height: 1.4;
  }

  .site-banner-search {
    margin-top: 15px;
    height: 40px;
  }

  .site-banner-searchIcon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 40px;
  }


  .site-banner-searchInput {
    /*font-size: 14px;*/
    width: calc(100% - 115px);
  }

  .site-banner-searchBtn {
    width: 72px;
    font-size: 14px;
  }
}

/* 吸顶搜索框样式 */
.site-banner-search-sticky {
  position: fixed;
  top: var(--gta-header-h) !important;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 998;
  padding: 10px 0;
}

.site-banner-search-sticky-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.site-banner-search-sticky .site-banner-search {
  margin-top: 0;
}

@media (max-width: 768px) {
  .site-banner-search-sticky .site-banner-search {
    border:1px solid var(--color-brand);
  }
}
.about-page {
  width: 100%;
  min-height: 100vh;
}


/* Banner区域 */
.about-banner {
  position: relative;
  height: 308px;
  overflow: hidden;
  background: #f5f5f5;
}

.about-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.about-banner-inner {
  position: relative;
  height: 100%;
  padding: 0 24px;
}

.about-banner-content {
  position: relative;
  z-index: 2;
  width: 680px;
  padding-top: 56px;
  margin: 0 auto;
  color: #ffffff;
}

.about-banner-name {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.about-banner-desc {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 搜索框 */
.about-banner-search {
  display: flex;
  align-items: center;
  margin-top: 18px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.about-banner-searchIcon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 48px;
  line-height: 48px;
  transform: translateY(-4px);
}

.about-banner-searchInput {
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  font-size: 16px;
  color: #333;
  background: transparent;
}

.about-banner-searchBtn {
  width: 96px;
  height: 100%;
  border: 0;
  background: var(--color-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.about-banner-searchBtn:hover {
  opacity: 0.9;
}

.about-banner-searchBtn:active {
  opacity: 0.8;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .about-banner {
    height: 200px;
  }

  .about-banner-inner {
    padding: 0 16px;
  }

  .about-banner-content {
    width: 100%;
    padding-top: 40px;
  }

  .about-banner-name {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .about-banner-desc {
    font-size: 14px;
    line-height: 1.4;
  }

  .about-banner-search {
    margin-top: 12px;
    height: 40px;
  }

  .about-banner-searchIcon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 40px;
    line-height: 40px;
  }

  .about-banner-searchInput {
    font-size: 14px;
  }

  .about-banner-searchBtn {
    width: 72px;
    font-size: 14px;
  }
}

/* 容器样式 */
.policy-layout-container {
  display: flex;
  min-height: calc(100vh - 120px);
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f5f5;
}

/* 左侧边栏 - 桌面端样式 */
.policy-layout-sidebar {
  width: 250px;
  background-color: white;
  padding: 24px 0;
}

/* 导航菜单 - 桌面端样式 */
.policy-layout-nav {
  display: flex;
  flex-direction: column;
}

/* 导航链接 - 桌面端样式 */
.policy-layout-nav-link {
  padding: 12px 24px;
  color: #666;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  display: block;
  cursor: pointer;
}

/* 激活状态 - 桌面端样式 */
.policy-layout-nav-link-active {
  color: #2fb26a;
  background-color: #e8f5e9;
  border-right: 3px solid #2fb26a;
  font-weight: 500;
}

/* 右侧内容区域 */
.policy-layout-content {
  flex: 1;
  background-color: white;
  padding: 32px;
  overflow: auto;
}

/* 骨架屏样式 */
.policy-skeleton {
  height: 24px;
  background-color: #f0f0f0;
  margin-bottom: 16px;
  border-radius: 4px;
  animation: pulse 0.2s infinite;
}

/* 动画 */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================== 移动端适配 ==================== */
@media screen and (max-width: 768px) {
  /* 容器改为垂直布局 */
  .policy-layout-container {
    flex-direction: column;
    min-height: calc(100vh - 80px);
  }

  /* 侧边栏改为顶部水平滚动条 */
  .policy-layout-sidebar {
    width: 100%;
    padding: 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: white;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 100;
    /* 隐藏滚动条但保留滚动功能 - 可选 */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* 美化滚动条 */
  .policy-layout-sidebar::-webkit-scrollbar {
    height: 3px;
  }

  .policy-layout-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .policy-layout-sidebar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  .policy-layout-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  /* 导航菜单改为水平布局 */
  .policy-layout-nav {
    flex-direction: row;
    gap: 0;
    padding: 0 12px;
  }

  /* 导航链接改为水平内联块 */
  .policy-layout-nav-link {
    display: inline-block;
    padding: 10px 16px;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 14px;
  }

  /* 激活状态 - 移动端样式 */
  .policy-layout-nav-link-active {
    border-right: none;
    border-bottom: 2px solid #2fb26a;
    background-color: transparent;
    color: #2fb26a;
  }

  /* 内容区域调整内边距 */
  .policy-layout-content {
    padding: 20px 16px;
  }

  /* 骨架屏高度调整 */
  .policy-skeleton {
    height: 20px;
    margin-bottom: 12px;
  }
}

/* 平板设备适配 (可选) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .policy-layout-sidebar {
    width: 220px;
  }

  .policy-layout-content {
    padding: 24px 20px;
  }

  .policy-layout-nav-link {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* 小屏手机适配 */
@media screen and (max-width: 480px) {
  .policy-layout-nav-link {
    padding: 8px 14px;
    font-size: 13px;
  }

  .policy-layout-content {
    padding: 16px 12px;
  }

  .policy-layout-container {
    min-height: calc(100vh - 60px);
  }
}

/* 如果希望完全隐藏滚动条但保留滚动功能（更简洁的样式） */
@media screen and (max-width: 768px) {

  .policy-layout-sidebar {
    scrollbar-width: none;
  }
  
  .policy-layout-sidebar::-webkit-scrollbar {
    display: none;
  }
 
}
.search-results {
  width: 100%;
  --card-track-item-h: auto;
}

.search-results-grid {
  display: grid;
  gap: 18px;
  align-items: stretch;
  grid-auto-rows: auto;
}

.search-results-item {
  position: relative;
}

.search-results-section{
  margin-bottom: 20px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-results-grid {
    gap: 12px;
  }
}

.normal-calendar {
  background: #fff;
  width: 100%;
  user-select: none;
  padding: 0px 0px 10px 0px;
  box-sizing: border-box;
  border-radius: 8px;
  --cal-pad: 15px;
  --cal-gap: 20px;
  --cell-size: 1fr;
}
.normal-calendar.mini{
  width: 320px;
}

.normal-calendar * {
  box-sizing: border-box;
}

.normal-calendar .normal-calendar-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-bottom: 8px;
}

.normal-calendar .normal-calendar-title {
  font-weight: 600;
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}

.normal-calendar .normal-calendar-nav {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.normal-calendar .normal-calendar-nav.is-hidden {
  visibility: hidden;
}

.normal-calendar .normal-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, var(--cell-size)));
  gap: 5px 0px;
  color: #151515;
}

.normal-calendar .normal-calendar-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
}

.normal-calendar .normal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, var(--cell-size)));
}

.normal-calendar .normal-calendar-cell-wrap {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.normal-calendar .normal-calendar-cell {
  cursor: pointer;
  border: unset;
  background: unset;
  text-align: center;
}

.normal-calendar .normal-calendar-cell--empty {
  background: transparent;
  border: none;
  pointer-events: none;
}

.normal-calendar .normal-calendar-day {
  font-size: 16px;
  font-weight: 500;
  color: #111;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  margin: 3px 0;
  display: inline-block;
  font-weight: bold;
}
.normal-calendar .normal-calendar-cell--disabled .normal-calendar-day:hover{
  background: unset;
}
.normal-calendar .normal-calendar-day:hover{
  background: var(--brand-100);
}

.normal-calendar .normal-calendar-day.is-active{
  color: white;
  background: var(--color-brand);
}

.normal-calendar .normal-calendar-label {
  font-size: 12px;
  line-height: 1;
  color: #6b7280;
}

.normal-calendar .normal-calendar-label--price {
  color: #16a34a;
  font-weight: 500;
}

.normal-calendar .normal-calendar-cell--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.normal-calendar .normal-calendar-cell--blackout {
  cursor: not-allowed;
  opacity: 0.55;
}

.normal-calendar .normal-calendar-cell--selected {
  /* background: var(--color-brand, #16a34a); */
  border-color: transparent;
  color: #fff;
}

.normal-calendar .normal-calendar-cell--selected .normal-calendar-day {
  color: #fff;
  font-weight: 900;
}

.normal-calendar .normal-calendar-cell--selected .normal-calendar-label {
  color: rgba(255, 255, 255, 0.92);
}

.normal-calendar .normal-calendar-cell--selected .normal-calendar-label--price {
  color: #fff;
  font-weight: 900;
}
/* 日期选项样式 */
.gta-search-page-sidebar-date-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gta-search-page-sidebar-date-section {
  margin-bottom: 0px;
}

.gta-search-page-sidebar-date-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  position: relative;
 
}

.gta-search-page-sidebar-date-section h3.has-selected {
  position: relative;
}

.gta-search-page-sidebar-date-section h3.has-selected .selected-indicator {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

.gta-search-page-date-option {
  position: relative;
  padding: 6px 16px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.gta-search-page-date-option:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* 选中状态 */
.gta-search-page-date-option.active {
  background-color: var(--color-brand);
  color: white;
  font-weight: 500;
}

/* 日历容器样式 */
.gta-search-page-date-calendar {
  margin-top: 12px;
 
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.date-label {
  font-size: 12px;
  color: #666;
}


@media screen and (max-width: 768px) {
  .gta-search-page-sidebar-date-section {
    margin-bottom: 30px;
  }
}

/* 价格范围选择器样式 */
.gta-search-page-price-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gta-price-slider-container {
  position: relative;
  height: 40px;
  padding: 10px 0;
}

.gta-price-slider-track {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 0;
}

.gta-price-slider-range {
  position: absolute;
  top: 12px;
  left: var(--min-position, 0%);
  width: var(--range-width, 100%);
  height: 4px;
  background-color: var(--color-brand);
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 1;
}

.gta-price-slider {
  position: absolute;
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  z-index: 2;
}

/* 滑块轨道样式 */
.gta-price-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-radius: 2px;
}

.gta-price-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-radius: 2px;
}

/* 滑块样式 */
.gta-price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  cursor: pointer;
  border: 1px solid var(--color-brand);
  background: white;
  border-radius: 50%;
  margin-top: -8px;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gta-price-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: var(--color-brand);
  border-radius: 50%;
  border: none;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gta-search-page-price-inputs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.gta-price-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  color: #333;
  text-align: center;
  box-sizing: border-box;
  max-width: 100px;
}

.gta-price-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.gta-search-page-price-inputs span {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}
/* 地点选项样式 */
.gta-search-page-sidebar-location-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gta-search-page-sidebar-location-section {
  margin-bottom: 24px;
}

.gta-search-page-sidebar-location-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  position: relative;
 
}

.gta-search-page-sidebar-location-section h3.has-selected {
  position: relative;
}

.gta-search-page-sidebar-location-section h3.has-selected .selected-indicator {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

.gta-search-page-location-option {
  position: relative;
  padding: 6px 16px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.gta-search-page-location-option:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* 选中状态 */
.gta-search-page-location-option.active {
  background-color: var(--color-brand);
  color: white;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .gta-search-page-sidebar-location-section {
    margin-bottom: 30px;
  }
}

/* 其他选项样式 */
.gta-search-page-sidebar-other-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gta-search-page-sidebar-other-section {
  margin-bottom: 24px;
}



.gta-search-page-sidebar-other-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  position: relative;
 
}

.gta-search-page-sidebar-other-section h3.has-selected {
  position: relative;
}

.gta-search-page-sidebar-other-section h3.has-selected .selected-indicator {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

.gta-search-page-other-option {
  position: relative;
  padding: 6px 16px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.gta-search-page-other-option:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* 选中状态 */
.gta-search-page-other-option.active {
  background-color: var(--color-brand);
  color: white;
  font-weight: 500;
}
/* 分页样式 */
.gta-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 32px;
 
 
}

.gta-pagination-info {
  font-size: 14px;
  color: #666;
}

.gta-pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gta-pagination-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.gta-pagination-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.gta-pagination-btn.active {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: white;
}

.gta-pagination-prev,
.gta-pagination-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.gta-pagination-prev:disabled,
.gta-pagination-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式分页样式 */
@media (max-width: 768px) {
  .gta-pagination {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .gta-pagination-info {
    order: 2;
  }

  .gta-pagination-buttons {
    order: 1;
  }
}
.gta-search-page-top {
  background-color: white;
  margin-bottom: 24px;
}

.gta-search-page-header {
  font-size: var(--fz-4xl);
  font-weight: var(--fw-semibold);
  color: #333;
  margin-bottom: 0px !important;
  text-align: left;
  padding: 16px;
}

.gta-search-page-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-top: 16px;
  padding-left: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.gta-search-page-filter-tabs {
  display: flex;
  gap: 8px;
}

.gta-search-page-filter-tab {
  padding: 0;
  height: 48px;
  background-color: white;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.gta-search-page-filter-tab:hover {
  border-color: transparent;
  color: var(--color-brand);
}

.gta-search-page-filter-tab.active {
  border-bottom: 2px solid var(--color-brand);
  color: var(--color-brand);
}

.gta-search-page-top .header-search-box {
  position: relative;
  width: 450px;
  flex: 1;
  padding: 16px;

  display: flex;
  align-items: center;
  overflow: hidden;
}

.gta-search-page-top .header-search-box input {
  width: calc(100% - 60px);
  height: 36px;
  padding: 6px 12px;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--color-border);
  font-size: 16px;
  color: var(--color-fg);
  background: var(--color-surface);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.gta-search-page-top .header-search-box input::placeholder {
  color: var(--color-fg-muted);
}

.gta-search-page-top .header-search-box input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.gta-search-page-top .header-search-box .header-search-btn {
  width: 60px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  padding: 6px 12px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  flex-shrink: 0;
  text-decoration: none;
  transition: background-color .2s ease;
  display: inline-flex;
  align-items: center;
  height: var(--hdr-ctl-h);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .gta-search-page-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gta-search-page-filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .gta-search-page-header {
    font-size: 20px;
  }

  .header-search-btn {
      border: 1px solid var(--color-brand);
  }


  .header-search-box {

    max-width: 100%;
  }
}


.gta-search-page-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 16px;
}

.gta-search-page-results-count {
  font-size: 14px;
  color: #666;
  order: 2;
}

.gta-search-page-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  order: 1;
}

.gta-search-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--color-brand);
  border-radius: 20px;
  font-size: 14px;
  color: var(--color-brand);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.gta-search-sort-btn:hover {
  background: var(--brand-100);;
}

.gta-search-sort-dropdown {
  min-width: 180px;
  padding: 8px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.gta-search-page-sort .gta-popover {
  background: transparent;
}

.gta-search-page-sort .gta-popover-main {
  padding: 0;
  background: transparent;
  box-shadow: none;
  min-width: auto;
}

.gta-search-page-sort .gta-popover-content {
  padding: 0;
}

.gta-search-sort-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.gta-search-sort-dropdown-item:hover {
  background: #f5f5f5;
}

.gta-search-sort-dropdown-item.active {
  background: var(--brand-100);
  color: var(--color-brand);
  font-weight: 600;
  position: relative;
}

.gta-search-sort-dropdown-item.active i {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 22px;
  position:absolute;
  right: 20px;
  top: 10px;
}

/* 抽屉内容样式 */
.gta-search-drawer-content {
  padding: 16px;
  overflow-y: auto;
  height: calc(100% - 80px); /* 减去底部按钮的高度 */
}

/* 抽屉底部样式 */
.gta-search-drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: white;
  border-top: 1px solid #e5e6eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gta-search-drawer-clear-btn {
  padding: 10px 20px;
  background-color: white;
  color: #666;
  border: 1px solid #e5e6eb;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gta-search-drawer-clear-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.gta-search-drawer-result-btn {
  padding: 10px 20px;
  background-color: var(--color-brand);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gta-search-drawer-result-btn:hover {
  background-color: var(--color-brand-dark);
}

.gta-search-drawer-result-btn.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.gta-search-drawer-result-btn.disabled:hover {
  background-color: #ccc;
}
.gta-search-page {
  padding: 20px 0;
  background-color: #f8f9fa;
}

/* 移动端筛选按钮 */
.gta-search-mobile-filter-btn {
  background-color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-brand);
  text-align: center;
  margin-bottom: 16px;
}

.gta-search-mobile-filter-btn:hover {
  background-color: var(--brand-100);
}



.gta-search-page-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gta-search-page-sort select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  color: #333;
}

.gta-search-page-content {
  display: flex;
  gap: 24px;
}

.gta-search-page-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gta-search-page-sidebar-location {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
}

.gta-search-page-sidebar-filters {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
}

.gta-search-page-sidebar-section {
  margin-bottom: 24px;
}

.gta-search-page-sidebar-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;

}

.gta-search-page-sidebar-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gta-search-page-sidebar-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}

/* 日期选项样式 */
.gta-search-page-sidebar-date-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


.gta-search-page-price-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gta-search-page-price-range input[type="range"] {
  width: 100%;
}

.gta-search-page-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gta-search-page-price-inputs input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.gta-search-page-results {
  flex: 1;
}

.gta-search-page-empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 骨架屏样式 */
.gta-search-page-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.gta-search-page-skeleton-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.gta-search-page-skeleton-image {
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 比例 */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.gta-search-page-skeleton-content {
  padding: 12px;
}

.gta-search-page-skeleton-title {
  height: 20px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.gta-search-page-skeleton-summary {
  height: 40px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.gta-search-page-skeleton-tags {
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .gta-search-page-sidebar-section {
    margin-bottom: 30px;
  }
  .gta-search-page-skeleton {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .gta-search-page-content {
    flex-direction: column;
  }

  .gta-search-page-sidebar {
    width: 100%;
    order: 1;
  }

  .gta-search-page-results {
    order: 2;
  }

  .gta-search-page-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gta-search-page-filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .gta-search-page-header {
    font-size: 20px;
  }
}

/* 响应式布局 */
@media (max-width: 992px) {
  .gta-search-page-content {
    flex-direction: column;
  }

  .gta-search-page-sidebar {
    width: 100%;
    order: 1;
  }

  .gta-search-page-results {
    order: 2;
  }
}

.not-found-page {
 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #ffffff;
}

.not-found-content {
  text-align: center;
  max-width: 600px;
}

.not-found-image {
  margin-bottom: 32px;
}

.not-found-image-img {
  max-width: 240px;
  width: 100%;
  height: auto;
}

.not-found-message {
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 600;
  color: #e74c3c;
}

.not-found-description {
  margin-bottom: 32px;
  font-size: 16px;
  color: #666666;
  line-height: 1.6;
}

.not-found-countdown {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-brand);
}

.not-found-countdown span {
  display: inline-block;
  min-width: 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand);
  margin: 0 4px;
}

.not-found-button {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.not-found-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.not-found-button:active {
  transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .not-found-page {
    min-height: 50vh;
    padding: 30px 16px;
  }

  .not-found-image {
    margin-bottom: 24px;
  }

  .not-found-image-img {
    max-width: 180px;
  }

  .not-found-message {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .not-found-description {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .not-found-countdown {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .not-found-countdown span {
    font-size: 20px;
    min-width: 20px;
  }

  .not-found-button {
    padding: 10px 24px;
    font-size: 14px;
  }
}


.not-found-content {
  text-align: center;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.not-found-code {
  font-size: 120px;
  font-weight: 700;
  color: var(--toastify-color-error);
  line-height: 1;
  margin-bottom: 20px;
}

.not-found-message {
  font-size: 32px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
}

.not-found-description {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 32px;
  line-height: 1.6;
}

.not-found-button {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: var(--color-brand);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.not-found-button:hover {
  background-color: var(--brand-800);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.not-found-button:active {
  transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .not-found-page {
    min-height: 50vh;
    padding: 30px 16px;
  }

  .not-found-code {
    font-size: 80px;
    margin-bottom: 16px;
  }

  .not-found-message {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .not-found-description {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .not-found-button {
    padding: 10px 28px;
    font-size: 14px;
  }
}

.evaluate-page {
  min-height: 100vh;
  background: #fff;
  padding: 40px 0;
}

.evaluate-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  padding: 0 24px;
}

/* 左侧表单区域 */
.evaluate-form-section {
  max-width: 700px;
}

.form-header {
  margin-bottom: 32px;
}

.form-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.required {
  color: #ff4d4f;
}

.rating-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-section.overall-rating {
  margin-bottom: 24px;
}

.rating-value {
  font-size: 24px;
  font-weight: 600;
  color: #ff9500;
  min-width: 50px;
}

/* 四个评分维度 */
.dimension-ratings {
  margin-bottom: 32px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
}

.dimension-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.dimension-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dimension-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 80px;
}

.dimension-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.dimension-value {
  font-weight: 600;
  color: #ff9500;
  min-width: 40px;
  text-align: right;
}

/* 评论区域 */
.comment-section {
  margin-bottom: 32px;
}

.comment-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.textarea-wrapper {
  margin-bottom: 12px;
}

/* 标签区域 */
.tags-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 13px;
  color: #999;
  line-height: 28px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.evaluate-tag {
  display: inline-block;
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 14px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.evaluate-tag:hover {
  background: #e8e8e8;
}

.evaluate-tag.selected {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

/* 提交按钮 */
.submit-section {
  margin-top: 40px;
}
.submit-section .gta-btn--primary{
  width: 100%;
}

/* 右侧产品信息卡片 */
.product-card-section {
  position: sticky;
  top: 24px;
  height: fit-content;
}

.product-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.product-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-brand);
  border-radius: 12px;
  margin-bottom: 16px;
  background: #fff;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  margin-bottom: 6px;
}

.product-type {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.product-date {
  font-size: 13px;
  color: #999;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .evaluate-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .product-card-section {
    position: static;
  }
}

@media (max-width: 768px) {
  .evaluate-page {
    padding: 20px 0;
  }
  
  .evaluate-main {
    padding: 0 16px;
  }
  
  .form-title,
  .product-card-title {
    font-size: 18px;
  }
  
  .rating-section {
    gap: 8px;
  }
  
  .star-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .product-card {
    flex-direction: column;
  }
  
  .product-image {
    width: 100%;
    height: 120px;
  }
}

.gta-stars {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gta-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.gta-star--interactive {
  cursor: pointer;
}

.gta-star--interactive:hover {
  transform: scale(1.1);
}

.gta-star--large svg {
  width: 32px;
  height: 32px;
}

.gta-star--medium svg {
  width: 24px;
  height: 24px;
}

.gta-star--small svg {
  width: 20px;
  height: 20px;
}

.gta-upload-image {
  margin-bottom: 32px;
}

.gta-upload-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.gta-upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.gta-uploaded-image {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

/* 上传中状态 */
.gta-uploaded-image.uploading {
  border-color: #ff9500;
  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.2);
}

.gta-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gta-remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background 0.2s;
}

.gta-remove-image:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gta-remove-image:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 上传进度条覆盖层 */
.upload-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
}

/* 进度条背景 */
.upload-progress-bar {
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

/* 进度条填充 */
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff9500, #ffb84d);
  border-radius: 2px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 进度条动画 */
.upload-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

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

/* 进度百分比文字 */
.upload-progress-text {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gta-add-image {
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  transition: all 0.2s;
}

.gta-add-image:hover {
  border-color: #ff9500;
  background: #fffbe6;
}

.gta-add-image-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.gta-upload-hint {
  font-size: 13px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gta-uploaded-image,
  .gta-add-image {
    width: 70px;
    height: 70px;
  }
}

.help-search-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;

	h1 {
		margin-top: 32px;
		width: 100%;
		text-align: left;
		color: var(--color-surface);
	}
}

.help-search-content {
	margin-top: 32px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	width: 100%;
	height: 100%;
}

.help-search-category-left {
	width: 268px;
	flex: 0 0 268px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #e6e6e6;

}

.help-search-search {
	display: flex;
	align-items: center;

	border-radius: 6px;
	width: 250px;
	height: 40px;
	margin-bottom: 32px;
	position: relative;
	flex-shrink: 0;
	border: 1px solid #e6e6e6;

	input {
		width: calc(100% - 60px);
		height: 100%;
		margin-left: 2px;
	}
}

input,
button {

	outline: none;
	border: none;
	padding: 0 12px;
}

.help-search-search-btn {
	padding: 4px 12px;
	text-align: center;
	border-radius: 8px;
	background-color: var(--color-brand);
	color: #fff;
	font-size: 14px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	cursor: pointer;
}


.help-search-side {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 100%;
}

.help-search-category {
	flex: 1;
	margin-left: 60px;
	overflow: auto;
}

.search-category-content-item {

	margin-bottom: 16px;
}

.search-category-content-item-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 16px;
	color: #000000;
	cursor: pointer;
	white-space: nowrap;

	i {
		margin-right: 8px;
	}

	.search-category-content-item-content-item {
		padding: 8px 0;
		font-size: 14px;
		color: var(--color-fg);
	}

	.search-category-content-item-content-item:hover {
		color: var(--color-brand);
	}
}


.search-category-content-item-view-all {
	color: #2073f9;
	margin: 24px 0 20px;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
}

.help-search-title-desktop {
	margin: 40px 0 24px;
	font-size: 24px;
	font-weight: 600;
}



@media screen and (max-width: 768px) {
	.help-search-content {
		margin-top: 12px;
		flex-direction: column;
	}

	.help-search-category-left {
		display: none;
	}

	.help-search-category {
		width: 100%;
		margin-left: unset !important;
	}

	.help-search-title-mobile {
		margin: 24px 0 12px;
		font-size: 20px;
		font-weight: 600;
	}
}

/* 搜索结果样式 */
.help-search-results h3 {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 20px;
	color: #333;
}
.help-search-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.help-search-breadcrumb-item {
  /* margin: 0 4px; */
}

.help-search-breadcrumb-item:first-child,
.help-search-breadcrumb-item:nth-child(2),
.help-search-breadcrumb-item:nth-child(3) {
  color: var(--color-brand);
}

.help-search-breadcrumb-separator {
  margin: 0 4px;
  color: #999;
}

.help-search-breadcrumb-clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.help-search-breadcrumb-clickable:hover {
  opacity: 0.8;
}
.help-search-category-content {
  /* padding: 20px 0; */
}

.help-search-loading {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

.search-category-content-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.help-search-faq-detail {
  padding: 20px 0;
}

.help-search-faq-detail h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

.help-search-faq-answer {
  font-size: 14px;
  line-height: 1.6;
  color: #212121;
  white-space: pre-line;
}

.help-search-empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}



.help-search-faq-list h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.help-search-faq-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-search-faq-ul li {
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.help-search-faq-ul li i {
  flex-shrink: 0;
  font-size: 22px;
}

.help-search-faq-ul li span{
  font-size: 16px;
}


.help-search-faq-ul li:hover {
  color: var(--color-brand);
}

.help-search-faq-ul li:last-child {
  border-bottom: none;
}

/* 子分类样式 */
.help-search-faq-subcategory {
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  margin-top: 12px;
  margin-bottom: 8px;
  cursor: default;
}

.help-search-faq-subcategory:hover {
  color: #666;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .help-search-faq-subcategory {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #757575;
  }

  .search-category-content-item-content,
  .help-search-faq-list,
  .help-search-faq-subcategory {
    width: 100%;
  }

  .help-search-faq-item-div {
    width: 100%;
    border-bottom: 4px solid #e6e6e6;
  }

  .help-search-faq-ul li {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }

  .help-search-faq-ul li>span {
    width: calc(100% - 22px);
    display: block;
    order: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .help-search-faq-ul li i {
    flex-shrink: 0;
    order: 1;
    margin-right: unset !important;
  }

}
.help-search-faq-accordion {
 
  overflow: hidden;
  width: 100%;
}

.help-search-faq-acc-item {
  border-bottom: 1px solid #e6e6e6;
}

.help-search-faq-acc-item:last-child {
  border-bottom: none;
}

.help-search-faq-acc-q {
  width: 100%;
  padding: 16px;
  background: #fff;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex; 
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #212121;
  transition: all 0.3s ease;
}

.help-search-faq-acc-q:hover {
  background: #f9f9f9;
}

.help-search-faq-acc-icon {
  transition: transform 0.3s ease;
  font-size: 22px !important;
}

.help-search-faq-acc-icon--open {
  transform: rotate(180deg);
}

.help-search-faq-acc-a {
  padding: 0 16px 16px;
   
  animation: helpSearchSlideDown 0.3s ease;
}

.help-search-faq-acc-atext {
  font-size: 14px;
  line-height: 1.5;
  color: #212121;
}

.help-search-faq-acc-answer {
  margin-bottom: 12px;
  padding: 8px 0;
  line-height: 1.6;
}

.help-search-faq-acc-children {
 
}

.help-search-faq-acc-child {
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.3s ease;
  font-size: 14px;
}

.help-search-faq-acc-child:hover {
  color: var(--color-brand);
}

.help-search-faq-acc-child:last-child {
  border-bottom: none;
}

@keyframes helpSearchSlideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}


.icon-list-page .gta-icon{
  font-size: var(--control-h-lg);
}
.icon-list-page{
  display: flex;
}
.icon-item-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 15px 20px;
}
.icon-list-page>div{
  width: 50%;
}
.icon-item-list>div{
  width: 100px;
  text-align: center;
  margin: 5px 10px;
  font-size: var(--fz-sm);
}

/* 
  VideoPage 样式已拆分到各组件目录中，实现了模块化并避免了样式污染：
  - 竖屏短视频 (YouTube Shorts)：components/VerticalShorts/style.css
  - 横屏/普通视频：components/NormalVideo/style.css
  - 视频播放器：components/VideoPlayer/style.css
*/

/* VideoPlayer 样式 */

.videoedit-media {
  width: 100%;
}

.videoedit-player {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.videoedit-player-mobile,
.videoedit-player-desktop {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.videoedit-player-mobile {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 18px 0;
}

/* 手机模拟器样式 */
.gta-phone {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gta-phone__frame {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 44px;
  background: #eeeeee!important;
  padding: 14px;
}



.gta-phone__frame .gta-phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #eeeeee!important;
  position: relative;
  cursor: pointer;
}

.gta-phone__screen video {
  object-fit: cover;
  object-position: center;
}

/* 桌面端模拟器样式 */
.gta-desktop {
  display: grid;
  justify-items: center;
  row-gap: 10px;
}

.gta-desktop__frame {
  width: min(980px, 100%);
  border-radius: 16px;
  background: transparent;
  padding: 10px;
}

.gta-desktop__screen {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.gta-desktop__screen video {
  object-fit: contain;
  object-position: center;
}

.gta-desktop__stand {
  width: 140px;
  height: 26px;
  border-radius: 14px;
  background: rgba(15, 17, 21, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.gta-desktop__base {
  width: 220px;
  height: 14px;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.75);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.gta-plyr {
  width: 100%;
  height: 100%;
}

/* 播放按钮样式 */
.vertical-shorts-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  transition: all 0.3s ease;
}

.vertical-shorts-play-icon:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

/* 小屏右下角播放按钮 */
.small-screen-play-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.small-screen-play-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* 小窗播放按钮 */
.mini-window-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.mini-window-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* 阿里云播放器提示文字样式 */
.aliplayer-tooltip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.prism-player {
  background: transparent !important;
}

/* 阿里云播放器信息提示样式 */
.prism-player .prism-info-display {
  line-height: 0.9!important;
  color: #fff !important;
}

.prism-player .prism-setting-selector .header{
  display: none !important;
}

@media (max-width: 768px) {
  .videoedit-player {
    display: flex;
    justify-content: center;
  }
  .videoedit-player-mobile {
    padding: 12px 0;
    max-width: 520px;
  }
  
  .gta-phone__frame {
    width: min(360px, 100%);
  }
  
  .vertical-shorts-play-icon {
    width: 60px;
    height: 60px;
  }
  
  .vertical-shorts-play-icon svg {
    width: 36px;
    height: 36px;
  }
  
  .small-screen-play-btn {
    width: 30px;
    height: 30px;
  }
  
  .small-screen-play-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .aliplayer-tooltip {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
}

.vertical-shorts-nav-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-left: 24px;
  margin-bottom: 40px;
  z-index: 20;
}

.vertical-shorts-nav-btn {
  background: #f1f1f1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #030303;
}

.vertical-shorts-nav-btn:hover:not(:disabled) {
  background-color: var(--color-brand);
  transform: translateY(-2px);
}

.vertical-shorts-nav-btn:hover:not(:disabled) i {
  color: #fff;
}

.vertical-shorts-nav-btn:active:not(:disabled) {
  background-color: var(--color-brand);
}

.vertical-shorts-nav-btn:active:not(:disabled) i {
  color: #fff;
}

.vertical-shorts-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: #f5f5f5;
}

.vertical-shorts-nav-btn i {
  font-size: 20px;
  line-height: 1;
}

.vertical-shorts-progress {
  font-size: 14px;
  font-weight: 600;
  color: #606060;
  user-select: none;
  background: #f8f8f8;
  padding: 4px 12px;
  border-radius: 12px;
}

@media (max-width: 1200px) {
  .vertical-shorts-nav-buttons {
    margin-left: 16px;
  }
  
  .vertical-shorts-nav-btn {
    width: 40px;
    height: 40px;
  }
}

.gta-comment-list-container {
  padding: 24px 0;
  max-width: 100%;
}

.gta-comment-list-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gta-comment-item {
  padding: 0;
  position: relative;
}

.gta-comment-main{
  padding: 0;
  position: relative;
  display: flex;
}

.gta-comment-reply {
  padding-left: 0;
  display: flex;
}

/* 回复指示器样式 */
.gta-comment-reply-indicator {
  display: flex;
  flex-direction: column;
}

.gta-comment-reply-line-wrapper {
  flex: 1;
  position: relative;
  width: 30px;
}

/* 评论主体容器 */
.gta-comment-body {
  padding-left: 5px;
  flex: 1;
}

/* 头像区域包装器 */
.gta-comment-avatar-wrapper {
  display: flex;
  flex-direction: column;
}

.gta-comment-avatar-container {
  margin-bottom: 4px;
}

.gta-comment-avatar,
.user-avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-brand), var(--brand-400));

}

.gta-comment-avatar {
  object-fit: cover;
}

.gta-comment-content {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
}

.gta-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gta-comment-username {
  font-weight: 600;
  font-size: 13px;
  color: #0f0f0f;
  cursor: pointer;
}

.gta-comment-username:hover {
  color: #065fd4;
}

.gta-comment-time {
  font-size: 12px;
  color: #606060;
}

.gta-comment-text {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px 0;
  color: #0f0f0f;
  word-wrap: break-word;
  font-family: "Roboto", Arial, sans-serif;
}

.gta-comment-mention {
  color: #065fd4;
  font-weight: 500;
}

.gta-comment-actions {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.gta-comment-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-size: 12px;
  color: #606060;
  font-weight: 500;
  transition: background-color 0.2s;
  font-family: "Roboto", Arial, sans-serif;
}

.gta-comment-action-btn:hover {
  background-color: #f2f2f2;
}

.gta-comment-action-btn.active .gta-comment-icon{
  color: rgb(255, 217, 25);
}

.gta-comment-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.gta-comment-like-count {
  font-size: 12px;
}

.gta-comment-reply-btn {
  margin-left: 8px;
  padding: 8px 16px;
  background-color: #f2f2f2;
  color: #0f0f0f;
}

.gta-comment-reply-btn:hover {
  background-color: #e5e5e5;
}

.gta-comment-replies {
  display: flex;
  flex-direction: column;
}

/* 收起按钮包装器 */
.gta-comment-collapse-wrapper {
  display: flex;
}

.gta-comment-collapse-line {
  display: flex;
  flex-direction: column;
  width: 30px;
  position: relative;
}

.gta-comment-collapse-btn {
  margin-bottom: 10px;
}

.gta-comment-list-empty {
  text-align: center;
  padding: 40px 0;
  color: #606060;
  font-size: 14px;
}

.gta-comment-line{
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.gta-comment-line>div{
  position: absolute;
  left: 50%;
  width: 20px;
  height: 100%;
  border-left: 1px solid #e5e5e5;
}
.gta-comment-item-line{
  flex: 1;
}

.comment-bottom-border{
  height: 16px;
  border-radius: 0 0 0 16px;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
}
.comment-item-line{
  border-left: 1px solid #e5e5e5;
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  width: 20px;
}

.gta-comment-collapse-btn .gta-btn--text{
  color: #525252;
}

.gta-comment-collapse-btn .gta-btn--text:hover{
  color: #525252;
  background: unset;
}

.comment-add .comment-view{
  display: flex;
  margin-top: 20px;
  cursor: pointer;
  align-items: flex-start;
}

.comment-add .comment-view .comment-img{
  margin-right: 10px;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
}
.comment-add .comment-view .gta-text-view__character-count{
  display: none;
}
.comment-add .comment-input .gta-text-view__textarea{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: unset;
  border-bottom: 1px solid #e5e5e5;

  padding: 0 12px;
}
.comment-add .comment-btn{
  text-align: right;
  margin-bottom: 20px;
}
.comment-add .comment-btn .gta-btn--text:hover{
  color: #333333;
  background: unset;
}
.comment-add .comment-btn .gta-btn--text{
  color: #333333;
}

.gta-comment-actions .gta-btn--text{
  color: #333333;
}

.gta-comment-actions .gta-btn--text:hover{
  color: #333333;
  background: unset;
}

.gta-comment-actions .gta-btn--text.delete{
  color: #fd5656;
}

.gta-comment-content .delete{
  opacity: 0;
}
.gta-comment-content:hover .delete{
  opacity: 1;
}

/* 加载更多动画 */
.gta-comment-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
  color: #606060;
  font-size: 14px;
}

.gta-comment-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e5e5;
  border-top-color: #065fd4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 没有更多数据 */
.gta-comment-no-more {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 13px;
}

/* 评论列表容器淡入动画 */
.gta-comment-list-container {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 评论项进入动画 */
.gta-comment-item:not(.gta-comment-skeleton) {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gta-text-view {
  width: 100%;
  position: relative;
}

.gta-text-view__textarea {
  width: 100%;
  min-height: 28px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 28px;
  border: 1px solid #d9d9d9;
  resize: none;
  outline: none;
  transition: all 0.3s;
  font-family: inherit;
  box-sizing: border-box;
  overflow-y: hidden;
  display: block;
}

.gta-text-view__character-count {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  color: #bfbfbf;
  pointer-events: none;
}

.gta-text-view__textarea::placeholder {
  color: #bfbfbf;
}

/* 禁用状态 */
.gta-text-view__textarea:disabled {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 骨架屏基础样式 */
.gta-comment-skeleton .skeleton-avatar,
.gta-comment-skeleton .skeleton-text {
  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;
  }
}

.gta-comment-skeleton .skeleton-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.gta-comment-skeleton .skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.gta-comment-skeleton .skeleton-username {
  width: 120px;
  height: 16px;
  border-radius: 4px;
}

.gta-comment-skeleton .skeleton-time {
  width: 80px;
  height: 12px;
  border-radius: 4px;
}

.gta-comment-skeleton .skeleton-line-1 {
  width: 100%;
  height: 14px;
}

.gta-comment-skeleton .skeleton-line-2 {
  width: 80%;
  height: 14px;
}

.gta-comment-skeleton .skeleton-action {
  width: 60px;
  height: 32px;
  border-radius: 16px;
  margin-right: 8px;
}

.gta-action-buttons {
  display: flex;
  gap: 24px;
  z-index: 20;
}

/* 竖向布局 */
.gta-action-buttons.layout-vertical {
  flex-direction: column;
  align-items: center;
}

/* 横向布局 */
.gta-action-buttons.layout-horizontal {
  flex-direction: row;
  align-items: center;
}

.gta-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* 横向布局时，图标和文字可以并排，或者保持上下但整体横向排列。
   这里保持图标在上方，文字在下方，整体横向排列。
   如果需要图标和文字并排，可以取消下面注释 */
/*
.gta-action-buttons.layout-horizontal .gta-action-item {
  flex-direction: row;
  gap: 8px;
}
*/

.gta-icon-circle {
  width: 48px;
  height: 48px;
  background: #f1f1f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.gta-icon-circle.active {
  background-color: var(--color-brand);
}

.gta-icon-circle.active i {
  color: #fff;
}

.gta-icon-circle i {
  font-size: 22px;
  color: #030303;
  position: relative;
}

.mobile-video-container .gta-icon-circle>.gta-icon-home{
  font-size: 26px!important;
}

.gta-action-text {
  font-size: 12px;
  color: #606060;
  font-weight: 400;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .gta-icon-circle {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .gta-icon-circle i {
    color: #fff;
  }
  
  .gta-action-text {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/* VideoInfo 基础样式 */
.gta-about-jump-block{
  width: 100%;
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin-bottom: 40px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #fff;
 
}

.gta-about-title{
  display: block;
 
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
}

.gta-about-title:hover{
  color: var(--color-brand);
}

.gta-about-banner{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}


.gta-video-info-container {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  
}

.gta-video-info-container.is-side {
 
 
  width: 300px;
  flex-shrink: 0;
  margin-right: 60px;
  animation: fadeInVideoInfo 0.3s ease;
}

.gta-video-info-container.is-overlay {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 60px; 
  z-index: 10;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.gta-video-info-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gta-video-info-author-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gta-video-info-time {
  font-size: 13px;
  color: #606060;
  margin-top: 2px;
}

.is-overlay .gta-video-info-time {
  color: rgba(255, 255, 255, 0.8);
}

.is-overlay .gta-video-info-author {
  margin-bottom: 12px;
  pointer-events: auto;
}

.gta-video-info-extra {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.gta-video-info-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gta-video-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gta-video-info-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #f5f5f5;
  border-radius: 16px;
  font-size: 13px;
  color: var(--color-brand, #168247);
  font-weight: 500;
}

.gta-video-info-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  background: #f8f9fa;
  padding: 4px 10px;
  border-radius: 16px;
}

.gta-video-info-icon {
  font-style: normal;
  font-size: 14px;
}

.gta-video-info-summary {
  background: #f9f9f9;
  padding: 12px 16px;
  border-radius: 8px;
}

.gta-video-info-summary-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.gta-video-info-summary-content {
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: justify;
}

.gta-video-info-summary-content.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gta-video-info-summary-toggle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-brand);
  cursor: pointer;
  user-select: none;
}

.gta-video-info-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #eee;
}

.info-avatar-placeholder {
  width: 48px;
  height: 48px;
  font-size: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.info-avatar-placeholder {
  background: linear-gradient(135deg, #6b5bff, var(--color-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

.is-overlay .gta-video-info-avatar {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
}

.gta-video-info-author-name {
  font-weight: 600;
  font-size: 18px;
  color: #030303;
}

.is-overlay .gta-video-info-author-name {
  font-size: 16px;
  color: #fff;
}

.gta-video-info-follow-btn {
  background-color: var(--color-brand);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.is-overlay .gta-video-info-follow-btn {
  background: #fff;
  color: #000;
  padding: 6px 16px;
  border-radius: 18px;
}

.gta-video-info-follow-btn:hover {
  opacity: 0.9;
}

.gta-video-info-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #030303 !important;
  margin: 0;
}

.is-overlay .gta-video-info-title {
  font-size: 15px;
  font-weight: 400;
  color: #fff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.layout-portrait {

}


.layout-landscape {
  position: static !important; 
  width: 100% !important;
  margin-top: 16px;
  right: auto !important;
  bottom: auto !important;
}

.layout-landscape.is-side {
  position: static;
  width: 100%;
  animation: none;
}

@keyframes fadeInVideoInfo {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1200px) {
  .is-side {
    display: none; 
  }
}

@media (max-width: 768px) {
  .is-overlay {
    bottom: 40px; 
    right: 70px;
  }
}

.gta-vertical-shorts-container {
  position: fixed;
  inset: 0;
  background-color: #fff;
  z-index: 100;
  overflow: hidden;
}

.gta-vertical-shorts-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gta-vertical-shorts-content {
  width: 100%;
  position: relative;
  top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /*transition: transform 0.5s ease-out;*/
}
.portrait-video-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.gta-vertical-shorts-main-area {
  position: relative;
  height: 87vh;
  width: 100%;
  display: flex;
  align-items: flex-end;

  flex-shrink: 0;
  z-index: 2;
  margin-bottom: 2vh;
}

@media (max-width: 768px) {
  .gta-vertical-shorts-content {
    top: 0;
  }

  .gta-vertical-shorts-main-area {
    height: 100vh;
    margin-bottom: 2vh;
  }
}

.gta-vertical-shorts-video-section {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.gta-vertical-shorts-video-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.gta-video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.gta-vertical-shorts-next-peek {
  position: absolute;
  width: 100%;
  bottom: -90px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #1b1b1b 0%, #0b0b0b 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.gta-vertical-shorts-next-peek::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 90px at 20% 30%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
    radial-gradient(160px 120px at 80% 60%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 65%);
  opacity: 0.9;
}

.gta-vertical-shorts-next-peek::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}


.gta-vertical-shorts-actions {
  margin-left: 12px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  z-index: 20;
}

.gta-vertical-shorts-wrapper.comments-open {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gta-vertical-shorts-comment-drawer {

  width: 400px !important;
  height: 87vh !important;
  overflow: hidden !important;
  transform: translateX(100%);

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gta-vertical-shorts-comment-drawer.ant-drawer-open {
  transform: translateX(0);
  opacity: 1;
}

.gta-vertical-shorts-comment-drawer .ant-drawer-body {
  overflow-y: auto !important;
  padding: 0 !important;
  height: 100% !important;
}

@keyframes gtaVerticalShortsDrawerInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (min-width: 769px) {
  .gta-vertical-shorts-comment-drawer {
    will-change: transform, opacity;
  }
}




.gta-vertical-shorts-actions-wrapper {
  margin-left: 40px;

}

.gta-vertical-shorts-actions {
  position: absolute;
  right: -80px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  z-index: 20;
  transition: right 0.3s ease;
}

.comments-open .gta-vertical-shorts-actions {
  right: -60px;
}

.gta-vertical-shorts-icon-circle.active {
  background-color: var(--color-brand);
}

.gta-vertical-shorts-icon-circle.active i {
  color: #fff;
}





@media (max-width: 1200px) {
  .gta-vertical-shorts-info-side {
    display: none;
  }
}


.gta-vertical-shorts-video-section .videoedit-media,
.gta-vertical-shorts-video-viewport .videoedit-player,
.gta-vertical-shorts-video-viewport .videoedit-player-mobile,
.gta-vertical-shorts-video-viewport .gta-phone,
.gta-vertical-shorts-video-viewport .gta-phone__frame,
.gta-vertical-shorts-video-viewport .gta-phone__screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


.gta-vertical-shorts-actions {
  position: absolute;
  right: -80px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  z-index: 20;
}

.gta-vertical-shorts-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.gta-vertical-shorts-icon-circle {
  width: 48px;
  height: 48px;
  background: #f1f1f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.gta-vertical-shorts-icon-circle:hover {
  background-color: var(--color-brand);
}

.gta-vertical-shorts-icon-circle:hover i {
  color: #fff;
}

.gta-vertical-shorts-icon-circle i {
  font-size: 22px;
  color: #030303;
}

.gta-vertical-shorts-action-text {
  font-size: 12px;
  color: #606060;
  font-weight: 400;
}

.gta-vertical-shorts-nav-wrap {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
}

.gta-vertical-shorts-nav-wrap.comments-open {
  right: 24px;
}

@media (max-width: 768px) {
  .gta-vertical-shorts-container .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .gta-vertical-shorts-content {
    top: 0;
    height: 100vh;
    width: 100vw;
    aspect-ratio: auto;
  }

  .gta-vertical-shorts-main-area {
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: stretch;
    margin-bottom: 0;
    left: 0;
    will-change: transform;
  }

  .gta-vertical-shorts-wrapper {
    left: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gta-vertical-shorts-video-section {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
  }

  .gta-vertical-shorts-video-viewport {
    border-radius: 0;
    box-shadow: none;
  }

  .gta-vertical-shorts-next-peek {
    display: none;
  }

  .gta-vertical-shorts-actions-wrapper {
    position: absolute;
    right: 12px;
    top: 375px;
    margin: 0;
    z-index: 40;
  }

  .gta-vertical-shorts-video-viewport .gta-video-info-container.is-overlay {
    left: 16px !important;
    right: 88px !important;
    bottom: 24px !important;
  }

  .gta-vertical-shorts-comment-drawer {
    width: 100%;
    z-index: 200;
    right: 0;
    border-radius: 0;
  }

  .gta-vertical-shorts-content.comments-open {
    transform: none;
  }

  .gta-vertical-shorts-nav-wrap {
    display: none;
  }
}

/* 移动端抽屉遮罩层 */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.active {
  opacity: 1;
}

.mobile-drawer-overlay .mobile-drawer-component {
  width: 100%;
  max-width: 100%;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer-overlay.active .mobile-drawer-component {
  transform: translateY(0);
}

/* 加载动画 */
.gta-vertical-shorts-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 阿里云播放器错误 UI 自定义样式 */
.gta-vertical-shorts-video-viewport .custom-error-ui {
  /* 最外层容器样式 */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  text-align: center !important;
  margin: 0 auto !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000 !important;
}

.gta-vertical-shorts-video-viewport .prism-error-content {
  /* 错误消息显示区域 */
  font-size: 16px !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
}



.retry-button {
  margin-top: 20px !important;
  color: #fff !important;
  background-color: var(--color-brand) !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
}


.gta-vertical-shorts-wrapper .gta-drawer-body{
  padding: 0 16px;
}

.gta-drawer {
  position: absolute;
  top: 70px;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  z-index: 150;
  border-radius: 12px;
  overflow: hidden;
}

.gta-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gta-drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: #030303;
}

.gta-drawer-close-wrapper {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  background-color: transparent;
}

.gta-drawer-close-wrapper:hover {
  background-color: var(--color-brand);
}

.gta-drawer-close-wrapper:active {
  background-color: var(--color-brand);
}

.gta-drawer-header i.close {
  font-size: 20px;
  color: #606060;
  transition: color 0.2s;
}

.gta-drawer-close-wrapper:hover i.close,
.gta-drawer-close-wrapper:active i.close {
  color: #fff;
}

.gta-drawer-body {
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .gta-drawer {
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    border-radius: 0;
    z-index: 200;
  }
}

.gta-normal-video-page {
  display: flex;
  gap: 24px;
  padding: 16px;
  max-width: 1700px;
  margin: 0 auto;
  justify-content: center;
}

.gta-normal-video-main-content {
  flex: 1;
  max-width: 1280px;
}

.gta-normal-video-main-content > * {
  width: 100% !important;
  box-sizing: border-box;
}


.gta-normal-video-main-content .videoedit-media,
.gta-normal-video-main-content .videoedit-player,
.gta-normal-video-main-content .videoedit-player-desktop,
.gta-normal-video-main-content .gta-desktop,
.gta-normal-video-main-content .gta-desktop__frame {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gta-normal-video-sidebar {
  width: 400px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .gta-normal-video-page {
    flex-direction: column;
  }
  .gta-normal-video-sidebar {
    width: 100%;
  }
}

/* 只在PC端修改头部container的样式 */
@media (min-width: 1200px) {
  .header.header-video-page.header-video-landscape .header-inner.container {
    width: 100% !important;
    max-width: 1700px !important;
  }
}

/* 阿里云播放器错误 UI 自定义样式 */
.gta-normal-video-main-content .prism-ErrorMessage {
  /* 最外层容器样式 */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  text-align: center !important;
  max-width: 90% !important;
  margin: 0 auto !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000 !important;
}

.gta-normal-video-main-content .prism-error-content {
  /* 错误消息显示区域 */
  font-size: 16px !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
}

.gta-normal-video-main-content .prism-error-operation {
  /* 处理动作显示区域 */
  margin-top: 10px !important;
}

.gta-normal-video-main-content .prism-error-operation a {
  /* 错误操作链接 */
  color: #1890ff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.gta-normal-video-main-content .prism-error-operation a:hover {
  /* 错误操作链接 hover 效果 */
  text-decoration: underline !important;
}

.gta-normal-video-main-content .prism-detect-info {
  /* 其它信息显示区域 */
  margin-top: 10px !important;
  font-size: 12px !important;
  color: #999999 !important;
}

.gta-normal-video-main-content .gta-video-play-content{
  position: relative;
}

.gta-normal-video-main-content .gta-video-recommend-list{
  position: absolute;
  z-index: 1001;
  background: rgba(0, 0, 0);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.gta-normal-video-main-content .gta-recommend-video-item {
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.3s ease;
  background: rgba(0, 0, 0);
  top: 50%;
  position: relative;
  height: 0;
}
.gta-normal-video-main-content .gta-recommend-video-item:last-child {
  margin-right: 0;
}

.gta-normal-video-main-content .gta-recommend-video-item:hover a{
  background: rgb(255 255 255 / 10%);
}

.gta-normal-video-main-content .gta-recommend-video-item a{
  display: inline-block;
  margin-top: -50%;
  padding: 8px;
  border-radius: 8px;
}
.gta-normal-video-main-content .gta-recommend-video-item img {
  width: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio:16/9;
  border-radius: 8px;
  overflow: hidden;
}

.gta-normal-video-main-content .gta-recommend-video-title {
  margin-top: 8px;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
}
.gta-normal-video-main-content .gta-recommend-video-auth {
  margin-top: 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-align: left;
}
.gta-normal-video-main-content .gta-recommend-video-recency {
  margin-top: 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-align: left;
}

.gta-normal-video-main-content .gta-replay-button {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1001;
}

.gta-normal-video-main-content .gta-replay-button:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gta-normal-video-main-content .gta-replay-button svg {
  width: 20px;
  height: 20px;
}


/* 移动端适配 */
@media (max-width: 768px) {
  .gta-normal-video-page{
    padding: 0;
    height: calc(100vh - 50px);
    overflow-y: auto;
    display: block;
    position: relative;
    background: #000;
  }
  .gta-normal-video-page .gta-desktop__screen{
    border-radius: unset;
  }
  .gta-normal-video-page .gta-desktop__frame{
    border-radius: unset;
  }
  .gta-normal-video-page .videoedit-player-desktop{
    border-radius: unset;
  }
  .gta-normal-video-page .videoedit-player{
    border-radius: unset;
  }
  .gta-normal-video-page .gta-normal-video-main-content{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: #000000;
  }
  .gta-normal-video-page .gta-normal-video-sidebar{
    position: relative;
  }
  .gta-normal-video-page .mobile-comment{
    background-color: white;
    position: relative;
    padding-top: 20px;
  }
  .gta-normal-video-page .mobile-comment::before,.gta-normal-video-page .mobile-comment::after{
    content: "";
    position: absolute;
    background: black;
    top: 0;
    z-index: 1;
    width: 12px;
    height: 12px;
  }

  .gta-normal-video-page .mobile-comment::before{
    left: 0;
    -webkit-clip-path: path("M 0 0 L 0 12 A 12 12 0 0 1 12 0 L 0 0");
    clip-path: path("M 0 0 L 0 12 A 12 12 0 0 1 12 0 L 0 0");
  }
  .gta-normal-video-page .mobile-comment::after{
    right: 0;
    -webkit-clip-path: path("M 0 0 A 12 12 0 0 1 12 12 L 12 0 L 0 0");
    clip-path: path("M 0 0 A 12 12 0 0 1 12 12 L 12 0 L 0 0");
  }
  .gta-normal-video-page .gta-normal-video-sidebar{
    background-color: white;
    padding: 16px;
  }

  .gta-normal-video-page .mobile-comment{
    background-color: white;
    position: relative;
    padding: 16px;
    padding-top: 20px;
  }
  .gta-normal-video-page .gta-video-info-title{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    margin-bottom: 12px;
  }
  .gta-normal-video-page .gta-video-info-meta{
    display: flex;
  }
  .gta-normal-video-page .gta-video-info-tags{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 80%;
  }
  .gta-normal-video-page .more{
    text-decoration: underline;
    vertical-align: middle;
  }
  .gta-normal-video-page .gta-video-info-author-name{
    font-size: 16px;
  }
  .gta-normal-video-page .gta-video-mobile-component{
    margin-top: 10px;
  }
  .gta-normal-video-page .gta-video-info-comment{
    background: #f9f9f9;
    padding: 12px 16px;
    border-radius: 8px;
  }
  .gta-normal-video-page .gta-video-info-comment .video-info_input{
    background: #e1e1e1;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 30px;
    margin-top: 5px;
  }
  .gta-normal-video-page .video-mobile-loading{
    background-color: white;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .gta-normal-video-page .video-mobile-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1890ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .gta-landscape-actions-wrapper{
    width: 100%;
    overflow-x: auto;
    display: block;
  }
  .gta-landscape-actions-wrapper .gta-action-item{
    flex-direction: row;
    display: flex;
  }
  .gta-landscape-actions-wrapper .home,.gta-landscape-actions-wrapper .commont{
    display: none;
  }
  .gta-landscape-actions-wrapper .gta-action-item .gta-icon-circle{
    width: 30px;
    height: 30px;
  }
  .gta-landscape-actions-wrapper .gta-icon-review{
    font-size: 18px;
  }
  .gta-landscape-actions-wrapper .gta-action-text{
    word-break: keep-all;
    font-size: 14px;
    color: #222;
    text-shadow:unset;
  }
}

.gta-video-list-container {
  width: 100%;
}

.gta-video-list-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.gta-video-list-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gta-video-list-item {
  display: flex;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gta-video-list-item:hover {
  background-color: #f9f9f9;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.gta-video-list-thumbnail-wrapper {
  position: relative;
  width: 160px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  height: 90px;
}

.gta-video-list-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background-color: #f4f6f8;
}

.gta-video-list-thumbnail-wrapper.broken {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  height: 120px;
}

.gta-video-list-thumbnail-wrapper.broken::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.04),
    rgba(0,0,0,0.04) 6px,
    rgba(0,0,0,0.06) 6px,
    rgba(0,0,0,0.06) 12px
  );
}

.gta-video-list-thumbnail-wrapper.broken::after {
  content: "🖼️";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  opacity: 0.65;
  pointer-events: none;
}

.gta-video-list-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.gta-video-list-info {
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
}

.gta-video-list-author-info {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;

}

.gta-video-list-title {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gta-video-list-auth{
  font-size: var(--fz-xs);
  color: rgba(0,0,0,.7);
}
.gta-video-list-recency{
  font-size: var(--fz-xs);
  color: rgba(0,0,0,.7);
}

.gta-video-list-author-avatar {
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
  margin-right: 4px;
  overflow: hidden;
}

.gta-video-list-author {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.gta-vertical-shorts-wrapper{
  flex-direction: column !important;
}
.mobile-video{
  height: 100%;
  width: 100%;
}
.mobile-video-container{
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  touch-action: none;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.mobile-video-container .mobile-video-item{
  width: 100%;
  height: 100%;
  display: flex;
  background: #000000;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  flex-shrink: 0;
}

.mobile-video-container .video-content,.mobile-video-container .videoedit-media,.mobile-video-container .videoedit-media-container,.mobile-video-container .videoedit-player,.mobile-video-container .videoedit-player-mobile
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
.mobile-video-container .video-content .gta-phone{
  width: 100%;
  height: 100%;
  background: #000;
}
.mobile-video-container .video-content .gta-phone__frame{
  width: 100%;
  height: 100%;
  border-radius: unset;
  padding: 0;
  background: unset;
}

.mobile-video-container .video-content .gta-phone__screen{
  border-radius: unset;
  padding: 0;
  background: unset;
}
.mobile-video-container .video-content .prism-player video{
  left: 0;
  top: 0;
  transform: unset;
}

.mobile-video-container .video-seek-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

.mobile-video-container .video-seek-wrapper > * {
  pointer-events: auto;
}

.mobile-video-container .gta-vertical-shorts-actions-wrapper {
  position: absolute;
  right: 12px;
  bottom: max(6%,50px);
  margin: 0;
  z-index: 11;
  top: unset;
  align-items: center;
  width: 40px;
}

.mobile-video-container .gta-vertical-shorts-actions-wrapper .gta-action-text{
  font-size: 10px;
}

.mobile-video-container .mobile-video-muted{
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100;
  font-size: 14px;
  display: flex;
  background: black;
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
}
.mobile-video-container .mobile-video-muted .mobile-video-muted-text{
  margin-left: 10px;
}
.mobile-video-container .gta-action-buttons{
  gap: 12px;
}
.mobile-video-container .gta-action-item{
  gap: 4px;
}
.mobile-video-container .gta-icon-circle{
/*  width: 40px;*/
/*  height: 40px;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
/*.mobile-video-container .gta-icon-circle .gta-icon{*/
/*  font-size: 22px;*/
/*}*/
.mobile-video-container .mobile-video-loading{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

.mobile-comment-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  height: 100vh;
}

.mobile-comment-drawer {
  width: 100%;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.mobile-comment-drawer-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mobile-comment-drawer-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
}

.mobile-comment-drawer-handle {
  width: 40px;
  height: 4px;
  background-color: #d1d5db;
  border-radius: 2px;
  margin-top: 4px;
}

.mobile-comment-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 滚动条样式 */
.mobile-comment-drawer-content::-webkit-scrollbar {
  width: 4px;
}

.mobile-comment-drawer-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.mobile-comment-drawer-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.mobile-comment-drawer-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-video-container .mobile-video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  z-index: 11;
  color: #ffffff;
  padding-left:12px;
  padding-right:24px;
  padding-bottom: 50px;
}

.mobile-video-info .author {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.mobile-video-info .author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mobile-video-info .author-avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mobile-video-info .author-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.mobile-video-info .title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-video-info .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.mobile-video-info .tags span {
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 10px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.gta-normal-video-page {
  display: flex;
  gap: 24px;
  padding: 16px;
  max-width: 1700px;
  margin: 0 auto;
  justify-content: center;
}

.gta-normal-video-main-content {
  flex: 1;
  max-width: 1280px;
}

.gta-normal-video-main-content > * {
  width: 100% !important;
  box-sizing: border-box;
}


.gta-normal-video-main-content .videoedit-media,
.gta-normal-video-main-content .videoedit-player,
.gta-normal-video-main-content .videoedit-player-desktop,
.gta-normal-video-main-content .gta-desktop,
.gta-normal-video-main-content .gta-desktop__frame {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gta-normal-video-sidebar {
  width: 400px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .gta-normal-video-page {
    flex-direction: column;
  }
  .gta-normal-video-sidebar {
    width: 100%;
  }
}

/* 只在PC端修改头部container的样式 */
@media (min-width: 1200px) {
  .header.header-video-page.header-video-landscape .header-inner.container {
    width: 100% !important;
    max-width: 1700px !important;
  }
}

/* 阿里云播放器错误 UI 自定义样式 */
.gta-normal-video-main-content .prism-ErrorMessage {
  /* 最外层容器样式 */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  text-align: center !important;
  max-width: 90% !important;
  margin: 0 auto !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000 !important;
}

.gta-normal-video-main-content .prism-error-content {
  /* 错误消息显示区域 */
  font-size: 16px !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
}

.gta-normal-video-main-content .prism-error-operation {
  /* 处理动作显示区域 */
  margin-top: 10px !important;
}

.gta-normal-video-main-content .prism-error-operation a {
  /* 错误操作链接 */
  color: #1890ff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.gta-normal-video-main-content .prism-error-operation a:hover {
  /* 错误操作链接 hover 效果 */
  text-decoration: underline !important;
}

.gta-normal-video-main-content .prism-detect-info {
  /* 其它信息显示区域 */
  margin-top: 10px !important;
  font-size: 12px !important;
  color: #999999 !important;
}

.gta-normal-video-main-content .gta-video-play-content{
  position: relative;
}

.gta-normal-video-main-content .gta-video-recommend-list{
  position: absolute;
  z-index: 1001;
  background: rgba(0, 0, 0);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.gta-normal-video-main-content .gta-recommend-video-item {
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.3s ease;
  background: rgba(0, 0, 0);
  top: 50%;
  position: relative;
  height: 0;
}
.gta-normal-video-main-content .gta-recommend-video-item:last-child {
  margin-right: 0;
}

.gta-normal-video-main-content .gta-recommend-video-item:hover a{
  background: rgb(255 255 255 / 10%);
}

.gta-normal-video-main-content .gta-recommend-video-item a{
  display: inline-block;
  margin-top: -50%;
  padding: 8px;
  border-radius: 8px;
}
.gta-normal-video-main-content .gta-recommend-video-item img {
  width: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio:16/9;
  border-radius: 8px;
  overflow: hidden;
}

.gta-normal-video-main-content .gta-recommend-video-title {
  margin-top: 8px;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
}
.gta-normal-video-main-content .gta-recommend-video-auth {
  margin-top: 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-align: left;
}
.gta-normal-video-main-content .gta-recommend-video-recency {
  margin-top: 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-align: left;
}

.gta-normal-video-main-content .gta-replay-button {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1001;
}

.gta-normal-video-main-content .gta-replay-button:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gta-normal-video-main-content .gta-replay-button svg {
  width: 20px;
  height: 20px;
}


/* 移动端适配 */
@media (max-width: 768px) {
  .gta-normal-video-page{
    padding: 0;
    height: calc(100vh - 50px);
    overflow-y: auto;
    display: block;
    position: relative;
    background: #000;
  }
  .gta-normal-video-page .gta-desktop__screen{
    border-radius: unset;
  }
  .gta-normal-video-page .gta-desktop__frame{
    border-radius: unset;
  }
  .gta-normal-video-page .videoedit-player-desktop{
    border-radius: unset;
  }
  .gta-normal-video-page .videoedit-player{
    border-radius: unset;
  }
  .gta-normal-video-page .gta-normal-video-main-content{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: #000000;
  }
  .gta-normal-video-page .gta-normal-video-sidebar{
    position: relative;
  }
  .gta-normal-video-page .mobile-comment{
    background-color: white;
    position: relative;
    padding-top: 20px;
  }
  .gta-normal-video-page .mobile-comment::before,.gta-normal-video-page .mobile-comment::after{
    content: "";
    position: absolute;
    background: black;
    top: 0;
    z-index: 1;
    width: 12px;
    height: 12px;
  }

  .gta-normal-video-page .mobile-comment::before{
    left: 0;
    -webkit-clip-path: path("M 0 0 L 0 12 A 12 12 0 0 1 12 0 L 0 0");
    clip-path: path("M 0 0 L 0 12 A 12 12 0 0 1 12 0 L 0 0");
  }
  .gta-normal-video-page .mobile-comment::after{
    right: 0;
    -webkit-clip-path: path("M 0 0 A 12 12 0 0 1 12 12 L 12 0 L 0 0");
    clip-path: path("M 0 0 A 12 12 0 0 1 12 12 L 12 0 L 0 0");
  }
  .gta-normal-video-page .gta-normal-video-sidebar{
    background-color: white;
    padding: 16px;
  }

  .gta-normal-video-page .mobile-comment{
    background-color: white;
    position: relative;
    padding: 16px;
    padding-top: 20px;
  }
  .gta-normal-video-page .gta-video-info-title{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    margin-bottom: 12px;
  }
  .gta-normal-video-page .gta-video-info-meta{
    display: flex;
  }
  .gta-normal-video-page .gta-video-info-tags{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 80%;
  }
  .gta-normal-video-page .more{
    text-decoration: underline;
    vertical-align: middle;
  }
  .gta-normal-video-page .gta-video-info-author-name{
    font-size: 16px;
  }
  .gta-normal-video-page .gta-video-mobile-component{
    margin-top: 10px;
  }
  .gta-normal-video-page .gta-video-info-comment{
    background: #f9f9f9;
    padding: 12px 16px;
    border-radius: 8px;
  }
  .gta-normal-video-page .gta-video-info-comment .video-info_input{
    background: #e1e1e1;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 30px;
    margin-top: 5px;
  }
  .gta-normal-video-page .video-mobile-loading{
    background-color: white;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .gta-normal-video-page .video-mobile-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1890ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .gta-landscape-actions-wrapper{
    width: 100%;
    overflow-x: auto;
    display: block;
  }
  .gta-landscape-actions-wrapper .gta-action-item{
    flex-direction: row;
    display: flex;
  }
  .gta-landscape-actions-wrapper .home,.gta-landscape-actions-wrapper .commont{
    display: none;
  }
  .gta-landscape-actions-wrapper .gta-action-item .gta-icon-circle{
    width: 30px;
    height: 30px;
  }
  .gta-landscape-actions-wrapper .gta-icon-review{
    font-size: 18px;
  }
  .gta-landscape-actions-wrapper .gta-action-text{
    word-break: keep-all;
    font-size: 14px;
    color: #222;
    text-shadow:unset;
  }
}

.shopping-cart {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 30px 0;
}

.shopping-cart .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.cart-loading {
  text-align: center;
  padding: 100px 0;
  font-size: 16px;
  color: #999;
}

.cart-empty {
  text-align: center;
  padding: 100px 0;
}

.cart-empty-icon {
  width: 100px;
  height: 100px;
  color: #ddd;
  margin-bottom: 20px;
  display: inline-block;
}

.cart-empty-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.cart-empty-btn {
  padding: 12px 40px;
  background: var(--color-brand);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.cart-empty-btn:hover {
  background: var(--color-brand);
}

.cart-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.cart-main {
  flex: 1;
  min-width: 0;
}

.cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.toolbar-label {
  font-size: 14px;
  color: #333;
}

.toolbar-right {
  display: flex;
  align-items: center;
  height: 30px;
}

.toolbar-btn {
  padding: 6px 16px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.toolbar-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.cart-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 30px 0 16px 0;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.cart-item-unavailable {
  opacity: 0.8;
}

.cart-item-main {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
  transition: background 0.3s;
}

.cart-item-image {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.number-item{
  background-color: #fff;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  margin: 0;
  .number-title{
    font-size: 14px;
    font-weight: 700;
  }
  .number-btns{
    .gta-btn{
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      background: #f5f5f5;
      color: #333333;
      margin: 8px;
    }
    .number{
      display: inline-block;
      font-size: 16px;
      font-weight: 700;
      min-width: 21px;
      text-align: right;
    }
  }
}

.cart-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.cart-item-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
}

.cart-item-date {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.cart-item-person {
  font-size: 14px;
  color: #999;
  margin: 6px 0 0 0;
}

.cart-item-warning {
  font-size: 13px;
  color: #ff4d4f;
  margin: 8px 0 0 0;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.quantity-label {
  font-size: 14px;
  color: #999;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 4px;
}

.quantity-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.quantity-btn:hover:not(:disabled) {
  background: var(--color-brand);
  color: white;
}

.quantity-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.quantity-btn .gta-icon {
  font-size: 14px;
}

.quantity-value {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.cart-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}

.cart-item-actions {
  display: flex;
  gap: 16px;
}

.action-icon-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon-btn:hover {
  color: var(--color-brand);
}

.cart-item-price {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.cart-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.cart-summary {
  background: white;
  border-radius: 8px;
  padding: 24px;
  position: sticky;
  top: 20px;
}

.summary-row {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between;*/
  margin-bottom: 16px;
  cursor: pointer;
}

.summary-row .summary-label {
  font-size: 16px;
  color: #666;
  margin-right: 10px;
}

.summary-row .summary-arrow {
  font-size: 20px;
  color: #999;
  vertical-align: sub;
}

.summary-total {
  margin-bottom: 20px;
}

.summary-currency {
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.summary-amount {
  font-size: 28px;
  color: #333;
  font-weight: 600;
  margin-left: 4px;
}

.summary-checkout-btn {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.summary-points {
  font-size: 13px;
  color: #999;
}

.points-value {
  color: var(--color-brand);
  font-weight: 600;
}

.cart-mobile-footer{
  display: none;
}

.cart-toolbar .gta-btn--tag{
  color: var(--btn-fg);
}

.cart-item-number{
  margin-left: 10px;
  min-width: 145px;
}

@media (max-width: 768px) {
  .cart-item-number{
    display: none;
  }

  .shopping-cart {
    padding: 0;
    padding-bottom: 80px;
    padding-top: 30px;
  }

  .cart-layout {
    flex-direction: column;
  }

  .cart-sidebar {
    display: none;
  }

  .cart-item-main {
    padding: 16px;
  }

  .cart-main{
    width: 100%;
  }

  .cart-item-info{
    flex-direction: column;
  }

  .cart-item-image {
    width: 80px;
    height: 60px;
  }

  .cart-item-footer {
    padding: 12px 16px;
  }

  .cart-mobile-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-top: 1px solid #f0f0f0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  }

  .mobile-footer-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .mobile-footer-label {
    font-size: 14px;
    color: #333;
    flex-shrink: 0;
  }

  .mobile-footer-total {
    flex: 1;
    min-width: 0;
  }

  .mobile-footer-count {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
  }

  .mobile-footer-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
  }

  .mobile-footer-currency {
    font-size: 20px;
    color: var(--color-brand);
    font-weight: 600;
  }

  .mobile-footer-amount {
    font-size: 20px;
    color: var(--color-brand);
    font-weight: 700;
  }

  .mobile-footer-checkout-btn {
    padding: 12px 32px;
    background: var(--color-brand);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
  }

  .mobile-footer-checkout-btn:hover {
    background: var(--color-brand);
  }
}


.footer {
  background-color: #1f1f1f;
  color: #ccc;
  font-size: var(--fz-xs);
  line-height: 1.6;
  padding: 20px 16px;
  text-align: center;
  box-sizing: border-box;
  margin-top: auto;
}

.footer-top {
  display: flex;
  justify-content: center;
}

.footer-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-top li {
  color: inherit;
}

.footer-top a {
  color: #eee;
  font-size: var(--fz-xs);
  text-decoration: none;
}

.footer-top a:hover {
  text-decoration: underline;
}

.footer-divider {
  background-color: hsla(0, 0%, 100%, .1);
  height: 1px;
  margin: 12px 0;
}

.footer-bottom ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-bottom li {
  color: #aaa;
  font-size: var(--fz-xs);
  margin-right: 12px;
}
@media (max-width: 768px) {
  .footer-top ul{
    gap: 12px 10px;
  }
  .footer-bottom li{
    font-size: 10px;
  }
}

.navigation-mobile {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.navigation-mobile .navigation-mobile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.navigation-mobile .navigation-tab {
  flex-shrink: 0;
}

.navigation-mobile .navigation-city-list {
  flex: 1;
  overflow-y: auto;
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3);
  padding-bottom: 44px;
}

.navigation-mobile .navigation-city-list p {
  word-break: break-all;
}

.navigation-mobile .tab-scenic-tips {
  margin-top: 15px;
  text-align: center;
}

.navigation-mobile .tab-scenic-tips>span {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 16px;
  margin: 0 8px;
  font-size: var(--fz-xs);
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  flex: none;
  align-items: center;
  height: 36px;
  display: inline-block;
}

.navigation-mobile .tab-scenic-tips .active {
  background-color: var(--brand-100);
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
}

.navigation-mobile ul {
  margin-top: var(--sp-5);
}

.navigation-mobile li {
  list-style: none;
}

.navigation-mobile .navigation-city-list::-webkit-scrollbar {
  display: none;
  /* 对于WebKit和Blink */
}

.navigation-mobile .navigation-city-list .city-title {
  color: #212121;
  padding: 0 20px;
  font-size: var(--fz-md);
  line-height: 33px;
  margin-bottom: var(--sp-2);
}

.navigation-mobile .navigation-city-list .city-item {
  margin-bottom: var(--sp-4);
  display: flex;
  padding: 0 20px;
  height: 60px;
  align-items: center;
}

.navigation-mobile .navigation-city-list .city-item span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}



.navigation-mobile .navigation-city-list .city-item img {
  border-radius: 50%;
}

.navigation-mobile .navigation-city-list .city-item p {
  margin: 0;
  padding: 0;
  margin-left: var(--sp-2);
  font-size: var(--fz-xs);
}

.navigation-mobile .navigation-city-list .city-item .city-item-text1 {
  color: #a8a8a8;
  line-height: 20px;
}

.navigation-mobile .navigation-city-list .city-item .city-item-text2 {
  line-height: 22px;
  font-size: var(--fz-sm);
}

.navigation-mobile .mobile-header-quick-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 40px 36px;
}

.navigation-mobile .mobile-header-quick-nav a {
  margin-bottom: 22px;
}

.navigation-mobile-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-mobile-tabs-item {
  margin: 0 16px;
  padding: 6px;
  padding: 6px 10px;
  border-radius: 12px;
    background-color: #f5f5f5;
}

.nav-mobile-tabs-item.active {
  background-color: var(--brand-100);
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
}
.banner-more-mobile{
  height: calc(100% - 61px);
  display: flex;
  flex-direction: column;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.banner-more-mobile .banner-more-mobile-content {
  margin-top: var(--container-padding-x);
  margin-bottom: var(--container-padding-x);
  display: flex;
  flex-direction: column;
  
}
.back-to-top {

  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;

  z-index: 999;
  color: #666;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #f5f5f5;
  color: #333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top.is-trip {
  bottom: 90px;
}

.magnifier {
  
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
 
  z-index: 999;
  color: #666;
}

.magnifier.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.magnifier:hover {
  background: #f5f5f5;
  color: #333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.magnifier.is-trip {
  bottom: 90px;
}

.floating-view-record {
 
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;
  opacity: 0;
 

  &.show {
    opacity: 1;
    transform: translateY(0);
  }

  &:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .gta-icon {
    font-size: 24px;
    color: #333;
  }
}

.floating-view-record-content {
  padding: 16px;
  min-height: 200px;
}

.floating-view-record-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #999;
  font-size: 14px;
}
html,body{
  overflow: hidden;
}
.app-container{
  width: 100%;
  height: 100%;
  background: white;
  overflow: auto;
  padding-top: var(--gta-header-h, 60px);
  box-sizing: border-box;
  scroll-padding-top: var(--gta-header-h, 60px);
}
@media (max-height: 100vh) {
  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 1200px) {
  /* 整体滚动条宽度 */
  .app-container::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }

  /* 滚动条轨道 */
  .app-container::-webkit-scrollbar-track {
    background: transparent;
  }

  /* 滑块 */
  .app-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    transition: background 0.3s;
  }

  /* hover 效果 */
  .app-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.45);
  }
}
:root {
  --fz-15:15px
}

@media (max-width: 768px) {
  .navigation-tabs{
    display: none;
  }
  :root {
    /* 字体粗细 */
    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --fz-xs: 12px;
    --fz-sm: 12px;
    --fz-md: 14px;
    --fz-lg: 16px;
    --fz-xl: 18px;
    --fz-2xl: 20px;
    --fz-3xl: 22px;
    --fz-4xl: 22px;
    --fz-5xl: 22px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .10);
    --control-h-sm: 28px;
    --control-h-md: 36px;
    --control-h-lg: 44px;
    --control-px: 12px;
    --icon-wrap-sm: 24px;
    --icon-wrap-md: 28px;
    --icon-wrap-lg: 32px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;

  }

}
@media (max-width: 1200px) {
}



/*# sourceMappingURL=website.9c301b27.css.map*/