.content-page-shell {
  width: min(100%, 1278px);
  margin: 0 auto;
  padding: 0 24px 56px;
  box-sizing: border-box;
}

.content-page-shell .breadcrumb { margin: 0; padding: 22px 0; }

.content-topic-link { display: block; color: inherit; text-decoration: none; }

.content-topic-banner {
  position: relative;
  aspect-ratio: 775 / 245;
  border-radius: 16px;
  overflow: hidden;
  background: #fff7ef;
}

.content-topic-banner > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.content-category-tabs {
  display: flex;
  gap: 36px;
  margin: 30px 0 12px;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  scrollbar-width: none;
}
.content-category-tabs::-webkit-scrollbar { display: none; }

.content-category-tabs a {
  position: relative;
  flex: 0 0 auto;
  padding: 0 2px 13px;
  color: #555;
  font-size: 17px;
  text-decoration: none;
}

.content-category-tabs a.is-active { color: #f14a25; font-weight: 600; }
.content-category-tabs a.is-active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 34px; height: 3px; border-radius: 3px; background: #f14a25; transform: translateX(-50%); }

.content-rank-list { display: grid; gap: 24px; }
.content-rank-item { display: flex; width: 100%; height: 193px; gap: 12px; align-items: flex-start; color: #333; text-decoration: none; }
.content-rank-cover-wrap { position: relative; display: block; flex: 0 0 147px; width: 147px; height: 193px; overflow: hidden; border-radius: 8.084px; }
.content-rank-number { position: absolute; left: 0; top: 0; display: grid; width: 32.335px; height: 32.335px; border-radius: 0 0 5.849px 0; place-items: center; color: #fff; font-size: 18.86px; font-weight: 600; line-height: 1; }
.content-rank-number.is-rank-1 { background: linear-gradient(139deg, #ff8874 9%, #ff5d43 97%); }
.content-rank-number.is-rank-2 { background: linear-gradient(140deg, #ffc8a1 7%, #ff973f 97%); }
.content-rank-number.is-rank-3 { background: linear-gradient(139deg, #d1c9ff 9%, #877dc3 97%); }
.content-rank-number.is-rank-4 { background: linear-gradient(139deg, #6dc5b2 9%, #40ab94 97%); }
.content-rank-number.is-rank-5 { background: linear-gradient(139deg, #86a3e2 9%, #5c7ec5 97%); }
.content-rank-number.is-rank-6 { background: linear-gradient(139deg, #a9a9a9 9%, #7d7d7e 97%); }
.content-rank-cover { display: block; width: 147px; height: 193px; border-radius: inherit; object-fit: cover; background: #f3f3f3; }
.content-rank-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 8px; }
.content-rank-heading { display: flex; width: 100%; min-width: 0; gap: 10px; align-items: center; }
.content-rank-heading > strong { min-width: 0; overflow: hidden; color: #333; font-size: 24px; font-weight: 600; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.content-rank-heading > em { display: inline-flex; flex: 0 0 auto; gap: 2px; align-items: center; color: #f75a06; font-size: 18px; font-style: normal; line-height: 18px; white-space: nowrap; }
.content-rank-heading > em img { display: block; width: 18px; height: 18px; }
.content-tag-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.content-tag-row i { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 4px; font-size: 14px; font-style: normal; line-height: normal; white-space: nowrap; }
.content-tag-row.is-type i { color: #666; background: #f1f2f4; }
.content-tag-row.is-evaluation i { color: #ca9850; background: #fef6ec; }
.content-tag-row.is-evaluation i.is-score { gap: 2px; padding-right: 6px; padding-left: 6px; color: #fb5624; background: #fdefda; }
.content-tag-row.is-evaluation i.is-score img { display: block; width: 16px; height: 16px; object-fit: cover; }
.content-rank-description { display: -webkit-box; max-height: 72px; overflow: hidden; color: #999; font-size: 14px; line-height: 24px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.content-rank-item.has-both-tag-groups .content-rank-description { max-height: 48px; -webkit-line-clamp: 2; }
.content-rank-arrow { color: #bbb; font-size: 28px; }
.content-empty, .content-error { margin: 32px 0; padding: 48px 24px; border-radius: 12px; background: #f7f7f7; color: #777; text-align: center; }
.content-error h1 { margin-top: 0; color: #333; }
.content-error a { color: #f14a25; }

.content-pagination { display: flex; justify-content: center; gap: 8px; margin: 30px 0; }
.content-pagination a, .content-pagination span { display: grid; width: 34px; height: 34px; border: 1px solid #eee; border-radius: 50%; place-items: center; color: #555; text-decoration: none; }
.content-pagination a.is-current { border-color: #f14a25; color: #fff; background: #f14a25; }
.content-pagination span { color: #ccc; }

.content-download-banner { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(90deg, #fff0e9, #ffe1d3); }
.content-download-banner > img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.content-download-banner > span { display: grid; flex: 1; gap: 4px; min-width: 0; }
.content-download-banner strong { color: #5a2417; font-size: 16px; }
.content-download-banner small { color: #b06d5d; }
.content-download-banner button { min-width: 92px; padding: 10px 20px; border: 0; border-radius: 28px; color: #fff; background: #ff4b2f; font-weight: 600; cursor: pointer; }

.hongguo-app-content { display: grid; width: min(100%, 775px); gap: 24px; }
.hongguo-app-content .content-rank-arrow { display: none; }
.content-more-button { display: inline-flex; justify-self: center; align-items: center; color: #f14a25; font-size: 18px; font-weight: 500; line-height: normal; text-align: center; text-decoration: none; }
.content-more-button img { width: 16px; height: 16px; transform: rotate(180deg); }

.content-page-download-banner { display: none; }
.content-page-mobile-icon { display: none; }

.hongguo-detail-qrs { display: none; }
.hongguo-mobile-qm-button { display: flex; }
.hongguo-detail-qr-heading { display: none; }
.hongguo-detail-qr-list { display: flex; align-items: center; gap: 6px; }
.hongguo-app-qr { display: flex; width: auto; height: 103px; padding: 4px 6px; border: 0; border-radius: 6px; box-sizing: border-box; align-items: center; gap: 5px; overflow: hidden; background: #fff; box-shadow: -3.217px -3.217px 15.846px rgba(0, 0, 0, .11), 3.217px 3.217px 4.826px rgba(0, 0, 0, .08); }
.hongguo-app-qr.is-qm { width: auto; }
.hongguo-app-qr-code { position: relative; display: grid; flex: 0 0 95px; width: 95px; height: 95px; border-radius: 0; place-items: center; overflow: hidden; background: #fff; }
.hongguo-app-qr-code img, .hongguo-app-qr-code canvas { display: block; width: 95px; height: 95px; max-width: 95px; max-height: 95px; image-rendering: pixelated; }
.hongguo-app-qr-code .generated-home-qr-logo, .hongguo-app-qr-code .generated-apk-qr-logo { position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; border: 2px solid #fff; border-radius: 4px; box-sizing: border-box; object-fit: cover; image-rendering: auto; transform: translate(-50%, -50%); }
.hongguo-app-qr-copy { display: flex; min-width: 0; width: auto; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
.hongguo-app-qr-copy b { color: #333; font-size: 14px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.hongguo-app-qr-copy small { color: #999; font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.hongguo-app-qr.is-qm .hongguo-app-qr-copy { flex: 0 0 auto; width: auto; }
.hongguo-app-qr.is-qm .hongguo-app-qr-copy small { white-space: normal; }

@media (min-width: 1024px) {
  .hongguo-content-page { width: 100%; max-width: none; }
  .hongguo-content-page > .topbar { height: 60px; }
  .figma-app-detail .hongguo-detail-qrs { display: flex; width: auto; height: 103px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
  .figma-app-detail .hongguo-mobile-qm-button { display: none; }

  .content-list-page { padding-bottom: 0; }
  .hongguo-content-page > .content-list-page {
    margin-right: auto;
    margin-left: auto;
  }
  .content-list-page .breadcrumb { padding: 21.5px 0; }
  .content-list-page .content-topic-banner { width: 1230px; max-width: 100%; aspect-ratio: 1230 / 410; }
  .content-list-page .content-category-tabs {
    height: 36px;
    gap: 32px;
    margin: 0 0 32px;
    border-bottom: 0;
    align-items: flex-start;
  }
  .content-list-page .content-category-tabs a {
    padding: 0;
    color: #333;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: .44px;
  }
  .content-list-page .content-category-tabs a.is-active { color: #f14a25; font-weight: 600; }
  .content-list-page .content-category-tabs a.is-active::after {
    bottom: 0;
    width: 40px;
    height: 3px;
    transform: translate(-50%, 100%);
  }
  .content-list-page .content-rank-list { gap: 32px; margin-top: 32px; }
  .content-list-page .content-rank-arrow { display: none; }
  .content-list-page .content-pagination { gap: 8px; margin: 32px 0 0; }
  .content-list-page .content-pagination a,
  .content-list-page .content-pagination span {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 2px;
    color: #606266;
    background: #f0f2f5;
    font-size: 14px;
  }
  .content-list-page .content-pagination a.is-current {
    color: #f14a25;
    background: #fff0ec;
    font-weight: 600;
  }
  .content-list-page .content-pagination span { color: #c0c4cc; background: #f5f7fa; }

  .hongguo-content-page .content-list-page + .site-footer-shell {
    width: min(1320px, calc(100% - 56px));
    margin: 72px auto 0;
    padding: 0 0 176px;
  }

  .content-page-download-banner {
    position: fixed;
    left: 50%;
    bottom: 45px;
    z-index: 20;
    display: flex;
    width: min(1321px, calc(100vw - 56px));
    height: 90px;
    padding: 8px 236px 8px 388px;
    border-radius: 12px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(81deg, #ffe0df 10%, #ffebe3 91%);
    box-shadow: -5px 5px 12.5px rgba(54, 30, 10, .09);
    transform: translateX(-50%);
  }
  .content-page-red-envelope {
    position: absolute;
    left: 42px;
    top: auto;
    bottom: -36px;
    width: 224px;
    height: 224px;
    object-fit: contain;
  }
  .content-page-download-banner > strong {
    flex: 0 0 auto;
    overflow: hidden;
    color: #333;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content-page-download-banner > button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 42px;
    border: 0;
    border-radius: 26px;
    color: #fff;
    background: #f14a25;
    font-size: 24px;
    line-height: normal;
    cursor: pointer;
  }
  .content-page-download-banner > button img { width: 24px; height: 24px; }
}

@media (min-width: 1340px) {
  .hongguo-content-page > .content-list-page {
    margin-right: 0;
    margin-left: calc((100vw - 1230px) / 2 - 24px);
  }
}

.series-detail-card { position: relative; display: flex; min-height: 399px; justify-content: space-between; overflow: hidden; padding: 24px; border-radius: 12px; box-sizing: content-box; background: #f9eae8; }
.series-detail-background { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.series-detail-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0.58deg, #f9eae8 0.5%, rgba(251, 232, 228, 0.8) 99.5%); }
.series-detail-background img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center top; }
.series-detail-copy { position: relative; z-index: 1; display: flex; flex: 0 0 735px; width: 735px; flex-direction: column; justify-content: space-between; }
.series-detail-meta { display: flex; flex-direction: column; gap: 12px; }
.series-detail-heading { display: flex; min-width: 0; align-items: center; gap: 10px; }
.series-detail-heading h1 { min-width: 0; margin: 0; overflow: hidden; color: #333; font-size: 24px; font-weight: 600; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.series-heat { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: #f75a06; font-size: 18px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.series-heat img { display: block; width: 18px; height: 18px; }
.series-description-block { display: contents; }
.series-description-title { display: none; }
.series-description { width: 469px; height: auto; margin: 0; color: #666; font-size: 14px; line-height: 24px; white-space: pre-wrap; }
.series-install { display: flex; flex-direction: column; gap: 12px; }
.series-install > strong { color: #333; font-size: 14px; font-weight: 600; line-height: 22px; }
.series-desktop-qrs { display: flex; gap: 16px; }
.series-qr-card { display: flex; min-width: 202px; height: 107px; padding: 6px; border: 1.5px solid #e6e6e6; border-radius: 12px; box-sizing: border-box; align-items: center; gap: 12px; background: #fff; box-shadow: 0 3px 18.75px rgba(32,18,6,.09); }
.series-qr-card.is-qm { width: 252px; }
.series-qr-code { position: relative; display: grid; flex: 0 0 93px; width: 93px; height: 93px; place-items: center; background: #fff; }
.series-qr-code img, .series-qr-code canvas { display: block; width: 93px; height: 93px; max-width: 93px; max-height: 93px; }
.series-qr-code .generated-home-qr-logo, .series-qr-code .generated-apk-qr-logo { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 6px; transform: translate(-50%, -50%); }
.series-qr-copy { display: flex; min-width: 0; max-width: 100%; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.series-qr-copy b { max-width: 100%; overflow: hidden; color: #333; font-size: 18px; font-weight: 600; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; }
.series-qr-copy small { max-width: 100%; color: #666; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; white-space: normal; }
.series-qr-card.is-qm .series-qr-copy small { font-size: 12px; line-height: 18px; }
.series-detail-cover-wrap { position: relative; z-index: 1; display: block; flex: 0 0 304px; width: 304px; height: 399px; border-radius: 16.728px; box-shadow: -6.723px 6.723px 33.617px rgba(32,18,6,.2); }
.series-detail-cover { display: block; width: 304px; height: 399px; border-radius: inherit; object-fit: cover; }
.series-cover-rank { position: absolute; left: 0; top: 0; display: grid; width: 66.911px; height: 66.911px; border-radius: 16.728px 0 12.103px 0; place-items: center; color: #fff; font-size: 39.03px; font-weight: 600; line-height: 1; }
.series-cover-rank.is-rank-1 { background: linear-gradient(139deg, #ff8874 9%, #ff5d43 97%); }
.series-cover-rank.is-rank-2 { background: linear-gradient(140deg, #ffc8a1 7%, #ff973f 97%); }
.series-cover-rank.is-rank-3 { background: linear-gradient(139deg, #d1c9ff 9%, #877dc3 97%); }
.series-cover-rank.is-rank-4 { background: linear-gradient(139deg, #6dc5b2 9%, #40ab94 97%); }
.series-cover-rank.is-rank-5 { background: linear-gradient(139deg, #86a3e2 9%, #5c7ec5 97%); }
.series-cover-rank.is-rank-6 { background: linear-gradient(139deg, #a9a9a9 9%, #7d7d7e 97%); }
.series-mobile-actions { display: none; }

@media (min-width: 1024px) {
  .series-detail-page { padding-bottom: 0; }
  .series-detail-page .breadcrumb { padding: 21.5px 0; }
  .series-detail-page > .content-download-banner { display: none; }
  .hongguo-content-page .series-detail-page + .site-footer-shell { width: min(1320px, calc(100% - 56px)); margin: 184px auto 0; padding: 0 0 176px; }
}

@media (min-width: 1340px) {
  .hongguo-content-page > .series-detail-page { margin-right: 0; margin-left: calc((100vw - 1230px) / 2 - 24px); }
}

@media (max-width: 767px) {
  .content-page-shell { padding: 0 16px 34px; }
  .content-page-shell .breadcrumb { padding: 14px 0; font-size: 12px; }
  .content-topic-banner { border-radius: 10px; }
  .content-category-tabs { gap: 24px; margin-top: 22px; }
  .content-category-tabs a { font-size: 15px; }
  .content-rank-list { gap: 13px; }
  .content-rank-item, .hongguo-app-content .content-rank-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); height: auto; min-height: 96px; gap: 10px; padding: 0; }
  .content-rank-cover-wrap { width: 72px; height: 96px; border-radius: 6px; }
  .content-rank-number { width: 25px; height: 25px; font-size: 15px; }
  .content-rank-cover, .hongguo-app-content .content-rank-cover { width: 72px; height: 96px; border-radius: inherit; }
  .content-rank-copy, .hongguo-app-content .content-rank-copy { gap: 4px; }
  .content-rank-heading { gap: 6px; }
  .content-rank-heading > strong { font-size: 15px; }
  .content-rank-heading > em { font-size: 12px; }
  .content-rank-heading > em img { width: 14px; height: 14px; }
  .figma-app-detail .hongguo-app-content .content-rank-heading {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    width: 100%;
  }
  .figma-app-detail .hongguo-app-content .content-rank-heading > strong {
    display: block;
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .figma-app-detail .hongguo-app-content .content-rank-heading > em {
    max-width: 100%;
    justify-self: end;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content-list-page { padding-right: 20px; padding-bottom: 0; padding-left: 20px; }
  .content-list-page .content-category-tabs {
    height: 24px;
    margin: 0 0 24px;
    border-bottom: 0;
    align-items: flex-start;
  }
  .content-list-page .content-category-tabs a { padding: 0; line-height: 21px; }
  .content-list-page .content-category-tabs a.is-active::after { bottom: -3px; }
  .content-list-page .content-rank-list { margin-top: 24px; }
  .content-list-page .content-rank-item {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 104px;
    gap: 8px;
  }
  .content-list-page .content-rank-cover-wrap,
  .content-list-page .content-rank-cover { width: 78px; height: 104px; }
  .content-list-page .content-rank-heading { position: relative; width: 100%; }
  .content-list-page .content-rank-heading > strong {
    display: block;
    width: 240px;
    padding-right: 76px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content-list-page .content-rank-heading > em {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    width: max-content;
    max-width: none;
    overflow: visible;
    justify-content: flex-end;
    background: #fff;
    transform: translateY(-50%);
  }
  .content-list-page .content-rank-heading > em img {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
  }
  .content-list-page .content-pagination {
    gap: 8px;
    margin: 24px 0 0;
  }
  .content-list-page .content-pagination a,
  .content-list-page .content-pagination span {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 2px;
    color: #606266;
    background: #f0f2f5;
    font-size: 14px;
  }
  .content-list-page .content-pagination a.is-current {
    color: #f14a25;
    background: #fff0ec;
    font-weight: 600;
  }
  .content-list-page .content-pagination span {
    color: #c0c4cc;
    background: #f5f7fa;
  }
  .content-page-download-banner {
    position: fixed;
    left: 50%;
    bottom: 12px;
    z-index: 20;
    display: flex;
    width: calc(100vw - 40px);
    height: 58px;
    padding: 8px 12px;
    border-radius: 12px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    background: linear-gradient(86deg, #ffe0df 10%, #ffebe3 91%);
    box-shadow: -5px 5px 12.5px rgba(54, 30, 10, .09);
    transform: translateX(-50%);
  }
  .content-page-red-envelope { display: none; }
  .content-page-mobile-icon {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    object-fit: cover;
  }
  .content-page-download-banner > strong {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }
  .content-page-download-banner > strong span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content-page-download-banner > button {
    display: inline-flex;
    flex: 0 0 54px;
    width: 54px;
    height: 25px;
    padding: 4px 0;
    border: 0;
    border-radius: 26px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #f14a25;
    font-size: 12px;
    line-height: 17px;
    cursor: pointer;
  }
  .content-page-download-banner > button img { display: none; }
  .content-tag-row { flex-wrap: nowrap; overflow: hidden; gap: 5px; }
  .content-tag-row i { flex: 0 0 auto; padding: 2px 6px; font-size: 10px; }
  .content-rank-description, .hongguo-app-content .content-rank-description { height: auto; max-height: 3.1em; font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; }
  .content-rank-item.has-both-tag-groups .content-rank-description { max-height: 1.55em; -webkit-line-clamp: 1; }
  .content-rank-arrow { display: none; }
  .content-download-banner { position: relative; gap: 9px; padding: 11px; }
  .content-download-banner > img { width: 42px; height: 42px; }
  .content-download-banner strong { font-size: 12px; }
  .content-download-banner small { font-size: 10px; }
  .content-download-banner button { min-width: 64px; padding: 8px 12px; font-size: 12px; }
  .hongguo-app-content { gap: 16px; }
  .content-more-button { font-size: 15px; }
  .series-detail-page { padding-right: 20px; padding-bottom: 0; padding-left: 20px; }
  .series-detail-page .breadcrumb {
    height: 17px;
    padding: 12px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .series-detail-card {
    display: flex;
    min-height: 0;
    margin-top: 10px;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    background: #fff;
  }
  .series-detail-background { display: none; }
  .series-detail-copy { display: contents; width: auto; }
  .series-detail-cover-wrap {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 482;
    margin: 0;
    border-radius: 24px;
    box-shadow: none;
  }
  .series-detail-cover { width: 100%; height: 100%; }
  .series-cover-rank {
    width: 66px;
    height: 66px;
    border-radius: 24px 0 12px;
    font-size: 39px;
  }
  .series-detail-meta { position: relative; z-index: 1; gap: 12px; }
  .series-detail-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .series-detail-heading h1 {
    width: 100%;
    font-size: 18px;
    line-height: normal;
    text-align: left;
  }
  .series-heat { gap: 2px; font-size: 12px; line-height: 18px; }
  .series-heat img { flex: 0 0 16px; width: 16px; height: 16px; }
  .series-detail-meta > .content-tag-row { justify-content: flex-start; gap: 5.333px; }
  .series-detail-meta > .content-tag-row i {
    padding: 2.667px 6.667px;
    border-radius: 2.667px;
    font-size: 12px;
    line-height: normal;
  }
  .series-detail-meta > .content-tag-row.is-evaluation i.is-score {
    gap: 1.333px;
    padding-right: 4px;
    padding-left: 4px;
  }
  .series-detail-meta > .content-tag-row.is-evaluation i.is-score img { width: 12px; height: 12px; }
  .series-description-block { display: flex; width: 100%; flex-direction: column; gap: 4px; }
  .series-description-title {
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
  }
  .series-description {
    width: 100%;
    height: auto;
    color: #999;
    font-size: 14px;
    line-height: 1.53;
    letter-spacing: .28px;
  }
  .series-install { display: none; }
  .series-desktop-qrs { display: none; }
  .series-mobile-actions { position: relative; z-index: 1; display: grid; gap: 12px; }
  .series-mobile-actions button {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 10px 34px;
    border: 1.5px solid #f14a25;
    border-radius: 76px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #f14a25;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .28px;
  }
  .series-mobile-actions button img { display: block; width: 18px; height: 18px; }
  .series-mobile-actions button:last-child {
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-color: #f14a25;
    border-radius: 73px;
    flex-direction: column;
    gap: 0;
    color: #fff;
    background: #f14a25;
  }
  .series-detail-page > .content-download-banner { display: none; }
  .hongguo-content-page .series-detail-page + .site-footer-shell {
    margin-top: 12px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .hongguo-content-page .series-detail-page + .site-footer-shell .site-footer { margin-top: 0; padding: 0 0 4px; }
  .hongguo-content-page .series-detail-page + .site-footer-shell .site-footer h2 {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: normal;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .series-detail-page {
    width: min(100%, 768px);
    padding-right: 28px;
    padding-bottom: 0;
    padding-left: 28px;
  }
  .series-detail-page .breadcrumb {
    height: 17px;
    padding: 12px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .series-detail-card {
    display: flex;
    min-height: 0;
    margin-top: 10px;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    background: #fff;
  }
  .series-detail-background { display: none; }
  .series-detail-copy { display: contents; width: auto; }
  .series-detail-cover-wrap {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 482;
    margin: 0;
    border-radius: 24px;
    box-shadow: none;
  }
  .series-detail-cover { width: 100%; height: 100%; }
  .series-cover-rank {
    width: 66px;
    height: 66px;
    border-radius: 24px 0 12px;
    font-size: 39px;
  }
  .series-detail-meta { position: relative; z-index: 1; gap: 12px; }
  .series-detail-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .series-detail-heading h1 {
    width: 100%;
    font-size: 18px;
    line-height: normal;
    text-align: left;
  }
  .series-heat { gap: 2px; font-size: 12px; line-height: 18px; }
  .series-heat img { flex: 0 0 16px; width: 16px; height: 16px; }
  .series-detail-meta > .content-tag-row { justify-content: flex-start; gap: 5.333px; }
  .series-detail-meta > .content-tag-row i {
    padding: 2.667px 6.667px;
    border-radius: 2.667px;
    font-size: 12px;
    line-height: normal;
  }
  .series-detail-meta > .content-tag-row.is-evaluation i.is-score {
    gap: 1.333px;
    padding-right: 4px;
    padding-left: 4px;
  }
  .series-detail-meta > .content-tag-row.is-evaluation i.is-score img { width: 12px; height: 12px; }
  .series-description-block { display: flex; width: 100%; flex-direction: column; gap: 4px; }
  .series-description-title {
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
  }
  .series-description {
    width: 100%;
    height: auto;
    color: #999;
    font-size: 14px;
    line-height: 1.53;
    letter-spacing: .28px;
  }
  .series-install,
  .series-desktop-qrs { display: none; }
  .series-mobile-actions { position: relative; z-index: 1; display: grid; gap: 12px; }
  .series-mobile-actions button {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 10px 34px;
    border: 1.5px solid #f14a25;
    border-radius: 76px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #f14a25;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .28px;
  }
  .series-mobile-actions button img { display: block; width: 18px; height: 18px; }
  .series-mobile-actions button:last-child {
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-color: #f14a25;
    border-radius: 73px;
    flex-direction: column;
    gap: 0;
    color: #fff;
    background: #f14a25;
  }
  .series-detail-page > .content-download-banner { display: none; }
  .hongguo-content-page .series-detail-page + .site-footer-shell {
    width: min(100%, 768px);
    margin: 12px auto 0;
    padding-right: 28px;
    padding-left: 28px;
    box-sizing: border-box;
  }
  .hongguo-content-page .series-detail-page + .site-footer-shell .site-footer { margin-top: 0; padding: 0 0 4px; }
  .hongguo-content-page .series-detail-page + .site-footer-shell .site-footer h2 {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: normal;
  }
  .content-page-download-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 20;
    display: flex;
    width: min(712px, calc(100vw - 56px));
    height: 58px;
    padding: 8px 12px;
    border-radius: 12px;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    background: linear-gradient(86deg, #ffe0df 10%, #ffebe3 91%);
    box-shadow: -5px 5px 12.5px rgba(54, 30, 10, .09);
    transform: translateX(-50%);
  }
  .content-page-red-envelope { display: none; }
  .content-page-mobile-icon {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    object-fit: cover;
  }
  .content-page-download-banner > strong {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }
  .content-page-download-banner > strong span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content-page-download-banner > button {
    display: inline-flex;
    flex: 0 0 54px;
    width: 54px;
    height: 25px;
    padding: 4px 0;
    border: 0;
    border-radius: 26px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #f14a25;
    font-size: 12px;
    line-height: 17px;
    cursor: pointer;
  }
  .content-page-download-banner > button img { display: none; }
}