.header-placeholder {
  height: calc(80 / var(--fontsize) * 1rem);
}

.site-header {
  height: calc(80 / var(--fontsize) * 1rem);
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 8%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 calc(2 / var(--fontsize) * 1rem) calc(10 / var(--fontsize) * 1rem) rgba(0, 0, 0, 0.05);
}

.site-header .logo-container {
  display: flex;
  align-items: center;
  gap: calc(8 / var(--fontsize) * 1rem);
}

.site-header .logo-container .logo-img {
  width: calc(33 / var(--fontsize) * 1rem);
  height: calc(36 / var(--fontsize) * 1rem);
}

.site-header .logo-container .logo-text {
  font-size: calc(18 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #FF3C82;
}

.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: calc(60 / var(--fontsize) * 1rem);
}

.site-header .nav-links a {
  color: #333333;
  font-size: calc(18 / var(--fontsize) * 1rem);
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 400;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #FF3C82;
}

.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: calc(24 / var(--fontsize) * 1rem);
  min-width: calc(430 / var(--fontsize) * 1rem);
}

.site-header .header-actions .btn-more {
  background-color: #FF3C82;
  border-radius: calc(6 / var(--fontsize) * 1rem);
  width: calc(32 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  cursor: pointer;
}

.site-header .header-actions .btn-login {
  background-color: #FFD6E4;
  width: calc(70 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  border-radius: calc(6 / var(--fontsize) * 1rem);
  color: #FF196E;
  font-size: calc(15 / var(--fontsize) * 1rem);
  border: none;
  cursor: pointer;
}

/* 搜索组件样式 */
.site-header .header-actions .search-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(1 / var(--fontsize) * 1rem);
  width: calc(206 / var(--fontsize) * 1rem);
  height: calc(42 / var(--fontsize) * 1rem);
  padding: calc(5 / var(--fontsize) * 1rem);
}

.site-header .header-actions .search-container.active {
  border: 1px solid #CCCCCC;
  border-radius: calc(8 / var(--fontsize) * 1rem);
}

.site-header .header-actions .search-input {
  display: none;
  outline: none;
  width: calc(155 / var(--fontsize) * 1rem);
  border: none;
  background: transparent;
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333333;
  transition: all 0.3s;
}

.site-header .header-actions .search-container.active .search-input {
  display: block;
}

.site-header .header-actions .search-input::placeholder {
  color: #999999;
}

.site-header .header-actions .search-btn {
  background-color: #FF3C82;
  border-radius: calc(6 / var(--fontsize) * 1rem);
  width: calc(32 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.site-header .header-actions .search-btn svg,
.site-header .header-actions .search-btn img {
  width: calc(23 / var(--fontsize) * 1rem);
  height: calc(23 / var(--fontsize) * 1rem);
}

.site-header .header-actions .search-history {
  display: none;
  position: absolute;
  width: calc(206 / var(--fontsize) * 1rem);
  border-radius: calc(8 / var(--fontsize) * 1rem);
  background-color: #ffffff;
  left: 0;
  top: calc(50 / var(--fontsize) * 1rem);
  border: 1px solid #CCCCCC;
  padding: calc(8 / var(--fontsize) * 1rem) calc(16 / var(--fontsize) * 1rem);
  z-index: 100;
}

.site-header .header-actions .search-history.show {
  display: block;
}

.site-header .header-actions .search-history-item {
  cursor: pointer;
  padding: calc(4 / var(--fontsize) * 1rem) 0;
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333333;
  transition: all 0.2s;
}

.site-header .header-actions .search-history-item:hover {
  font-weight: 700;
  text-decoration: underline;
}

/* 用户信息样式 */
.site-header .header-actions .user-info {
  display: flex;
  align-items: center;
  font-size: calc(13 / var(--fontsize) * 1rem);
  color: #4B4B4B;
  background-color: #ffffff;
  height: calc(24 / var(--fontsize) * 1rem);
  border-radius: calc(4 / var(--fontsize) * 1rem);
  padding-left: calc(14 / var(--fontsize) * 1rem);
  margin-right: calc(10 / var(--fontsize) * 1rem);
}

.site-header .header-actions .user-info .username {
  white-space: nowrap;
  margin-right: calc(8 / var(--fontsize) * 1rem);
}

.site-header .header-actions .btn-logout {
  width: calc(80 / var(--fontsize) * 1rem);
  background: transparent;
  border: none;
  color: #4B4B4B;
  font-size: calc(13 / var(--fontsize) * 1rem);
  cursor: pointer;
}

/* 登录弹窗样式 */
.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.login-modal.show {
  display: flex;
}

.login-modal-content {
  position: relative;
  width: calc(576 / var(--fontsize) * 1rem);
  background-color: #ffffff;
  border-radius: calc(8 / var(--fontsize) * 1rem);
  padding: calc(56 / var(--fontsize) * 1rem) calc(32 / var(--fontsize) * 1rem) calc(98 / var(--fontsize) * 1rem) calc(32 / var(--fontsize) * 1rem);
}

.login-modal-close {
  position: absolute;
  top: calc(10 / var(--fontsize) * 1rem);
  right: calc(10 / var(--fontsize) * 1rem);
  width: calc(24 / var(--fontsize) * 1rem);
  height: calc(24 / var(--fontsize) * 1rem);
  border: none;
  background: transparent;
  font-size: calc(24 / var(--fontsize) * 1rem);
  line-height: 1;
  color: #999999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 / var(--fontsize) * 1rem);
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: calc(8 / var(--fontsize) * 1rem);
  margin-bottom: calc(56 / var(--fontsize) * 1rem);
}

.login-tab {
  position: relative;
  font-size: calc(16 / var(--fontsize) * 1rem);
  background: transparent;
  border: none;
  color: #333333;
  cursor: pointer;
  padding: 0;
  font-weight: 400;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.login-tab.active {
  color: #FF196E;
}

.login-tab.active::after {
  content: '';
  position: absolute;
  bottom: calc(-11 / var(--fontsize) * 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(64 / var(--fontsize) * 1rem);
  height: 2px;
  background-color: #FF196E;
}

.login-modal-body {
  min-height: calc(200 / var(--fontsize) * 1rem);
}

.login-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(56 / var(--fontsize) * 1rem);
}

.qr-code-container {
  width: calc(220 / var(--fontsize) * 1rem);
  height: calc(220 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-placeholder {
  color: #999999;
  font-size: calc(14 / var(--fontsize) * 1rem);
}

.qr-code-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-input-group {
  width: 100%;
  height: calc(48 / var(--fontsize) * 1rem);
  border-radius: calc(6 / var(--fontsize) * 1rem);
  background-color: #EFF1F5;
  padding: 0 calc(15 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
}

.login-input-group+.login-input-group {
  margin-top: calc(24 / var(--fontsize) * 1rem);
}

.login-input-group.sms-group {
  padding-right: calc(12 / var(--fontsize) * 1rem);
  gap: calc(12 / var(--fontsize) * 1rem);
}

.login-input-group.sms-group .login-input {
  flex: 1;
  border-right: 1px solid #CCCCCC;
  padding-right: calc(12 / var(--fontsize) * 1rem);
}

.login-input {
  width: 100%;
  outline: none;
  border: none;
  background: transparent;
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333333;
}

.login-input::placeholder {
  color: #999999;
}

.sms-btn {
  width: calc(60 / var(--fontsize) * 1rem);
  font-size: calc(12 / var(--fontsize) * 1rem);
  color: #FF196E;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 400;
  flex-shrink: 0;
  white-space: nowrap;
}

.sms-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.login-submit-btn {
  width: 100%;
  height: calc(48 / var(--fontsize) * 1rem);
  background: linear-gradient(244.07deg, #ff759f 47.24%, #ff196e 120.34%);
  border-radius: calc(12 / var(--fontsize) * 1rem);
  color: #ffffff;
  font-size: calc(14 / var(--fontsize) * 1rem);
  border: none;
  cursor: pointer;
  margin-top: calc(56 / var(--fontsize) * 1rem);
  margin-bottom: calc(33 / var(--fontsize) * 1rem);
}

/* Footer 样式 */
.footer .footer-links {
  background: rgba(51, 51, 51, 0.85);
  padding: calc(61 / var(--fontsize) * 1rem) calc(276 / var(--fontsize) * 1rem);
  display: flex;
  gap: calc(40 / var(--fontsize) * 1rem);
  line-height: calc(21 / var(--fontsize) * 1rem);
}

.footer .footer-links-title {
  width: calc(64 / var(--fontsize) * 1rem);
  font-size: calc(16 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: white;
}

.footer .footer-links-list {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(40 / var(--fontsize) * 1rem) calc(40 / var(--fontsize) * 1rem);
  flex-wrap: wrap;
}

.footer .footer-links-list a {
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.3s;
}

.footer .footer-links-list a:hover {
  color: white;
}

.footer .footer-copyright {
  background: #333333;
  height: calc(60 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(76 / var(--fontsize) * 1rem);
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #cccccc;
  font-weight: 400;
}

.footer .footer-copyright-left,
.footer .footer-copyright-right {
  display: flex;
  align-items: center;
  gap: calc(32 / var(--fontsize) * 1rem);
}

.footer .footer-copyright-left a,
.footer .footer-copyright-right a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer .footer-copyright-left a:hover,
.footer .footer-copyright-right a:hover {
  color: white;
}

.footer .footer-divider {
  width: calc(1 / var(--fontsize) * 1rem);
  height: calc(16 / var(--fontsize) * 1rem);
  background: #cccccc;
}

.footer .footer-copyright-right {
  gap: calc(56 / var(--fontsize) * 1rem);
}

/* 客服面板样式 */
.customer-service-panel {
  position: fixed;
  top: 50%;
  right: calc(17 / var(--fontsize) * 1rem);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.customer-service-panel.show {
  opacity: 1;
  visibility: visible;
}

.service-item {
  width: calc(86 / var(--fontsize) * 1rem);
  height: calc(86 / var(--fontsize) * 1rem);
  background: #FF3C82;
  border-radius: calc(12 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 / var(--fontsize) * 1rem);
  cursor: pointer;
  transition: all 0.3s;
}
.service-item:nth-child(1) {
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}
.service-item:nth-child(2) {
 border-radius: 0;
}
.service-item:nth-child(3) {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

.service-item img {
  width: calc(32 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  display: block;
  object-fit: contain;
}

.service-item span {
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: white;
  line-height: calc(18 / var(--fontsize) * 1rem);
  text-align: center;
}

/* 客服详情面板样式 */
.service-panel {
  position: fixed;
  right: calc(17 / var(--fontsize) * 1rem + 86 / var(--fontsize) * 1rem + 12 / var(--fontsize) * 1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.service-panel.show {
  opacity: 1;
  visibility: visible;
}

.service-panel-content {
  background: white;
  border-radius: calc(12 / var(--fontsize) * 1rem);
  box-shadow: 0 calc(4 / var(--fontsize) * 1rem) calc(20 / var(--fontsize) * 1rem) rgba(0, 0, 0, 0.15);
  width: calc(280 / var(--fontsize) * 1rem);
  padding: calc(20 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--fontsize) * 1rem);
}

.service-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #333;
  font-weight: 400;
}

.copy-btn {
  background: #6BB6FF;
  color: white;
  border: none;
  border-radius: calc(6 / var(--fontsize) * 1rem);
  padding: calc(6 / var(--fontsize) * 1rem) calc(16 / var(--fontsize) * 1rem);
  font-size: calc(14 / var(--fontsize) * 1rem);
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}

.copy-btn:hover {
  background: #5AA5E8;
}

.service-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.service-qrcode img {
  width: 100%;
  max-width: calc(240 / var(--fontsize) * 1rem);
  height: auto;
  display: block;
}

/* 返回顶部样式（兼容旧样式） */
.back-top {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
}

.back-top.show {
  opacity: 1;
  visibility: visible;
}