/* ============================================================
   全球美业专家 · PC 门户版首页
   门户风格：高信息密度 / 多栏布局 / 模块划分清晰
   配色：深色底 + 品牌青（沿用线上 pc.css 色系，统一品牌）
   ============================================================ */

:root {
  --bg: #070b16;
  --bg-2: #0d1322;
  --bg-3: #131b2e;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.06);
  --border: #1e2740;
  --border-2: #2a3550;
  --cyan: #00d4ff;
  --violet: #7c3aed;
  --pink: #ec4899;
  --green: #06ffa5;
  --amber: #f59e0b;
  --red: #ff6b6b;
  --text: #eaf0fb;
  --text-2: #9fb0c9;
  --text-3: #6a7893;
  --r: 10px;
  --r-sm: 6px;
  --top-h: 62px;
  --sub-h: 46px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--top-h) + var(--sub-h));
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
input { font-family: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b4a6b; }

.pt-wrap { width: 1240px; margin: 0 auto; }

/* ================= 顶栏 ================= */
.pt-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); z-index: 100;
  background: rgba(7, 11, 22, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.pt-topbar-in { display: flex; align-items: center; height: var(--top-h); gap: 26px; }
.pt-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.pt-logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: url('logo.png') center/cover no-repeat, linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}
.pt-logo-name { font-size: 17px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }

.pt-nav { display: flex; gap: 2px; flex-shrink: 0; }
.pt-nav-item {
  padding: 7px 14px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2);
  transition: all 0.18s; white-space: nowrap;
}
.pt-nav-item:hover { color: var(--text); background: var(--panel); }
.pt-nav-item.active { color: var(--cyan); background: rgba(0, 212, 255, 0.1); font-weight: 600; }

.pt-topbar-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* 顶栏搜索框样式：2026-09-19 整块下线（郭总：与「关注公众号」并排的搜索引擎去掉）。
   顶栏右侧现在只剩「关注公众号」按钮。课程库/论点库/讲师库的工具带里各有自己的页内搜索，
   不受影响；首页与阅读页按郭总要求不再提供搜索入口。
   要恢复：HTML 里加回 <div class="pt-search"><input id="pts-q"><button id="pts-q-btn"></div>
   （浏览器缓存里可查历史版本 /var/www/pc/portal.css.bak-topsearch-*）。 */
.pt-follow-btn {
  height: 34px; padding: 0 18px; border-radius: 18px; font-size: 13px; font-weight: 600;
  color: #041018; background: linear-gradient(135deg, var(--cyan), #22d3ee);
  display: inline-flex; align-items: center; white-space: nowrap;
}
.pt-follow-btn:hover { box-shadow: 0 0 18px rgba(0, 212, 255, 0.5); }

/* ================= 分类导航带 =================
   ⚠️ 2026-09-19 已抽到独立文件 `catnav.css`（所有页面共用一套：首页 / 课程库 / 论点库 / 讲师库 / 阅读页 / 播放页）。
   原因：播放页不加载 portal.css、内页也不该为一个导航带去引首页那 37KB。
   渲染逻辑同样收口到 `catnav.js`（别再各写一份）。改分类带请去那两个文件。 */

/* ================= 主区 ================= */
.pt-main { padding: 18px 0 30px; }

/* 区块通用 */
.pt-sec { margin-bottom: 22px; }
.pt-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.pt-sec-head h2 { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.pt-sec-head h2::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--cyan); }
.pt-sec-head .en { font-size: 11px; color: var(--text-3); letter-spacing: 1.4px; text-transform: uppercase; }
.pt-sec-head .more { margin-left: auto; font-size: 12px; color: var(--text-3); }
.pt-sec-head .more:hover { color: var(--cyan); }

/* ================= 首屏：推荐展示位 + 右栏 ================= */
.pt-lead { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 18px; margin-bottom: 22px; align-items: start; }
.pt-lead-l { min-width: 0; }

/* 推荐展示位 */
.pt-rec-main { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); cursor: pointer; }
.pt-rec-main:hover { border-color: rgba(0, 212, 255, 0.45); }
.pt-rec-cover { position: relative; height: 330px; background: linear-gradient(135deg, #0f1729, #1a0f2e) center/cover no-repeat; }
.pt-rec-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 8, 20, 0.96) 0%, rgba(5, 8, 20, 0.65) 38%, rgba(5, 8, 20, 0.05) 72%); }
.pt-rec-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; z-index: 2; }
.pt-rec-tagline { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pt-rec-tagline .pill {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px;
  background: var(--cyan); color: #041018; letter-spacing: 0.5px;
}
.pt-rec-tagline .pill.gray { background: rgba(255, 255, 255, 0.14); color: var(--text-2); }
.pt-rec-title { font-size: 25px; font-weight: 800; line-height: 1.3; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); }
.pt-rec-desc { font-size: 13px; color: var(--text-2); margin-top: 8px; max-width: 720px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-rec-meta { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.pt-rec-meta .hl { color: var(--cyan); }

/* 两张小卡（已由多课程滚动带取代，样式保留供窄屏回退用） */
.pt-rec-sm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.pt-rec-card { display: flex; gap: 12px; padding: 10px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--border); cursor: pointer; transition: all 0.18s; }
.pt-rec-card:hover { border-color: rgba(0, 212, 255, 0.4); background: var(--bg-3); }
.pt-rec-card .thumb { width: 132px; height: 76px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--bg-3) center/cover no-repeat; position: relative; overflow: hidden; }
.pt-rec-card .thumb .dur { position: absolute; right: 4px; bottom: 4px; font-size: 11px; background: rgba(0, 0, 0, 0.72); padding: 1px 5px; border-radius: 3px; color: #fff; }
.pt-rec-card .info { min-width: 0; display: flex; flex-direction: column; }
.pt-rec-card .t { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-rec-card .m { margin-top: auto; font-size: 11px; color: var(--text-3); display: flex; gap: 10px; }

/* ================= 首屏大图轮播（随机 5 张 · 从右向左自动滑） =================
   轨道自身宽度 = 容器宽度（不要写 width:max-content，否则 translateX(-100%)
   会按 600% 位移直接跑飞）；每张 slide flex-basis:100% + flex-shrink:0 向右溢出。 */
.pt-hero-view { position: relative; overflow: hidden; height: 330px; background: linear-gradient(135deg, #0f1729, #1a0f2e); }
.pt-hero-track { display: flex; height: 100%; will-change: transform; transition: transform .72s cubic-bezier(.4, 0, .2, 1); }
.pt-hero-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.pt-hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pt-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 8, 20, 0.96) 0%, rgba(5, 8, 20, 0.65) 38%, rgba(5, 8, 20, 0.05) 72%); }
.pt-hero-slide .pt-rec-body { z-index: 2; }

/* 底部控制条（独立一行，不压住文案） */
.pt-hero-ctl { display: flex; align-items: center; gap: 10px; height: 37px; padding: 0 14px; background: var(--bg-2); border-top: 1px solid var(--border); position: relative; z-index: 3; }
.pt-hero-arrow { width: 22px; height: 22px; flex-shrink: 0; padding: 0; border: 1px solid var(--border-2); border-radius: 50%; background: transparent; color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.pt-hero-arrow:hover { border-color: var(--cyan); color: var(--cyan); }
.pt-hero-dots { display: flex; align-items: center; gap: 6px; }
.pt-hero-dots i { width: 16px; height: 3px; border-radius: 2px; background: var(--border-2); cursor: pointer; transition: all .22s; }
.pt-hero-dots i:hover { background: var(--text-3); }
.pt-hero-dots i.on { width: 26px; background: var(--cyan); }
/* 计数顶到右端，避免整条控制条内容挤在左边 */
.pt-hero-count { margin-left: auto; font-size: 11.5px; color: var(--text-2); letter-spacing: .3px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pt-hero-track { transition: none; } }

/* ================= 多课程滚动带（首屏左栏大篇幅展示） ================= */
.pt-belt-wrap { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 12px 14px 14px; }
.pt-belt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.pt-belt-head h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pt-belt-head h3::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--cyan); }
.pt-belt-head .hint { font-size: 11.5px; color: var(--text-3); }
.pt-belt-head .more { margin-left: auto; font-size: 12px; color: var(--text-3); }
.pt-belt-head .more:hover { color: var(--cyan); }
/* 左右渐隐遮罩：滚动中的卡片从边缘淡出，避免被生硬切断 */
.pt-belt {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
/* 列宽取 (容器 858 - 3×间距 14) / 4 = 204px：4 列正好铺满，右侧不会露出半张卡 */
.pt-belt-track {
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
  grid-auto-columns: 204px; gap: 14px; width: max-content;
  animation: ptBeltMove 60s linear infinite; will-change: transform;
}
.pt-belt:hover .pt-belt-track { animation-play-state: paused; }
@keyframes ptBeltMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pt-belt-track { animation: none; } .pt-teacher-track { animation: none; } }
.pt-belt .pt-card-body { padding: 9px 10px 10px; }
.pt-belt .pt-card-t { font-size: 12.5px; height: 36px; -webkit-line-clamp: 2; }
.pt-belt .pt-card-m { font-size: 11px; margin-top: 6px; gap: 7px; }

/* ================= 最新更新（全宽两列，portal 快讯栏） ================= */
.pt-flash-list { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 6px 14px; }
.pt-flash-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.pt-flash-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; font-size: 13px; cursor: pointer; border-bottom: 1px dashed rgba(30, 39, 64, .75); border-radius: 4px; }
.pt-flash-wide .pt-flash-item:nth-last-child(-n+2) { border-bottom: none; }
.pt-flash-item:hover { background: var(--panel-2); }
.pt-flash-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.pt-flash-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.pt-flash-item:hover .t { color: var(--cyan); }
.pt-flash-item .c { font-size: 11px; color: var(--text-3); flex-shrink: 0; padding: 1px 7px; border-radius: 3px; background: var(--panel-2); }
.pt-flash-item .d { font-size: 11px; color: var(--text-3); flex-shrink: 0; min-width: 58px; text-align: right; }

/* ================= 专家课程 · 讲师专栏（替换原「最新更新」位置） ================= */
.pt-tav {
  position: relative; width: 52px; height: 52px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #0891b2, #22d3ee);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #041018; letter-spacing: 0;
}
.pt-tav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-tav-lg { width: 84px; height: 84px; font-size: 30px; }
.pt-tav-sm { width: 42px; height: 42px; font-size: 15px; }
.pt-tmeta { min-width: 0; }
.pt-tname { font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tsub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.pt-tsub b { color: var(--cyan); font-weight: 700; margin-right: 3px; font-size: 12.5px; }

/* ---- 版式 A：3 列 × 2 行 六宫格 ---- */
.pt-tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt-tcard {
  display: flex; flex-direction: column; padding: 14px 14px 8px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
  transition: border-color .18s, background .18s;
}
.pt-tcard:hover { border-color: rgba(0, 212, 255, 0.35); background: var(--bg-3); }
.pt-tcard-h { display: flex; align-items: center; gap: 11px; }
/* 简介固定两行高：六张卡简介长短不一，不锁高第二行卡片会被顶歪 */
.pt-tbio {
  margin-top: 11px; min-height: 38px; font-size: 12px; line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-tvids { margin-top: auto; padding-top: 9px; border-top: 1px dashed rgba(30, 39, 64, 0.9); display: flex; flex-direction: column; }
.pt-tvid { display: flex; gap: 10px; padding: 5px 6px; border-radius: 5px; cursor: pointer; transition: background .15s; }
.pt-tvid:hover { background: var(--panel-2); }
.pt-tvid .th { position: relative; width: 76px; height: 45px; flex-shrink: 0; border-radius: 4px; background: var(--bg-3) center/cover no-repeat; overflow: hidden; }
.pt-tvid .th i { position: absolute; right: 3px; bottom: 3px; font-style: normal; font-size: 10px; line-height: 1.5; color: #fff; background: rgba(0, 0, 0, 0.72); padding: 0 4px; border-radius: 3px; }
.pt-tvid .tx { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pt-tvid .tx b { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pt-tvid .tx i { margin-top: 4px; font-style: normal; font-size: 11px; line-height: 1.45; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pt-tvid:hover .tx b { color: var(--cyan); }

/* ---- 版式 B：左焦点讲师 + 右讲师列表 ----
   左右对齐的对策：右栏不写高度，靠 grid 默认的 align-self:stretch 跟着左栏撑满，
   行用 flex:1 均分 → 两栏顶底严格齐平。
   前提是左栏高度必须恒定（bio 锁 3 行、课程卡标题/简介各锁 2 行），
   否则每次刷新随机换讲师，栏目高度会跟着内容抖。 */
.pt-tfocus { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.pt-tf-main { padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); }
.pt-tf-top { display: flex; align-items: center; gap: 16px; }
.pt-tf-name { font-size: 21px; font-weight: 800; line-height: 1.25; }
/* 简介按内容自然高（clamp 最多 3 行），不锁死高度：
   锁成 3 行会让简介短的讲师左栏空出一大块死白，比栏目高度浮动 40px 更难看。
   左右对齐不靠 bio 锁高，靠右栏 align-self:stretch + 行 flex:1 兜住。 */
.pt-tf-bio {
  margin-top: 13px;
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-tf-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed rgba(30, 39, 64, 0.9); }
.pt-tfcard { cursor: pointer; min-width: 0; }
.pt-tfcard .cv { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-3) center/cover no-repeat; overflow: hidden; }
.pt-tfcard .cv .dur { position: absolute; right: 5px; bottom: 5px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, 0.72); padding: 1px 5px; border-radius: 3px; }
.pt-tfcard .tt { margin-top: 8px; min-height: 36px; font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-tfcard .ds { margin-top: 5px; min-height: 36px; font-size: 11.5px; line-height: 1.55; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-tfcard:hover .tt { color: var(--cyan); }
.pt-tfcard:hover .cv { border-color: rgba(0, 212, 255, 0.45); }
.pt-tf-list {
  min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
  display: flex; flex-direction: column;
}
.pt-trow {
  flex: 1 1 auto; min-height: 58px;                        /* 均分填满右栏，和左栏顶底齐平 */
  display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  border-bottom: 1px solid rgba(30, 39, 64, 0.6); cursor: pointer; transition: background .15s;
}
.pt-trow:last-child { border-bottom: none; }
.pt-trow:hover { background: var(--panel-2); }
.pt-trow.on { background: rgba(0, 212, 255, 0.10); box-shadow: inset 2px 0 0 var(--cyan); }
.pt-trow .tx { min-width: 0; display: flex; flex-direction: column; }
.pt-trow .tx b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-trow .tx i { margin-top: 4px; font-style: normal; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-trow .go { margin-left: auto; font-size: 15px; line-height: 1; color: var(--text-3); }
.pt-trow.on .go { color: var(--cyan); }
.pt-trow.on .tx b { color: var(--cyan); }

/* ================= 微信用户实时滚动小窗 ================= */
.pt-wx { border: 1px solid var(--border); border-radius: var(--r); background: linear-gradient(180deg, #0f1a2b, var(--bg-2)); overflow: hidden; }
.pt-wx-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.pt-wx-live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.pt-wx-live::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--green); animation: ptPulse 1.6s ease-out infinite; }
@keyframes ptPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.pt-wx-head .ttl { font-size: 13px; font-weight: 700; }
.pt-wx-head .online { margin-left: auto; font-size: 11px; color: var(--green); font-weight: 600; white-space: nowrap; }
.pt-wx-head .online b { display: inline-block; font-size: 13px; font-weight: 800; color: var(--green); }
.pt-wx-head .online b.tick { animation: ptOnlineTick .5s ease-out; }
@keyframes ptOnlineTick {
  0% { transform: translateY(-5px) scale(1.16); color: #ffffff; }
  100% { transform: none; }
}
/* 滚动窗口高度是首屏左右栏的「配平砝码」：
   原「268 + 底部说明条 34」→ 说明条取消后补到 302；
   2026-09-19 首屏大图加了 37px 的控制条（箭头/圆点/计数），左栏长到 849，这里再补 45 → 347。
   ⚠️ 以后左栏增删任何东西（轮播高度、带子行数…），都必须回来重量这一步。 */
.pt-wx-view { height: 347px; overflow: hidden; position: relative; }
.pt-wx-view::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: linear-gradient(to top, var(--bg-2), transparent); pointer-events: none; }
.pt-wx-track { animation: ptWxUp 20s linear infinite; }
.pt-wx-view:hover .pt-wx-track { animation-play-state: paused; }
@keyframes ptWxUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
.pt-wx-row { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; }
.pt-wx-avbox { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); }
.pt-wx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-wx-avbox .pt-wx-av { width: 100%; height: 100%; box-shadow: none; }
.pt-wx-avbox.noimg .pt-wx-img { display: none; }
.pt-wx-avbox.noimg::after { content: '微'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--bg-3); }
.pt-wx-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.pt-wx-info { display: block; min-width: 0; flex: 1; }
.pt-wx-name { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-wx-name .id { font-size: 10.5px; color: var(--text-3); font-weight: 400; margin-left: 5px; }
.pt-wx-act { display: block; font-size: 11px; color: var(--text-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-wx-act em { color: var(--cyan); font-style: normal; }

/* ================= 排行榜 ================= */
.pt-rank { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); overflow: hidden; margin-top: 18px; }
.pt-rank-head { display: flex; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.pt-rank-head .ttl { font-size: 13px; font-weight: 700; }
.pt-rank-head .more { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.pt-rank-list { padding: 5px 0; }
.pt-rank-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 14px; cursor: pointer; }
.pt-rank-item:hover { background: var(--panel-2); }
.pt-rank-no {
  width: 17px; height: 17px; border-radius: 4px; flex-shrink: 0; margin-top: 1px;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-3);
}
.pt-rank-item:nth-child(1) .pt-rank-no { background: #ff4d4f; color: #fff; }
.pt-rank-item:nth-child(2) .pt-rank-no { background: #ff9f43; color: #241300; }
.pt-rank-item:nth-child(3) .pt-rank-no { background: #ffd93d; color: #241f00; }
.pt-rank-item .t { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); }
.pt-rank-item:hover .t { color: var(--cyan); }

/* ================= 双栏（论点精选 + 论点速读） ================= */
.pt-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pt-duo-box { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 16px 18px; display: flex; flex-direction: column; }
/* ===== 论点精选 · 叠压卡片（一摞牌）：5 张竖向叠压，选中那张抽出来展开 ===== */
.pt-stack { position: relative; }
.pt-head-tip { font-size: 11.5px; color: var(--text-3); margin-left: 2px; }
.pt-scard {
  position: absolute; left: 0; right: 0; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: top .4s cubic-bezier(.22, .9, .28, 1), height .4s cubic-bezier(.22, .9, .28, 1),
              border-color .25s, box-shadow .25s;
}
.pt-scard:hover { border-color: rgba(0, 212, 255, 0.42); }
.pt-scard.on { border-color: rgba(0, 212, 255, 0.55); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); z-index: 20; }
/* 标题条 */
.pt-strip { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.pt-strip .no {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--bg-3); color: var(--text-3); border: 1px solid var(--border-2);
}
.pt-scard.on .pt-strip .no { background: var(--cyan); color: #041018; border-color: var(--cyan); }
.pt-strip .ct { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-scard:not(.on):hover .pt-strip .ct { color: var(--cyan); }
.pt-strip .cc { font-size: 11px; color: var(--text-3); flex-shrink: 0; padding: 1px 7px; border-radius: 3px; background: var(--bg-3); }
.pt-scard.on .pt-strip { border-bottom: 1px solid var(--border); }
/* 展开体 */
.pt-sbody { display: none; padding: 14px; gap: 14px; cursor: pointer; }
.pt-scard.on .pt-sbody { display: flex; }
.pt-sbody .cover {
  width: 196px; height: 112px; border-radius: var(--r-sm); flex-shrink: 0;
  background-color: var(--bg-3); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pt-sbody .txt { min-width: 0; }
.pt-sbody .cdesc {
  font-size: 12.5px; color: var(--text-2); line-height: 1.72;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-sbody .cmeta { display: flex; align-items: center; gap: 11px; margin-top: 10px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.pt-sbody .cmeta .hl { color: var(--cyan); }
.pt-sbody .cmeta .go { margin-left: auto; color: var(--cyan); }

.pt-quick-item { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.pt-quick-item:last-child { border-bottom: none; }
.pt-quick-no { font-size: 15px; font-weight: 800; color: var(--text-3); width: 20px; flex-shrink: 0; font-style: italic; }
.pt-quick-item:nth-child(1) .pt-quick-no { color: var(--cyan); }
.pt-quick-item:nth-child(2) .pt-quick-no { color: var(--cyan); }
.pt-quick-item:nth-child(3) .pt-quick-no { color: var(--cyan); }
.pt-quick-body { min-width: 0; }
.pt-quick-t { font-size: 13.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-quick-item:hover .pt-quick-t { color: var(--cyan); }
.pt-quick-m { font-size: 11.5px; color: var(--text-3); margin-top: 4px; display: flex; gap: 10px; }

/* ================= 课程卡四宫格 ================= */
.pt-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.pt-card { border-radius: var(--r); overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); cursor: pointer; transition: all 0.18s; }
.pt-card:hover { transform: translateY(-3px); border-color: rgba(0, 212, 255, 0.45); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
.pt-card-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3) center/cover no-repeat; }
.pt-card-thumb noimg, .pt-card-thumb .noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--text-3); }
.pt-card-thumb .dur { position: absolute; right: 6px; bottom: 6px; font-size: 11px; background: rgba(0, 0, 0, 0.75); padding: 1px 6px; border-radius: 3px; color: #fff; }
.pt-card-thumb .cat { position: absolute; left: 6px; top: 6px; font-size: 11px; background: rgba(0, 212, 255, 0.9); color: #041018; font-weight: 700; padding: 1px 7px; border-radius: 3px; }
.pt-card-thumb .veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s; }
.pt-card:hover .veil { opacity: 1; }
.pt-card-thumb .veil span { font-size: 12.5px; color: var(--cyan); border: 1px solid var(--cyan); padding: 5px 14px; border-radius: 16px; }
.pt-card-body { padding: 10px 12px 12px; }
.pt-card-t { font-size: 13.5px; font-weight: 600; line-height: 1.45; height: 39px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-card:hover .pt-card-t { color: var(--cyan); }
.pt-card-m { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.pt-card-m .sp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-m .free { color: var(--green); flex-shrink: 0; }
.pt-card-m .vip { color: var(--amber); flex-shrink: 0; }

/* ================= 分类最新视频（每分类一行四宫格） ================= */
.pt-catrow { margin-bottom: 20px; }
.pt-catrow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.pt-catrow-ico { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-catrow-ico svg { width: 14px; height: 14px; }
.pt-catrow-head h3 { font-size: 15px; font-weight: 700; }
.pt-catrow-head .cnt { font-size: 11.5px; color: var(--text-3); }
.pt-catrow-head .more { margin-left: auto; font-size: 12px; color: var(--text-3); }
.pt-catrow-head .more:hover { color: var(--cyan); }

.pt-toggle { display: block; width: 100%; padding: 12px; border: 1px dashed var(--border-2); border-radius: var(--r); color: var(--text-2); font-size: 13px; }
.pt-toggle:hover { border-color: var(--cyan); color: var(--cyan); }

/* ================= 论点快报（左分类树 + 右新闻双列） ================= */
.pt-news { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.pt-news-tree { border-right: 1px solid var(--border); background: rgba(0, 0, 0, 0.16); padding: 6px 0; max-height: 476px; overflow-y: auto; }
.pt-news-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: var(--text-2); cursor: pointer; border-left: 2px solid transparent; }
.pt-news-tab:hover { background: var(--panel-2); color: var(--text); }
.pt-news-tab.active { background: rgba(0, 212, 255, 0.09); color: var(--cyan); border-left-color: var(--cyan); font-weight: 600; }
.pt-news-tab .n { margin-left: auto; font-size: 11px; color: var(--text-3); }
.pt-news-tab.active .n { color: var(--cyan); }
.pt-news-panel { padding: 14px 18px; }
.pt-news-panel-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pt-news-panel-head h3 { font-size: 15px; font-weight: 700; }
.pt-news-panel-head .n { font-size: 11.5px; color: var(--text-3); }
.pt-news-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.pt-news-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.pt-news-item .sq { width: 4px; height: 4px; background: var(--text-3); flex-shrink: 0; transform: translateY(-2px); }
.pt-news-item:hover .sq { background: var(--cyan); }
.pt-news-item .t { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.pt-news-item:hover .t { color: var(--cyan); }
.pt-news-item .src { font-size: 11px; color: var(--text-3); flex-shrink: 0; max-width: 138px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= 状态 ================= */
.pt-loading { padding: 70px; text-align: center; color: var(--text-3); }
.spinner { width: 24px; height: 24px; margin: 0 auto 12px; border: 3px solid var(--border); border-top-color: var(--cyan); border-radius: 50%; animation: ptSpin 0.8s linear infinite; }
@keyframes ptSpin { to { transform: rotate(360deg); } }
.pt-empty { padding: 40px; text-align: center; color: var(--text-3); font-size: 13px; }
.sk { border-radius: var(--r); background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: ptShimmer 1.4s infinite; }
@keyframes ptShimmer { to { background-position: -200% 0; } }
.pt-sk-lead { height: 330px; margin-bottom: 14px; }
.pt-sk-row { height: 190px; }

/* ================= 弹窗 / Toast ================= */
.pt-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); z-index: 200; }
.pt-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 201; width: 392px; border-radius: var(--r); background: var(--bg-2); border: 1px solid rgba(0, 212, 255, 0.35); box-shadow: 0 0 40px rgba(0, 212, 255, 0.2); overflow: hidden; }
.pt-modal-close { position: absolute; top: 11px; right: 11px; width: 27px; height: 27px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: var(--text-2); font-size: 15px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pt-modal-close:hover { background: var(--red); color: #fff; }
.pt-modal-cover { width: 100%; height: 176px; background: var(--bg-3) center/cover no-repeat; }
.pt-modal-body { padding: 20px 26px 24px; text-align: center; }
/* 纯关注引导弹窗（无封面图）：顶部多留出关闭按钮的位置 */
.pt-modal-body.pt-modal-fq { padding-top: 34px; }
.pt-modal-fq .pt-modal-title { font-size: 18px; }
.pt-modal-fq .pt-modal-sub { line-height: 1.75; }
.pt-modal-title { font-size: 17px; font-weight: 700; line-height: 1.4; }
.pt-modal-meta { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.pt-modal-qr { width: 172px; height: 172px; background: #fff; border-radius: 10px; padding: 9px; margin: 18px auto 10px; }
.pt-modal-qr img { width: 100%; height: 100%; object-fit: contain; }
.pt-modal-tip { font-size: 13.5px; color: var(--cyan); font-weight: 600; }
.pt-modal-sub { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
[hidden] { display: none !important; }

.pt-toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--bg-3); color: var(--text); padding: 10px 22px; border-radius: var(--r-sm); border: 1px solid var(--border-2); font-size: 13px; opacity: 0; transition: all 0.28s; z-index: 300; pointer-events: none; }
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pt-toast.err { border-color: var(--red); color: var(--red); }

/* ================= Footer ================= */
.pt-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 20px 0; }
.pt-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--text-3); }
.pt-footer-in .brand { font-weight: 700; letter-spacing: 1.5px; color: var(--text-2); }
.pt-footer-in a:hover { color: var(--cyan); }
.pt-footer-links { display: flex; gap: 16px; }