/* 20260608-secondary-closeout: final shared layer for secondary pages, aligned to the home card system. */

body.secondary-page {
  --secondary-premium-max: var(--site-shell-max);
  --secondary-premium-gutter: var(--site-shell-gutter);
  --secondary-content-rail: min(var(--site-shell-max), calc(100% - var(--site-shell-gutter) * 2));
  background:
    radial-gradient(circle at 16% 0%, rgba(87, 216, 255, .10), transparent 28rem),
    linear-gradient(180deg, #06111f 0%, #071524 42%, #050d17 100%) !important;
}

body.secondary-page .container,
body.secondary-page .collections-container {
  width: min(var(--secondary-premium-max), calc(100% - var(--secondary-premium-gutter) * 2)) !important;
  max-width: none !important;
}

/* 20260608-secondary-content-rail-final-order: beat generic container rules for hero and modules. */
@media (min-width: 1180px) {
  body.secondary-page .featured-hero-inner,
  body.collections-page .collections-hero-inner,
  body.secondary-page .page-section > .container,
  body.secondary-page .featured-content-section > .container,
  body.collections-page .collections-content.collections-container,
  body.collection-detail-page #collectionMovies > .container,
  body.detail-page .detail-main > .page-section > .container {
    width: var(--secondary-content-rail) !important;
    max-width: var(--secondary-content-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

body.secondary-page .page-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 20260608-secondary-navbar-home-parity: keep secondary pages on the homepage navigation scale. */
body.secondary-page .navbar {
  min-height: 68px !important;
  background: rgba(4, 12, 23, .86) !important;
  border-bottom: 1px solid rgba(118, 180, 255, .13) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(20px) saturate(128%) !important;
}

body.secondary-page .navbar .container {
  min-height: 68px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.secondary-page .navbar-logo {
  gap: 12px !important;
  flex: 0 0 auto !important;
}

body.secondary-page .navbar-logo-icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 12px !important;
}

body.secondary-page .navbar-logo h1 {
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

body.secondary-page .navbar-categories {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.secondary-page .navbar-categories .nav-category {
  box-sizing: border-box !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body.secondary-page .navbar-categories .nav-category.active {
  color: rgba(2, 15, 24, .94) !important;
  background: linear-gradient(135deg, rgba(141, 234, 255, .94), rgba(87, 216, 255, .84)) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 10px 24px rgba(72, 200, 255, .18) !important;
}

body.secondary-page .navbar-search {
  width: min(320px, 26vw) !important;
  height: 42px !important;
  margin-left: auto !important;
  border-radius: 14px !important;
}

body.secondary-page .nav-action-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
}

/* 20260608-secondary-hero-home-ratio: match secondary carousel proportion to the homepage hero. */
body.secondary-page .featured-hero,
body.secondary-page .featured-hero-inner,
body.collections-page .collections-hero,
body.collections-page .collections-hero-inner {
  min-height: clamp(550px, 64svh, 700px) !important;
}

body.secondary-page .featured-hero,
body.collections-page .collections-hero {
  height: auto !important;
}

body.secondary-page .featured-hero-inner,
body.collections-page .collections-hero-inner {
  padding-top: clamp(92px, 10.5svh, 132px) !important;
  padding-bottom: clamp(130px, 16svh, 182px) !important;
}

/* 20260608-secondary-content-rail-parity: align secondary reading rails to homepage modules. */
@media (min-width: 1180px) {
  body.secondary-page .featured-hero-inner,
  body.collections-page .collections-hero-inner,
  body.secondary-page .page-section > .container,
  body.secondary-page .featured-content-section > .container,
  body.collections-page .collections-content.collections-container,
  body.collection-detail-page #collectionMovies > .container,
  body.detail-page .detail-main > .page-section > .container {
    width: var(--secondary-content-rail) !important;
    max-width: var(--secondary-content-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1180px) and (max-width: 1500px) {
  body.secondary-page {
    --secondary-content-rail: min(var(--site-shell-max), calc(100% - var(--site-shell-gutter) * 2));
  }
}

body.secondary-page .section-title {
  letter-spacing: 0 !important;
}

body.secondary-page .btn-primary {
  color: #052033 !important;
  background: linear-gradient(135deg, #8deaff 0%, #57d8ff 100%) !important;
  box-shadow: 0 14px 32px rgba(87, 216, 255, .18) !important;
}

body.secondary-page .btn,
body.secondary-page .nav-link-btn,
body.secondary-page [role="button"] {
  transform: none !important;
}

body.secondary-page .btn:hover,
body.secondary-page .btn:focus-visible {
  transform: none !important;
  filter: brightness(1.04) saturate(1.02) !important;
}

body.secondary-page .featured-grid,
body.secondary-page .series-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body.secondary-page .featured-resource-card,
body.secondary-page .series-resource-card,
body.secondary-page.collection-detail-page .collection-movie-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(114, 217, 255, .15) !important;
  background: linear-gradient(180deg, rgba(9, 27, 45, .86), rgba(4, 13, 25, .98)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .028) !important;
  transform: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

body.secondary-page.series-page .series-resource-card {
  border-radius: 18px !important;
}

body.secondary-page .featured-resource-card:hover,
body.secondary-page .featured-resource-card:focus-visible,
body.secondary-page .series-resource-card:hover,
body.secondary-page .series-resource-card:focus-visible,
body.secondary-page.collection-detail-page .collection-movie-card:hover,
body.secondary-page.collection-detail-page .collection-movie-card:focus-visible {
  transform: none !important;
  border-color: rgba(114, 217, 255, .38) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .26), 0 0 0 1px rgba(111, 216, 255, .07) !important;
  filter: brightness(1.025) !important;
}

body.secondary-page .featured-card-cover,
body.secondary-page .series-card-cover,
body.secondary-page.collection-detail-page .collection-movie-card .movie-cover-wrap {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255, 255, 255, .04) !important;
}

body.secondary-page.series-page .series-card-cover {
  border-radius: 18px 18px 0 0 !important;
}

body.secondary-page .featured-card-cover img,
body.secondary-page .series-card-cover img,
body.secondary-page.collection-detail-page .collection-movie-card .movie-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  filter: saturate(.96) contrast(1.02) brightness(.9) !important;
}

body.secondary-page .featured-resource-card:hover .featured-card-cover img,
body.secondary-page .featured-resource-card:focus-visible .featured-card-cover img,
body.secondary-page .series-resource-card:hover .series-card-cover img,
body.secondary-page .series-resource-card:focus-visible .series-card-cover img,
body.secondary-page.collection-detail-page .collection-movie-card:hover .movie-cover,
body.secondary-page.collection-detail-page .collection-movie-card:focus-visible .movie-cover {
  transform: none !important;
  filter: saturate(1.02) contrast(1.04) brightness(.96) !important;
}

body.secondary-page .featured-card-info,
body.secondary-page .series-card-info,
body.secondary-page.collection-detail-page .collection-movie-card .movie-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  min-height: 116px !important;
  padding: 13px 13px 15px !important;
}

body.secondary-page .featured-card-title,
body.secondary-page .series-card-title,
body.secondary-page.collection-detail-page .collection-movie-card .movie-title {
  min-height: 41px !important;
  color: #f4f8ff !important;
  font-size: 15.5px !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.secondary-page .featured-card-meta,
body.secondary-page .series-card-meta,
body.secondary-page.collection-detail-page .collection-movie-card .movie-meta {
  color: rgba(180, 199, 217, .72) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.secondary-page .featured-rank,
body.secondary-page .featured-status-badge,
body.secondary-page .series-rank,
body.secondary-page .series-status-badge,
body.secondary-page .movie-badge,
body.secondary-page .movie-badge-round,
body.collections-page .collection-card-index,
body.collections-page .collection-visual-label {
  min-width: 24px !important;
  min-height: 20px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

body.secondary-page .featured-hover-cta {
  display: none !important;
}

body.secondary-page .series-card-tags,
body.secondary-page.collection-detail-page .collection-card-topline,
body.secondary-page.collection-detail-page .collection-card-chips,
body.secondary-page.collection-detail-page .movie-subinfo,
body.secondary-page.collection-detail-page .collection-card-footer {
  display: none !important;
}

body.collections-page .collections-content {
  padding-top: 54px !important;
}

body.collections-page .collection-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body.collections-page .collection-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(114, 217, 255, .15) !important;
  background: linear-gradient(180deg, rgba(9, 27, 45, .84), rgba(4, 13, 25, .98)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .028) !important;
  transform: none !important;
}

body.collections-page .collection-card:hover,
body.collections-page .collection-card:focus-visible {
  transform: none !important;
  border-color: rgba(114, 217, 255, .38) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .26), 0 0 0 1px rgba(111, 216, 255, .07) !important;
  filter: brightness(1.025) !important;
}

body.collections-page .collection-visual,
body.collections-page .home-playlist-cover {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  background: linear-gradient(135deg, rgba(22, 107, 166, .52), rgba(7, 20, 38, .96)) !important;
}

body.collections-page .collection-cover-img,
body.collections-page .home-playlist-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .55 !important;
  filter: saturate(.9) brightness(.64) contrast(1.02) !important;
  transform: scale(1.02) !important;
}

body.collections-page .collection-card:hover .collection-cover-img,
body.collections-page .collection-card:focus-visible .collection-cover-img {
  opacity: .66 !important;
  filter: saturate(.98) brightness(.72) contrast(1.04) !important;
  transform: scale(1.035) !important;
}

body.collections-page .collection-cover-shade,
body.collections-page .collection-visual::after,
body.collections-page .home-playlist-cover-shade {
  background:
    linear-gradient(180deg, rgba(4, 13, 25, .08), rgba(4, 13, 25, .78)),
    linear-gradient(90deg, rgba(4, 13, 25, .58), rgba(4, 13, 25, .08) 64%, rgba(4, 13, 25, .42)) !important;
}

body.collections-page .collection-watermark {
  display: none !important;
}

body.collections-page .collection-card-index {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  color: rgba(232, 248, 255, .68) !important;
  background: rgba(4, 13, 25, .36) !important;
  border: 1px solid rgba(232, 248, 255, .10) !important;
}

body.collections-page .collection-visual-label {
  left: 12px !important;
  bottom: 10px !important;
  color: rgba(223, 248, 255, .88) !important;
  background: rgba(5, 22, 38, .72) !important;
  border: 1px solid rgba(114, 217, 255, .20) !important;
}

body.collections-page .collection-info,
body.collections-page .home-playlist-info {
  display: flex !important;
  flex-direction: column !important;
  min-height: 164px !important;
  padding: 16px 18px 18px !important;
}

body.collections-page .collection-kind,
body.collections-page .home-playlist-kicker {
  margin: 0 0 8px !important;
  color: #62e3ff !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

body.collections-page .collection-title,
body.collections-page .home-playlist-title {
  margin: 0 !important;
  color: #f4f8ff !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.collections-page .collection-desc,
body.collections-page .home-playlist-summary {
  min-height: 42px !important;
  margin: 9px 0 0 !important;
  color: rgba(186, 202, 226, .76) !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.collections-page .collection-tags,
body.collections-page .collection-count-text {
  display: none !important;
}

body.collections-page .collection-footer,
body.collections-page .home-playlist-footer {
  display: block !important;
  margin-top: auto !important;
  padding-top: 15px !important;
  border-top: 1px solid rgba(118, 180, 255, .08) !important;
}

body.collections-page .collection-link,
body.collections-page .home-playlist-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(114, 217, 255, .18) !important;
  background: linear-gradient(180deg, rgba(13, 48, 72, .54), rgba(8, 28, 48, .38)) !important;
  color: rgba(212, 245, 255, .92) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-align: center !important;
  transform: none !important;
}

body.collections-page .collection-link::after,
body.collections-page .home-playlist-action::after {
  content: "" !important;
  display: none !important;
}

body.collection-detail-page #collectionRouteGrid,
body.collection-detail-page #collectionFlowGrid,
body.collection-detail-page #collectionContinueLinks,
body.collection-detail-page #collectionRouteMeta,
body.collection-detail-page #collectionFlowTitle,
body.collection-detail-page #collectionFlowText,
body.collection-detail-page #collectionFlowPills {
  display: none !important;
}

body.collection-detail-page #collectionMoviesGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 22px !important;
}

body.detail-page .recommend-scroll {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 22px !important;
}

body.detail-page .detail-recommend-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(8, 26, 46, .82), rgba(4, 13, 25, .96)) !important;
  border: 1px solid rgba(114, 217, 255, .16) !important;
  transform: none !important;
}

body.detail-page .detail-recommend-card:hover,
body.detail-page .detail-recommend-card:focus-visible {
  transform: none !important;
  border-color: rgba(114, 217, 255, .36) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32), 0 0 0 1px rgba(114, 217, 255, .06) !important;
}

body.detail-page .detail-recommend-card .recommend-rank {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 3 !important;
  width: auto !important;
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #071625 !important;
  background: linear-gradient(135deg, #67d7f7, #8cecff) !important;
}

body.detail-page .detail-recommend-card .recommend-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 18px 18px 0 0 !important;
  object-fit: cover !important;
}

body.detail-page .detail-recommend-card .recommend-info {
  display: flex !important;
  flex-direction: column !important;
  min-height: 98px !important;
  padding: 12px 13px 14px !important;
}

body.detail-page .detail-recommend-card .recommend-title {
  min-height: 38px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

body.detail-page .detail-recommend-card .recommend-meta {
  margin-top: auto !important;
  font-size: 12px !important;
  color: rgba(180, 197, 219, .72) !important;
}

body.detail-page .detail-recommend-card .recommend-meta.source {
  display: none !important;
}

body.detail-page .detail-continue-grid {
  gap: 12px !important;
}

body.detail-page .detail-continue-card {
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(7, 22, 39, .64) !important;
  border: 1px solid rgba(114, 217, 255, .12) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.detail-page .detail-continue-card:hover,
body.detail-page .detail-continue-card:focus-visible {
  transform: none !important;
  border-color: rgba(114, 217, 255, .30) !important;
}

body.detail-page .detail-continue-card em {
  color: #72d9ff !important;
}

body.detail-page .modal-content {
  width: min(760px, calc(100vw - 48px)) !important;
  max-height: min(760px, calc(100vh - 56px)) !important;
  padding: 28px !important;
  border-radius: 22px !important;
}

body.detail-page .qrcode-box {
  width: min(360px, 100%) !important;
  margin-inline: auto !important;
}

/* 20260611-detail-scan-flow-v1: make the scan-to-save task read as one calm, clear flow. */
body.detail-page .detail-cta-panel-primary {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(11, 32, 52, .76), rgba(5, 15, 28, .70)) !important;
  border-color: rgba(114, 217, 255, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 18px 42px rgba(0, 0, 0, .16) !important;
}

body.detail-page .detail-cta-panel-primary .detail-cta-title {
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

body.detail-page .detail-cta-panel-primary .detail-cta-text,
body.detail-page .detail-cta-panel-primary .detail-cta-note {
  font-size: 12px !important;
  line-height: 1.55 !important;
}

body.detail-page .detail-actions-row-primary .pan-type-btn,
body.detail-page #getResourceBtn {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #80e6ff, #4fd2f4) !important;
  color: #061522 !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 12px 26px rgba(72, 200, 255, .15) !important;
  transform: none !important;
}

body.detail-page .detail-actions-row-primary .pan-type-btn i,
body.detail-page #getResourceBtn i {
  color: #061522 !important;
}

body.detail-page .detail-actions-row-primary .pan-type-btn small {
  color: rgba(6, 21, 34, .62) !important;
}

body.detail-page .resource-entry-overview-shell {
  padding: 16px !important;
  border-radius: 18px !important;
  background: rgba(6, 20, 35, .50) !important;
  border-color: rgba(114, 217, 255, .13) !important;
}

body.detail-page .resource-entry-overview {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 12px !important;
}

body.detail-page .resource-entry-card {
  min-height: 168px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(114, 217, 255, .12) !important;
  background:
    linear-gradient(180deg, rgba(12, 32, 52, .70), rgba(4, 13, 25, .78)) !important;
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

body.detail-page .resource-entry-card.is-primary {
  border-color: rgba(114, 217, 255, .28) !important;
  box-shadow: 0 16px 34px rgba(36, 160, 210, .10) !important;
}

body.detail-page .resource-entry-card:hover,
body.detail-page .resource-entry-card:focus-within {
  transform: none !important;
  filter: brightness(1.04) !important;
  border-color: rgba(114, 217, 255, .34) !important;
}

body.detail-page .resource-entry-badge,
body.detail-page .resource-entry-pill {
  height: 24px !important;
  padding: 0 9px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(114, 217, 255, .10) !important;
  border: 1px solid rgba(114, 217, 255, .16) !important;
  color: #8fe7ff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.detail-page .resource-entry-pill.muted {
  color: rgba(194, 211, 231, .72) !important;
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(118, 180, 255, .10) !important;
}

body.detail-page .resource-entry-actions {
  margin-top: auto !important;
  padding-top: 12px !important;
}

body.detail-page .resource-entry-action {
  min-height: 40px !important;
  border-radius: 12px !important;
  background: rgba(114, 217, 255, .14) !important;
  color: #dbf8ff !important;
  border-color: rgba(114, 217, 255, .26) !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease !important;
}

body.detail-page .resource-entry-action:hover,
body.detail-page .resource-entry-action:focus-visible {
  background: rgba(114, 217, 255, .20) !important;
  border-color: rgba(114, 217, 255, .42) !important;
}

body.detail-page .resource-entry-action.ghost {
  background: rgba(255, 255, 255, .035) !important;
  color: rgba(215, 229, 244, .76) !important;
}

body.detail-page #resourceModal .modal-content {
  width: min(900px, calc(100vw - 48px)) !important;
  max-height: min(760px, calc(100vh - 56px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px) !important;
  align-items: start !important;
  gap: 14px 24px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(114, 217, 255, .13), transparent 28%),
    linear-gradient(145deg, rgba(9, 27, 47, .96), rgba(5, 14, 27, .98)) !important;
  border-color: rgba(114, 217, 255, .22) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .46) !important;
}

body.detail-page #resourceModal .modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 4 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

body.detail-page #resourceModal h3 {
  grid-column: 1 !important;
  margin: 0 !important;
  padding-right: 48px !important;
  font-size: clamp(24px, 2.1vw, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

body.detail-page #resourceModal .modal-subtitle {
  grid-column: 1 !important;
  margin: 0 !important;
  max-width: 520px !important;
  color: rgba(202, 218, 237, .78) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.detail-page #resourceModal .qrcode-box {
  grid-column: 2 !important;
  grid-row: 1 / span 8 !important;
  width: 100% !important;
  max-width: 340px !important;
  min-height: 340px !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: #eef6fb !important;
  border: 1px solid rgba(255, 255, 255, .60) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .30) !important;
}

body.detail-page #resourceModal .qrcode-box img {
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
}

body.detail-page #resourceModal .qr-countdown-overlay {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  z-index: 3 !important;
  transform: translate(-12px, 12px) !important;
}

body.detail-page #resourceModal .qr-status-card,
body.detail-page #resourceModal #resourceExpireText,
body.detail-page #resourceModal .qr-provider-note,
body.detail-page #resourceModal #qrLinkRow,
body.detail-page #resourceModal #resourceAccessHint {
  grid-column: 1 !important;
  margin: 0 !important;
}

body.detail-page #resourceModal #resourceExpireText,
body.detail-page #resourceModal .qr-provider-note,
body.detail-page #resourceModal #resourceAccessHint {
  color: rgba(190, 208, 230, .72) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

body.detail-page #resourceModal #resourceExpireText {
  padding-top: 8px !important;
  border-top: 1px solid rgba(118, 180, 255, .10) !important;
}

body.detail-page #resourceModal #qrLinkRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.detail-page #resourceModal #qrLinkRow a {
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(114, 217, 255, .08) !important;
  border: 1px solid rgba(114, 217, 255, .16) !important;
  color: #9beaff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.detail-page #resourceModal #resourceCountdownText,
body.detail-page #resourceModal #resourceProviderText {
  grid-column: 1 !important;
  width: fit-content !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(118, 180, 255, .10) !important;
  color: rgba(214, 229, 246, .78) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.detail-page #resourceModal .modal-actions {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
}

body.detail-page #resourceModal .modal-actions .btn {
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  transform: none !important;
}

body.detail-page #resourceModal .modal-actions .btn:first-child {
  background: rgba(114, 217, 255, .15) !important;
  border-color: rgba(114, 217, 255, .26) !important;
  color: #e9fbff !important;
}

@media (max-width: 1320px) {
  body.secondary-page .container,
  body.secondary-page .collections-container {
    width: min(100% - 72px, 1280px) !important;
  }
}

@media (max-width: 980px) {
  body.secondary-page .container,
  body.secondary-page .collections-container {
    width: min(100% - 44px, 900px) !important;
  }

  body.collections-page .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.secondary-page .container,
  body.secondary-page .collections-container {
    width: min(100% - 28px, 680px) !important;
  }

  body.secondary-page .featured-grid,
  body.secondary-page .series-grid,
  body.collection-detail-page #collectionMoviesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.detail-page #resourceModal .modal-content {
    width: min(560px, calc(100vw - 28px)) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 22px !important;
  }

  body.detail-page #resourceModal h3,
  body.detail-page #resourceModal .modal-subtitle,
  body.detail-page #resourceModal .qrcode-box,
  body.detail-page #resourceModal .qr-countdown-overlay,
  body.detail-page #resourceModal .qr-status-card,
  body.detail-page #resourceModal #resourceExpireText,
  body.detail-page #resourceModal .qr-provider-note,
  body.detail-page #resourceModal #qrLinkRow,
  body.detail-page #resourceModal #resourceAccessHint,
  body.detail-page #resourceModal #resourceCountdownText,
  body.detail-page #resourceModal #resourceProviderText,
  body.detail-page #resourceModal .modal-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.detail-page #resourceModal .qrcode-box {
    width: min(320px, 100%) !important;
    min-height: min(320px, 78vw) !important;
    justify-self: center !important;
  }

  body.detail-page #resourceModal .qr-countdown-overlay {
    justify-self: center !important;
    transform: none !important;
  }

  body.detail-page #resourceModal .modal-actions {
    grid-template-columns: 1fr !important;
  }

  body.collections-page .collection-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.collections-page .collection-info,
  body.collections-page .home-playlist-info {
    min-height: 150px !important;
    padding: 15px !important;
  }

  body.detail-page .recommend-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.detail-page .detail-recommend-card {
    border-radius: 15px !important;
  }

  body.detail-page .detail-recommend-card .recommend-cover {
    border-radius: 15px 15px 0 0 !important;
  }

  body.detail-page .detail-recommend-card .recommend-info {
    min-height: 86px !important;
    padding: 10px 10px 12px !important;
  }

  body.detail-page .detail-recommend-card .recommend-title {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  body.detail-page .modal-content {
    width: calc(100vw - 24px) !important;
    padding: 18px !important;
  }
}

/* 20260608-secondary-responsive-grid-parity: keep every breakpoint on the homepage gutter system. */
@media (max-width: 1180px) {
  body.secondary-page {
    --secondary-premium-gutter: clamp(28px, 5vw, 56px);
  }
}

@media (max-width: 767px) {
  body.secondary-page {
    --secondary-premium-gutter: 16px;
  }
}

body.secondary-page .container,
body.secondary-page .collections-container {
  width: min(var(--secondary-premium-max), calc(100% - var(--secondary-premium-gutter) * 2)) !important;
  max-width: none !important;
}

/* 20260608-secondary-content-rail-last-word: keep secondary hero copy on the same rail as homepage hero copy. */
@media (min-width: 1180px) {
  body.secondary-page .featured-hero-inner,
  body.collections-page .collections-hero-inner,
  body.secondary-page .page-section > .container,
  body.secondary-page .featured-content-section > .container,
  body.collections-page .collections-content.collections-container,
  body.collection-detail-page #collectionMovies > .container,
  body.collection-detail-page .page-section > .container,
  body.detail-page .page-section > .container {
    width: var(--secondary-content-rail) !important;
    max-width: var(--secondary-content-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 20260611-collections-above-fold-density: playlists are a library task, so reveal the list sooner than carousel pages. */
@media (min-width: 1180px) {
  body.collections-page .collections-hero,
  body.collections-page .collections-hero-inner {
    min-height: clamp(320px, 42svh, 420px) !important;
  }

  body.collections-page .collections-hero-inner {
    padding-top: clamp(54px, 6.2svh, 82px) !important;
    padding-bottom: clamp(42px, 5.6svh, 68px) !important;
  }

  body.collections-page .collections-content {
    padding-top: clamp(24px, 3.2vw, 42px) !important;
  }

  body.collections-page .collections-toolbar {
    padding: 12px 14px !important;
    gap: 10px 16px !important;
    border-radius: 14px !important;
  }

  body.collections-page .collections-reco-bar {
    margin: 10px 0 20px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  body.collections-page .collections-section-header {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }

  body.collections-page .collections-section-header h2 {
    font-size: clamp(30px, 2.8vw, 44px) !important;
  }

  body.collections-page .collections-section-header p {
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* 20260611-secondary-hero-single-line-title: match homepage carousel title containment on secondary pages. */
body.secondary-page .featured-hero h1,
body.secondary-page .collections-hero h1,
body.collections-page .collections-hero h1 {
  display: block !important;
  max-width: min(860px, 64vw) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: initial !important;
  text-wrap: nowrap !important;
}

@media (max-width: 767px) {
  body.secondary-page .featured-hero h1,
  body.secondary-page .collections-hero h1,
  body.collections-page .collections-hero h1 {
    max-width: 100% !important;
  }
}
/* 20260718-resource-delivery-verification */
body.detail-page .resource-verify-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(105, 195, 224, .24);
  border-radius: 8px;
  background: rgba(8, 24, 40, .72);
}
body.detail-page .resource-verify-panel[hidden] { display: none; }
body.detail-page .resource-verify-kicker { display: block; color: var(--accent, #69c3e0); font-size: 12px; margin-bottom: 6px; }
body.detail-page .resource-verify-panel strong { display: block; font-size: 20px; }
body.detail-page .resource-verify-panel p { margin: 6px 0 0; color: var(--text-muted, #91a2b7); font-size: 13px; }
body.detail-page .resource-verify-form { display: grid; grid-template-columns: minmax(90px, 1fr) auto auto; gap: 8px; }
body.detail-page #resourceVerifyAnswer { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid rgba(135, 173, 202, .28); border-radius: 7px; background: rgba(3, 13, 25, .82); color: #fff; font: inherit; }
body.detail-page .resource-verify-trap { position: fixed; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.detail-page .resource-feedback-action { color: var(--text-muted, #91a2b7); }
@media (max-width: 720px) {
  body.detail-page .resource-verify-panel { grid-template-columns: 1fr; }
  body.detail-page .resource-verify-form { grid-template-columns: 1fr 1fr; }
  body.detail-page #resourceVerifyAnswer { grid-column: 1 / -1; }
}