/* ============================================================
   全局分类导航带 · 一套样式供所有页面用（首页 / 课程库 / 论点库 / 讲师库 / 阅读页 / 播放页）
   2026-09-19 从 portal.css 抽出来独立成文件 —— 因为播放页不加载 portal.css，
   内页也不该为了一个导航带去引入首页那 37KB 样式。
   渲染逻辑见 catnav.js（同一份实现，所有页面共用，别再各写一份）。

   结构：
     .pt-subnav                固定条（top: var(--top-h)，z-index 99）
       .pt-wrap.pt-subnav-in   68px 一行：分类卡片 × 6 + 「全部分类」按钮 + 右侧统计
       .pt-cat-panel           展开面板（绝对定位挂在条子下方，整行通宽）

   ⚠️ --sub-h 由 catnav.js 回写：必须先置 0 再量高度，否则 `.pt-subnav { min-height: var(--sub-h) }`
      会拿自己的旧值当最小高度（自锁），新高度缩不回去、下方空一条带子。
   ============================================================ */
.pt-subnav {
  position: fixed; top: var(--top-h); left: 0; right: 0; min-height: var(--sub-h); z-index: 99;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.pt-subnav-in { display: flex; align-items: center; height: 68px; gap: 10px; }
.pt-subnav-list { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

/* 分类卡片：图标 + 名称 + 课程数。是真 <a>，指向「课程库 · 该分类」，所以要去掉链接默认样式 */
.pt-cat-card {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-3);
  cursor: pointer; flex: 1 1 0; min-width: 0;
  color: inherit; text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s;
}
.pt-cat-card:hover { border-color: rgba(0, 212, 255, .45); background: var(--panel-2); transform: translateY(-1px); }
.pt-cat-card .ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .07);
}
.pt-cat-card .ic svg { width: 17px; height: 17px; }
.pt-cat-card .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-cat-card .tx b { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cat-card .tx i { font-style: normal; font-size: 11px; color: var(--text-3); }
.pt-cat-card.active { border-color: var(--cyan); background: rgba(0, 212, 255, .1); }
.pt-cat-card.active .tx b { color: var(--cyan); }
.pt-cat-card.active .ic svg path, .pt-cat-card.active .ic svg circle, .pt-cat-card.active .ic svg rect { stroke: var(--cyan) !important; }

/* 「全部分类」按钮 */
.pt-cat-more {
  display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 15px;
  border: 1px dashed var(--border-2); border-radius: 12px; background: transparent;
  color: var(--text-2); font-size: 13px; cursor: pointer; flex-shrink: 0; transition: all .16s;
}
.pt-cat-more:hover, .pt-cat-more.on { color: var(--cyan); border-color: var(--cyan); border-style: solid; background: rgba(0, 212, 255, .07); }
.pt-cat-more .n { font-size: 11px; color: var(--text-3); }
.pt-cat-more .caret { font-size: 10px; transition: transform .18s; }
.pt-cat-more.on .caret { transform: rotate(180deg); }

.pt-subnav-stat { font-size: 12px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.pt-subnav-stat b { color: var(--cyan); font-weight: 700; }

/* 展开面板：挂在导航带下方，悬浮在正文之上（父级 .pt-subnav 是 fixed + z-index 99） */
.pt-cat-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
  padding: 16px 0 18px;
}
.pt-cat-panel[hidden] { display: none; }
.pt-cat-panel-h { font-size: 12px; color: var(--text-3); margin-bottom: 12px; letter-spacing: .4px; }
.pt-cat-panel-h b { color: var(--text-2); font-weight: 700; }
.pt-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pt-cat-item {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-3);
  font-size: 12.5px; color: var(--text-2); cursor: pointer; min-width: 0; transition: all .15s;
  text-decoration: none;
}
.pt-cat-item:hover { color: var(--text); border-color: rgba(0, 212, 255, .45); background: var(--panel-2); }
.pt-cat-item .ic { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); }
.pt-cat-item .ic svg { width: 13px; height: 13px; }
.pt-cat-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cat-item .n { margin-left: auto; font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.pt-cat-item.active { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 212, 255, .1); }
.pt-cat-item.active .ic svg path, .pt-cat-item.active .ic svg circle, .pt-cat-item.active .ic svg rect { stroke: var(--cyan) !important; }