.page-products {
  --pc-muted-light: rgba(253, 246, 227, 0.66);
  --pc-glass: rgba(45, 27, 78, 0.55);
  --pc-scanline: rgba(255, 255, 255, 0.045);
}

.page-products__head {
  padding-top: 28px;
}

.page-products__head .page-title {
  margin-bottom: 10px;
}

.page-products__headstats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-products__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: #2D1B4E;
  color: #FDF6E3;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.18);
}

.page-products__stat b {
  font-family: var(--font-title);
  font-size: 20px;
  color: #F1C40F;
}

.page-products__index {
  margin: 22px 0 34px;
  justify-content: center;
}

/* 分区磁贴矩阵 */
.page-products__tiles-section {
  position: relative;
  background: linear-gradient(135deg, #2D1B4E 0%, #4B3A6B 52%, #E67E22 145%);
  overflow: hidden;
}

.page-products__tiles-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, var(--pc-scanline) 0, var(--pc-scanline) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}

.page-products__inv-head .section-label,
.page-products__inv-head .section-title,
.page-products__archive-head .section-label,
.page-products__archive-head .section-title {
  color: #FDF6E3;
}

.page-products__inv-head .section-sub,
.page-products__archive-head .section-sub {
  color: var(--pc-muted-light);
}

.page-products__inv-head .section-link {
  color: #F1C40F;
  border-color: rgba(241, 196, 15, 0.55);
}

.page-products__tiles-bg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 18px 0 22px;
  border: 1px solid rgba(253, 246, 227, 0.38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.page-products__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 600px) {
  .page-products__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 860px) {
  .page-products__tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1100px) {
  .page-products__tiles {
    grid-template-columns: repeat(6, 1fr);
  }
}

.page-products__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 118px;
  padding: 14px;
  border-radius: 8px;
  color: #FDF6E3;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.page-products__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
  filter: brightness(1.1);
}

.page-products__tile-name {
  display: block;
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.page-products__tiles .tile__count {
  margin-top: auto;
  color: rgba(253, 246, 227, 0.82);
  font-size: 11px;
  font-family: var(--font-body);
}

.page-products__tile-index {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  opacity: 0.55;
}

.page-products__tiles .tile--magenta { background: linear-gradient(135deg, #C0392B 0%, #8E2D1B 100%); }
.page-products__tiles .tile--purple { background: linear-gradient(135deg, #7D5AA8 0%, #2D1B4E 100%); }
.page-products__tiles .tile--blue { background: linear-gradient(135deg, #2980B9 0%, #1B4F72 100%); }
.page-products__tiles .tile--green { background: linear-gradient(135deg, #27AE60 0%, #145A32 100%); }
.page-products__tiles .tile--gold { background: linear-gradient(135deg, #F1C40F 0%, #D35400 100%); }
.page-products__tiles .tile--lavender { background: linear-gradient(135deg, #9B7BC8 0%, #5B3E83 100%); }
.page-products__tiles .tile--orange { background: linear-gradient(135deg, #E67E22 0%, #A04000 100%); }
.page-products__tiles .tile--gray { background: linear-gradient(135deg, #7F8C8D 0%, #3D4A4B 100%); }

/* 频道清单 */
.page-products__channels-section {
  background: #FDF6E3;
}

.page-products__cream-head .section-sub {
  color: var(--c-muted);
}

.page-products__table-scroll {
  overflow-x: auto;
  border: 1px solid #BDC3C7;
  border-radius: 8px;
  background: #fff;
  margin: 22px 0 16px;
  scrollbar-color: #2980B9 #FDF6E3;
}

.page-products__channel-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}

.page-products__channel-table th {
  background: #2D1B4E;
  color: #FDF6E3;
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 0.03em;
  border-bottom: 3px solid #F1C40F;
  white-space: nowrap;
}

.page-products__channel-table th::after {
  content: "↕";
  display: inline-block;
  margin-left: 6px;
  opacity: 0.38;
  font-size: 12px;
}

.page-products__channel-table th:hover {
  color: #F1C40F;
  cursor: pointer;
}

.page-products__channel-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(189, 195, 199, 0.4);
  color: #2C3E50;
  white-space: nowrap;
}

.page-products__channel-table tbody tr:hover {
  background: rgba(41, 128, 185, 0.1);
}

.page-products__channel-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products__channel-table .status {
  font-size: 12px;
}

.page-products__hw {
  background: #2D1B4E;
  color: #F1C40F;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  white-space: nowrap;
}

.page-products__table-fig {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 18px auto 0;
  border-radius: 8px;
  border: 1px solid #BDC3C7;
}

/* 回放归档检索 */
.page-products__archive-section {
  background: linear-gradient(150deg, #E67E22 0%, #C0392B 58%, #2D1B4E 140%);
}

.page-products__archive-head .section-sub {
  color: rgba(253, 246, 227, 0.78);
}

.page-products__archive-head .section-link {
  color: #2D1B4E;
  background: #F1C40F;
  border-color: #F1C40F;
}

.page-products__archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 920px) {
  .page-products__archive-layout {
    grid-template-columns: 300px 1fr;
    gap: 24px;
  }
}

.page-products__filter {
  background: var(--pc-glass);
  border: 1px solid rgba(253, 246, 227, 0.28);
  border-radius: 10px;
  padding: 16px;
  backdrop-filter: blur(6px);
  align-self: start;
}

@media (min-width: 920px) {
  .page-products__filter {
    position: sticky;
    top: 96px;
  }
}

.page-products__filter-title {
  font-family: var(--font-title);
  font-size: 19px;
  color: #FDF6E3;
  margin: 0 0 2px;
}

.page-products__filter-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(253, 246, 227, 0.68);
  margin: 0 0 16px;
}

.page-products__filter-group {
  margin-bottom: 16px;
}

.page-products__filter-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 246, 227, 0.78);
  margin-bottom: 6px;
}

.page-products__filter-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-products__filter-opt {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #FDF6E3;
  text-decoration: none;
  border: 1px solid rgba(253, 246, 227, 0.42);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.page-products__filter-opt:hover {
  border-color: #F1C40F;
  color: #F1C40F;
}

.page-products__filter-opt.is-active {
  border-color: #F1C40F;
  background: #F1C40F;
  color: #2D1B4E;
  font-weight: bold;
}

.page-products__filter-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 12px;
  border: 1px solid rgba(253, 246, 227, 0.26);
}

.page-products__archive-result {
  background: #FDF6E3;
  border-radius: 10px;
  color: #2C3E50;
  min-width: 0;
}

.page-products__archive-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid #BDC3C7;
  border-radius: 10px 10px 0 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  color: #5D6E70;
}

.page-products__archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-products__archive-list .entry-row {
  padding: 12px 14px;
}

.page-products__archive-list .entry-title {
  font-size: 13px;
}

.page-products__archive-list .entry-meta {
  font-size: 11px;
}

.page-products__archive-peak {
  display: inline-block;
  background: rgba(192, 57, 43, 0.1);
  color: #C0392B;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 标签云 */
.page-products__tags-section {
  position: relative;
  background: #2D1B4E;
  overflow: hidden;
}

.page-products__tags-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 22%, rgba(230, 126, 34, 0.2), transparent 42%),
              radial-gradient(circle at 82% 74%, rgba(41, 128, 185, 0.18), transparent 34%);
  pointer-events: none;
}

.page-products__tags-bg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 18px 0 28px;
  border: 1px solid rgba(253, 246, 227, 0.26);
}

.page-products__primary-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.page-products__primary-tags .tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-title);
  font-size: 15px;
  color: #FDF6E3;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page-products__primary-tags .tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.page-products__primary-tags .tag span {
  font-family: var(--font-body);
  font-size: 11px;
  opacity: 0.78;
}

.page-products__primary-tags .tag--magenta { background: #C0392B; }
.page-products__primary-tags .tag--purple { background: #7D5AA8; }
.page-products__primary-tags .tag--blue { background: #2980B9; }
.page-products__primary-tags .tag--green { background: #27AE60; }
.page-products__primary-tags .tag--gold { background: #D4AC0D; }
.page-products__primary-tags .tag--lavender { background: #9B7BC8; }
.page-products__primary-tags .tag--orange { background: #E67E22; }
.page-products__primary-tags .tag--gray { background: #7F8C8D; }

.page-products__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 28px;
}

.page-products__tag-cloud .tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #FDF6E3;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.page-products__tag-cloud .tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.page-products__tag-cloud .tag b {
  font-size: 10px;
  font-weight: normal;
  opacity: 0.72;
}

.page-products__tag-cloud .tag--lg {
  font-size: 15px;
  padding: 8px 14px;
}

.page-products__tag-cloud .tag--sm {
  font-size: 11px;
  opacity: 0.88;
}

.page-products__tag-cloud .tag--blue { background: #2980B9; }
.page-products__tag-cloud .tag--gold { background: #D4AC0D; }
.page-products__tag-cloud .tag--green { background: #27AE60; }
.page-products__tag-cloud .tag--purple { background: #7D5AA8; }
.page-products__tag-cloud .tag--magenta { background: #C0392B; }
.page-products__tag-cloud .tag--gray { background: #7F8C8D; }

/* 页脚装饰图 */
.page-products__footer-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 10px;
}