@import url("blue-background.css");
@import url("theme.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap");
* {
  font-family: "Barlow Condensed", "Microsoft YaHei", Arial, sans-serif !important;
}

@media (pointer: fine) {
  * {
    cursor: url('tupian/zhuazi_32.png'), auto !important;
  }

  a, a *, button, button *, .clickable {
    cursor: url('tupian/zhuazi_hover_32.png'), pointer !important;
  }

  *:active, a:active, a *:active, button:active, button *:active, .clickable:active {
    cursor: url('tupian/zhuazi_active_32.png'), pointer !important;
  }
}

/* Touch devices: enhance active feedback, suppress hover */
@media (pointer: coarse) {
  a, button, .clickable, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    min-width: 44px;
  }

  a:active, button:active, .clickable:active, [role="button"]:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 37.5px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.site-header > a:first-child {
  width: auto;
  height: 37.5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.site-header #logogai {
  width: auto !important;
  height: 35px !important;
  padding: 5px !important;
  display: block;
}

.site-header #wenzi {
  width: auto !important;
  max-width: 285px !important;
  height: 37.5px !important;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
  color: #111827;
  
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-header #wenzi .brand-wordmark-en,
.site-header #wenzi .brand-wordmark-zh {
  display: none;
}

html[lang^="zh"] .site-header #wenzi .brand-wordmark-zh,
html[lang^="en"] .site-header #wenzi .brand-wordmark-en {
  display: inline;
}

.site-header .login-link,
.site-header .profile-link {
  display: none !important;
}

.site-header .mobile-menu-toggle {
  display: none;
  width: 37.5px;
  height: 37.5px;
  border: none;
  background: transparent;
  color: #111827;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.site-header .mobile-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  display: block;
}

.site-header .menu {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 37.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.site-header .menu a,
.site-header .language-btn {
  height: 37.5px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  vertical-align: middle !important;
  color: black !important;
  font-size: 15px !important;
  
  text-decoration: none !important;
}

.site-header .menu a[hidden],
.site-header .login-link[hidden],
.site-header .profile-link[hidden] {
  display: none !important;
}

.site-header .menu a {
  gap: 6px;
  padding: 0 6px !important;
  text-align: center;
  white-space: nowrap !important;
}

.site-header .menu a[data-i18n="home"]::before,
.site-header .menu a[data-i18n="store"]::before {
  content: "";
  width: 18px;
  height: 18px;
  display: none;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-header .menu a[data-i18n="home"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3V10.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3V10.5Z'/%3E%3C/svg%3E");
}

.site-header .menu a[data-i18n="store"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h12l2 5v15H4V7l2-5Zm1.4 2-1 3h11.2l-1-3H7.4ZM8 10v2a4 4 0 0 0 8 0v-2h-2v2a2 2 0 0 1-4 0v-2H8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h12l2 5v15H4V7l2-5Zm1.4 2-1 3h11.2l-1-3H7.4ZM8 10v2a4 4 0 0 0 8 0v-2h-2v2a2 2 0 0 1-4 0v-2H8Z'/%3E%3C/svg%3E");
}

.site-header .menu a.active,
.site-header .profile-link.active {
  border: none !important;
  background: transparent !important;
  color: hsl(240, 50%, 42%) !important;
  font-weight: 700 !important;
}

.site-header .menu a[data-i18n="contact"],
.site-header .menu a[href="settings.html"] {
  display: none !important;
}

.site-header .menu a span {
  display: inline !important;
  white-space: nowrap !important;
}

.site-header .language-btn {
  background: none !important;
  border: none !important;
  padding: 0 10px !important;
  gap: 5px;
  cursor: pointer;
}

.site-header #settings,
.site-header #guanyuwomen,
.site-header #lianxiwomen,
.site-header #chaxunjilu,
.site-header #yuyan,
.site-header .login-link .icon,
.site-header .profile-link .icon,
.site-header .language-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  flex-shrink: 0;
  vertical-align: middle;
}

@media (max-width: 1160px) {
  .site-header #wenzi {
    display: none !important;
  }

  .site-header .menu {
    left: auto !important;
    right: 10px !important;
    transform: none !important;
  }
}

.icon-profile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 12c4.42 0 8 2.24 8 5v1c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-1c0-2.76 3.58-5 8-5Zm0-10a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 12c4.42 0 8 2.24 8 5v1c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-1c0-2.76 3.58-5 8-5Zm0-10a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.profile-layout {
  width: min(1180px, calc(100% - 40px));
  margin: 72px auto 44px;
  min-height: calc(100vh - 116px);
  display: grid;
  grid-template-columns: 210px 1fr;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 44px rgba(20, 28, 80, 0.22);
}

.profile-sidebar {
  border-right: 1px solid #e5e7eb;
  background: #fafafa;
  padding: 14px 0;
}

.profile-nav-item {
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #111827;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.profile-nav-item .icon {
  width: 22px;
  height: 22px;
  color: #bfc3c8;
}

.profile-nav-item.active,
.profile-nav-item:hover {
  background: #09a9d4;
  color: #fff;
}

.profile-nav-item.active .icon,
.profile-nav-item:hover .icon {
  color: #fff;
}

.profile-content {
  padding: 42px 48px;
}

.profile-title {
  font-size: 38px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
}

.profile-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px;
  background: white;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: hsl(240, 50%, 42%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar .icon {
  width: 44px;
  height: 44px;
}

.profile-meta h2 {
  font-size: 30px;
  margin-bottom: 8px;
  color: #111827;
}

.profile-meta p {
  font-size: 19px;
  color: #5f6673;
  margin: 4px 0;
}

.profile-empty {
  font-size: 20px;
  color: #4b5563;
}

.profile-empty button {
  margin-top: 18px;
  border: none;
  border-radius: 6px;
  background: hsl(240, 50%, 42%);
  color: white;
  height: 42px;
  padding: 0 22px;
  font-size: 18px;
  cursor: pointer;
}

.icon-home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3V10.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3V10.5Z'/%3E%3C/svg%3E");
}

.icon-star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 2.6 6.4 6.9.5-5.3 4.4 1.7 6.7-5.9-3.6L6.1 20l1.7-6.7-5.3-4.4 6.9-.5L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 2.6 6.4 6.9.5-5.3 4.4 1.7 6.7-5.9-3.6L6.1 20l1.7-6.7-5.3-4.4 6.9-.5L12 2Z'/%3E%3C/svg%3E");
}

.icon-group {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm8 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM2 21c0-4 2.7-7 6-7s6 3 6 7H2Zm8 0c.4-2.7 1.8-4.9 3.8-6 3.9-.8 8.2 2.2 8.2 6H10Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm8 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM2 21c0-4 2.7-7 6-7s6 3 6 7H2Zm8 0c.4-2.7 1.8-4.9 3.8-6 3.9-.8 8.2 2.2 8.2 6H10Z'/%3E%3C/svg%3E");
}

.icon-medal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10l-3 6h-4L7 2Zm5 7a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 3-1.1 2.2-2.4.3 1.8 1.7-.4 2.4 2.1-1.1 2.1 1.1-.4-2.4 1.8-1.7-2.4-.3L12 12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10l-3 6h-4L7 2Zm5 7a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 3-1.1 2.2-2.4.3 1.8 1.7-.4 2.4 2.1-1.1 2.1 1.1-.4-2.4 1.8-1.7-2.4-.3L12 12Z'/%3E%3C/svg%3E");
}

.icon-shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 20 5v6c0 5-3.4 9.6-8 11-4.6-1.4-8-6-8-11V5l8-3Zm0 5a3 3 0 0 0-3 3v1H8v6h8v-6h-1v-1a3 3 0 0 0-3-3Zm-1 4v-1a1 1 0 0 1 2 0v1h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 20 5v6c0 5-3.4 9.6-8 11-4.6-1.4-8-6-8-11V5l8-3Zm0 5a3 3 0 0 0-3 3v1H8v6h8v-6h-1v-1a3 3 0 0 0-3-3Zm-1 4v-1a1 1 0 0 1 2 0v1h-2Z'/%3E%3C/svg%3E");
}

.icon-coin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3c5 0 9 2 9 4.5v9C21 19 17 21 12 21s-9-2-9-4.5v-9C3 5 7 3 12 3Zm0 3C8.1 6 5 7.1 5 8.5S8.1 11 12 11s7-1.1 7-2.5S15.9 6 12 6Zm0 7c-2.8 0-5.2-.6-7-1.7v2.2C5 15 8.1 16 12 16s7-1 7-2.5v-2.2c-1.8 1.1-4.2 1.7-7 1.7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3c5 0 9 2 9 4.5v9C21 19 17 21 12 21s-9-2-9-4.5v-9C3 5 7 3 12 3Zm0 3C8.1 6 5 7.1 5 8.5S8.1 11 12 11s7-1.1 7-2.5S15.9 6 12 6Zm0 7c-2.8 0-5.2-.6-7-1.7v2.2C5 15 8.1 16 12 16s7-1 7-2.5v-2.2c-1.8 1.1-4.2 1.7-7 1.7Z'/%3E%3C/svg%3E");
}

.icon-record {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v12H8l-4 4V4Zm4 4v2h8V8H8Zm0 4v2h6v-2H8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v12H8l-4 4V4Zm4 4v2h8V8H8Zm0 4v2h6v-2H8Z'/%3E%3C/svg%3E");
}

.icon-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 4h16V7H5v2Zm2 4v2h6v-2H7Zm8 0v2h4v-2h-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 4h16V7H5v2Zm2 4v2h6v-2H7Zm8 0v2h4v-2h-4Z'/%3E%3C/svg%3E");
}

.icon-invite {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v5h-2V6H6v12h5v2H4V4Zm12 7h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3ZM8 9h7v2H8V9Zm0 4h4v2H8v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v5h-2V6H6v12h5v2H4V4Zm12 7h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3ZM8 9h7v2H8V9Zm0 4h4v2H8v-2Z'/%3E%3C/svg%3E");
}

.icon-sliders {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h6v2H4V7Zm10 0h6v2h-6V7Zm-3-3h2v8h-2V4ZM4 15h10v2H4v-2Zm14 0h2v2h-2v-2Zm-3-3h2v8h-2v-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h6v2H4V7Zm10 0h6v2h-6V7Zm-3-3h2v8h-2V4ZM4 15h10v2H4v-2Zm14 0h2v2h-2v-2Zm-3-3h2v8h-2v-8Z'/%3E%3C/svg%3E");
}

@media (max-width: 880px) {
  .profile-layout {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .profile-nav-item {
    height: 50px;
    font-size: 18px;
    padding: 0 16px;
    gap: 12px;
  }

  .profile-content {
    padding: 28px 22px;
  }
}

@media (max-width: 560px) {
  .profile-layout {
    width: calc(100% - 12px);
    margin: 50px auto 24px;
  }

  .profile-sidebar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0;
    scrollbar-width: none;
  }

  .profile-sidebar::-webkit-scrollbar {
    display: none;
  }

  .profile-nav-item {
    height: 44px;
    font-size: 14px;
    padding: 0 14px;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .profile-nav-item .icon {
    width: 18px;
    height: 18px;
  }

  .profile-content {
    padding: 20px 14px;
  }

  .profile-title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .profile-card {
    padding: 18px;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-avatar .icon {
    width: 30px;
    height: 30px;
  }

  .profile-meta h2 {
    font-size: 22px;
  }

  .profile-meta p {
    font-size: 15px;
  }
}

.site-header .language-selector {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}

.site-header .language-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.site-header .language-dropdown.show {
  display: block;
}

.site-header .language-option {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  
  color: black;
  transition: background 0.2s ease;
}

.site-header .language-option:hover {
  background: #f0f0f0;
}

.site-header .language-option.active {
  background: #e0e0e0;
  font-weight: bold;
}

@media (max-width: 1160px) {
  .site-header #wenzi {
    display: none !important;
  }

  .site-header .menu {
    left: auto !important;
    right: 10px !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .site-header .menu a {
    width: 34px !important;
    padding: 0 !important;
  }

  .site-header .language-btn {
    width: 34px !important;
    padding: 0 !important;
  }
}

.site-header.header-icon-mode .menu a,
.site-header.header-icon-mode .language-btn {
  width: 34px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

.site-header.header-icon-mode .menu a span,
.site-header.header-icon-mode .language-btn span {
  display: none !important;
}

.site-header.header-icon-mode .menu a[data-i18n="home"]::before {
  display: inline-block;
}

.site-header.header-icon-mode .menu a[data-i18n="store"]::before {
  display: none;
}

@media (max-width: 560px) {
  .site-header,
  .header-bar.site-header {
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .site-header .mobile-menu-toggle,
  .header-bar.site-header .mobile-menu-toggle {
    display: inline-flex !important;
    margin-left: auto;
    z-index: 2002;
  }

  .site-header .menu,
  .header-bar.site-header .menu {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    left: auto !important;
    transform: none !important;
    width: 280px !important;
    height: 100vh !important;
    max-height: none;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 60px 20px 20px !important;
    background: #fff;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    white-space: normal !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2001;
  }

  /* Overlay for drawer */
  .site-header::before,
  .header-bar.site-header::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .site-header.menu-open::before,
  .header-bar.site-header.menu-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .site-header.menu-open .menu,
  .header-bar.site-header.menu-open .menu {
    right: 0 !important;
    display: flex !important;
  }

  .site-header .menu a,
  .site-header .language-btn,
  .header-bar.site-header .menu a,
  .header-bar.site-header .language-btn {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    gap: 12px !important;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  .site-header .menu a:hover,
  .site-header .language-btn:hover,
  .header-bar.site-header .menu a:hover,
  .header-bar.site-header .language-btn:hover {
    background: #f3f4f6 !important;
  }
  .site-header .menu a span,
  .site-header .language-btn span,
  .header-bar.site-header .menu a span,
  .header-bar.site-header .language-btn span {
    display: inline !important;
  }

  .site-header .language-selector,
  .header-bar.site-header .language-selector {
    width: 100%;
    margin-left: 0 !important;
  }

  .site-header .language-dropdown,
  .header-bar.site-header .language-dropdown {
    position: static !important;
    width: 100%;
    box-shadow: none !important;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 4px;
  }
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-user {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5Zm0 2c-4.42 0-8 2.24-8 5v1c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5Zm0 2c-4.42 0-8 2.24-8 5v1c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
}

.icon-user-plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5ZM2 20c0-3.31 4.48-6 10-6 .7 0 1.38.04 2.04.13A6.97 6.97 0 0 0 13 18c0 1.46.45 2.81 1.22 3.93-.07.04-.14.07-.22.07H4c-1.1 0-2-.9-2-2Zm17-5v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5ZM2 20c0-3.31 4.48-6 10-6 .7 0 1.38.04 2.04.13A6.97 6.97 0 0 0 13 18c0 1.46.45 2.81 1.22 3.93-.07.04-.14.07-.22.07H4c-1.1 0-2-.9-2-2Zm17-5v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2Z'/%3E%3C/svg%3E");
}

.icon-login {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17v-3H3v-4h7V7l6 5-6 5Zm2-15h7c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2h-7v-2h7V4h-7V2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17v-3H3v-4h7V7l6 5-6 5Zm2-15h7c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2h-7v-2h7V4h-7V2Z'/%3E%3C/svg%3E");
}

.icon-envelope {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm8 9 8-5V6l-8 5-8-5v2l8 5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm8 9 8-5V6l-8 5-8-5v2l8 5Z'/%3E%3C/svg%3E");
}

.icon-id-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm3 4.5A2.5 2.5 0 1 0 11 9.5 2.5 2.5 0 0 0 6 9.5ZM4.5 16h8c-.25-1.9-1.9-3-4-3s-3.75 1.1-4 3ZM14 9h6V7h-6v2Zm0 4h6v-2h-6v2Zm0 4h4v-2h-4v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm3 4.5A2.5 2.5 0 1 0 11 9.5 2.5 2.5 0 0 0 6 9.5ZM4.5 16h8c-.25-1.9-1.9-3-4-3s-3.75 1.1-4 3ZM14 9h6V7h-6v2Zm0 4h6v-2h-6v2Zm0 4h4v-2h-4v2Z'/%3E%3C/svg%3E");
}

.icon-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9h1c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-9c0-1.1.9-2 2-2h1V7a5 5 0 0 1 10 0v2Zm-2 0V7a3 3 0 0 0-6 0v2h6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9h1c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2v-9c0-1.1.9-2 2-2h1V7a5 5 0 0 1 10 0v2Zm-2 0V7a3 3 0 0 0-6 0v2h6Z'/%3E%3C/svg%3E");
}

.icon-eye {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7S3 14.5 2 12c1-2.5 5-7 10-7Zm0 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7S3 14.5 2 12c1-2.5 5-7 10-7Zm0 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E");
}

.icon-eye-off {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3.28 2 18.72 18.72-1.28 1.28-3.04-3.04A10.6 10.6 0 0 1 12 21c-5 0-9-4.5-10-7a15.1 15.1 0 0 1 4.03-4.9L2 3.28 3.28 2Zm8.72 5c5 0 9 4.5 10 7a14 14 0 0 1-2.4 3.4l-3.02-3.02A4 4 0 0 0 11.62 9.42L9.3 7.1c.86-.08 1.75-.1 2.7-.1Zm0 11a4 4 0 0 0 1.46-.27L8.27 12.54A4 4 0 0 0 12 18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3.28 2 18.72 18.72-1.28 1.28-3.04-3.04A10.6 10.6 0 0 1 12 21c-5 0-9-4.5-10-7a15.1 15.1 0 0 1 4.03-4.9L2 3.28 3.28 2Zm8.72 5c5 0 9 4.5 10 7a14 14 0 0 1-2.4 3.4l-3.02-3.02A4 4 0 0 0 11.62 9.42L9.3 7.1c.86-.08 1.75-.1 2.7-.1Zm0 11a4 4 0 0 0 1.46-.27L8.27 12.54A4 4 0 0 0 12 18Z'/%3E%3C/svg%3E");
}

/* 身份验证弹窗遮罩 */
.auth-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.auth-modal-overlay.active {
  display: flex;
}

.auth-modal-overlay .auth-panel {
  width: 100%;
  max-width: 420px;
  margin: 20px;
}