/* Unified tutorial center UI refactor.
   Mobile-first SaaS help-center surface. Loaded last on tutorial pages. */
:root {
  --ui-primary: #1677ff;
  --ui-primary-weak: #eef5ff;
  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fbff;
  --ui-text: #101828;
  --ui-text-2: #475467;
  --ui-muted: #8a97aa;
  --ui-line: #e5eaf3;
  --ui-line-strong: #d8e2f0;
  --ui-green: #22c55e;
  --ui-orange: #ff7a1a;
  --ui-purple: #7c3aed;
  --ui-radius: 14px;
}

body[data-page] {
  background: #eaf0f8 !important;
  color: var(--ui-text) !important;
}

body[data-page] .app {
  background: transparent !important;
}

body[data-page] .main {
  background: transparent !important;
}

/* The Arco runtime remains available, but the visible injected alert made the
   page feel like a design note instead of a product screen. */
#arcoTutorialBar {
  display: none !important;
}

body.mobile-compact[data-page="home"] .main,
body.mobile-compact[data-page="home"].sidebar-collapsed .main {
  width: min(100%, 452px) !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  background: var(--ui-bg) !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="android"] .main,
body.mobile-compact[data-page="android"].sidebar-collapsed .main,
body.mobile-compact[data-page="ios"] .main,
body.mobile-compact[data-page="ios"].sidebar-collapsed .main,
body.mobile-compact[data-page="video"] .main,
body.mobile-compact[data-page="video"].sidebar-collapsed .main,
body.mobile-compact[data-page="guide"] .main,
body.mobile-compact[data-page="guide"].sidebar-collapsed .main,
body.mobile-compact[data-page="faq"] .main,
body.mobile-compact[data-page="faq"].sidebar-collapsed .main,
body.mobile-compact[data-page="changelog"] .main,
body.mobile-compact[data-page="changelog"].sidebar-collapsed .main,
body.mobile-compact[data-page="mine"] .main,
body.mobile-compact[data-page="mine"].sidebar-collapsed .main,
body.mobile-compact[data-page="me"] .main,
body.mobile-compact[data-page="me"].sidebar-collapsed .main,
body.mobile-compact[data-page="newbieGuide"] .main,
body.mobile-compact[data-page="newbieGuide"].sidebar-collapsed .main,
body.mobile-compact[data-page="promo"] .main,
body.mobile-compact[data-page="promo"].sidebar-collapsed .main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: var(--ui-bg) !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="home"] .main,
body.mobile-compact[data-page="home"].sidebar-collapsed .main {
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 24px 70px rgba(16, 24, 40, .08) !important;
}

body.mobile-compact[data-page="home"] .main,
body.mobile-compact[data-page="home"].sidebar-collapsed .main {
  min-height: 100vh !important;
}

body.mobile-compact .content,
body[data-page="home"].mobile-compact .content {
  padding: 14px 18px calc(92px + env(safe-area-inset-bottom)) !important;
  background: var(--ui-bg) !important;
}

body.mobile-compact .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  height: 72px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
}

.mobile-app-header {
  width: 100% !important;
}

.mobile-brand span {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 26px !important;
}

.mobile-brand strong,
.mobile-page-title strong {
  color: var(--ui-text) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.mobile-brand small,
.mobile-page-title small {
  color: var(--ui-muted) !important;
  font-size: 12px !important;
}

.mobile-service,
.mobile-back,
.mobile-app-header .menu-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

body.mobile-compact .btn {
  min-height: 38px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.mobile-compact .btn--primary {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
}

body.mobile-compact .btn--outline {
  border-color: #b9d5ff !important;
  background: #fff !important;
  color: var(--ui-primary) !important;
}

/* Section rhythm */
.home-page,
.mobile-home,
body.mobile-compact #pageContent {
  display: grid !important;
  gap: 16px !important;
}

.m-section-title,
.home-section-head {
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.m-section-title > span,
.home-section-head > span {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--ui-primary-weak) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
}

.m-section-title h2,
.home-section-head h2 {
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.m-section-title p,
.home-section-head p {
  margin: 2px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
}

/* Cards: one consistent surface, no pasted gradients. */
body.mobile-compact .card,
body.mobile-compact .m-panel,
body.mobile-compact .android-panel,
body.mobile-compact .ios-panel,
body.mobile-compact .video-main-card,
body.mobile-compact .video-submit-panel,
body.mobile-compact .video-plan-panel,
body.mobile-compact .guide-help-card,
body.mobile-compact .faq-panel,
.m-notice,
.home-block,
.home-reminder,
.android-hero,
.ios-hero,
.page-hero {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.home-block,
.android-panel,
.ios-panel,
.video-main-card,
.video-submit-panel,
.video-plan-panel,
.faq-panel,
.guide-help-card,
.page-hero,
.android-hero,
.ios-hero {
  padding: 16px !important;
}

/* Home */
.m-notice {
  padding: 14px !important;
}

.m-notice__main {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
}

.m-notice__icon,
.gamebox-promo__icon,
.home-platform-card__icon,
.home-action-row__icon,
.home-quick-card__icon,
.home-reminder__icon,
.android-hero__icon,
.ios-hero__apple {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ui-primary-weak) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
}

.m-notice h2,
.gamebox-promo strong,
.home-action-row strong,
.home-quick-card strong {
  color: var(--ui-text) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.m-notice p,
.gamebox-promo em,
.home-action-row em,
.home-quick-card em {
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

.m-notice__actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--ui-line) !important;
}

.gamebox-promo,
.home-action-row {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 13px 0 !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-quick-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.gamebox-promo:last-child,
.home-action-row:last-child {
  border-bottom: 0 !important;
}

.home-platform-grid,
.home-action-list,
.home-quick-grid {
  display: grid !important;
  gap: 10px !important;
}

.home-platform-card {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 116px !important;
  padding: 16px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.home-platform-card__icon {
  width: 54px !important;
  height: 54px !important;
}

.home-platform-card h3 {
  color: var(--ui-text) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.home-platform-card p {
  margin-top: 6px !important;
  color: var(--ui-text-2) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.u-tag,
.u-tag--blue,
.u-tag--purple {
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: var(--ui-primary-weak) !important;
  color: var(--ui-primary) !important;
  font-weight: 700 !important;
}

.home-reminder {
  padding: 14px !important;
}

.home-reminder__head {
  padding: 0 !important;
  border: 0 !important;
}

/* Tutorial hero */
.android-hero,
.ios-hero,
.page-hero {
  display: grid !important;
  gap: 14px !important;
  min-height: auto !important;
}

.android-hero h1,
.ios-hero h1,
.page-hero h1 {
  color: var(--ui-text) !important;
  font-size: 26px !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
}

.android-hero p,
.ios-hero p,
.page-hero p {
  color: var(--ui-text-2) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.android-hero__actions,
.ios-hero__actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.m-warning,
.android-alert,
.android-download-box,
.m-download-row {
  border: 1px solid #fed7aa !important;
  border-radius: 12px !important;
  background: #fff7ed !important;
  color: var(--ui-orange) !important;
  box-shadow: none !important;
}

/* Tabs */
.method-tabs,
.video-tab-buttons,
.guide-tabs,
.faq-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: #f1f5fb !important;
  box-shadow: none !important;
}

.method-tab,
.video-tab-btn,
.guide-tab {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--ui-text-2) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.method-tab.is-active,
.video-tab-btn.is-active,
.guide-tab.is-active {
  background: #fff !important;
  color: var(--ui-primary) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
}

/* Lists and content blocks */
.android-method-card,
.android-step-card,
.android-tip-card,
.ios-notice-card,
.video-category-card,
.faq-item,
.changelog-card {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.android-method-card:last-child,
.android-step-card:last-child,
.android-tip-card:last-child,
.ios-notice-card:last-child,
.video-category-card:last-child,
.faq-item:last-child,
.changelog-card:last-child {
  border-bottom: 0 !important;
}

.android-method-card li > span,
.android-step-card__badge,
.video-category-card__step,
.faq-q__num {
  border-radius: 8px !important;
  background: var(--ui-primary-weak) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.android-tip-card h3,
.ios-notice-card h3,
.video-category-card h3,
.faq-q__title,
.changelog-card strong {
  color: var(--ui-text) !important;
  font-weight: 800 !important;
}

.android-tip-card p,
.ios-notice-card p,
.video-category-card p,
.faq-a,
.changelog-card p,
.changelog-card time {
  color: var(--ui-text-2) !important;
}

.faq-a {
  margin: 0 0 12px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: var(--ui-primary-weak) !important;
}

/* Video and guide */
.video-search,
.guide-search,
.faq-search,
.video-submit-field input,
.video-submit-field textarea,
.video-submit-file-btn,
.video-submit-cover__box {
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.video-player__qq-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.guide-empty {
  border: 1px dashed var(--ui-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.guide-help-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Changelog timeline */
.changelog-card {
  position: relative !important;
  padding-left: 18px !important;
  border-left: 2px solid #cfe1ff !important;
}

.changelog-card::before {
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  top: 18px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--ui-primary) !important;
}

/* Bottom navigation */
.mobile-tabbar {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: calc(82px + env(safe-area-inset-bottom)) !important;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  border: 1px solid var(--ui-line) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -14px 36px rgba(16, 24, 40, .08) !important;
  transform: none !important;
  backdrop-filter: blur(16px) !important;
}

.mobile-tabbar a {
  border-radius: 14px !important;
  color: #75839a !important;
  font-weight: 750 !important;
}

.mobile-tabbar span {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  background: transparent !important;
}

.mobile-tabbar strong {
  font-size: 12px !important;
}

.mobile-tabbar a.is-active {
  color: var(--ui-primary) !important;
  background: transparent !important;
}

.mobile-tabbar a.is-active span {
  background: var(--ui-primary-weak) !important;
}

@media (max-width: 520px) {
  body.mobile-compact[data-page="home"] .main,
  body.mobile-compact[data-page="home"].sidebar-collapsed .main {
    width: 100% !important;
    box-shadow: none !important;
  }

  body.mobile-compact .content,
  body[data-page="home"].mobile-compact .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Final specificity guard against older page-specific overrides. */
body.mobile-compact[data-page="home"] .m-notice,
body.mobile-compact[data-page="home"] .home-block,
body.mobile-compact[data-page="home"] .home-reminder,
body.mobile-compact[data-page="android"] .android-hero,
body.mobile-compact[data-page="android"] .android-panel,
body.mobile-compact[data-page="ios"] .ios-hero,
body.mobile-compact[data-page="ios"] .ios-panel,
body.mobile-compact[data-page="video"] .page-hero,
body.mobile-compact[data-page="video"] .video-main-card,
body.mobile-compact[data-page="video"] .video-submit-panel,
body.mobile-compact[data-page="video"] .video-plan-panel,
body.mobile-compact[data-page="guide"] .page-hero,
body.mobile-compact[data-page="guide"] .guide-layout,
body.mobile-compact[data-page="faq"] .page-hero,
body.mobile-compact[data-page="faq"] .faq-panel,
body.mobile-compact[data-page="changelog"] .page-hero,
body.mobile-compact[data-page="changelog"] .changelog-card,
body.mobile-compact[data-page="changelog"] .guide-help-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="home"] .m-notice,
body.mobile-compact[data-page="home"] .home-block,
body.mobile-compact[data-page="home"] .home-reminder,
body.mobile-compact[data-page="android"] .android-hero,
body.mobile-compact[data-page="android"] .android-panel,
body.mobile-compact[data-page="ios"] .ios-hero,
body.mobile-compact[data-page="ios"] .ios-panel,
body.mobile-compact[data-page="video"] .page-hero,
body.mobile-compact[data-page="video"] .video-main-card,
body.mobile-compact[data-page="video"] .video-submit-panel,
body.mobile-compact[data-page="video"] .video-plan-panel,
body.mobile-compact[data-page="guide"] .page-hero,
body.mobile-compact[data-page="guide"] .guide-layout,
body.mobile-compact[data-page="faq"] .page-hero,
body.mobile-compact[data-page="faq"] .faq-panel {
  padding: 16px !important;
}

body.mobile-compact[data-page="home"] .home-platform-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="home"] .gamebox-promo,
body.mobile-compact[data-page="home"] .home-action-row,
body.mobile-compact[data-page="home"] .home-quick-card,
body.mobile-compact[data-page="android"] .android-method-card,
body.mobile-compact[data-page="android"] .android-step-card,
body.mobile-compact[data-page="android"] .android-tip-card,
body.mobile-compact[data-page="ios"] .ios-notice-card,
body.mobile-compact[data-page="video"] .video-category-card,
body.mobile-compact[data-page="faq"] .faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="home"] .gamebox-promo:last-child,
body.mobile-compact[data-page="home"] .home-action-row:last-child,
body.mobile-compact[data-page="home"] .home-quick-card:last-child,
body.mobile-compact[data-page="android"] .android-method-card:last-child,
body.mobile-compact[data-page="android"] .android-step-card:last-child,
body.mobile-compact[data-page="android"] .android-tip-card:last-child,
body.mobile-compact[data-page="ios"] .ios-notice-card:last-child,
body.mobile-compact[data-page="video"] .video-category-card:last-child,
body.mobile-compact[data-page="faq"] .faq-item:last-child {
  border-bottom: 0 !important;
}

body.mobile-compact[data-page="home"] .mobile-tabbar {
  width: min(100%, 452px) !important;
  height: calc(82px + env(safe-area-inset-bottom)) !important;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  border: 1px solid var(--ui-line) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -14px 36px rgba(16, 24, 40, .08) !important;
}

body[data-page="android"] #pageContent .android-hero,
body[data-page="android"] #pageContent .android-panel,
body[data-page="ios"] #pageContent .ios-hero,
body[data-page="ios"] #pageContent .ios-panel,
body[data-page="video"] #pageContent .page-hero,
body[data-page="video"] #pageContent .video-main-card,
body[data-page="video"] #pageContent .video-submit-panel,
body[data-page="video"] #pageContent .video-plan-panel,
body[data-page="guide"] #pageContent .page-hero,
body[data-page="guide"] #pageContent .guide-layout,
body[data-page="faq"] #pageContent .page-hero,
body[data-page="faq"] #pageContent .faq-panel,
body[data-page="changelog"] #pageContent .page-hero,
body[data-page="changelog"] #pageContent .changelog-card,
body[data-page="changelog"] #pageContent .guide-help-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="android"] #pageContent .android-hero,
body[data-page="android"] #pageContent .android-panel,
body[data-page="ios"] #pageContent .ios-hero,
body[data-page="ios"] #pageContent .ios-panel,
body[data-page="video"] #pageContent .page-hero,
body[data-page="video"] #pageContent .video-main-card,
body[data-page="video"] #pageContent .video-submit-panel,
body[data-page="video"] #pageContent .video-plan-panel,
body[data-page="guide"] #pageContent .page-hero,
body[data-page="guide"] #pageContent .guide-layout,
body[data-page="faq"] #pageContent .page-hero,
body[data-page="faq"] #pageContent .faq-panel {
  padding: 16px !important;
}

body[data-page="video"] #pageContent .video-category-card,
body[data-page="android"] #pageContent .android-method-card,
body[data-page="android"] #pageContent .android-step-card,
body[data-page="android"] #pageContent .android-tip-card,
body[data-page="ios"] #pageContent .ios-notice-card,
body[data-page="faq"] #pageContent .faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Runtime rebuilt help-center UI */
.hc-page {
  display: grid;
  gap: 14px;
}

.hc-section,
.hc-notice,
.hc-hero,
.hc-reminder,
.hc-video-player,
.hc-support,
.hc-bottom-actions {
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.hc-section,
.hc-notice,
.hc-hero,
.hc-reminder,
.hc-video-player,
.hc-support {
  padding: 14px;
}

.hc-section__head {
  margin-bottom: 10px;
}

.hc-section__head h2,
.hc-hero h1,
.hc-video-player h1 {
  margin: 0;
  color: var(--ui-text);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 850;
}

.hc-hero p,
.hc-video-player p,
.hc-reminder p,
.hc-support p {
  margin: 5px 0 0;
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.6;
}

.hc-row-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.hc-row-main strong {
  display: block;
  color: var(--ui-text);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
}

.hc-row-main p {
  margin: 4px 0 0;
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.hc-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--ui-primary-weak);
  color: var(--ui-primary);
  font-size: 22px;
  font-weight: 850;
}

.hc-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.hc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.hc-actions--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 14px;
  border-top: 1px solid var(--ui-line);
}

.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #b9d5ff;
  background: #fff;
  color: var(--ui-primary);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.hc-btn--primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.hc-platforms {
  display: grid;
  gap: 10px;
}

.hc-platform {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.hc-platform .hc-icon {
  width: 54px;
  height: 54px;
}

.hc-platform .hc-icon svg {
  width: 28px;
  height: 28px;
}

.hc-platform strong {
  display: block;
  color: var(--ui-text);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 850;
}

.hc-platform em,
.hc-list-row em,
.hc-video-row em {
  display: block;
  margin-top: 5px;
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.hc-platform b {
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ui-primary-weak);
  color: var(--ui-primary);
  font-size: 12px;
}

.hc-list {
  display: grid;
}

.hc-list-row,
.hc-note,
.hc-video-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.hc-list-row:last-child,
.hc-note:last-child,
.hc-video-row:last-child {
  border-bottom: 0;
}

.hc-list-row strong,
.hc-video-row strong {
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 800;
}

.hc-list-row b {
  color: var(--ui-primary);
  font-size: 14px;
}

.hc-note {
  grid-template-columns: 32px minmax(0, 1fr);
}

.hc-note .hc-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.hc-note .hc-icon svg {
  width: 18px;
  height: 18px;
}

.hc-note p {
  margin: 0;
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.6;
}

.hc-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-timeline li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-timeline li:last-child {
  border-bottom: 0;
}

.hc-timeline span,
.hc-faq summary span,
.hc-video-row > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ui-primary-weak);
  color: var(--ui-primary);
  font-size: 13px;
  font-weight: 850;
}

.hc-timeline p {
  margin: 3px 0 0;
  color: var(--ui-text);
  font-size: 14px;
  line-height: 1.55;
}

.hc-faq-list {
  display: grid;
}

.hc-faq {
  border-bottom: 1px solid var(--ui-line);
}

.hc-faq:last-child {
  border-bottom: 0;
}

.hc-faq summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  color: var(--ui-text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.hc-faq summary::-webkit-details-marker {
  display: none;
}

.hc-faq p {
  margin: 0 0 12px 40px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ui-primary-weak);
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.6;
}

.hc-bottom-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

.hc-search {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
}

.hc-search .hc-icon {
  width: 28px;
  height: 28px;
}

.hc-search .hc-icon svg {
  width: 16px;
  height: 16px;
}

.hc-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-text);
  font-size: 14px;
}

.hc-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: #f1f5fb;
}

.hc-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-text-2);
  font-weight: 750;
}

.hc-tabs button.is-active {
  background: #fff;
  color: var(--ui-primary);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.hc-support {
  display: grid;
  gap: 8px;
}

.hc-support strong,
.hc-reminder strong {
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 850;
}

.hc-video-player {
  display: grid;
  gap: 12px;
}

.hc-video-player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: #0f172a;
}

.hc-video-list {
  display: grid;
}

.hc-video-row {
  grid-template-columns: 32px minmax(0, 1fr);
}

.hc-video-row.is-active strong {
  color: var(--ui-primary);
}

@media (max-width: 380px) {
  .hc-actions {
    grid-template-columns: 1fr;
  }

  .hc-platform {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .hc-platform b {
    grid-column: 2;
    justify-self: start;
  }
}

/* Enterprise SaaS final pass: compact, operational, low-decoration. */
:root {
  --saas-bg: #f5f7fa;
  --saas-surface: #ffffff;
  --saas-line: #e5e7eb;
  --saas-line-2: #edf0f5;
  --saas-text: #111827;
  --saas-text-2: #4b5563;
  --saas-muted: #9ca3af;
  --saas-primary: #1677ff;
  --saas-primary-bg: #eef5ff;
  --saas-radius: 10px;
}

body[data-page] {
  background: var(--bg, #f5f7fa) !important;
}

body.mobile-compact[data-page="home"] .main,
body.mobile-compact[data-page="home"].sidebar-collapsed .main {
  width: min(100%, 430px) !important;
  margin: 0 auto !important;
  background: var(--bg, #f5f7fa) !important;
  box-shadow: none !important;
}

body.mobile-compact[data-page="android"] .main,
body.mobile-compact[data-page="android"].sidebar-collapsed .main,
body.mobile-compact[data-page="ios"] .main,
body.mobile-compact[data-page="ios"].sidebar-collapsed .main,
body.mobile-compact[data-page="video"] .main,
body.mobile-compact[data-page="video"].sidebar-collapsed .main,
body.mobile-compact[data-page="guide"] .main,
body.mobile-compact[data-page="guide"].sidebar-collapsed .main,
body.mobile-compact[data-page="faq"] .main,
body.mobile-compact[data-page="faq"].sidebar-collapsed .main,
body.mobile-compact[data-page="changelog"] .main,
body.mobile-compact[data-page="changelog"].sidebar-collapsed .main,
body.mobile-compact[data-page="mine"] .main,
body.mobile-compact[data-page="mine"].sidebar-collapsed .main,
body.mobile-compact[data-page="me"] .main,
body.mobile-compact[data-page="me"].sidebar-collapsed .main,
body.mobile-compact[data-page="newbieGuide"] .main,
body.mobile-compact[data-page="newbieGuide"].sidebar-collapsed .main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--bg, #f5f7fa) !important;
  box-shadow: none !important;
}

body.mobile-compact .topbar {
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--saas-line) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: none !important;
}

.mobile-brand {
  gap: 10px !important;
}

.mobile-brand span {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: var(--saas-primary) !important;
  color: #fff !important;
  font-size: 20px !important;
}

.mobile-brand strong,
.mobile-page-title strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--saas-text) !important;
}

.mobile-brand small,
.mobile-page-title small {
  display: none !important;
}

.mobile-service,
.mobile-back,
.mobile-app-header .menu-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--saas-line) !important;
  background: #fff !important;
  color: var(--saas-text-2) !important;
}

body.mobile-compact .content,
body[data-page="home"].mobile-compact .content {
  padding: 12px 12px calc(82px + env(safe-area-inset-bottom)) !important;
}

.hc-page {
  gap: 10px !important;
}

.hc-section,
.hc-notice,
.hc-hero,
.hc-reminder,
.hc-video-player,
.hc-support,
.hc-bottom-actions,
body[data-page="android"] #pageContent .android-hero,
body[data-page="android"] #pageContent .android-panel,
body[data-page="ios"] #pageContent .ios-hero,
body[data-page="ios"] #pageContent .ios-panel,
body[data-page="video"] #pageContent .page-hero,
body[data-page="video"] #pageContent .video-main-card,
body[data-page="faq"] #pageContent .faq-panel {
  border: 1px solid var(--saas-line) !important;
  border-radius: var(--saas-radius) !important;
  background: var(--saas-surface) !important;
  box-shadow: none !important;
}

.hc-section,
.hc-notice,
.hc-hero,
.hc-reminder,
.hc-video-player,
.hc-support {
  padding: 12px !important;
}

.hc-section__head {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--saas-line-2) !important;
}

.hc-section__head h2,
.hc-hero h1,
.hc-video-player h1 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--saas-text) !important;
}

.hc-hero p,
.hc-video-player p,
.hc-reminder p,
.hc-support p,
.hc-row-main p,
.hc-platform em,
.hc-list-row em,
.hc-video-row em,
.hc-note p,
.hc-timeline p,
.hc-faq p {
  color: var(--saas-text-2) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.hc-row-main {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.hc-row-main strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.hc-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--saas-primary-bg) !important;
  color: var(--saas-primary) !important;
}

.hc-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.hc-actions,
.hc-actions--two {
  gap: 8px !important;
  margin-top: 10px !important;
}

.hc-btn {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.hc-platforms {
  gap: 0 !important;
}

.hc-platform {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  min-height: 68px !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--saas-line-2) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.hc-platform:last-child {
  border-bottom: 0 !important;
}

.hc-platform .hc-icon {
  width: 34px !important;
  height: 34px !important;
}

.hc-platform .hc-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.hc-platform strong {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.hc-platform b {
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.hc-list-row,
.hc-note,
.hc-video-row {
  min-height: 50px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--saas-line-2) !important;
}

.hc-list-row strong,
.hc-video-row strong {
  font-size: 14px !important;
  font-weight: 650 !important;
}

.hc-list-row b {
  font-size: 13px !important;
  font-weight: 650 !important;
}

.hc-reminder {
  border-left: 3px solid var(--saas-primary) !important;
}

.hc-reminder strong,
.hc-support strong {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.hc-timeline li {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--saas-line-2) !important;
}

.hc-timeline span,
.hc-faq summary span,
.hc-video-row > span {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.hc-faq summary {
  min-height: 46px !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.hc-faq p {
  margin-left: 34px !important;
  border-radius: 8px !important;
}

.hc-tabs {
  border-radius: 8px !important;
  background: #f3f5f8 !important;
}

.hc-tabs button {
  min-height: 30px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

.hc-video-player video {
  border-radius: 8px !important;
}

.hc-bottom-actions {
  padding: 10px !important;
  gap: 8px !important;
}

body.mobile-compact[data-page="home"] .mobile-tabbar {
  width: min(100%, 430px) !important;
  height: calc(68px + env(safe-area-inset-bottom)) !important;
  padding: 6px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -8px 20px rgba(17, 24, 39, .06) !important;
}

.mobile-tabbar a {
  border-radius: 10px !important;
}

.mobile-tabbar span {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
}

.mobile-tabbar .hc-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.mobile-tabbar strong {
  font-size: 11px !important;
  font-weight: 650 !important;
}

body[data-page] #pageContent .hc-hero,
body[data-page] #pageContent .hc-section,
body[data-page] #pageContent .hc-notice,
body[data-page] #pageContent .hc-reminder,
body[data-page] #pageContent .hc-video-player,
body[data-page] #pageContent .hc-support,
body[data-page] #pageContent .hc-bottom-actions {
  border: 1px solid var(--saas-line) !important;
  border-radius: var(--saas-radius) !important;
  background: var(--saas-surface) !important;
  box-shadow: none !important;
}

body[data-page] #pageContent .hc-hero h1,
body[data-page] #pageContent .hc-video-player h1 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body[data-page] #pageContent .hc-btn {
  min-height: 34px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body[data-page] #pageContent .hc-article-list,
body[data-page] #pageContent .hc-log-list {
  display: grid !important;
  gap: 0 !important;
}

body[data-page] #pageContent .hc-article {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  color: var(--saas-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--saas-line) !important;
}

body[data-page] #pageContent .hc-article:last-child {
  border-bottom: 0 !important;
}

body[data-page] #pageContent .hc-article .hc-icon {
  width: 34px !important;
  height: 34px !important;
}

body[data-page] #pageContent .hc-article span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body[data-page] #pageContent .hc-article b {
  width: fit-content !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #EEF5FF !important;
  color: var(--saas-primary) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body[data-page] #pageContent .hc-article strong {
  color: var(--saas-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

body[data-page] #pageContent .hc-article em {
  color: var(--saas-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}

body[data-page] #pageContent .hc-article i {
  color: var(--saas-primary) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

body[data-page] #pageContent .hc-log {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--saas-line) !important;
}

body[data-page] #pageContent .hc-log:last-child {
  border-bottom: 0 !important;
}

body[data-page] #pageContent .hc-log > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body[data-page] #pageContent .hc-log strong {
  color: var(--saas-text) !important;
  font-size: 15px !important;
}

body[data-page] #pageContent .hc-log time {
  color: var(--saas-muted) !important;
  font-size: 12px !important;
}

body[data-page] #pageContent .hc-log b {
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #EEF5FF !important;
  color: var(--saas-primary) !important;
  font-size: 11px !important;
}

body[data-page] #pageContent .hc-log ul {
  display: grid !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body[data-page] #pageContent .hc-log li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--saas-body) !important;
  font-size: 13px !important;
}

body[data-page] #pageContent .hc-log li .hc-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background: transparent !important;
}

/* Home mobile app page */
body[data-page="home"] {
  background: #F5F7FA !important;
}

body[data-page="home"] .main,
body[data-page="home"] .content {
  background: #F5F7FA !important;
}

body[data-page="home"] #pageContent {
  width: min(100%, 430px) !important;
  margin: 0 auto !important;
  padding: 14px 16px calc(92px + env(safe-area-inset-bottom)) !important;
}

body[data-page="home"] .home-app {
  display: grid !important;
  gap: 14px !important;
}

.home-app-header {
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 16px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.home-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.home-brand > span {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #1677FF 0%, #0E63E8 100%) !important;
  color: #FFFFFF !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(22, 119, 255, 0.24) !important;
}

.home-brand h1 {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.home-brand p {
  margin: 6px 0 0 !important;
  color: #64748B !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.home-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.home-service-btn,
.home-menu-btn {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 13px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.home-service-btn {
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.home-menu-btn {
  width: 42px !important;
  padding: 0 !important;
}

.home-service-btn .hc-icon,
.home-menu-btn .hc-icon {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  color: currentColor !important;
}

.home-platform-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

.home-platform-card {
  position: relative !important;
  min-height: 142px !important;
  height: 142px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 18px 14px 16px !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  transform: translateZ(0) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}

.home-platform-card:active {
  transform: scale(.985) !important;
}

.home-platform-card--android {
  background: linear-gradient(135deg, #1677FF 0%, #0A64EA 100%) !important;
}

.home-platform-card--ios {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%) !important;
}

.home-platform-card h2 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.home-platform-card p {
  position: relative !important;
  z-index: 1 !important;
  margin: 12px 0 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
}

.home-platform-card footer {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.home-platform-card footer i {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .24) !important;
  font-style: normal !important;
}

.home-platform-card footer .hc-icon {
  width: 16px !important;
  height: 16px !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.home-platform-card__mark {
  position: absolute !important;
  right: -16px !important;
  bottom: -18px !important;
  width: 104px !important;
  height: 104px !important;
  display: grid !important;
  place-items: center !important;
  opacity: .34 !important;
  color: #FFFFFF !important;
}

.home-platform-card__mark .hc-icon {
  width: 96px !important;
  height: 96px !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

.home-quick-card {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.home-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 12px 4px 10px !important;
  border: 1px solid #E8EEF5 !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  appearance: none !important;
  cursor: pointer !important;
  gap: 8px !important;
  color: #0F172A !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
}

.home-quick-action:active {
  transform: scale(0.98) !important;
  background: #F1F5F9 !important;
}

.home-quick-action__icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  flex-shrink: 0 !important;
}

.home-quick-action__icon .hc-icon,
.home-quick-action > .hc-icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  background: #EEF5FF !important;
  color: #1677FF !important;
}

.home-quick-action__icon .hc-icon svg,
.home-quick-action > .hc-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.home-quick-action--video .home-quick-action__icon .hc-icon,
.home-quick-action:not([class*="--"]) > .hc-icon {
  background: #EEF5FF !important;
  color: #1677FF !important;
}

.home-quick-action--image .home-quick-action__icon .hc-icon,
.home-quick-action--image > .hc-icon {
  background: #ECFDF5 !important;
  color: #16A34A !important;
}

.home-quick-action--question .home-quick-action__icon .hc-icon,
.home-quick-action--question > .hc-icon {
  background: #FFF7ED !important;
  color: #EA580C !important;
}

.home-quick-action--service .home-quick-action__icon .hc-icon,
.home-quick-action--service > .hc-icon {
  background: #F3E8FF !important;
  color: #7C3AED !important;
}

.home-quick-action__label,
.home-quick-action strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

.home-news-card {
  padding: 16px 14px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.home-news-head h2 {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.home-news-head p {
  margin: 8px 0 0 !important;
  color: #64748B !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.home-news-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.home-news-tabs button {
  min-width: 0 !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.home-news-tabs button.is-active {
  background: #1677FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(22, 119, 255, .22) !important;
}

.home-news-list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.home-news-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 96px !important;
  padding: 12px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
}

.home-news-copy {
  min-width: 0 !important;
}

.home-news-copy h3 {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

.home-news-copy time {
  display: block !important;
  margin-top: 6px !important;
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.home-news-copy p {
  display: -webkit-box !important;
  margin: 8px 0 0 !important;
  overflow: hidden !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.home-news-thumb {
  position: relative !important;
  width: 110px !important;
  height: 70px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #EEF5FF 0%, #DCEBFF 100%) !important;
}

.home-news-thumb--ios {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%) !important;
}

.home-news-thumb--service {
  background: linear-gradient(135deg, #EEF5FF 0%, #E0F2FE 100%) !important;
}

.home-news-thumb .hc-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  color: #1677FF !important;
}

.home-news-thumb--ios .hc-icon {
  color: #7C3AED !important;
}

.home-news-thumb--service .hc-icon {
  color: #1677FF !important;
}

.home-news-item[data-preview],
a.home-news-item {
  cursor: pointer;
}

a.home-news-item {
  text-decoration: none;
  color: inherit;
}

.home-news-item--interactive {
  cursor: pointer;
}

.home-news-thumb--image {
  background: #FFFFFF !important;
  border: 1px solid #E5EAF3 !important;
}

.home-news-thumb--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.home-news-thumb span {
  position: absolute !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .52) !important;
}

.home-news-thumb span:nth-child(2) {
  width: 22px !important;
  height: 22px !important;
  left: 14px !important;
  bottom: 12px !important;
}

.home-news-thumb span:nth-child(3) {
  width: 34px !important;
  height: 18px !important;
  right: 12px !important;
  top: 12px !important;
}

.home-more-link {
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 16px auto 0 !important;
  color: #1677FF !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.home-more-link .hc-icon {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  color: currentColor !important;
}

@media (max-width: 374px) {
  body[data-page="home"] #pageContent {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .home-brand > span {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    font-size: 27px !important;
  }

  .home-brand h1 {
    font-size: 23px !important;
  }

  .home-service-btn span {
    display: none !important;
  }

  .home-service-btn {
    width: 42px !important;
    padding: 0 !important;
  }

  .home-platform-card {
    min-height: 136px !important;
    padding: 16px 12px 14px !important;
  }

  .home-platform-card h2 {
    font-size: 20px !important;
  }

  .home-platform-card p {
    font-size: 13px !important;
  }

  .home-news-item {
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  .home-news-thumb {
    width: 96px !important;
  }
}

/* Home fidelity pass: isolate from legacy homepage rules. */
body[data-page="home"] .topbar,
body[data-page="home"] .sidebar,
body[data-page="home"] .mask {
  display: none !important;
}

body[data-page="home"] .app,
body[data-page="home"] .main,
body[data-page="home"] .content {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #F5F7FA !important;
}

body[data-page="home"] .content {
  display: block !important;
}

body[data-page="home"] #pageContent {
  box-sizing: border-box !important;
  width: min(100vw, 430px) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 14px 16px calc(104px + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
}

body[data-page="home"] .home-app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

body[data-page="home"] .home-app-header {
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

body[data-page="home"] .home-brand {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body[data-page="home"] .home-brand > span {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #1677FF, #0E63E8) !important;
  color: #FFFFFF !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

body[data-page="home"] .home-brand h1 {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

body[data-page="home"] .home-brand p {
  margin: 6px 0 0 !important;
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body[data-page="home"] .home-header-actions {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas:
    "buy buy"
    "service menu" !important;
  gap: 7px !important;
  align-items: center !important;
  justify-items: end !important;
}

body[data-page="home"] .home-buy-btn {
  grid-area: buy !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  background: #1677FF !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(22, 119, 255, .18) !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-service-btn {
  grid-area: service !important;
}

body[data-page="home"] .home-menu-btn {
  grid-area: menu !important;
}

body[data-page="home"] .home-service-btn,
body[data-page="home"] .home-menu-btn {
  height: 38px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}

body[data-page="home"] .home-service-btn {
  padding: 0 10px !important;
  font-size: 13px !important;
}

body[data-page="home"] .home-menu-btn {
  width: 38px !important;
}

body[data-page="home"] .home-service-btn .hc-icon,
body[data-page="home"] .home-menu-btn .hc-icon {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
}

body[data-page="home"] .home-platform-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-page="home"] .app-platform-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  height: 144px !important;
  min-height: 144px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 17px 14px 15px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  transform: translateZ(0) !important;
}

body[data-page="home"] .app-platform-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
}

body[data-page="home"] .app-platform-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%) !important;
}

body[data-page="home"] .app-platform-card--android::before {
  background: linear-gradient(135deg, #1880FF 0%, #0862E8 100%) !important;
}

body[data-page="home"] .app-platform-card--ios::before {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
}

body[data-page="home"] .app-platform-card h2 {
  max-width: 108px !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .16) !important;
  font-size: 21px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
}

body[data-page="home"] .app-platform-card p {
  max-width: 122px !important;
  margin: 10px 0 0 !important;
  color: rgba(255, 255, 255, .90) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

body[data-page="home"] .app-platform-card footer {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body[data-page="home"] .app-platform-card footer i {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.24) !important;
}

body[data-page="home"] .app-platform-card footer .hc-icon {
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

body[data-page="home"] .app-platform-card__mark {
  position: absolute !important;
  right: -20px !important;
  bottom: -18px !important;
  width: 96px !important;
  height: 96px !important;
  display: grid !important;
  place-items: center !important;
  opacity: .26 !important;
  pointer-events: none !important;
}

body[data-page="home"] .app-platform-card__mark .hc-icon {
  width: 92px !important;
  height: 92px !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

body[data-page="home"] .app-platform-card__mark .hc-icon svg {
  width: 92px !important;
  height: 92px !important;
}

body[data-page="home"] .mobile-tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: calc(76px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  border: 1px solid #E5EAF3 !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 60 !important;
}

body[data-page="home"] .mobile-tabbar .mobile-tabbar__item,
body[data-page="home"] .mobile-tabbar a {
  min-width: 0 !important;
  height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 5px 0 !important;
  border-radius: 12px !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body[data-page="home"] .mobile-tabbar a .hc-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: currentColor !important;
}

body[data-page="home"] .mobile-tabbar a .hc-icon svg {
  width: 21px !important;
  height: 21px !important;
}

body[data-page="home"] .mobile-tabbar a strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 11px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body[data-page="home"] .mobile-tabbar a.is-active {
  color: #1677FF !important;
}

body[data-page="home"] .mobile-tabbar a.is-active .hc-icon {
  background: #EEF5FF !important;
}

/* Home top rebuild: brand header and core entry cards. */
body[data-page="home"] .home-top {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

body[data-page="home"] .home-top__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 44px !important;
}

body[data-page="home"] .home-top__tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}

body[data-page="home"] .home-brand {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

body[data-page="home"] .home-brand__icon,
body[data-page="home"] .home-brand > span {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1677FF, #0E63E8) !important;
  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 14px rgba(22, 119, 255, .18) !important;
}

body[data-page="home"] .home-brand__copy,
body[data-page="home"] .home-brand > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-page="home"] .home-brand h1 {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-brand p {
  margin: 3px 0 0 !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-service-btn,
body[data-page="home"] .home-menu-btn {
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #E8EDF5 !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-menu-btn {
  width: 34px !important;
  padding: 0 !important;
}

body[data-page="home"] .home-service-btn .hc-icon,
body[data-page="home"] .home-menu-btn .hc-icon,
body[data-page="home"] .home-service-btn .hc-icon svg,
body[data-page="home"] .home-menu-btn .hc-icon svg {
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  color: #475569 !important;
}

@media (max-width: 360px) {
  body[data-page="home"] .home-service-btn span:not(.hc-icon) {
    display: none !important;
  }

  body[data-page="home"] .home-service-btn {
    width: 34px !important;
    padding: 0 !important;
  }
}

@media (min-width: 960px) {
  body[data-page="home"] .home-top__header {
    display: none !important;
  }

  body[data-page="home"] .home-top__meta {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  body[data-page="home"] .home-top--v2 {
    display: none !important;
  }
}

/* Home top v2: gradient banner */
body[data-page="home"] .home-top--v2 {
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-top--v2 .home-top__banner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 8px 10px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04) !important;
}

body[data-page="home"] .home-top--v2 .home-top__banner::before {
  display: none !important;
}

body[data-page="home"] .home-top--v2 .home-top__intro {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-page="home"] .home-top--v2 .home-top__eyebrow {
  display: inline-flex !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

body[data-page="home"] .home-top--v2 .home-top__title {
  margin: 0 !important;
  color: #0F172A !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-page="home"] .home-top--v2 .home-top__sub {
  margin-left: 6px !important;
  color: #64748B !important;
  font-size: 10px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
}

body[data-page="home"] .home-top--v2 .home-top__actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

body[data-page="home"] .home-top--v2 .home-top__buy {
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: #1677FF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-top--v2 .home-top__icon-btn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

body[data-page="home"] .home-top--v2 .home-top__icon-btn .hc-icon,
body[data-page="home"] .home-top--v2 .home-top__icon-btn .hc-icon svg {
  width: 13px !important;
  height: 13px !important;
  background: transparent !important;
  color: #475569 !important;
}

body[data-page="home"] .home-top--v2 .home-top__tags {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

body[data-page="home"] .home-top--v2 .home-top__tags span {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .94) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

@media (max-width: 360px) {
  body[data-page="home"] .home-top--v2 .home-top__buy {
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  body[data-page="home"] .home-top--v2 .home-top__title {
    font-size: 14px !important;
  }

  body[data-page="home"] .home-top--v2 .home-top__sub {
    display: none !important;
  }
}

body[data-page="home"] .home-top__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #EEF2F7 !important;
}

body[data-page="home"] .home-top__meta span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748B !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-buy-btn {
  height: 34px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  background: #1677FF !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(22, 119, 255, .18) !important;
}

body[data-page="home"] .home-entry-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-page="home"] .home-entry-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  height: 190px !important;
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 18px 14px 15px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  transform: translateZ(0) !important;
}

body[data-page="home"] .home-entry-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
}

body[data-page="home"] .home-entry-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 58%) !important;
}

body[data-page="home"] .home-entry-card--android::before {
  background: linear-gradient(135deg, #1682FF 0%, #075EE6 100%) !important;
}

body[data-page="home"] .home-entry-card--ios::before {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
}

body[data-page="home"] .home-entry-card__content,
body[data-page="home"] .home-entry-card__action {
  position: relative !important;
  z-index: 2 !important;
}

body[data-page="home"] .home-entry-card h2 {
  max-width: 120px !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .18) !important;
}

body[data-page="home"] .home-entry-card p {
  max-width: 148px !important;
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, .90) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-page="home"] .home-entry-card__action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: fit-content !important;
  margin-top: auto !important;
  padding: 6px 10px 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body[data-page="home"] .home-entry-card__action-text {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  flex: 0 0 24px !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon svg {
  width: 15px !important;
  height: 15px !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

body[data-page="home"] .home-entry-card__mark {
  position: absolute !important;
  right: -16px !important;
  bottom: -16px !important;
  z-index: 1 !important;
  width: 104px !important;
  height: 104px !important;
  display: grid !important;
  place-items: center !important;
  opacity: .22 !important;
  pointer-events: none !important;
}

body[data-page="home"] .home-entry-card__mark .hc-icon,
body[data-page="home"] .home-entry-card__mark .hc-icon svg {
  width: 100px !important;
  height: 100px !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

@media (max-width: 390px) {
  body[data-page="home"] .home-entry-card {
    height: 176px !important;
    min-height: 176px !important;
    padding: 16px 12px 14px !important;
  }

  body[data-page="home"] .home-entry-card h2 {
    font-size: 21px !important;
  }

  body[data-page="home"] .home-entry-card p {
    max-width: 132px !important;
    font-size: 12px !important;
  }
}

body[data-page="home"] .home-quick-card {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 12px 4px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  gap: 8px !important;
  color: #0F172A !important;
  text-decoration: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

body[data-page="home"] .home-quick-action .hc-icon {
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
  border-radius: 13px !important;
  background: #EEF5FF !important;
  color: #1677FF !important;
}

body[data-page="home"] .home-quick-action .hc-icon svg {
  width: 24px !important;
  height: 24px !important;
}

body[data-page="home"] .home-quick-action strong {
  width: 100% !important;
  max-width: 100% !important;
  color: #0F172A !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

body[data-page="home"] .home-news-item {
  min-height: 94px !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
}

body[data-page="home"] .home-news-thumb {
  width: 96px !important;
  height: 64px !important;
  opacity: .9 !important;
}

/* Home polish pass: compact SaaS app finish. */
body[data-page="home"] #pageContent {
  padding: 12px 15px calc(92px + env(safe-area-inset-bottom)) !important;
}

body[data-page="home"] .home-app {
  gap: 12px !important;
}

body[data-page="home"] .home-top:not(.home-top--v2) {
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

body[data-page="home"] .home-top__meta {
  padding-top: 10px !important;
}

body[data-page="home"] .home-top__meta span {
  color: #94A3B8 !important;
  font-size: 12px !important;
}

body[data-page="home"] .home-buy-btn {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  box-shadow: 0 6px 14px rgba(22, 119, 255, .14) !important;
}

body[data-page="home"] .home-entry-grid {
  gap: 12px !important;
}

body[data-page="home"] .home-entry-card {
  height: 190px !important;
  min-height: 190px !important;
  padding: 18px 14px 15px !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .055) !important;
}

body[data-page="home"] .home-entry-card--android::before {
  background: linear-gradient(135deg, #2A8CFF 0%, #1677FF 56%, #0F63D8 100%) !important;
}

body[data-page="home"] .home-entry-card--ios::before {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 58%, #6D28D9 100%) !important;
}

body[data-page="home"] .home-entry-card::after {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 58%) !important;
}

body[data-page="home"] .home-entry-card h2 {
  max-width: 120px !important;
  font-size: 22px !important;
  line-height: 1.22 !important;
}

body[data-page="home"] .home-entry-card p {
  display: -webkit-box !important;
  max-width: 148px !important;
  margin-top: 10px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

body[data-page="home"] .home-entry-card__action {
  width: fit-content !important;
  gap: 7px !important;
  margin-top: auto !important;
  padding: 6px 10px 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 13px !important;
}

body[data-page="home"] .home-entry-card__action-text {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  flex: 0 0 24px !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon svg {
  width: 15px !important;
  height: 15px !important;
}

body[data-page="home"] .home-entry-card__mark {
  right: -16px !important;
  bottom: -16px !important;
  width: 104px !important;
  height: 104px !important;
  opacity: .14 !important;
}

body[data-page="home"] .home-entry-card__mark .hc-icon,
body[data-page="home"] .home-entry-card__mark .hc-icon svg {
  width: 100px !important;
  height: 100px !important;
}

body[data-page="home"] .home-quick-action--image .hc-icon,
body[data-page="home"] .home-quick-action--question .hc-icon {
  background: #EEF5FF !important;
  color: #1677FF !important;
}

body[data-page="home"] .home-quick-action--service .hc-icon {
  background: #F3F0FF !important;
  color: #7C3AED !important;
}

body[data-page="home"] .home-news-card {
  padding: 15px 14px !important;
  border-color: #E5EAF3 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .05) !important;
}

body[data-page="home"] .home-news-head h2 {
  font-size: 22px !important;
}

body[data-page="home"] .home-news-head p {
  margin-top: 6px !important;
  color: #64748B !important;
  font-size: 13px !important;
}

body[data-page="home"] .home-news-tabs {
  display: flex !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: #EDF3FA !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-news-tabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

body[data-page="home"] .home-news-tabs button.is-active {
  background: #1677FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, .22) !important;
}

body[data-page="home"] .home-news-list {
  gap: 10px !important;
  margin-top: 12px !important;
}

body[data-page="home"] .home-news-item {
  min-height: 92px !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 10px !important;
  padding: 12px !important;
  border-color: #E8EDF5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .025) !important;
}

body[data-page="home"] .home-news-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-page="home"] .home-news-title-row h3 {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-news-title-row b {
  flex: 0 0 auto !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #EEF5FF !important;
  color: #1677FF !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body[data-page="home"] .home-news-copy h3 {
  font-size: 15px !important;
  font-weight: 750 !important;
}

body[data-page="home"] .home-news-copy time {
  margin-top: 5px !important;
  color: #94A3B8 !important;
  font-size: 12px !important;
}

body[data-page="home"] .home-news-copy p {
  margin-top: 7px !important;
  color: #475569 !important;
  font-size: 12px !important;
}

body[data-page="home"] .home-news-thumb {
  width: 88px !important;
  height: 58px !important;
  border-radius: 12px !important;
  opacity: .72 !important;
  filter: saturate(.86) !important;
}

body[data-page="home"] .home-news-thumb .hc-icon,
body[data-page="home"] .home-news-thumb .hc-icon svg {
  width: 30px !important;
  height: 30px !important;
}

body[data-page="home"] .home-news-card--lite {
  padding: 12px !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .05) !important;
}

body[data-page="home"] .home-news-card--lite .home-news-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body[data-page="home"] .home-news-card--lite .home-news-head h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

body[data-page="home"] .home-news-card--lite .home-news-head p {
  display: none !important;
}

body[data-page="home"] .home-news-card--lite .home-news-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body[data-page="home"] .home-news-card--lite .home-news-more .hc-icon,
body[data-page="home"] .home-news-card--lite .home-news-more .hc-icon svg {
  width: 12px !important;
  height: 12px !important;
}

body[data-page="home"] .home-news-card--lite .home-news-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-top: 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body[data-page="home"] .home-news-card--lite .home-news-tabs::-webkit-scrollbar {
  display: none !important;
}

body[data-page="home"] .home-news-card--lite .home-news-tabs button {
  flex: 0 0 auto !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-news-card--lite .home-news-tabs button.is-active {
  background: #1677FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(22, 119, 255, .16) !important;
}

body[data-page="home"] .home-news-card--lite .home-news-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body[data-page="home"] .home-news-card--lite .home-news-item {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px !important;
  border: 1px solid #EEF2F7 !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-news-item__icon {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: #EEF5FF !important;
  color: #1677FF !important;
}

body[data-page="home"] .home-news-item__icon--ios {
  background: #F3E8FF !important;
  color: #7C3AED !important;
}

body[data-page="home"] .home-news-item__icon--service {
  background: #FFF7ED !important;
  color: #F59E0B !important;
}

body[data-page="home"] .home-news-item__icon--question {
  background: #ECFDF5 !important;
  color: #10B981 !important;
}

body[data-page="home"] .home-news-item__icon .hc-icon,
body[data-page="home"] .home-news-item__icon .hc-icon svg {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
}

body[data-page="home"] .home-news-item__body {
  min-width: 0 !important;
}

body[data-page="home"] .home-news-item__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-page="home"] .home-news-item__top strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #0F172A !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-news-item__top time {
  flex: 0 0 auto !important;
  color: #94A3B8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body[data-page="home"] .home-news-item__body p {
  margin: 4px 0 0 !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body[data-page="home"] .home-news-item__label {
  display: inline-flex !important;
  margin-top: 6px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: #EEF5FF !important;
  color: #1677FF !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body[data-page="home"] .mobile-tabbar {
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
  border-color: #E8EDF5 !important;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .055) !important;
}

body[data-page="home"] .mobile-tabbar a {
  height: 54px !important;
  grid-template-rows: 24px 17px !important;
}

body[data-page="home"] .mobile-tabbar a .hc-icon,
body[data-page="home"] .mobile-tabbar a .hc-icon svg {
  width: 22px !important;
  height: 22px !important;
}

body[data-page="home"] .mobile-tabbar a strong {
  font-size: 11px !important;
  line-height: 17px !important;
}

/* Arco Design as themed base components, not default template styling. */
:root {
  --primary: #1677FF;
  --primary-hover: #4096FF;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --title: #0F172A;
  --text: #475569;
  --muted: #94A3B8;
  --border: #E5EAF3;
  --success: #22C55E;
  --warning: #FF7A1A;
  --ios: #7C3AED;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06);
}

body[data-page="home"] .arco-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 650 !important;
}

body[data-page="home"] .arco-btn-primary {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

body[data-page="home"] .arco-card {
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
}

body[data-page="home"] .arco-card-body {
  padding: 0 !important;
}

body[data-page="home"] .arco-saas-card {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

body[data-page="home"] .home-app--arco .home-top:not(.home-top--v2) {
  padding: 14px 15px !important;
}

body[data-page="home"] .home-app--arco .home-top--v2 {
  padding: 0 !important;
}

body[data-page="home"] .home-app--arco .home-service-btn,
body[data-page="home"] .home-app--arco .home-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: var(--border) !important;
  background: #FFFFFF !important;
  color: var(--title) !important;
}

body[data-page="home"] .home-app--arco .home-service-btn .hc-icon,
body[data-page="home"] .home-app--arco .home-menu-btn .hc-icon {
  display: inline-grid !important;
  place-items: center !important;
}

body[data-page="home"] .home-app--arco .home-buy-btn {
  color: #FFFFFF !important;
}

body[data-page="home"] .home-app--arco .home-entry-card .arco-card-body {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body[data-page="home"] .home-app--arco .home-entry-card__action {
  border: 0 !important;
  background: rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .96) !important;
}

body[data-page="home"] .home-app--arco .home-entry-card__action .arco-btn-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-page="home"] .home-app--arco .home-quick-card .arco-card-body {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

body[data-page="home"] .home-app--arco .home-quick-card {
  display: block !important;
}

body[data-page="home"] .home-app--arco .home-quick-grid {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
}

body[data-page="home"] .home-app--arco .home-quick-action {
  width: 100% !important;
  min-height: 88px !important;
  border: 1px solid #E8EEF5 !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  appearance: none !important;
}

body[data-page="home"] .home-app--arco .home-news-card .arco-card-body {
  padding: 15px 14px !important;
}

body[data-page="home"] .arco-saas-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

body[data-page="home"] .arco-saas-tabs .arco-btn {
  width: 100% !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page="home"] .arco-saas-tabs .arco-btn.is-active {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(22, 119, 255, .18) !important;
}

body[data-page="home"] .arco-saas-tabs .arco-tabs-nav {
  margin-bottom: 0 !important;
}

body[data-page="home"] .arco-saas-tabs .arco-tabs-nav-tab {
  gap: 8px !important;
}

body[data-page="home"] .arco-saas-tabs .arco-tabs-tab {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page="home"] .arco-saas-tabs .arco-tabs-tab-active {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(22, 119, 255, .18) !important;
}

body[data-page="home"] .arco-saas-tabs .arco-tabs-nav-ink {
  display: none !important;
}

body[data-page="home"] .home-news-list .arco-list-content {
  display: grid !important;
  gap: 10px !important;
}

body[data-page="home"] .home-news-list .arco-list-item {
  margin: 0 !important;
}

body[data-page="home"] .home-news-title-row .arco-tag {
  flex: 0 0 auto !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #EEF5FF !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.tutorial-drawer .arco-drawer {
  border-radius: 16px 0 0 16px !important;
}

.tutorial-drawer .arco-drawer-header {
  border-bottom-color: var(--border) !important;
}

.tutorial-drawer .arco-drawer-title {
  color: var(--title) !important;
  font-weight: 750 !important;
}

@media (max-width: 390px) {
  body[data-page="home"] .home-brand > span {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    font-size: 28px !important;
  }

  body[data-page="home"] .home-brand h1 {
    font-size: 23px !important;
  }

  body[data-page="home"] .home-brand p {
    font-size: 12px !important;
  }

  body[data-page="home"] .home-service-btn span {
    display: none !important;
  }

  body[data-page="home"] .home-service-btn {
    width: 38px !important;
    padding: 0 !important;
  }

  body[data-page="home"] .app-platform-card {
    height: 140px !important;
    min-height: 140px !important;
    padding: 16px 12px 14px !important;
  }

  body[data-page="home"] .app-platform-card h2 {
    font-size: 20px !important;
  }

  body[data-page="home"] .app-platform-card p {
    max-width: 112px !important;
    font-size: 12px !important;
  }
}

/* Mobile SaaS extension pages */
body[data-page="android"] .topbar,
body[data-page="ios"] .topbar,
body[data-page="video"] .topbar,
body[data-page="mine"] .topbar,
body[data-page="me"] .topbar,
body[data-page="guide"] .topbar,
body[data-page="faq"] .topbar,
body[data-page="changelog"] .topbar,
body[data-page="promo"] .topbar,
body[data-page="android"] .sidebar,
body[data-page="ios"] .sidebar,
body[data-page="video"] .sidebar,
body[data-page="mine"] .sidebar,
body[data-page="me"] .sidebar,
body[data-page="guide"] .sidebar,
body[data-page="faq"] .sidebar,
body[data-page="changelog"] .sidebar,
body[data-page="promo"] .sidebar,
body[data-page="android"] .mask,
body[data-page="ios"] .mask,
body[data-page="video"] .mask,
body[data-page="mine"] .mask,
body[data-page="me"] .mask,
body[data-page="guide"] .mask,
body[data-page="faq"] .mask,
body[data-page="changelog"] .mask,
body[data-page="promo"] .mask {
  display: none !important;
}

body[data-page] {
  overflow-x: hidden !important;
  background: var(--bg) !important;
}

body[data-page] .app,
body[data-page] .main {
  width: 100% !important;
  min-width: 0 !important;
  background: var(--bg) !important;
}

body[data-page="home"] .content,
body[data-page="home"] #pageContent,
body[data-page="promo"] .content,
body[data-page="promo"] #pageContent {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 12px 14px 98px !important;
  box-sizing: border-box !important;
  background: var(--bg) !important;
}

body[data-page="android"] .content,
body[data-page="android"] #pageContent,
body[data-page="ios"] .content,
body[data-page="ios"] #pageContent,
body[data-page="video"] .content,
body[data-page="video"] #pageContent,
body[data-page="guide"] .content,
body[data-page="guide"] #pageContent,
body[data-page="faq"] .content,
body[data-page="faq"] #pageContent,
body[data-page="changelog"] .content,
body[data-page="changelog"] #pageContent,
body[data-page="mine"] .content,
body[data-page="mine"] #pageContent,
body[data-page="me"] .content,
body[data-page="me"] #pageContent,
body[data-page="newbieGuide"] .content,
body[data-page="newbieGuide"] #pageContent {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 calc(62px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  background: var(--bg) !important;
}

.mobile-page {
  display: grid;
  gap: 13px;
  width: 100%;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  height: 54px;
  margin: -2px -2px 0;
  padding: 0 2px;
  background: rgba(245, 247, 250, .92);
  backdrop-filter: blur(12px);
}

.app-topbar h1 {
  margin: 0;
  color: var(--title);
  font-size: 17px;
  font-weight: 750;
  line-height: 22px;
  text-align: center;
}

.app-topbar__btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--title);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
  appearance: none;
}

.app-topbar__btn .hc-icon,
.app-topbar__btn .hc-icon svg {
  width: 19px;
  height: 19px;
}

.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
  isolation: isolate;
}

.page-hero--android {
  background: linear-gradient(145deg, #1677FF 0%, #0F68E8 58%, #2B8CFF 100%);
}

.page-hero--ios {
  background: linear-gradient(145deg, #7357F6 0%, #7C3AED 58%, #9B6BFF 100%);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -30px -46px auto;
  width: 142px;
  height: 142px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  z-index: -1;
}

.page-hero h2 {
  max-width: 220px;
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.18;
  color: #FFFFFF;
}

.page-hero p {
  max-width: 235px;
  min-height: 38px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.45;
}

.page-hero span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-top: 14px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  font-weight: 700;
}

.page-hero > b {
  position: absolute;
  right: 12px;
  bottom: 6px;
  color: rgba(255, 255, 255, .22);
  transform: rotate(-7deg);
}

.page-hero > b .hc-icon,
.page-hero > b .hc-icon svg {
  width: 92px;
  height: 92px;
}

.page-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 1px;
  scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar {
  display: none;
}

.page-tabs button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: #EDF3FA;
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
  appearance: none;
}

.page-tabs button.is-active {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(22, 119, 255, .18);
}

.page-tab-panels {
  display: grid;
  gap: 10px;
}

.page-tab-panel {
  display: none;
}

.page-tab-panel.is-active {
  display: block;
}

.page-tab-shell {
  display: grid;
  gap: 6px;
}

.page-tab-shell .page-tabs {
  padding: 0;
  margin: 0;
}

.page-tab-shell .page-tab-panels {
  gap: 0;
}

.page-tab-panel .method-card h3 {
  display: none;
}

.page-tab-panel .method-card {
  padding-top: 8px;
}

.page-tab-panel .install-warning {
  margin-top: 6px;
}

.mobile-page--video .page-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border-radius: 12px;
  background: #EDF3FA;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mobile-page--video .page-tabs button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 38px;
  padding: 5px 3px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
  overflow: visible;
  text-overflow: unset;
}

.mobile-page--video .page-tabs button.is-active {
  box-shadow: 0 2px 8px rgba(22, 119, 255, .22);
}

.mobile-page--video {
  display: grid;
  gap: 10px;
  width: 100%;
}

.mobile-page--video > .page-tabs,
.mobile-page--video > .video-list,
.mobile-page--video > .video-submit-panel,
.mobile-page--video > .video-plan-panel,
.mobile-page--video > .video-player-card {
  width: 100%;
  box-sizing: border-box;
}

.mobile-page--video > .video-submit-panel,
.mobile-page--video > .video-plan-panel {
  margin-inline: -12px;
  width: calc(100% + 24px);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

body[data-page="video"] .mobile-page--video .page-tabs {
  gap: 4px !important;
  padding: 4px !important;
}

body[data-page="video"] .mobile-page--video .page-tabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 5px 3px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

.step-list,
.video-list,
.mine-tool-list {
  display: grid;
  gap: 10px;
}

.step-card,
.video-item,
.mine-tool-list button,
.help-card,
.mine-service-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
}

.step-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.step-card__icon,
.mine-tool-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #EEF5FF;
  color: var(--primary);
}

.step-card--ios .step-card__icon {
  background: #F3EEFF;
  color: var(--ios);
}

.step-card__icon .hc-icon,
.step-card__icon .hc-icon svg,
.mine-tool-icon .hc-icon,
.mine-tool-icon .hc-icon svg {
  width: 21px;
  height: 21px;
}

.step-card__copy {
  min-width: 0;
}

.step-card__copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--title);
  font-size: 15px;
  font-weight: 750;
  line-height: 20px;
}

.step-card__copy em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.step-card > i,
.mine-tool-list button > i {
  color: #CBD5E1;
}

.step-card > i .hc-icon,
.step-card > i .hc-icon svg,
.mine-tool-list button > i .hc-icon,
.mine-tool-list button > i .hc-icon svg {
  width: 18px;
  height: 18px;
}

.help-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
}

.help-card h3 {
  margin: 0 0 5px;
  color: var(--title);
  font-size: 16px;
  font-weight: 750;
}

.help-card p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
}

.help-card button {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}

.video-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
  box-sizing: border-box;
}

.video-search .hc-icon,
.video-search .hc-icon svg {
  width: 19px;
  height: 19px;
}

.video-search .hc-icon {
  color: #94A3B8;
}

.video-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--title);
  font-size: 14px;
}

.video-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  min-height: 92px;
  padding: 10px;
  text-align: left;
  appearance: none;
}

.video-item.is-active {
  border-color: rgba(22, 119, 255, .35);
  box-shadow: 0 8px 22px rgba(22, 119, 255, .1);
}

.video-thumb {
  position: relative;
  display: grid;
  place-items: center;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEF5FF, #DBEAFE);
  color: var(--primary);
  overflow: hidden;
}

.video-thumb--ios {
  background: linear-gradient(135deg, #F3EEFF, #EDE7FF);
  color: var(--ios);
}

.video-thumb .hc-icon,
.video-thumb .hc-icon svg {
  width: 31px;
  height: 31px;
}

.video-thumb b {
  position: absolute;
  right: 7px;
  bottom: 6px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #FFFFFF;
  font-size: 11px;
  line-height: 20px;
}

.video-copy {
  min-width: 0;
}

.video-copy strong {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 5px;
  color: var(--title);
  font-size: 15px;
  font-weight: 750;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.video-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.video-copy small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 14px;
}

.video-copy i {
  display: inline-flex;
  height: 20px;
  margin-top: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EEF5FF;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.mine-hero {
  position: relative;
  min-height: 178px;
  padding: 18px;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(145deg, #1677FF 0%, #0F68E8 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

.mine-hero--promo {
  min-height: 132px;
}

.mine-user--promo {
  padding-top: 8px;
}

.mine-tool-list--promo {
  margin-top: 12px;
}

.mine-tool-list--promo h2 {
  display: none;
}

.mine-setting {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  color: #FFFFFF;
}

.mine-setting .hc-icon,
.mine-setting .hc-icon svg {
  width: 19px;
  height: 19px;
}

.mine-user {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 42px;
}

.mine-user > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
}

.mine-user > span .hc-icon,
.mine-user > span .hc-icon svg {
  width: 30px;
  height: 30px;
}

.mine-user h1 {
  margin: 0 0 5px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
}

.mine-user p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

.mine-user button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
}

.mine-service-card {
  margin-top: -26px;
  padding: 15px 14px;
  z-index: 2;
}

.mine-service-card h2,
.mine-tool-list h2 {
  margin: 0 0 12px;
  color: var(--title);
  font-size: 17px;
  font-weight: 780;
}

.mine-service-card > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.mine-service-card button {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.mine-service-card button .hc-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #EEF5FF;
  color: var(--primary);
}

.mine-service-card button .hc-icon svg {
  width: 21px;
  height: 21px;
}

.mine-tool-list {
  padding: 15px 14px;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
}

.mine-tool-list button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  grid-template-areas:
    "icon title arrow"
    "icon desc arrow";
  align-items: center;
  gap: 0 11px;
  min-height: 62px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  appearance: none;
}

.mine-tool-list button:last-child {
  border-bottom: 0;
}

.mine-tool-icon {
  grid-area: icon;
}

.mine-tool-list button strong {
  grid-area: title;
  color: var(--title);
  font-size: 14px;
  font-weight: 750;
  line-height: 19px;
}

.mine-tool-list button em {
  grid-area: desc;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 17px;
}

.mine-tool-list button > i {
  grid-area: arrow;
}

body[data-page] .mobile-tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(229, 234, 243, .9) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -6px 22px rgba(15, 23, 42, .07) !important;
  transform: none !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(14px) !important;
}

body.layout-fullwidth .mobile-tabbar,
body[data-page="android"] .mobile-tabbar,
body[data-page="ios"] .mobile-tabbar,
body[data-page="video"] .mobile-tabbar,
body[data-page="guide"] .mobile-tabbar,
body[data-page="faq"] .mobile-tabbar,
body[data-page="changelog"] .mobile-tabbar,
body[data-page="mine"] .mobile-tabbar,
body[data-page="me"] .mobile-tabbar,
body[data-page="newbieGuide"] .mobile-tabbar {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

body[data-page] .mobile-tabbar a {
  display: grid !important;
  grid-template-rows: 24px 17px !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
}

body[data-page] .mobile-tabbar a .hc-icon,
body[data-page] .mobile-tabbar a .hc-icon svg {
  width: 22px !important;
  height: 22px !important;
}

body[data-page] .mobile-tabbar a strong {
  overflow: hidden !important;
  max-width: 100% !important;
  color: currentColor !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body[data-page] .mobile-tabbar a.is-active {
  color: var(--primary) !important;
}

.home-news-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 38px;
  margin-top: 4px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.home-news-more .hc-icon,
.home-news-more .hc-icon svg {
  width: 16px;
  height: 16px;
}

.home-notice-card,
.install-action-card,
.install-warning,
.method-card,
.guide-image-section,
.guide-list-card,
.faq-item-real,
.timeline-card,
.video-player-card,
.video-notice {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
}

.home-notice-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.home-notice-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--title);
  font-size: 16px;
  font-weight: 780;
}

.home-notice-card p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
}

.home-notice-card footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-notice-card button {
  height: 34px;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  background: #F8FBFF;
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
}

.install-action-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.install-download-list {
  display: grid;
  gap: 0;
}

.install-download-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
}

.install-download-row + .install-download-row {
  border-top: 1px solid #EEF2F7;
}

.install-download-row__step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #EFF6FF;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.install-download-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.install-download-row__main strong {
  color: var(--title);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
}

.install-download-row__main span {
  color: var(--muted, #64748B);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-download-row__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.install-download-row__actions .install-primary-btn,
.install-download-row__actions .install-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.install-download-row__actions .install-primary-btn {
  padding: 0 9px 0 10px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #FFFFFF;
  white-space: nowrap;
  gap: 5px;
}

.install-download-row__actions .install-primary-btn__text {
  position: relative;
  top: .5px;
  letter-spacing: .02em;
}

.install-download-row__actions .install-primary-btn__caret {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  opacity: .82;
  flex-shrink: 0;
}

.install-download-row__actions .install-primary-btn:active {
  transform: scale(.97);
}

.install-download-row__actions .install-primary-btn--vm {
  border-color: #2563EB;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
}

.install-download-row__actions .install-primary-btn--gamebox {
  border-color: #EA580C;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

.install-download-row__actions .install-copy-btn {
  width: auto;
  padding: 0 8px;
  border: 1px solid #BFDBFE;
  background: #FFFFFF;
  color: var(--primary);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.install-download-row__actions .install-copy-btn__text {
  position: relative;
  top: .5px;
  letter-spacing: .01em;
}

.install-download-row__actions .install-copy-btn:active {
  transform: scale(.97);
}

.install-action-card__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 2px;
}

.install-action-card__tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: 32px;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.install-action-card .hc-icon,
.install-action-card .hc-icon svg {
  width: 15px;
  height: 15px;
}

.install-video-card {
  padding: 10px 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
}

.install-video-card--ios {
  border-color: #E9D5FF;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
}

.install-video-card__head {
  margin-bottom: 8px;
}

.install-video-card__head h3 {
  margin: 0;
  color: var(--title);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

body[data-page="ios"] .ios-install-video__screen {
  overflow: hidden;
  border: 1px solid #E9D5FF;
  border-radius: 14px;
  background: #0F172A;
}

body[data-page="ios"] .ios-install-video__tip {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 12px;
  line-height: 1.45;
}

.ios-prepare-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #DDD6FE;
  border-left: 3px solid #7C3AED;
  border-radius: 10px;
  background: linear-gradient(180deg, #FAF5FF 0%, #F5F3FF 100%);
}

.ios-prepare-notice__badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #EDE9FE;
  color: #7C3AED;
}

.ios-prepare-notice__badge .hc-icon,
.ios-prepare-notice__badge .hc-icon svg {
  width: 16px;
  height: 16px;
}

.ios-prepare-notice__text {
  margin: 0;
  color: #5B21B6;
  font-size: 12px;
  line-height: 1.5;
}

.ios-prepare-notice__content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ios-prepare-notice__text--vip {
  color: #6D28D9;
  font-weight: 600;
}

.android-notice-section {
  padding: 12px 14px;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFF7ED 100%);
}

.android-notice-section__title {
  margin: 0 0 10px;
  color: #B45309;
  font-size: 14px;
  font-weight: 800;
}

.android-notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.android-notice-list li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.android-notice-list li:last-child {
  margin-bottom: 0;
}

.android-notice-list li > b {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #D97706;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.android-notice-list li strong {
  display: block;
  margin-bottom: 2px;
  color: #92400E;
  font-size: 12px;
}

.android-notice-list li p {
  margin: 0;
  color: #92400E;
  font-size: 11px;
  line-height: 1.5;
}

.android-notice-list__link {
  color: #1677FF;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-all;
}

.install-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFF7ED 100%);
}

.install-warning__badge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #D97706;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.install-warning__body {
  min-width: 0;
}

.install-warning__title {
  display: block;
  margin-bottom: 3px;
  color: #B45309;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
}

.install-warning__text {
  margin: 0;
  color: #92400E;
  font-size: 11px;
  line-height: 17px;
}

.install-warning__text + .install-warning__text {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(245, 158, 11, .35);
}

.install-warning__text em {
  font-style: normal;
  font-weight: 780;
  color: #C2410C;
}

.page-tab-panel .install-warning {
  margin-top: 8px;
}

.method-list {
  display: grid;
  gap: 10px;
}

.method-card {
  padding: 14px;
}

.method-card h3,
.guide-image-section h2 {
  margin: 0 0 10px;
  color: var(--title);
  font-size: 16px;
  font-weight: 780;
}

.method-card ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.method-card li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
}

.method-card li b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #EEF5FF;
  color: var(--primary);
  font-size: 12px;
}

.guide-image-section {
  padding: 14px;
}

.guide-image-section > p {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}

.guide-image-section > div,
.guide-card-list,
.faq-list,
.timeline-list {
  display: grid;
  gap: 10px;
}

.guide-image-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #F8FBFF;
}

.guide-image-card a,
.guide-image-card button {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 160px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #EEF5FF;
  text-decoration: none;
}

.guide-image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-image-card strong {
  color: var(--title);
  font-size: 14px;
  font-weight: 750;
}

.guide-image-card p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
}

.guide-list-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.guide-list-card img {
  width: 86px;
  height: 60px;
  border-radius: 10px;
  background: #EEF5FF;
  object-fit: cover;
}

.guide-list-card span {
  min-width: 0;
}

.guide-list-card b {
  display: inline-flex;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EEF5FF;
  color: var(--primary);
  font-size: 11px;
  line-height: 20px;
}

.guide-list-card strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--title);
  font-size: 14px;
  font-weight: 780;
}

.guide-list-card em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.faq-item-real {
  overflow: hidden;
}

.faq-item-real button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 0;
  background: #FFFFFF;
  text-align: left;
  appearance: none;
}

.faq-item-real button span {
  display: inline-flex;
  width: fit-content;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EEF5FF;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
}

.faq-item-real button strong {
  grid-column: 1;
  color: var(--title);
  font-size: 15px;
  font-weight: 760;
}

.faq-item-real button .hc-icon {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: #CBD5E1;
}

.faq-item-real p {
  display: none;
  margin: 0 13px 13px;
  padding: 11px;
  border-radius: 10px;
  background: #F1F7FF;
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
}

.faq-item-real.is-open p {
  display: block;
}

.timeline-card {
  position: relative;
  padding: 14px;
}

.timeline-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.timeline-card header strong {
  color: var(--title);
  font-size: 16px;
  font-weight: 800;
}

.timeline-card time {
  color: var(--muted);
  font-size: 12px;
}

.timeline-card header b {
  margin-left: auto;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 11px;
  line-height: 22px;
}

.timeline-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-card li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
}

.timeline-card li .hc-icon,
.timeline-card li .hc-icon svg {
  width: 15px;
  height: 15px;
  color: var(--success);
}

.video-player-card {
  overflow: hidden;
}

.video-player-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  color: var(--title);
  font-size: 14px;
  font-weight: 760;
}

.video-player-card__head span {
  flex: 0 0 auto;
  color: var(--primary);
}

.video-player-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 220px;
  max-height: none;
  object-fit: contain;
  background: #0F172A;
}

.video-submit-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.video-submit-intro {
  margin-bottom: 12px;
}

.video-submit-intro strong {
  display: block;
  margin-bottom: 8px;
  color: var(--title);
  font-size: 16px;
  font-weight: 780;
}

.video-submit-intro p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
}

.mobile-page--video .video-submit-panel .help-card {
  margin-top: 0;
}

.video-submit-form {
  display: grid;
  gap: 10px;
}

.video-submit-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.video-submit-field select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.video-submit-msg {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.5;
}

.video-submit-form__actions .btn {
  width: 100%;
  min-height: 40px;
}

.video-plan-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  box-sizing: border-box;
}

.video-plan-intro {
  margin-bottom: 4px;
}

.video-plan-intro strong {
  display: block;
  margin-bottom: 8px;
  color: var(--title, #0F172A);
  font-size: 16px;
  font-weight: 800;
}

.video-plan-intro p {
  margin: 0;
  color: var(--text, #334155);
  font-size: 13px;
  line-height: 1.65;
}

.video-plan-block {
  padding: 12px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid var(--border, #E5E7EB);
}

.video-plan-block h3 {
  margin: 0 0 8px;
  color: var(--title, #0F172A);
  font-size: 14px;
  font-weight: 800;
}

.video-plan-block > p {
  margin: 0 0 8px;
  color: var(--muted, #64748B);
  font-size: 12px;
  line-height: 1.5;
}

.video-plan-list,
.video-plan-rules {
  margin: 0;
  padding-left: 18px;
  color: var(--text, #334155);
  font-size: 13px;
  line-height: 1.6;
}

.video-plan-list li,
.video-plan-rules li {
  margin-bottom: 6px;
}

.video-plan-list li:last-child,
.video-plan-rules li:last-child {
  margin-bottom: 0;
}

.video-plan-list strong,
.video-plan-rules strong {
  color: #1677FF;
}

.video-plan-panel .help-card {
  margin: 0;
}

.mobile-page--video .video-player-card {
  margin-inline: -12px;
  width: calc(100% + 24px);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.mobile-page--video .video-player-card video {
  min-height: 280px;
}

.video-player-card p {
  margin: 0;
  padding: 11px 13px;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
}

.video-player-card__desc--warn {
  color: #DC2626;
  background: #FEF2F2;
  border-top: 1px solid #FECACA;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.video-copy em.video-copy__warn {
  color: #DC2626;
  font-weight: 700;
  -webkit-line-clamp: 2;
}

.video-notice {
  padding: 13px;
}

.video-notice strong {
  display: block;
  margin-bottom: 8px;
  color: var(--title);
  font-size: 15px;
}

.video-notice ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
}

.image-preview.is-show {
  display: block !important;
}

.image-preview.is-native {
  display: flex !important;
  flex-direction: column !important;
  place-items: stretch !important;
}

.image-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  display: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, .94) !important;
  box-sizing: border-box !important;
}

.image-preview__toolbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200001 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
  background: rgba(15, 23, 42, .96) !important;
  box-sizing: border-box !important;
}

.image-preview__hint {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.image-preview__original {
  flex: 0 0 auto !important;
  color: #93c5fd !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.image-preview__stage {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: calc(52px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

.image-preview__stage img,
.image-preview img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  object-fit: unset !important;
  object-position: top center !important;
  image-rendering: auto !important;
}

.image-preview button#previewClose {
  position: static !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.preview-open {
  overflow: hidden !important;
}

@media (max-width: 374px) {
  body[data-page] .content,
  body[data-page] #pageContent {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-hero h2 {
    font-size: 21px;
  }

  .video-item {
    grid-template-columns: 98px minmax(0, 1fr);
  }
}

/* Final extension-page overrides: beat legacy compact-page rules. */
body[data-page="android"] #pageContent .page-hero,
body[data-page="ios"] #pageContent .page-hero {
  display: block !important;
  min-height: 138px !important;
  padding: 18px 16px !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-card) !important;
}

body[data-page="android"] #pageContent .page-hero--android {
  background: linear-gradient(145deg, #1677FF 0%, #0F68E8 58%, #2B8CFF 100%) !important;
}

body[data-page="ios"] #pageContent .page-hero--ios {
  background: linear-gradient(145deg, #7357F6 0%, #7C3AED 58%, #9B6BFF 100%) !important;
}

body[data-page="android"] #pageContent .page-hero h2,
body[data-page="ios"] #pageContent .page-hero h2 {
  max-width: 220px !important;
  margin: 0 0 8px !important;
  color: #FFFFFF !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}

body[data-page="android"] #pageContent .page-hero p,
body[data-page="ios"] #pageContent .page-hero p {
  max-width: 235px !important;
  min-height: 38px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-page="android"] #pageContent .page-hero span,
body[data-page="ios"] #pageContent .page-hero span {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  margin-top: 14px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page="android"] #pageContent .page-hero > b,
body[data-page="ios"] #pageContent .page-hero > b {
  position: absolute !important;
  right: 12px !important;
  bottom: 6px !important;
  color: rgba(255, 255, 255, .22) !important;
  transform: rotate(-7deg) !important;
}

/* Mobile tabbar lite */
.mobile-tabbar.mobile-tabbar--lite {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(62px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  border: 1px solid #E5EAF3 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08) !important;
  transform: none !important;
  backdrop-filter: blur(16px) !important;
  box-sizing: border-box !important;
}

body.mobile-compact[data-page="home"] .mobile-tabbar.mobile-tabbar--lite {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  border-radius: 18px 18px 0 0 !important;
}

.mobile-tabbar--lite .mobile-tabbar__item,
.mobile-tabbar--lite > a {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 2px !important;
  border-radius: 12px !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}

.mobile-tabbar--lite .mobile-tabbar__icon,
.mobile-tabbar--lite > a > .hc-icon {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: currentColor !important;
  transition: background .15s ease, color .15s ease !important;
}

.mobile-tabbar--lite .mobile-tabbar__icon .hc-icon,
.mobile-tabbar--lite .mobile-tabbar__icon svg,
.mobile-tabbar--lite > a > .hc-icon svg {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
}

.mobile-tabbar--lite .mobile-tabbar__label,
.mobile-tabbar--lite > a > strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mobile-tabbar--lite .mobile-tabbar__item.is-active,
.mobile-tabbar--lite > a.is-active {
  color: #1677FF !important;
}

.mobile-tabbar--lite .mobile-tabbar__item.is-active .mobile-tabbar__icon,
.mobile-tabbar--lite > a.is-active > .hc-icon {
  background: #1677FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(22, 119, 255, .24) !important;
}

.mobile-tabbar--lite .mobile-tabbar__item.is-active .mobile-tabbar__icon svg,
.mobile-tabbar--lite > a.is-active > .hc-icon svg {
  color: #FFFFFF !important;
}

body[data-page] #pageContent,
body[data-page="home"] #pageContent {
  padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

/* Sitewide compact cards */
body[data-page] .content,
body[data-page] #pageContent {
  padding-top: 4px !important;
}

body[data-page="home"] .content,
body[data-page="home"] #pageContent,
body[data-page="promo"] .content,
body[data-page="promo"] #pageContent {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body[data-page="android"] .content,
body[data-page="android"] #pageContent,
body[data-page="ios"] .content,
body[data-page="ios"] #pageContent,
body[data-page="video"] .content,
body[data-page="video"] #pageContent,
body[data-page="guide"] .content,
body[data-page="guide"] #pageContent,
body[data-page="faq"] .content,
body[data-page="faq"] #pageContent,
body[data-page="changelog"] .content,
body[data-page="changelog"] #pageContent,
body[data-page="mine"] .content,
body[data-page="mine"] #pageContent,
body[data-page="me"] .content,
body[data-page="me"] #pageContent,
body[data-page="newbieGuide"] .content,
body[data-page="newbieGuide"] #pageContent {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body[data-page] .mobile-page,
body[data-page="home"] .home-app {
  gap: 9px !important;
}

body[data-page] .page-hero,
body[data-page="android"] #pageContent .page-hero,
body[data-page="ios"] #pageContent .page-hero {
  min-height: 108px !important;
  padding: 12px !important;
}

body[data-page] .page-hero h2,
body[data-page="android"] #pageContent .page-hero h2,
body[data-page="ios"] #pageContent .page-hero h2 {
  margin: 0 0 5px !important;
  font-size: 19px !important;
}

body[data-page] .page-hero p,
body[data-page="android"] #pageContent .page-hero p,
body[data-page="ios"] #pageContent .page-hero p {
  min-height: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-page] .page-hero span,
body[data-page="android"] #pageContent .page-hero span,
body[data-page="ios"] #pageContent .page-hero span {
  height: 24px !important;
  margin-top: 8px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

body[data-page] .page-hero > b .hc-icon,
body[data-page] .page-hero > b .hc-icon svg,
body[data-page="android"] #pageContent .page-hero > b .hc-icon svg,
body[data-page="ios"] #pageContent .page-hero > b .hc-icon svg {
  width: 68px !important;
  height: 68px !important;
}

body[data-page] .page-tabs {
  gap: 6px !important;
  padding: 0 !important;
}

body[data-page] .page-tabs button {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

body[data-page] .page-tab-panels {
  gap: 8px !important;
}

body[data-page] .install-action-card {
  gap: 6px !important;
  padding: 8px 10px !important;
}

body[data-page] .install-download-row {
  min-height: 38px !important;
  padding: 4px 0 !important;
}

body[data-page] .install-action-card__tools {
  gap: 6px !important;
  padding-top: 0 !important;
}

body[data-page] .install-action-card__tools a {
  height: 30px !important;
  font-size: 11px !important;
}

body[data-page] .install-warning {
  gap: 8px !important;
  padding: 8px 10px !important;
}

body[data-page] .page-tab-panel .install-warning {
  margin-top: 8px !important;
}

.install-action-card[hidden] {
  display: none !important;
}

body[data-page] .guide-image-section + .install-warning {
  margin-top: 8px !important;
}

body[data-page] .install-action-card + .install-warning {
  margin-top: -4px !important;
}

body[data-page] .method-card,
body[data-page] .guide-image-section,
body[data-page] .timeline-card,
body[data-page] .video-notice,
body[data-page] .video-player-card__head,
body[data-page] .guide-list-card {
  padding: 10px !important;
}

body[data-page] .method-card h3,
body[data-page] .guide-image-section h2 {
  margin: 0 0 7px !important;
  font-size: 15px !important;
}

body[data-page] .method-card ol,
body[data-page] .guide-image-section > div,
body[data-page] .faq-list,
body[data-page] .timeline-list,
body[data-page] .step-list,
body[data-page] .video-list,
body[data-page] .mine-tool-list {
  gap: 7px !important;
}

body[data-page] .method-card li {
  gap: 7px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

body[data-page] .method-card li b {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

body[data-page] .guide-image-section > p {
  margin: -2px 0 8px !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page] .guide-image-card {
  gap: 6px !important;
  padding: 8px !important;
}

body[data-page] .guide-image-card a,
body[data-page] .guide-image-card button {
  height: 128px !important;
}

body[data-page] .guide-image-card strong {
  font-size: 13px !important;
}

body[data-page] .guide-image-card p {
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page] .step-card {
  gap: 8px !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
}

body[data-page] .step-card__icon,
body[data-page] .mine-tool-icon {
  width: 34px !important;
  height: 34px !important;
}

body[data-page] .step-card__copy strong {
  margin-bottom: 2px !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

body[data-page] .step-card__copy em {
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page] .help-card {
  gap: 10px !important;
  padding: 11px !important;
}

body[data-page] .help-card h3 {
  margin: 0 0 3px !important;
  font-size: 14px !important;
}

body[data-page] .help-card p {
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page] .help-card button {
  height: 32px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}

body[data-page] .faq-item-real button {
  padding: 10px !important;
}

body[data-page] .faq-item-real button strong {
  font-size: 14px !important;
}

body[data-page] .faq-item-real p {
  margin: 0 10px 10px !important;
  padding: 9px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

body[data-page] .timeline-card header {
  margin-bottom: 7px !important;
}

body[data-page] .timeline-card header strong {
  font-size: 15px !important;
}

body[data-page] .timeline-card li {
  font-size: 12px !important;
}

body[data-page] .video-search {
  height: 40px !important;
  padding: 0 11px !important;
}

body[data-page] .video-item {
  gap: 10px !important;
  min-height: 76px !important;
  padding: 8px !important;
}

body[data-page] .video-thumb {
  height: 58px !important;
}

body[data-page] .video-player-card p {
  padding: 9px 10px !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page] .video-player-card p.video-player-card__desc--warn {
  padding: 10px 12px !important;
  color: #DC2626 !important;
  background: #FEF2F2 !important;
  border-top: 1px solid #FECACA !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

body[data-page="home"] .home-top--v2 .home-top__banner {
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

body[data-page="home"] .home-top--v2 .home-top__title {
  font-size: 15px !important;
  line-height: 26px !important;
}

body[data-page="home"] .home-top--v2 .home-top__sub {
  font-size: 10px !important;
  line-height: 26px !important;
}

body[data-page="home"] .home-entry-grid {
  gap: 12px !important;
}

body[data-page="home"] .home-game-download {
  margin-top: 12px !important;
}

body[data-page="home"] .home-game-download:empty {
  display: none !important;
}

body[data-page="home"] .home-game-download .gamebox-promo {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #FFD6A8 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  text-decoration: none !important;
  color: inherit !important;
}

body[data-page="home"] .home-game-download .gamebox-promo__icon {
  background: #FFEDD5 !important;
  color: #EA580C !important;
}

body[data-page="home"] .home-game-download .gamebox-promo strong {
  color: #9A3412 !important;
}

body[data-page="home"] .home-game-download .gamebox-promo em {
  color: #C2410C !important;
}

body[data-page="home"] .home-game-download .gamebox-promo__cta {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #EA580C !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body[data-page="home"] .home-entry-card {
  height: 190px !important;
  min-height: 190px !important;
  padding: 18px 14px 15px !important;
}

body[data-page="home"] .home-entry-card h2 {
  max-width: 120px !important;
  font-size: 22px !important;
}

body[data-page="home"] .home-entry-card p {
  max-width: 148px !important;
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-page="home"] .home-entry-card__action {
  padding: 6px 10px 6px 12px !important;
  font-size: 13px !important;
}

body[data-page="home"] .home-entry-card__action-text {
  font-size: 13px !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

body[data-page="home"] .home-entry-card__action .hc-icon svg {
  width: 15px !important;
  height: 15px !important;
}

body[data-page="home"] .home-entry-card__mark {
  width: 104px !important;
  height: 104px !important;
  right: -16px !important;
  bottom: -16px !important;
}

body[data-page="home"] .home-entry-card__mark .hc-icon,
body[data-page="home"] .home-entry-card__mark .hc-icon svg {
  width: 100px !important;
  height: 100px !important;
}

body[data-page="home"] .home-quick-card {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-page="home"] .home-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 12px 4px 10px !important;
  gap: 8px !important;
}

body[data-page="home"] .home-quick-action .hc-icon {
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
}

body[data-page="home"] .home-quick-action .hc-icon svg {
  width: 24px !important;
  height: 24px !important;
}

body[data-page="home"] .home-quick-action strong {
  width: 100% !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  text-align: center !important;
}

body[data-page="home"] .home-news-tabs {
  display: flex !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: #EDF3FA !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-news-tabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

body[data-page="home"] .home-news-tabs button.is-active {
  background: #1677FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, .22) !important;
}

body[data-page="home"] .home-news-list {
  gap: 8px !important;
  margin-top: 10px !important;
}

body[data-page="home"] .home-news-item {
  min-height: 78px !important;
  padding: 10px !important;
}

body[data-page="home"] .home-news-copy p {
  font-size: 11px !important;
  line-height: 16px !important;
}

body[data-page="home"] .home-news-thumb {
  width: 84px !important;
  height: 56px !important;
}

body[data-page="home"] .home-news-more {
  height: 34px !important;
  margin-top: 2px !important;
  font-size: 13px !important;
}

/* Android: download above warning, trim bottom blank area */
body[data-page="android"] .app,
body[data-page="android"] .main,
body[data-page="android"] .content,
body[data-page="android"] #pageContent {
  min-height: 0 !important;
  height: auto !important;
}

body.mobile-compact[data-page="android"] .main {
  min-height: 0 !important;
  height: auto !important;
}

/* Beat style.css desktop android recovery block on mobile */
body.mobile-compact[data-page="android"] .content,
body.mobile-compact[data-page="android"] #pageContent,
body[data-page="android"] .content,
body[data-page="android"] #pageContent {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  gap: 0 !important;
  padding: 0 0 calc(62px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

body[data-page="android"] .mobile-page {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

body[data-page="android"] .mobile-page > .install-action-card {
  margin-top: 0 !important;
}

body[data-page="android"] .mobile-page > .install-action-card + .guide-image-section {
  margin-top: 4px !important;
}

body[data-page="android"] .mobile-page > .guide-image-section + .install-warning {
  margin-top: 4px !important;
}

body[data-page="android"] .mobile-page > .install-action-card + .install-warning {
  margin-top: 4px !important;
}

body[data-page="android"] .mobile-page > .help-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Extension pages: remove top dead space, pull content up */
body.mobile-compact[data-page="android"] #pageContent,
body.mobile-compact[data-page="ios"] #pageContent,
body.mobile-compact[data-page="video"] #pageContent,
body.mobile-compact[data-page="guide"] #pageContent,
body.mobile-compact[data-page="faq"] #pageContent,
body.mobile-compact[data-page="changelog"] #pageContent,
body.mobile-compact[data-page="mine"] #pageContent,
body.mobile-compact[data-page="me"] #pageContent,
body.mobile-compact[data-page="promo"] #pageContent {
  display: block !important;
  gap: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body[data-page="android"] .mobile-page,
body[data-page="ios"] .mobile-page {
  gap: 4px !important;
}

body[data-page="android"] .app-topbar,
body[data-page="ios"] .app-topbar {
  height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="android"] .app-topbar__btn,
body[data-page="ios"] .app-topbar__btn {
  width: 34px !important;
  height: 34px !important;
}

body[data-page="android"] .app-topbar h1,
body[data-page="ios"] .app-topbar h1 {
  font-size: 16px !important;
  line-height: 20px !important;
}

body[data-page="android"] .app-topbar + .page-hero,
body[data-page="ios"] .app-topbar + .page-hero {
  margin-top: 0 !important;
}

body.mobile-compact[data-page="android"] #pageContent .page-hero,
body.mobile-compact[data-page="ios"] #pageContent .page-hero,
body[data-page="android"] #pageContent .page-hero,
body[data-page="ios"] #pageContent .page-hero {
  display: block !important;
  gap: 0 !important;
  min-height: 88px !important;
  padding: 10px 12px !important;
}

body[data-page="android"] #pageContent .page-hero h2,
body[data-page="ios"] #pageContent .page-hero h2 {
  margin: 0 0 4px !important;
  font-size: 18px !important;
}

body[data-page="android"] #pageContent .page-hero p,
body[data-page="ios"] #pageContent .page-hero p {
  min-height: 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

body[data-page="android"] #pageContent .page-hero span,
body[data-page="ios"] #pageContent .page-hero span {
  height: 22px !important;
  margin-top: 6px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}

body[data-page="android"] #pageContent .page-hero > b .hc-icon svg,
body[data-page="ios"] #pageContent .page-hero > b .hc-icon svg {
  width: 56px !important;
  height: 56px !important;
}

body[data-page="android"] .page-tab-shell {
  gap: 4px !important;
}

body[data-page="android"] .install-action-card {
  padding: 7px 9px !important;
}

body[data-page="android"] .page-tab-panel .method-card {
  padding: 8px 10px !important;
}

body[data-page="android"] .help-card {
  padding: 10px !important;
}

/* Final: kill viewport stretch on mobile extension pages */
body[data-page] .app {
  min-height: 0 !important;
  height: auto !important;
}

body[data-page="home"] .app,
body[data-page="home"] .main,
body[data-page="home"] .content,
body[data-page="home"] #pageContent {
  min-height: 100vh !important;
}

body.mobile-compact[data-page="android"] .app,
body.mobile-compact[data-page="android"] .main,
body.mobile-compact[data-page="android"] .content,
body.mobile-compact[data-page="android"] #pageContent,
body[data-page="android"] .app,
body[data-page="android"] .main,
body[data-page="android"] .content,
body[data-page="android"] #pageContent {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  max-width: none !important;
  gap: 0 !important;
  padding: 4px 10px calc(62px + env(safe-area-inset-bottom)) !important;
}

body[data-page="android"] .mobile-page {
  min-height: 0 !important;
  height: auto !important;
}

body[data-page="android"] .mobile-page > .help-card:last-child {
  margin-bottom: 0 !important;
}

/* Extension pages: no phone-shell frame, flat full-bleed layout */
body.mobile-compact[data-page="android"] .main,
body.mobile-compact[data-page="android"].sidebar-collapsed .main,
body.mobile-compact[data-page="ios"] .main,
body.mobile-compact[data-page="ios"].sidebar-collapsed .main,
body.mobile-compact[data-page="video"] .main,
body.mobile-compact[data-page="mine"] .main,
body.mobile-compact[data-page="me"] .main,
body.mobile-compact[data-page="guide"] .main,
body.mobile-compact[data-page="faq"] .main,
body.mobile-compact[data-page="changelog"] .main,
body.mobile-compact[data-page="promo"] .main,
body[data-page="android"] .main,
body[data-page="ios"] .main,
body[data-page="video"] .main,
body[data-page="mine"] .main,
body[data-page="me"] .main,
body[data-page="guide"] .main,
body[data-page="faq"] .main,
body[data-page="changelog"] .main,
body[data-page="promo"] .main {
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: var(--bg, #f5f7fa) !important;
}

body.mobile-compact[data-page="android"],
body.mobile-compact[data-page="ios"],
body.mobile-compact[data-page="video"],
body.mobile-compact[data-page="mine"],
body.mobile-compact[data-page="me"],
body.mobile-compact[data-page="guide"],
body.mobile-compact[data-page="faq"],
body.mobile-compact[data-page="changelog"],
body.mobile-compact[data-page="promo"],
body[data-page="android"],
body[data-page="ios"],
body[data-page="video"],
body[data-page="mine"],
body[data-page="me"],
body[data-page="guide"],
body[data-page="faq"],
body[data-page="changelog"],
body[data-page="promo"] {
  background: var(--bg, #f5f7fa) !important;
}

body[data-page="android"] .app,
body[data-page="ios"] .app,
body[data-page="video"] .app,
body[data-page="mine"] .app,
body[data-page="me"] .app,
body[data-page="guide"] .app,
body[data-page="faq"] .app,
body[data-page="changelog"] .app,
body[data-page="promo"] .app {
  background: var(--bg, #f5f7fa) !important;
  box-shadow: none !important;
}

.account-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: end center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

body.preview-open .account-notice-modal {
  z-index: 119;
}

.account-notice-modal[hidden] {
  display: none !important;
}

.account-notice-modal.is-show {
  display: grid !important;
}

.account-notice-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
}

.account-notice-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: min(92vh, 860px);
  overflow: auto;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  box-sizing: border-box;
}

.account-notice-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.account-notice-modal__head h2 {
  margin: 0 0 6px;
  color: #0F172A;
  font-size: 18px;
  line-height: 1.25;
}

.account-notice-modal__head p {
  margin: 0;
  color: #64748B;
  font-size: 12px;
  line-height: 1.45;
}

.account-notice-modal__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #E5EAF3;
  border-radius: 10px;
  background: #FFFFFF;
  color: #64748B;
  font-size: 20px;
  line-height: 1;
}

.account-notice-modal__jump {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.account-notice-modal__view-original {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #BFDBFE;
  border-radius: 14px;
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  color: #1677FF;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  box-sizing: border-box;
}

.account-notice-modal__view-original .hc-icon,
.account-notice-modal__view-original .hc-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.account-notice-modal__view-link {
  display: block;
  color: #64748B;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-notice-modal__jump-tip {
  margin: 0;
  color: #94A3B8;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.account-notice-modal__figure {
  margin: 0 0 12px;
}

.account-notice-modal__figure--hero {
  margin: 0 0 14px;
}

.account-notice-modal__figure button,
.account-notice-modal__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #E5EAF3;
  border-radius: 12px;
  overflow: hidden;
  background: #F8FAFC;
  cursor: zoom-in;
  appearance: none;
}

.account-notice-modal__figure--hero button,
.account-notice-modal__figure--hero .account-notice-modal__zoom {
  border-radius: 14px;
}

.account-notice-modal__zoom-tip {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.account-notice-modal__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.account-notice-modal__figure--hero img {
  width: 100%;
  max-width: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.account-notice-modal__section {
  margin-bottom: 12px;
}

.account-notice-modal__section h3 {
  margin: 0 0 8px;
  color: #0F172A;
  font-size: 14px;
}

.account-notice-modal__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-notice-modal__list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid #E5EAF3;
  border-radius: 12px;
  background: #FAFBFD;
}

.account-notice-modal__list li > b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #EEF5FF;
  color: #1677FF;
  font-size: 12px;
}

.account-notice-modal__list li strong {
  display: block;
  margin-bottom: 4px;
  color: #0F172A;
  font-size: 13px;
}

.account-notice-modal__list li p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.account-notice-modal__checklist {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding-left: 18px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.account-notice-modal__hint,
.account-notice-modal__tip {
  margin: 0 0 8px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.account-notice-modal__warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 12px;
  line-height: 1.45;
}

.account-notice-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.account-notice-modal__foot span {
  color: #64748B;
  font-size: 12px;
}

.account-notice-modal__foot button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #1677FF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

body.account-notice-open {
  overflow: hidden;
}

body.mobile-compact .mobile-top-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: 34px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.mobile-compact .mobile-top-action .ui-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* Bottom tabbar: centered floating bar (5 tabs) */
body.mobile-compact .mobile-tabbar.mobile-tabbar--lite {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  inset: auto 0 0 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.mobile-compact .mobile-tabbar.mobile-tabbar--lite .mobile-tabbar__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

body.mobile-compact .mobile-tabbar.mobile-tabbar--lite .mobile-tabbar__icon {
  display: grid !important;
  place-items: center !important;
  margin-inline: auto !important;
}

body.mobile-compact .mobile-tabbar.mobile-tabbar--lite .mobile-tabbar__icon .hc-icon {
  display: grid !important;
  place-items: center !important;
}

body.mobile-compact .mobile-tabbar.mobile-tabbar--lite .mobile-tabbar__label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Video submit / requirement footer links */
.video-submit-links,
.req-promo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #E5E7EB);
}

.video-submit-links a,
.req-promo-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mobile-page--video .video-submit-links {
  display: flex;
  gap: 8px;
  width: 100%;
}

.mobile-page--video .video-submit-links a {
  flex: 1 1 0;
  min-width: 0;
}

/* Promotion center */
.mobile-page--promo-center {
  display: grid;
  gap: 12px;
}

.promo-center-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1677FF 0%, #0F68E8 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(22, 119, 255, .18));
}

.promo-center-hero strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 800;
}

.promo-center-hero p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: .92;
}

.promo-center-refresh {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.promo-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.promo-stat-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--border, #E5E7EB);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.promo-stat-card span {
  font-size: 11px;
  color: var(--muted, #64748B);
}

.promo-stat-card strong {
  font-size: 20px;
  line-height: 1.1;
  color: var(--title, #0F172A);
}

.promo-stat-card em {
  font-size: 11px;
  color: #1677FF;
  font-style: normal;
}

.promo-link-card,
.promo-tools-card,
.promo-rank-card,
.promo-level-card,
.promo-cases-card,
.promo-methods-card,
.promo-rules-card {
  padding: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--border, #E5E7EB);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.promo-link-card h2,
.promo-cases-card h2,
.promo-methods-card h2,
.promo-rules-card h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--title, #0F172A);
}

.promo-link-card h2 + .promo-link-row {
  margin-bottom: 12px;
}

.promo-link-row,
.promo-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-link-row input,
.promo-token-row code {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  background: #F8FAFC;
  font-size: 12px;
  color: var(--title, #0F172A);
  word-break: break-all;
}

.promo-link-row button,
.promo-token-row button {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #1677FF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.promo-link-card > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #64748B);
}

.promo-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.promo-tools-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--title, #0F172A);
}

.promo-tools-head span {
  font-size: 12px;
  color: var(--muted, #64748B);
}

.promo-tools-head button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: #1677FF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.promo-tools-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1677FF;
  text-decoration: none;
}

.promo-rank-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.promo-rank-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: var(--title, #0F172A);
}

.promo-rank-head span {
  font-size: 12px;
  color: #1677FF;
}

.promo-rank-head em {
  font-size: 11px;
  color: var(--muted, #64748B);
  font-style: normal;
  white-space: nowrap;
}

.promo-rank-table-wrap {
  overflow-x: auto;
}

.promo-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.promo-rank-table th,
.promo-rank-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border, #E5E7EB);
  text-align: left;
  white-space: nowrap;
}

.promo-rank-table th {
  color: var(--muted, #64748B);
  font-weight: 600;
}

.promo-rank-table td:last-child {
  color: #1677FF;
  font-weight: 700;
}

.promo-collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: var(--title, #0F172A);
}

.promo-collapse-head em {
  font-size: 12px;
  color: var(--muted, #64748B);
  font-style: normal;
}

.promo-collapse-body {
  display: none;
  margin-top: 12px;
}

.promo-collapse-body.is-open {
  display: block;
}

.promo-level-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.promo-level-current span {
  font-size: 12px;
  color: var(--muted, #64748B);
}

.promo-level-current strong {
  font-size: 16px;
  color: #1677FF;
}

.promo-level-card > .promo-collapse-body > p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted, #64748B);
}

.promo-level-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted, #64748B);
}

.promo-level-meta strong {
  color: #1677FF;
}

.promo-progress {
  height: 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #E2E8F0;
  overflow: hidden;
}

.promo-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1677FF, #38BDF8);
}

.promo-link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #1677FF;
  font-size: 12px;
  font-weight: 700;
}

.promo-level-all {
  display: none;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.promo-level-all.is-open {
  display: grid;
}

.promo-level-all li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F8FAFC;
  font-size: 12px;
}

.promo-level-all li strong {
  color: var(--title, #0F172A);
}

.promo-level-all li span {
  color: var(--muted, #64748B);
  text-align: right;
}

.promo-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.promo-case-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 12px;
  font-weight: 600;
}

.promo-cases-card > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #64748B);
}

.promo-method-list,
.promo-rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.promo-method-item {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #64748B);
}

.promo-method-item b {
  color: var(--title, #0F172A);
}

.promo-rule-list li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #64748B);
}

.promo-rule-list li b {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.mobile-page--promo-center .help-card {
  margin-top: 4px;
}

body.mobile-compact[data-page="promo"] .main,
body.mobile-compact[data-page="promo"] .content,
body.mobile-compact[data-page="promo"] #pageContent,
body[data-page="promo"] .main,
body[data-page="promo"] .content,
body[data-page="promo"] #pageContent {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  max-width: 430px !important;
  gap: 0 !important;
  padding: 4px 12px calc(62px + env(safe-area-inset-bottom)) !important;
}

/* Home item codes tab */
.home-item-codes {
  display: grid;
  gap: 10px;
}

.home-item-codes__subtabs {
  display: flex;
  gap: 6px;
  width: 100%;
  padding: 4px;
  border-radius: 12px;
  background: #EDF3FA;
  box-sizing: border-box;
}

.home-item-codes__subtabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 6px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.home-item-codes__subtabs button.is-active {
  background: #1677FF;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(22, 119, 255, .22);
}

.home-item-codes__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  background: #FFFFFF;
}

.home-item-codes__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.home-item-codes__body {
  min-height: 120px;
}

.home-item-codes__tip {
  margin: 0 0 10px;
  color: var(--muted, #64748B);
  font-size: 12px;
  line-height: 1.5;
}

.home-item-codes__open,
a.home-item-codes__open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  box-sizing: border-box;
}

.home-item-codes__open .hc-icon,
.home-item-codes__open .hc-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.home-item-codes__open:active {
  background: #DBEAFE;
}

.home-item-codes__image {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: zoom-in;
}

.home-item-codes__image img {
  display: block;
  width: 100%;
  height: auto;
}

.home-item-codes__links {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.home-item-codes__links a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.home-item-code-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.home-item-code-list li button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  background: #FFFFFF;
  text-align: left;
}

.home-item-code-list code {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #EFF6FF;
  color: #1677FF;
  font-size: 12px;
  font-weight: 700;
}

.home-item-code-list span {
  flex: 1;
  min-width: 0;
  color: var(--text, #334155);
  font-size: 12px;
  line-height: 1.45;
}

.home-item-codes__loading,
.home-item-codes__empty {
  margin: 0;
  padding: 24px 12px;
  color: var(--muted, #64748B);
  font-size: 13px;
  text-align: center;
}

body[data-page="home"] .home-news-list .home-item-codes {
  margin: 0;
}

.home-notice-guide {
  display: grid;
  gap: 10px;
}

.home-notice-guide--images {
  gap: 8px;
}

.home-notice-guide__tip {
  margin: 0;
  color: var(--muted, #64748B);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.home-notice-guide--images .home-notice-guide__body {
  display: grid;
  gap: 8px;
  max-height: none;
  padding: 0;
  overflow: visible;
}

.home-notice-account {
  cursor: pointer;
}

.home-notice-guide__images-block {
  display: grid;
  gap: 8px;
}

.home-notice-guide__stack {
  display: grid;
  gap: 8px;
}

.home-notice-guide__open,
a.home-notice-guide__open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #FECACA;
  border-radius: 12px;
  background: #FFFFFF;
  color: #DC2626;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  box-sizing: border-box;
}

.home-notice-guide__open .hc-icon,
.home-notice-guide__open .hc-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.home-notice-guide__open:active {
  background: #FEF2F2;
}

.home-notice-guide__figure {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: zoom-in;
}

.home-notice-guide__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.home-notice-guide__head {
  padding: 10px 12px;
  border: 1px solid #FECACA;
  border-radius: 12px;
  background: #FEF2F2;
}

.home-notice-guide__head h3 {
  margin: 0 0 4px;
  color: #DC2626;
  font-size: 15px;
  font-weight: 800;
}

.home-notice-guide__head p {
  margin: 0;
  color: #B91C1C;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.home-notice-guide__body {
  display: grid;
  gap: 8px;
  max-height: min(62vh, 520px);
  padding-right: 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.home-notice-guide--images .home-notice-guide__body {
  max-height: none;
  padding-right: 0;
  overflow: visible;
}

.home-notice-section {
  padding: 10px 12px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  background: #FFFFFF;
}

.home-notice-section h4 {
  margin: 0 0 8px;
  color: #1677FF;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.home-notice-section__sub {
  margin: 8px 0 4px;
  color: #0F172A;
  font-size: 12px;
  font-weight: 700;
}

.home-notice-section__sub:first-of-type {
  margin-top: 0;
}

.home-notice-section__p {
  margin: 0 0 6px;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.home-notice-section__p:last-child {
  margin-bottom: 0;
}

.home-notice-section__p strong {
  color: #0F172A;
}

.home-notice-section__list {
  margin: 0 0 6px;
  padding-left: 18px;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.home-notice-section__list li {
  margin-bottom: 4px;
}

.home-notice-section__list li:last-child {
  margin-bottom: 0;
}

body[data-page="home"] .home-news-list .home-notice-guide--images {
  margin: 0;
}

/* Home quick actions: final layout */
body[data-page="home"] .home-app .home-quick-card,
body.mobile-compact[data-page="home"] .home-quick-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-app .home-quick-grid,
body.mobile-compact[data-page="home"] .home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-app .home-quick-action,
body.mobile-compact[data-page="home"] .home-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 12px 4px 10px !important;
  border: 1px solid #E8EEF5 !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

body[data-page="home"] .home-app .home-quick-action__icon,
body.mobile-compact[data-page="home"] .home-quick-action__icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
}

body[data-page="home"] .home-app .home-quick-action__icon .hc-icon,
body.mobile-compact[data-page="home"] .home-quick-action__icon .hc-icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
}

body[data-page="home"] .home-app .home-quick-action__icon .hc-icon svg,
body.mobile-compact[data-page="home"] .home-quick-action__icon .hc-icon svg {
  width: 24px !important;
  height: 24px !important;
}

body[data-page="home"] .home-app .home-quick-action__label,
body.mobile-compact[data-page="home"] .home-quick-action__label,
body[data-page="home"] .home-app .home-quick-action strong,
body.mobile-compact[data-page="home"] .home-quick-action strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  color: #475569 !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Home quick row + news card spacing fix (override legacy list-row styles). */
body[data-page="home"] .home-quick-card,
body.mobile-compact[data-page="home"] .home-quick-card {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: initial !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: initial !important;
}

body[data-page="home"] .home-quick-card .home-quick-grid,
body.mobile-compact[data-page="home"] .home-quick-card .home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

body[data-page="home"] .home-quick-card + .home-news-card,
body.mobile-compact[data-page="home"] .home-quick-card + .home-news-card {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 14px !important;
}

body[data-page="home"] .home-news-card {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

body[data-page="home"] .home-news-head {
  position: relative !important;
  z-index: 2 !important;
}

/* Android install page: full-width layout and download row fill */
body.mobile-compact[data-page="android"] .mobile-page > .app-topbar,
body[data-page="android"] .mobile-page > .app-topbar {
  display: none !important;
}

body[data-page="android"] .mobile-page {
  width: 100% !important;
  max-width: none !important;
}

body[data-page="android"] .mobile-page > .page-hero,
body[data-page="android"] .mobile-page > .page-tab-shell,
body[data-page="android"] .mobile-page > .install-action-card,
body[data-page="android"] .mobile-page > .guide-image-section,
body[data-page="android"] .mobile-page > .install-warning,
body[data-page="android"] .mobile-page > .help-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body[data-page="android"] #pageContent .page-hero h2 {
  max-width: none !important;
}

body[data-page="android"] #pageContent .page-hero p {
  max-width: calc(100% - 78px) !important;
}

body[data-page="android"] .page-tab-shell .page-tabs {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-page="android"] .page-tab-shell .page-tabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

body[data-page="android"] .install-action-card {
  padding: 8px 10px !important;
}

body[data-page="android"] .install-download-row {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px 8px !important;
  padding: 10px 0 !important;
}

body[data-page="android"] .install-download-row__step {
  margin-top: 1px !important;
}

body[data-page="android"] .install-download-row__main {
  flex: 1 1 0 !important;
  min-width: calc(100% - 34px) !important;
}

body[data-page="android"] .install-download-row__main span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

body[data-page="android"] .install-download-row__actions {
  flex: 1 1 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  justify-content: stretch !important;
}

body[data-page="android"] .install-download-row__actions .install-primary-btn,
body[data-page="android"] .install-download-row__actions .install-copy-btn {
  width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 8px 10px !important;
}

body[data-page="android"] .install-action-card__tools {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

body[data-page="android"] .install-action-card__tools a {
  width: 100% !important;
  justify-content: center !important;
}

body[data-page="android"] .guide-image-section > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-page="android"] .guide-image-card {
  padding: 8px !important;
}

body[data-page="android"] .guide-image-card a,
body[data-page="android"] .guide-image-card button {
  height: 108px !important;
}

body[data-page="android"] .guide-image-card strong {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body[data-page="android"] .guide-image-card p {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

body[data-page="android"] .help-card {
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body[data-page="android"] .help-card > div {
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

body[data-page="android"] .help-card button {
  width: 100% !important;
}

/* Android full-bleed: beat any late-loaded legacy shell rules */
body.mobile-compact[data-page="android"] .app,
body.mobile-compact[data-page="android"] .main,
body.mobile-compact[data-page="android"] .topbar,
body[data-page="android"] .app,
body[data-page="android"] .main,
body[data-page="android"] .topbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.mobile-compact[data-page="android"] .content,
body.mobile-compact[data-page="android"] #pageContent,
body[data-page="android"] .content,
body[data-page="android"] #pageContent {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

body[data-page="android"] .mobile-app-header {
  width: 100% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

body[data-page="android"] .mobile-page,
body[data-page="android"] .page-tab-shell,
body[data-page="android"] .page-tab-panels,
body[data-page="android"] .page-tab-panel,
body[data-page="android"] .method-card,
body[data-page="android"] .install-action-card,
body[data-page="android"] .install-download-list,
body[data-page="android"] .install-download-row,
body[data-page="android"] .guide-image-section,
body[data-page="android"] .install-warning,
body[data-page="android"] .help-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.mobile-compact[data-page="android"] .mobile-tabbar,
body[data-page="android"] .mobile-tabbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body[data-page="android"] .install-download-row__main {
  flex: 1 1 calc(100% - 30px) !important;
  min-width: 0 !important;
}

.home-official-groups {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #F8FBFF 0%, #EFF6FF 100%) !important;
}

.home-official-groups__head h3 {
  margin: 0 0 4px !important;
  color: #0F172A !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.home-official-groups__head p {
  margin: 0 0 10px !important;
  color: #64748B !important;
  font-size: 12px !important;
}

.home-official-groups__list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.home-official-groups__item {
  display: grid !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  text-align: left !important;
  appearance: none !important;
  cursor: pointer !important;
}

.home-official-groups__item strong {
  color: #1677FF !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.home-official-groups__item span {
  color: #0F172A !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.home-official-groups__item em {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.newbie-guide-hero,
.newbie-guide-abnormal,
.newbie-guide-sections {
  width: 100% !important;
  box-sizing: border-box !important;
}

.newbie-guide-hero {
  padding: 12px 14px !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
}

.newbie-guide-hero h2 {
  margin: 0 0 6px !important;
  color: #0F172A !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.newbie-guide-hero p {
  margin: 0 0 10px !important;
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.newbie-guide-download {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #EFF6FF !important;
  color: #1677FF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.newbie-guide-abnormal {
  padding: 12px 14px !important;
  border: 1px solid #FECACA !important;
  border-radius: 14px !important;
  background: #FFF7ED !important;
}

.newbie-guide-abnormal h3 {
  margin: 0 0 4px !important;
  color: #9A3412 !important;
  font-size: 15px !important;
}

.newbie-guide-abnormal p {
  margin: 0 0 10px !important;
  color: #C2410C !important;
  font-size: 12px !important;
}

.newbie-guide-abnormal a {
  display: block !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.newbie-guide-abnormal img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.newbie-guide-sections {
  display: grid !important;
  gap: 8px !important;
}

.newbie-guide-section {
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.newbie-guide-section__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  appearance: none !important;
}

.newbie-guide-section__toggle strong {
  color: #0F172A !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.newbie-guide-section__toggle .hc-icon {
  transition: transform .2s ease !important;
}

.newbie-guide-section.is-open .newbie-guide-section__toggle .hc-icon {
  transform: rotate(90deg) !important;
}

.newbie-guide-section__body {
  display: none !important;
  padding: 0 14px 12px !important;
}

.newbie-guide-section.is-open .newbie-guide-section__body {
  display: block !important;
}

.newbie-guide-section__body p {
  margin: 0 0 10px !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.newbie-guide-section__body p:last-child {
  margin-bottom: 0 !important;
}

body[data-page="newbieGuide"] .mobile-page {
  gap: 10px !important;
}

body[data-page="newbieGuide"] .content,
body[data-page="newbieGuide"] #pageContent {
  max-width: none !important;
  padding: 4px 10px calc(62px + env(safe-area-inset-bottom)) !important;
}

body.layout-fullwidth,
body.layout-fullwidth .app,
body.layout-fullwidth .main,
body.layout-fullwidth .topbar,
body.layout-fullwidth .content,
body.layout-fullwidth #pageContent {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.layout-fullwidth .mobile-tabbar,
body.layout-fullwidth .mobile-tabbar.mobile-tabbar--lite {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
}

/* Android page: true edge-to-edge on mobile (hero + shell) */
@media (max-width: 768px) {
  body[data-page="android"] .app,
  body[data-page="android"] .main,
  body[data-page="android"] .content,
  body[data-page="android"] #pageContent,
  body.mobile-compact[data-page="android"] .app,
  body.mobile-compact[data-page="android"] .main,
  body.mobile-compact[data-page="android"] .content,
  body.mobile-compact[data-page="android"] #pageContent {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  body[data-page="android"] .mobile-page,
  body[data-page="android"] .mobile-page--android {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  body[data-page="android"] .mobile-page > .page-hero,
  body[data-page="android"] #pageContent .page-hero,
  body[data-page="android"] #pageContent .page-hero--android {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="android"] .mobile-page > .page-tab-shell,
  body[data-page="android"] .mobile-page > .install-action-card,
  body[data-page="android"] .mobile-page > .guide-image-section,
  body[data-page="android"] .mobile-page > .install-warning,
  body[data-page="android"] .mobile-page > .help-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}

body[data-page="android"] .app,
body[data-page="android"] .main {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}