@charset "UTF-8";
/* ==========================================================================
   霓虹漫城 · 夜街区 — 浏览类页面
   用于：分类检索（category.html）、分类频道（lists.html）、搜索结果（search.html）
   公共骨架：页头横幅 → 左侧筛选轨（吸顶）+ 右侧结果流 → 分页
   ========================================================================== */

.nb-browse {
  position: relative;
  z-index: 1;
  padding-top: var(--nb-s7);
  padding-bottom: var(--nb-s8);
}

/* ==========================================================================
   1. 页头横幅
   ========================================================================== */
.nb-pagehead {
  position: relative;
  margin-bottom: var(--nb-s6);
  padding: var(--nb-s7) var(--nb-s8);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  background:
    radial-gradient(720px 260px at 8% 0%, rgba(53, 224, 208, .14), transparent 60%),
    radial-gradient(560px 240px at 92% 120%, rgba(123, 92, 255, .16), transparent 62%),
    var(--nb-glass);
  overflow: hidden;
}

.nb-pagehead::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 148, 214, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 148, 214, .06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
}

.nb-pagehead__inner {
  position: relative;
  z-index: 1;
}

.nb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s2);
  margin-bottom: var(--nb-s4);
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-crumbs a:hover {
  color: var(--nb-cyan);
}

.nb-crumbs i {
  font-style: normal;
  color: rgba(120, 148, 214, .5);
}

.nb-pagehead h1 {
  font-size: var(--nb-f-3xl);
  letter-spacing: 1px;
}

.nb-pagehead h1 em {
  font-style: normal;
  color: var(--nb-cyan);
}

.nb-pagehead__desc {
  margin-top: var(--nb-s3);
  max-width: 760px;
  color: var(--nb-text-2);
  font-size: var(--nb-f-base);
  line-height: 1.9;
}

.nb-pagehead__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s2) var(--nb-s5);
  margin-top: var(--nb-s5);
  padding-top: var(--nb-s5);
  border-top: 1px solid var(--nb-line);
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-pagehead__stat b {
  color: var(--nb-amber);
  font: 700 var(--nb-f-lg)/1 var(--nb-font-num);
  margin-right: 4px;
}

/* ==========================================================================
   2. 浏览主体：筛选轨 + 结果流
   ========================================================================== */
.nb-browse__shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--nb-s5);
  align-items: start;
}

/* —— 左侧筛选 —— */
.nb-filters {
  position: sticky;
  top: 132px;
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  background: var(--nb-glass);
  overflow: hidden;
}

.nb-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nb-s4) var(--nb-s5);
  border-bottom: 1px solid var(--nb-line);
  background: rgba(23, 33, 64, .5);
}

.nb-filters__head h2 {
  font-size: var(--nb-f-md);
  letter-spacing: .6px;
}

.nb-filters__reset {
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
}

.nb-filters__reset:hover {
  color: var(--nb-magenta);
}

.nb-filters__body {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: var(--nb-s2) var(--nb-s3) var(--nb-s4);
}

.nb-filter {
  padding: var(--nb-s3) 0;
  border-bottom: 1px dashed rgba(120, 148, 214, .14);
}

.nb-filter:last-child {
  border-bottom: 0;
}

.nb-filter__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--nb-s2);
  padding-left: var(--nb-s2);
  border-left: 2px solid var(--nb-line-strong);
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
  font-weight: 700;
  letter-spacing: 1.4px;
}

.nb-filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.nb-filter__options a {
  padding: 4px var(--nb-s3);
  border: 1px solid transparent;
  border-radius: var(--nb-r-sm);
  color: var(--nb-text-2);
  font-size: var(--nb-f-sm);
  transition: color var(--nb-t) var(--nb-ease), border-color var(--nb-t) var(--nb-ease), background var(--nb-t) var(--nb-ease);
}

.nb-filter__options a:hover {
  color: var(--nb-cyan);
  background: rgba(53, 224, 208, .08);
  border-color: var(--nb-line-cyan);
}

.nb-filter__options a.is-active {
  border-color: transparent;
  background: var(--nb-grad-cyan);
  color: var(--nb-text-invert);
  font-weight: 700;
}

/* —— 结果区 —— */
.nb-results {
  min-width: 0;
}

.nb-results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s3) var(--nb-s5);
  margin-bottom: var(--nb-s5);
  padding: var(--nb-s3) var(--nb-s4);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r);
  background: rgba(18, 26, 46, .6);
}

.nb-results__count {
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-results__count b {
  color: var(--nb-cyan);
  font: 700 var(--nb-f-lg)/1 var(--nb-font-num);
  margin-right: 3px;
}

.nb-sorts {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}

.nb-sorts__label {
  margin-right: var(--nb-s2);
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
}

.nb-sorts a {
  padding: 5px var(--nb-s3);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-pill);
  color: var(--nb-text-2);
  font-size: var(--nb-f-sm);
  transition: color var(--nb-t) var(--nb-ease), border-color var(--nb-t) var(--nb-ease), background var(--nb-t) var(--nb-ease);
}

.nb-sorts a:hover {
  color: var(--nb-cyan);
  border-color: var(--nb-line-cyan);
}

.nb-sorts a.is-active {
  border-color: transparent;
  background: var(--nb-grad-cyan);
  color: var(--nb-text-invert);
  font-weight: 700;
}

/* 当前筛选条件回显 */
.nb-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s2);
  margin-bottom: var(--nb-s5);
}

.nb-chips__lead {
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
}

.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--nb-s3);
  border: 1px solid var(--nb-line-cyan);
  border-radius: var(--nb-r-pill);
  background: rgba(53, 224, 208, .08);
  color: #9df3ea;
  font-size: var(--nb-f-xs);
}

.nb-chip:hover {
  color: #fff;
  background: rgba(53, 224, 208, .16);
}

.nb-chip i {
  font-style: normal;
  opacity: .7;
}

/* 结果栅格 */
.nb-results__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nb-s5) var(--nb-s4);
}

/* 搜索命中高亮 */
.nb-hl {
  color: var(--nb-amber);
  font-style: normal;
}

/* ==========================================================================
   3. 频道页（lists.html）横幅
   ========================================================================== */
.nb-channelhead {
  display: flex;
  align-items: center;
  gap: var(--nb-s6);
  margin-bottom: var(--nb-s6);
  padding: var(--nb-s6) var(--nb-s7);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  background:
    radial-gradient(560px 220px at 0% 50%, rgba(53, 224, 208, .14), transparent 62%),
    var(--nb-glass);
}

.nb-channelhead__cover {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--nb-line-cyan);
  border-radius: var(--nb-r);
  background: rgba(53, 224, 208, .08);
  color: var(--nb-cyan);
  font: 800 var(--nb-f-2xl)/1 var(--nb-font-num);
}

.nb-channelhead__body {
  min-width: 0;
  flex: 1;
}

.nb-channelhead h1 {
  font-size: var(--nb-f-2xl);
  letter-spacing: .6px;
}

.nb-channelhead p {
  margin-top: var(--nb-s2);
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-channelhead .nb-btn {
  flex-shrink: 0;
}

/* ==========================================================================
   4. 响应式
   ========================================================================== */
@media (max-width: 1440px) {
  .nb-results__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .nb-browse__shell {
    grid-template-columns: 208px minmax(0, 1fr);
  }

  .nb-pagehead {
    padding: var(--nb-s6);
  }

  .nb-pagehead h1 {
    font-size: var(--nb-f-2xl);
  }
}

@media (max-width: 1024px) {
  .nb-browse__shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-filters {
    position: static;
  }

  .nb-filters__body {
    max-height: none;
  }

  .nb-results__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .nb-results__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nb-s4) var(--nb-s3);
  }

  .nb-pagehead {
    padding: var(--nb-s5) var(--nb-s4);
  }

  .nb-pagehead h1 {
    font-size: var(--nb-f-xl);
  }

  .nb-pagehead__desc {
    font-size: var(--nb-f-sm);
  }

  .nb-channelhead {
    flex-wrap: wrap;
    gap: var(--nb-s4);
    padding: var(--nb-s5) var(--nb-s4);
  }

  .nb-channelhead__cover {
    width: 52px;
    height: 52px;
    font-size: var(--nb-f-xl);
  }
}

@media (max-width: 720px) {
  .nb-browse {
    padding-top: var(--nb-s5);
  }

  .nb-results__bar {
    padding: var(--nb-s3);
  }

  .nb-sorts {
    margin-left: 0;
    width: 100%;
  }

  .nb-sorts__label {
    width: 100%;
    margin-bottom: var(--nb-s1);
  }
}

@media (max-width: 520px) {
  .nb-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}