/* Shared PC site chrome. One header and one footer across every PC page. */

:root {
  --site-font: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
  --type-ink: #28292d;
  --type-body: #666666;
  --type-muted: #999999;
  --type-soft: #b5b5b5;
  --type-title-weight: 600;
  --type-name-weight: 500;
  --type-regular-weight: 400;
}

html,
body,
.page,
.page-shell {
  font-family: var(--site-font) !important;
  font-weight: var(--type-regular-weight);
  color: var(--type-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep legacy pages on the same PC shell width so shared chrome aligns. */
body > .page-shell {
  width: min(100%, var(--max, 1280px)) !important;
  margin: 0 auto !important;
}

.header,
.page .header,
.page-shell .header {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 78px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: #fff !important;
  background: #050506 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}
.header *, .header *::before, .header *::after,
.footer *, .footer *::before, .footer *::after { box-sizing: border-box !important; }
.header .header-inner {
  width: 100% !important;
  max-width: none !important;
  height: 78px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) 380px max-content !important;
  align-items: center !important;
  gap: 28px !important;
  overflow: visible !important;
}
.header .logo {
  color: #ff2a5c !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}
.header .nav {
  width: auto !important;
  height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}
.header .nav a {
  width: auto !important;
  height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  position: relative !important;
}
.header .nav a:hover,
.header .nav a.active,
.header .nav a.on { color: #fff !important; }
.header .nav a.active::after,
.header .nav a.on::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #ff0b46 !important;
}
.header .search {
  grid-column: 4 !important;
  width: 380px !important;
  max-width: 100% !important;
  height: 46px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .055) !important;
  justify-self: end !important;
}
.header .search .sr-only,
.header .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.header .search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 17px !important;
  color: #fff !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 44px !important;
}
.header .search input::placeholder { color: rgba(255, 255, 255, .48) !important; }
.header .search button {
  width: 54px !important;
  height: 44px !important;
  border: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: #ff0b46 !important;
  cursor: pointer !important;
}
.header .search button .material-symbols-rounded {
  display: block !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
.header .header-actions,
.header .actions {
  grid-column: 5 !important;
  width: max-content !important;
  min-width: max-content !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  justify-self: end !important;
}
.header .header-actions a,
.header .actions a {
  min-width: 30px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: inherit !important;
  text-decoration: none !important;
}
.header .header-actions a:hover,
.header .header-actions a.active,
.header .actions a:hover,
.header .actions a.active { color: #fff !important; }
.header .header-actions .material-symbols-rounded,
.header .actions .material-symbols-rounded {
  display: block !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
.footer,
.page .footer,
.page-shell .footer {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 324px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: rgba(255, 255, 255, .72) !important;
  background: #050506 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.footer .footer-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 48px 42px 30px !important;
}
.footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.75fr) repeat(4, minmax(120px, 1fr)) !important;
  gap: 48px !important;
  align-items: start !important;
}
.footer .footer-logo {
  margin: 0 0 22px !important;
  color: #ff2a5c !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.footer h2,
.footer h3 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}
.footer p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}
.footer a,
.footer .footer-text {
  display: block !important;
  margin: 0 0 11px !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.footer .footer-text { cursor: default !important; }
.footer a:hover { color: #fff !important; }
.footer .qr {
  width: 112px !important;
  height: 110px !important;
  margin: 2px 0 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #070707 !important;
  background: #fff !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.footer .legal,
.footer .footer-bottom {
  margin: 38px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
@media (max-width: 980px) {
  .header, .page .header, .page-shell .header { height: 72px !important; min-height: 72px !important; }
  .header .header-inner { height: 72px !important; min-height: 72px !important; grid-template-columns: auto minmax(0, 1fr) max-content !important; column-gap: 28px !important; row-gap: 0 !important; padding: 0 18px !important; }
  .header .nav { display: none !important; }
  .header .search { grid-column: 2 !important; width: 380px !important; max-width: 100% !important; height: 42px !important; justify-self: end !important; }
  .header .header-actions,
  .header .actions { grid-column: 3 !important; justify-self: end !important; }
  .header .search input, .header .search button { height: 40px !important; }
  .footer .footer-inner { padding: 36px 22px 26px !important; }
  .footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px !important; }
}
@media (max-width: 640px) {
  .header .logo { font-size: 24px !important; }
  .header .header-actions, .header .actions { gap: 12px !important; font-size: 12px !important; }
  .footer .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer .footer-logo { font-size: 26px !important; }
}

/* Site-wide typography normalization inspired by MK's lighter reading hierarchy. */
.page h1,
.page-shell h1,
.page .hero h1,
.page-shell .hero h1,
.page .cinema-info h1 {
  font-weight: var(--type-title-weight) !important;
  letter-spacing: 0 !important;
}

.page h2,
.page-shell h2,
.page .section-title,
.page-shell .section-title,
.page .section-head h2,
.page-shell .section-head h2,
.page .filter-head h2,
.page .list-head h2,
.page .side-head h2,
.page .full-head h2,
.page .seo-panel h2,
.page .seo-card h2 {
  font-weight: var(--type-title-weight) !important;
  letter-spacing: 0 !important;
}

.page h3,
.page-shell h3,
.page .card h3,
.page .rank-meta h3,
.page .comic-cell b,
.page .title-line h2,
.page .comic-title,
.page .comic-title a,
.page .book-title,
.page .latest-chapter b,
.page .climb-card b,
.page .full-col h3,
.page .side-card h2,
.page .side-card h3 {
  font-weight: var(--type-name-weight) !important;
  letter-spacing: 0 !important;
}

.page .card h3,
.page .card h3 a,
.page .rank-meta h3,
.page .rank-meta h3 a,
.page .comic-cell b,
.page .title-line h2,
.page .comic-title,
.page .comic-title a,
.page .book-title,
.page .latest-chapter b,
.page .climb-card b {
  color: var(--type-ink) !important;
}

.page p,
.page .meta,
.page .card .meta,
.page .chapter-row,
.page .tag,
.page .pill,
.page .desc,
.page .summary,
.page .rank-meta p,
.page .comic-author,
.page .comic-feature,
.page .comic-update,
.page .comic-count,
.page .topic-row,
.page .section-note,
.page .full-head span,
.page .seo-panel p,
.page .seo-card p,
.page .side-profile dd,
.page .latest-box-link,
.page .reader-meta,
.page .form-help,
.page .empty {
  font-weight: var(--type-regular-weight) !important;
  letter-spacing: 0 !important;
}

.page .meta,
.page .card .meta,
.page .desc,
.page .summary,
.page .rank-meta p,
.page .comic-feature,
.page .comic-update,
.page .comic-count,
.page .section-note,
.page .full-head span,
.page .seo-panel p,
.page .seo-card p,
.page .reader-meta,
.page .form-help {
  color: var(--type-muted) !important;
}

.page .comic-author,
.page .chapter-row,
.page .topic-row,
.page .filter-label,
.page .table-head,
.page .tag,
.page .pill {
  color: var(--type-body) !important;
}

.page .chip,
.page .date-tabs a,
.page .topic-tabs a,
.page .tab-left,
.page .tab-right a,
.page .pagination a,
.page .pagination span,
.page .pager a,
.page .pager span,
.page .badge,
.page .read-link,
.page .read-btn,
.page .store-buttons a,
.page .more,
.page .side-head a,
.page .filter-label,
.page .table-head,
.page .rank-num,
.page .score,
.page .genre,
.page .hot,
.page .rank-time,
.page .full-col li span:last-child {
  font-weight: var(--type-regular-weight) !important;
  letter-spacing: 0 !important;
}

.page .chip.on,
.page .date-tabs a.active,
.page .topic-tabs a.active,
.page .pagination .active,
.page .pager .on,
.page .badge {
  color: #fff !important;
}

.page-shell h1,
.page-shell h2,
.page-shell .section-title,
.page-shell .section-head h2,
.page-shell .filter-head h2,
.page-shell .list-head h2,
.page-shell .side-head h2,
.page-shell .full-head h2,
.page-shell .seo-panel h2,
.page-shell .seo-card h2 {
  font-weight: var(--type-title-weight) !important;
  letter-spacing: 0 !important;
}

.page-shell h3,
.page-shell .card h3,
.page-shell .rank-meta h3,
.page-shell .comic-cell b,
.page-shell .title-line h2,
.page-shell .comic-title,
.page-shell .comic-title a,
.page-shell .book-title,
.page-shell .latest-chapter b,
.page-shell .climb-card b,
.page-shell .full-col h3,
.page-shell .side-card h2,
.page-shell .side-card h3 {
  font-weight: var(--type-name-weight) !important;
  letter-spacing: 0 !important;
}

.page-shell .card h3,
.page-shell .card h3 a,
.page-shell .rank-meta h3,
.page-shell .rank-meta h3 a,
.page-shell .comic-cell b,
.page-shell .title-line h2,
.page-shell .comic-title,
.page-shell .comic-title a,
.page-shell .book-title,
.page-shell .latest-chapter b,
.page-shell .climb-card b {
  color: var(--type-ink) !important;
}

.page-shell p,
.page-shell .meta,
.page-shell .card .meta,
.page-shell .chapter-row,
.page-shell .tag,
.page-shell .pill,
.page-shell .desc,
.page-shell .summary,
.page-shell .rank-meta p,
.page-shell .comic-author,
.page-shell .comic-feature,
.page-shell .comic-update,
.page-shell .comic-count,
.page-shell .topic-row,
.page-shell .section-note,
.page-shell .full-head span,
.page-shell .seo-panel p,
.page-shell .seo-card p,
.page-shell .side-profile dd,
.page-shell .latest-box-link,
.page-shell .reader-meta,
.page-shell .form-help,
.page-shell .empty,
.page-shell .chip,
.page-shell .date-tabs a,
.page-shell .topic-tabs a,
.page-shell .tab-left,
.page-shell .tab-right a,
.page-shell .pagination a,
.page-shell .pagination span,
.page-shell .pager a,
.page-shell .pager span,
.page-shell .badge,
.page-shell .read-link,
.page-shell .read-btn,
.page-shell .store-buttons a,
.page-shell .more,
.page-shell .side-head a,
.page-shell .filter-label,
.page-shell .table-head,
.page-shell .rank-num,
.page-shell .score,
.page-shell .genre,
.page-shell .hot,
.page-shell .rank-time,
.page-shell .full-col li span:last-child {
  font-weight: var(--type-regular-weight) !important;
  letter-spacing: 0 !important;
}

.page-shell .meta,
.page-shell .card .meta,
.page-shell .desc,
.page-shell .summary,
.page-shell .rank-meta p,
.page-shell .comic-feature,
.page-shell .comic-update,
.page-shell .comic-count,
.page-shell .section-note,
.page-shell .full-head span,
.page-shell .seo-panel p,
.page-shell .seo-card p,
.page-shell .reader-meta,
.page-shell .form-help {
  color: var(--type-muted) !important;
}

.page-shell .comic-author,
.page-shell .chapter-row,
.page-shell .topic-row,
.page-shell .filter-label,
.page-shell .table-head,
.page-shell .tag,
.page-shell .pill {
  color: var(--type-body) !important;
}

.page-shell .chip.on,
.page-shell .date-tabs a.active,
.page-shell .topic-tabs a.active,
.page-shell .pagination .active,
.page-shell .pager .on,
.page-shell .badge {
  color: #fff !important;
}

/* Guazi cover ratio guard: manga covers are portrait 3:4 (height:width = 4:3). */
.page .cover-wrap,
.page-shell .cover-wrap,
.page .cover-box,
.page-shell .cover-box,
.page .hot-art,
.page-shell .hot-art,
.page .pick-art,
.page-shell .pick-art,
.page .update-card-cover,
.page-shell .update-card-cover,
.page .rank-cover,
.page-shell .rank-cover,
.page .rec-cover,
.page-shell .rec-cover,
.page .rec > a,
.page-shell .rec > a,
.page .king-cover-wrap,
.page-shell .king-cover-wrap,
.page .boutique-covers a,
.page-shell .boutique-covers a,
.page .shelf-grid a,
.page-shell .shelf-grid a {
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: #111 !important;
}

.page .cover-wrap > img,
.page-shell .cover-wrap > img,
.page .cover-box > img,
.page-shell .cover-box > img,
.page .hot-cover,
.page-shell .hot-cover,
.page .pick-cover,
.page-shell .pick-cover,
.page .update-cover,
.page-shell .update-cover,
.page .boutique-cover,
.page-shell .boutique-cover,
.page .update-card-cover > img,
.page-shell .update-card-cover > img,
.page .rank-cover > img,
.page-shell .rank-cover > img,
.page .rec-cover > img,
.page-shell .rec-cover > img,
.page .rec > a > img,
.page-shell .rec > a > img,
.page .king-cover-wrap > img,
.page-shell .king-cover-wrap > img,
.page .boutique-covers a > img,
.page-shell .boutique-covers a > img,
.page .shelf-grid a > img,
.page-shell .shelf-grid a > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.page .cinema-cover,
.page-shell .cinema-cover {
  width: 240px !important;
  height: 320px !important;
  object-fit: cover !important;
}

.page .history-item img,
.page-shell .history-item img {
  width: 86px !important;
  height: 115px !important;
  object-fit: cover !important;
}

.page .side-comic-list img,
.page-shell .side-comic-list img {
  width: 52px !important;
  height: 69px !important;
  object-fit: cover !important;
}

.page .side-list img,
.page-shell .side-list img,
.page .comic-cell img,
.page-shell .comic-cell img {
  width: 48px !important;
  height: 64px !important;
  object-fit: cover !important;
}

.page .climb-card img,
.page-shell .climb-card img {
  width: 76px !important;
  height: 101px !important;
  object-fit: cover !important;
}

.page .wide-rec img,
.page-shell .wide-rec img {
  width: 72px !important;
  height: 96px !important;
  object-fit: cover !important;
}

@media (max-width: 640px) {
  .page .chapter-layout-b,
  .page-shell .chapter-layout-b {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page .chapter-layout-b,
  .page-shell .chapter-layout-b,
  .page .chapters,
  .page-shell .chapters,
  .page .latest-box,
  .page-shell .latest-box,
  .page .section-head,
  .page-shell .section-head,
  .page .latest-chapter-list,
  .page-shell .latest-chapter-list,
  .page .all-chapter-grid,
  .page-shell .all-chapter-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .page .latest-box,
  .page-shell .latest-box,
  .page .section-head,
  .page-shell .section-head,
  .page .chapter-head,
  .page-shell .chapter-head {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .page .chapter-toolbar,
  .page-shell .chapter-toolbar {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .page .latest-chapter-list,
  .page-shell .latest-chapter-list {
    grid-template-columns: 1fr !important;
  }

  .page .latest-chapter,
  .page-shell .latest-chapter {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .page .all-chapter-grid,
  .page-shell .all-chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page .all-chapter-grid a,
  .page-shell .all-chapter-grid a {
    width: 100% !important;
    min-width: 0 !important;
  }

  .page .rec-grid,
  .page-shell .rec-grid,
  .page .recommend-grid,
  .page-shell .recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page .rec,
  .page-shell .rec {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}