/* 技小宝商城：旧业务页统一视觉覆盖层 */
.store-legacy-page {
  --store-primary: #1859e8;
  --store-primary-dark: #0b3ca7;
  --store-cyan: #23b6d8;
  --store-ink: #101828;
  --store-muted: #667085;
  --store-line: #e4eaf2;
  --store-surface: #fff;
  --store-soft: #f4f7fc;
  --store-shadow: 0 18px 50px rgba(21, 55, 108, .09);
  color: var(--store-ink);
  background: var(--store-soft);
}

.store-legacy-page *,
.store-legacy-page *::before,
.store-legacy-page *::after { box-sizing: border-box; }
.store-legacy-page ul,
.store-legacy-page ol,
.store-legacy-page li,
.store-legacy-page .nav-li-list,
.store-legacy-page .nav-li-list-item {
  list-style: none !important;
  list-style-type: none !important;
}
.store-legacy-page li::marker,
.store-legacy-page .nav-li-list-item::marker { content: ""; }
.store-legacy-page .legacy-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--store-ink); text-decoration: none; }
.store-legacy-page .legacy-brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #2670ff, #1248cf); box-shadow: 0 8px 18px rgba(24, 89, 232, .24); font-size: 24px; font-weight: 800; }
.store-legacy-page .legacy-brand strong,
.store-legacy-page .legacy-brand small { display: block; white-space: nowrap; }
.store-legacy-page .legacy-brand strong { font-size: 17px; line-height: 1.35; }
.store-legacy-page .legacy-brand small { color: #98a2b3; font-size: 10px; line-height: 1.35; }
.store-legacy-page .legacy-mobile-account { display: none; }
.store-legacy-page .rightposition { display: none !important; }

.store-legacy-page .legacy-hero {
  position: relative;
  display: flex;
  align-items: center;
  height: auto !important;
  min-height: 250px;
  margin: 0 !important;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 82% 24%, rgba(92, 207, 232, .3), transparent 23%),
    radial-gradient(circle at 67% 110%, rgba(74, 120, 255, .24), transparent 35%),
    linear-gradient(125deg, #071e53 0%, #1249ba 53%, #1789ca 100%) !important;
}

.store-legacy-page .legacy-hero::before,
.store-legacy-page .legacy-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
}

.store-legacy-page .legacy-hero::before { right: 7%; width: 250px; height: 250px; }
.store-legacy-page .legacy-hero::after { right: 18%; bottom: -105px; width: 210px; height: 210px; }
.store-legacy-page .legacy-hero-content { position: relative; z-index: 1; padding: 46px 0; }
.store-legacy-page .legacy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: #9eeafb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}
.store-legacy-page .legacy-kicker::before { width: 26px; height: 2px; content: ""; background: #5ed9f0; }
.store-legacy-page .legacy-hero h1 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 46px); line-height: 1.22; }
.store-legacy-page .legacy-hero p { max-width: 620px; margin: 15px 0 0; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.8; }

.store-legacy-page .main { margin: 0 !important; padding: 42px 0 76px !important; }
.store-legacy-page .mainbox {
  width: 100%;
  max-width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.store-legacy-page .mainbox > ul:first-child { flex: 0 0 218px; margin: 0; padding: 0; list-style: none; }
.store-legacy-page ul.expmenu {
  width: 100%;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--store-line);
  border-radius: 16px;
  background: var(--store-surface);
  box-shadow: 0 12px 35px rgba(21, 55, 108, .06);
}
.store-legacy-page ul.expmenu div.menu-header,
.store-legacy-page ul.expmenu > li ul li {
  height: auto;
  min-height: 48px;
  margin: 2px 0;
  padding: 13px 15px;
  border: 0;
  border-radius: 9px !important;
  color: #475467;
  background: transparent;
  text-shadow: none;
  line-height: 22px;
}
.store-legacy-page ul.expmenu div.menu-header:hover,
.store-legacy-page ul.expmenu div.menu-header.active,
.store-legacy-page ul.expmenu > li ul li:hover {
  color: var(--store-primary);
  background: #eef4ff;
}
.store-legacy-page ul.expmenu div.menu-header.active { box-shadow: inset 3px 0 0 var(--store-primary); }
.store-legacy-page ul.expmenu > li > div.menu-header > .label { padding: 0; }
.store-legacy-page .main-content {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0 !important;
  padding: 28px;
  border: 1px solid var(--store-line);
  border-radius: 18px;
  background: var(--store-surface);
  box-shadow: var(--store-shadow);
}

/* 套餐中心 */
.service-page #ProductContainer { display: grid; gap: 18px; margin: 0; }
.service-page #ProductContainer > .Product-Content {
  position: relative;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--store-line);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f9fbff);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.service-page #ProductContainer > .Product-Content::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  background: linear-gradient(var(--store-primary), var(--store-cyan));
}
.service-page #ProductContainer > .Product-Content:hover { border-color: #b8cbed; box-shadow: 0 14px 30px rgba(24, 89, 232, .09); transform: translateY(-2px); }
.service-page #ProductContainer > .Divider { display: none; }
.service-page .Product-Title { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: auto; }
.service-page .Product-Title h4 { margin: 0; color: var(--store-ink); font-size: 20px; line-height: 1.55; }
.service-page .Product-Title h4 span { color: #f04438 !important; font-size: 18px; }
.service-page .Product-Title .product-btn-group { display: flex; flex: 0 0 auto; gap: 9px; float: none; margin: 0; }
.service-page .Product-Title p,
.service-page .Product-Title .share-help-btn {
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--store-primary);
  border-radius: 8px;
  color: var(--store-primary);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.service-page .Product-Title p { color: #fff; background: var(--store-primary); }
.service-page .Product-Title p:hover { background: var(--store-primary-dark); }
.service-page .Product-Title .share-help-btn:hover { background: #eef4ff; }
.service-page .Product-Remark { margin-top: 14px; color: var(--store-muted); font-size: 14px; line-height: 1.8; }
.service-page #Pagination button { margin: 0 4px; background: var(--store-primary); }

/* 个人中心 */
.user-center-page .main-content { min-height: 520px; }
.user-center-page .templatelist.active { width: 100%; }
.user-center-page .profile-section h2 { margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--store-line); color: var(--store-ink); font-size: 22px; }
.user-center-page .avatar-wrapper { padding: 20px; border-radius: 14px; background: #f7f9fc; }
.user-center-page .form-group { margin: 20px 0 0; }
.user-center-page .form-group label { color: #344054; }
.user-center-page input[type="text"],
.user-center-page input[type="password"] {
  min-height: 42px;
  border: 1px solid #d0d8e5;
  border-radius: 8px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.user-center-page input[type="text"]:focus,
.user-center-page input[type="password"]:focus { border-color: var(--store-primary); box-shadow: 0 0 0 3px rgba(24, 89, 232, .12); }
.user-center-page button,
.user-center-page .wallet-btn,
.user-center-page .info-use { border-color: var(--store-primary) !important; border-radius: 8px !important; background: var(--store-primary) !important; color: #fff !important; }
.user-center-page .wallet-btn:hover,
.user-center-page button:hover { background: var(--store-primary-dark) !important; }
.user-center-page #Myallet,
.user-center-page #MyService { overflow: hidden; border-radius: 14px; background: #f7f9fc; }
.user-center-page .wallet-balance-title,
.user-center-page .MyService-coin,
.user-center-page .wallet-coin .wallect-coin-list { border: 1px solid var(--store-line); border-radius: 14px; background: #fff; }
.user-center-page .wallet-balance-title { height: auto; min-height: 220px; }
.user-center-page .wallet-balance-title .balance-total .balance-item .item-num { color: var(--store-primary); }
.user-center-page .tab-switch,
.user-center-page .MyService-switch { border-bottom-color: var(--store-line) !important; }
.user-center-page .switch-act,
.user-center-page .tab-link:hover { color: var(--store-primary) !important; }
.user-center-page .templatelist-item { border-radius: 14px; }

/* 帮助中心 */
.faq-page .contain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.faq-page .cards { width: 100%; min-width: 0; margin: 0; padding: 0; }
.faq-page .title { margin: 0; padding: 0 2px; }
.faq-page .title h1 { margin: 0 0 10px; color: var(--store-ink); font-size: 18px; line-height: 1.6; }
.faq-page .card {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--store-line) !important;
  border-radius: 13px !important;
  background: #f9fbfe !important;
  box-shadow: none !important;
}
.faq-page .card:hover { border-color: #b8cbed !important; background: #fff !important; box-shadow: 0 12px 26px rgba(24, 89, 232, .08) !important; }
.faq-page .card p { margin: 0 0 8px; color: #475467; font-size: 15px; line-height: 1.9; }
.faq-page .card p:last-child { margin-bottom: 0; }
.faq-page .card img { max-width: 100%; height: auto; margin-top: 12px; border-radius: 9px; }
.faq-page .pagination { width: 100%; margin: 28px auto 0; }
.faq-page .pagination a { border: 1px solid var(--store-line); color: #475467; background: #fff; }
.faq-page .pagination a.active,
.faq-page .pagination a:hover { border-color: var(--store-primary); color: #fff; background: var(--store-primary); }

/* 弹窗与公共细节 */
.store-legacy-page #downloadModal,
.store-legacy-page #qrCodeModal { max-width: calc(100% - 28px); border: 1px solid var(--store-line); border-radius: 16px; box-shadow: 0 24px 70px rgba(7, 30, 83, .2); }
.store-legacy-page #overlay { z-index: 80; backdrop-filter: blur(3px); }
.store-legacy-page #downloadModal,
.store-legacy-page #qrCodeModal { z-index: 81; }

@media (max-width: 900px) {
  html:has(.store-legacy-page),
  .store-legacy-page { max-width: 100%; overflow-x: hidden; }
  .store-legacy-page .header-flex { display: flex !important; justify-content: space-between !important; gap: 12px; }
  .store-legacy-page .header-flex { position: relative; flex-wrap: nowrap !important; }
  .store-legacy-page .header-flex > .legacy-mobile-account + .nav { display: none !important; }
  .store-legacy-page .header-flex > .nav:last-child { display: none !important; }
  .store-legacy-page .legacy-mobile-account { position: absolute; top: 12px; right: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; height: 38px; border-radius: 9px; color: #fff; background: var(--store-primary); font-size: 13px; font-weight: 600; }
  .store-legacy-page .legacy-hero { min-height: 215px; }
  .store-legacy-page .legacy-hero-content { padding: 38px 0; }
  .store-legacy-page .legacy-hero p { font-size: 14px; }
  .store-legacy-page .main { padding: 24px 0 52px !important; }
  .store-legacy-page .mainbox { flex-direction: column; gap: 16px; }
  .store-legacy-page .mainbox > ul:first-child { flex: none; width: 100%; }
  .store-legacy-page ul.expmenu { display: flex; width: 100%; padding: 7px; overflow-x: auto; border-bottom: 1px solid var(--store-line); }
  .store-legacy-page ul.expmenu > li { display: flex; flex: 0 0 auto; }
  .store-legacy-page ul.expmenu > li > a { display: block; }
  .store-legacy-page ul.expmenu > li ul.menu { display: flex !important; }
  .store-legacy-page ul.expmenu div.menu-header,
  .store-legacy-page ul.expmenu > li ul li { min-height: 42px; margin: 0 2px; padding: 10px 13px; white-space: nowrap; }
  .store-legacy-page .main-content { flex: none; width: 100%; max-width: 100%; padding: 20px; overflow: hidden; }
  .service-page .Product-Title { align-items: flex-start; flex-direction: column; }
  .service-page .Product-Title .product-btn-group { width: 100%; }
  .service-page .Product-Title p,
  .service-page .Product-Title .share-help-btn { flex: 1; text-align: center; }
  .user-center-page .wallet-balance-title { min-height: 0; }
  .faq-page .contain,
  .faq-page .cards,
  .faq-page .card { max-width: 100%; overflow-wrap: anywhere; }
  .faq-page .cards,
  .faq-page .card { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 520px) {
  .store-legacy-page .container { width: calc(100% - 28px) !important; }
  .store-legacy-page .legacy-brand { gap: 7px; }
  .store-legacy-page .legacy-brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 21px; }
  .store-legacy-page .legacy-brand strong { font-size: 15px; }
  .store-legacy-page .legacy-brand small { display: none; }
  .store-legacy-page .legacy-hero { min-height: 190px; }
  .store-legacy-page .legacy-hero::before { right: -90px; width: 210px; height: 210px; }
  .store-legacy-page .legacy-hero h1 { font-size: 28px; }
  .store-legacy-page .legacy-hero p { margin-top: 10px; }
  .store-legacy-page .main-content { padding: 16px; border-radius: 14px; }
  .service-page #ProductContainer > .Product-Content { padding: 19px 16px; }
  .service-page .Product-Title h4 { font-size: 17px; }
  .service-page .Product-Title h4 span { display: block; margin: 5px 0 0 !important; font-size: 17px; }
  .faq-page .title h1 { font-size: 16px; }
  .faq-page .card { padding: 17px; }
  .faq-page .card p { font-size: 14px; }
}