html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
}
img {
  display: inline-block;
}
a {
  text-decoration: none;
}
.support-contact-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  object-fit: contain;
}
.mobile-menu-trigger {
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #1b2a52;
  padding: 8px;
}
.mobile-menu-panel {
  padding: 36px;
  width: min(350px, 90vw) !important;
}
.mobile-menu-panel nav {
  margin: 30px 0;
}
.mobile-menu-panel nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.replica-sticky {
  position: fixed !important;
  top: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 12px #1b2a5212;
}
.banner-shape-1 {
  translate: 0 45.3px;
}
.banner-shape-2 {
  translate: 0 32.1px;
}
.banner-shape-3 {
  translate: 0 -67.6px;
}
.banner-shape-4 {
  translate: 0 -36px;
}
:where(a, button):focus-visible {
  outline: 2px solid #7d25ec;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.replica-word {
  display: inline-block;
  max-width: 100%;
}
.replica-word > span {
  display: inline-block;
}
.choose-item-content {
  height: 100px;
}
.gallery-track {
  display: flex;
  margin-left: -30px;
}
.gallery-slide {
  flex: 0 0 25%;
  padding-left: 30px;
  min-width: 0;
}
.gallery-arrow {
  position: static;
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #1b2a5212;
  color: #1b2a52;
  box-shadow: none;
  background: #fff;
}
.gallery-arrow:hover {
  background: #7d25ec;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px #1b2a5280;
}
.gallery-arrow svg {
  width: 14px;
  height: 14px;
  stroke-width: 1;
}
.h5_work-item::before {
  pointer-events: none;
}
.h5_work-item a::after {
  content: '';
  position: absolute;
  inset: -300px -300px -24px -30px;
}
.gallery-dialog {
  width: max-content !important;
  max-width: min(1200px, calc(100vw - 80px)) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  gap: 0 !important;
}
.gallery-full-image {
  display: block;
  max-height: calc(100dvh - 110px);
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 0 8px #0009;
}
[data-slot='dialog-overlay'] {
  background: #0b0b0bcc;
  backdrop-filter: none;
  z-index: 110;
}
[data-slot='dialog-content'] {
  z-index: 111;
}
.gallery-close {
  position: absolute;
  right: -5px;
  top: -38px;
  color: #fff;
  border: 0;
  background: transparent;
  padding: 5px;
}
.gallery-caption {
  display: flex;
  justify-content: space-between;
  color: #ddd;
  font-size: 13px;
  padding-top: 8px;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 10px;
  transform: translateY(-50%);
}
.gallery-lightbox-prev {
  left: -50px;
}
.gallery-lightbox-next {
  right: -50px;
}
.coming-soon-button {
  width: 100%;
  border: 0;
}
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  border: 0;
  padding: 2px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.back-to-top span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #7d25ec;
}
.replica-cursor {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #20202070;
  z-index: 200;
  opacity: 0;
  transition: transform 100ms ease-out;
}
.replica-cursor::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #20202070;
  position: absolute;
  left: 11px;
  top: 11px;
}
.tutorial-page {
  padding-top: 76px;
}
.tutorial-video {
  display: block;
  width: 100%;
  height: auto;
}
.breadcrumb-shape-1 {
  translate: 0 16.3px;
}
.breadcrumb-shape-2 {
  translate: 0 14.8px;
}
.breadcrumb-shape-3 {
  translate: 0 10.1px;
}
.video-error {
  margin-top: 20px;
}
.video-error a {
  color: #7d25ec;
  text-decoration: underline;
}
@media (max-width: 1199px) {
  .gallery-slide {
    flex-basis: 33.333333%;
  }
}
@media (max-width: 991px) {
  .gallery-slide {
    flex-basis: 50%;
  }
}
@media (max-width: 575px) {
  .gallery-slide {
    flex-basis: 100%;
  }
  .gallery-dialog {
    max-width: calc(100vw - 50px) !important;
  }
  .gallery-lightbox-prev {
    left: -30px;
    padding: 3px;
  }
  .gallery-lightbox-next {
    right: -30px;
    padding: 3px;
  }
  .back-to-top {
    right: 20px;
    bottom: 20px;
  }
  .choose-item-content {
    height: auto;
    min-height: 100px;
  }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .replica-cursor {
    display: none;
  }
}
[data-slot='sheet-overlay'] {
  z-index: 110;
}
[data-slot='sheet-content'] {
  z-index: 111;
}
.video-error {
  display: block;
}
.choose-item-content-title:hover {
  color: #7d25ec;
}

.footer-buy-card-description {
  color: #d3d9e6;
  margin-bottom: 20px;
}

.support-contact-row,
.footer-widget ul li .support-contact-row {
  display: grid;
  grid-template-columns: 20px 5.25em max-content;
  align-items: center;
  justify-content: start;
  gap: 8px;
  text-align: left;
  line-height: 24px;
}
.support-contact-label,
.support-contact-value { white-space: nowrap; }
.support-contact-value { font-variant-numeric: tabular-nums; }
.footer-widget ul { margin: 0; padding: 0; }
.footer-widget ul li .support-contact-row { min-height: 28px; }
.mobile-support-link { display: flex; gap: 8px; align-items: center; padding: 12px 0; font-size: 14px; }

/* Shared QQ dropdown and recharge guide. */
.qq-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
}
.qq-menu-chevron { transition: transform 160ms ease; }
.qq-menu-trigger[data-popup-open] .qq-menu-chevron { transform: rotate(180deg); }
.isolate:has(> .qq-dropdown-menu) { z-index: 120; }
.qq-dropdown-menu {
  width: 270px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: #fff;
  color: #1b2a52;
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  box-shadow: 0 12px 36px #1b2a521f;
}
.qq-dropdown-item {
  min-height: 46px;
  padding: 12px;
  white-space: nowrap;
  color: #1b2a52;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.qq-dropdown-item:hover, .qq-dropdown-item[data-highlighted] {
  color: #7d25ec;
  background: #f4efff;
}
@media (max-width: 991px) {
  .header-main .row { flex-wrap: nowrap; }
  .header-brand-column { width: auto; }
  .header-actions-column { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 374px) {
  .header-brand-column { padding-right: 4px; }
  .header-actions-column { padding-left: 4px; }
  .header-logo img { max-width: 116px; }
  .header-menu-bar { margin-left: 4px; }
}
.recharge-banner { background: #f2f6fd; }
.recharge-guide { max-width: 1050px; padding-top: 64px; padding-bottom: 72px; }
.recharge-guide h2 { font-size: 30px; color: #1b2a52; margin-bottom: 18px; }
.recharge-intro { max-width: 760px; color: #57617b; font-size: 17px; line-height: 1.9; margin-bottom: 28px; }
.recharge-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.recharge-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid #e6e7f0;
  border-radius: 16px;
  color: #1b2a52;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.recharge-contact:hover { border-color: #7d25ec; color: #1b2a52; box-shadow: 0 8px 30px #7d25ec12; }
.recharge-contact-icon { width: 32px; height: 32px; margin-bottom: 16px; }
.recharge-contact-label { color: #66708a; font-size: 14px; }
.recharge-contact strong { font-size: 26px; margin: 6px 0 20px; letter-spacing: 0.3px; }
.recharge-contact-action { color: #7d25ec; font-size: 15px; font-weight: 600; }
.recharge-contact-note { color: #66708a; font-size: 14px; margin: 20px 0 40px; }
.recharge-steps { list-style: none; margin: 0; padding: 0; counter-reset: recharge; }
.recharge-steps li { position: relative; padding: 24px 0 24px 54px; border-top: 1px solid #e6e7f0; counter-increment: recharge; }
.recharge-steps li::before { content: '0' counter(recharge); position: absolute; left: 0; top: 24px; color: #7d25ec; font-size: 20px; font-weight: 700; }
.recharge-steps h3 { font-size: 19px; margin-bottom: 8px; color: #1b2a52; }
.recharge-steps p { color: #66708a; margin: 0; line-height: 1.8; }
@media (max-width: 767px) {
  .recharge-contacts { grid-template-columns: 1fr; }
  .recharge-contact { padding: 24px; }
  .recharge-guide { padding: 40px 24px 48px; }
  .recharge-guide h2 { font-size: 25px; }
}