/* ============================================================
   图书阅读网 - 响应式样式表
   设计基准：1920px 宽度设计稿
   响应策略：移动端优先，rem + flex/grid 自适应布局
   断点：768px（移动）、1024px（平板）、1280px+（桌面）
   ============================================================ */

/* ==================== CSS 变量（设计 Token） ==================== */
:root {
  --color-primary: #016226;      /* 品牌绿色 */
  --color-accent-orange: #fa6725;/* 渐变橙起点 */
  --color-accent-teal: #71c9db;  /* 搜索按钮蓝绿 */
  --color-accent-blue: #1792fc;  /* 活动按钮蓝 */
  --color-text: #333;
  --color-text-gray: #666;
  --color-text-light: #999;
  --color-text-dark: #000;
  --color-bg: #fff;
  --color-bg-gray: #f8f9f9;
  --color-bg-light: #fbfbfb;
  --color-bg-nav: #e2eee9;
  --color-bg-search: #eef5f6;
  --color-bg-quick: #f5f9fa;
  --color-rank-gold: #fa6725;
  --color-rank-green: #32b86a;
  --color-rank-yellow: #f6c992;
  --color-rank-title-gold: #691b17;
  --color-rank-title-yellow: #574824;
  --font-family: 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, sans-serif;
  --container-max: 1280px;
  --section-padding: 60px;
}

/* ==================== 全局重置 ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: transparent;
}

/* ==================== 通用容器 ==================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ==================== 通用区块头部（标题行） ==================== */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.section-deco {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.section-title {
  font-size: 1.625rem; /* 26px */
  color: var(--color-text);
  font-weight: 400;
  white-space: nowrap;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  font-weight: 300;
  line-height: 30px;
  margin-bottom: 24px;
}

/* 更多按钮（灰色）*/
.more-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 20px;
  background: #eeefef;
  border-radius: 909px;
  font-size: 1rem;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

/* 更多按钮（白色背景变体） */
.more-btn--white {
  background: #fff;
}

.more-btn:hover {
  opacity: 0.8;
}

/* ==================== 通用排名数字颜色 ==================== */
.rank-num {
  font-size: 1rem;
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1.2;
}
.rank-num--gold   { color: var(--color-rank-gold); }
.rank-num--green  { color: var(--color-rank-green); }
.rank-num--yellow { color: var(--color-rank-yellow); }
.rank-num--gray   { color: var(--color-text-light); }

/* 书名颜色变体 */
.rank-book-title--gold   { color: var(--color-rank-title-gold); }
.rank-book-title--yellow { color: var(--color-rank-title-yellow); }

/* ==================== 通用过滤标签 ==================== */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filter-tab {
  height: 34px;
  padding: 0 16px;
  border-radius: 90px;
  font-size: 0.875rem;
  font-family: var(--font-family);
  font-weight: 400;
  background: #fff;
  color: var(--color-text);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}

/* 热销书籍渐变橙激活态 */
.filter-tab--active {
  background: -webkit-linear-gradient(177.33deg, #f95a5b 3.07%, #fe9930 103.92%);
  background: linear-gradient(92.67deg, #f95a5b 3.07%, #fe9930 103.92%);
  color: #fff;
}

/* 排行榜橙色激活 / 灰色非激活 */
.rank-tab--active  { background: #ff5f00; color: #fff; }
.rank-tab--inactive { background: #f1f1f1; color: var(--color-text-gray); }

/* ==================== 顶部主导航（Header） ==================== */
.header {
  background: var(--color-bg);
  padding: 8px 0;
  position: relative;
  z-index: 100;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  min-height: 100px;
}

/* Logo 区域 */
.logo-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: auto;
}

.logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
}

.logo-text {
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  line-height: 1;
}

/* 右侧：导航 + 搜索 纵向排列 */
.header-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* 主导航链接 */
.main-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 28px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-link {
  font-size: 1rem;
  color: var(--color-text-dark);
  white-space: nowrap;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link--active {
  color: var(--color-primary);
}

/* 移动端站点主栏目（Logo 上方，PC 隐藏） */
.header-mobile-nav {
  display: none;
}

.header-mobile-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 90px;
  font-size: 0.875rem;
  color: var(--color-text);
  background: #f3f4f5;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

.header-mobile-nav-link--active {
  background: -webkit-linear-gradient(177.33deg, #f95a5b 3.07%, #fe9930 103.92%);
  background: linear-gradient(92.67deg, #f95a5b 3.07%, #fe9930 103.92%);
  color: #fff;
  font-weight: 500;
}

/* 搜索栏 */
.search-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--color-bg-search);
  border-radius: 909px;
  height: 55px;
  padding: 0 8px;
  width: 455px;
  max-width: 100%;
}

/* 搜索 - 分类下拉按钮 */
.search-category {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  height: 35px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #cce3e6;
  border-radius: 5px;
  font-size: 0.875rem;
  color: var(--color-text-gray);
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.search-category img {
  display: inline-block;
}

.search-scope-details {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.search-scope-details > summary {
  list-style: none;
  cursor: pointer;
}

.search-scope-details > summary::-webkit-details-marker {
  display: none;
}

.search-scope-label {
  max-width: 6.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-scope-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 148px;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #cce3e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.search-scope-option {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-family: var(--font-family);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.search-scope-option:hover {
  background: #f0f7f8;
}

.search-scope-option[aria-current="true"] {
  color: var(--color-primary);
  font-weight: 600;
}

.dropdown-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* 搜索输入框 */
.search-input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
  padding: 0 10px;
  min-width: 0;
}

.search-input::-webkit-search-cancel-button { display: none; }

.search-input::-webkit-input-placeholder { color: var(--color-text-light); }
.search-input:-ms-input-placeholder { color: var(--color-text-light); }
.search-input::placeholder { color: var(--color-text-light); }

/* 搜索提交按钮 */
.search-btn {
  height: 35px;
  padding: 0 22px;
  background: var(--color-accent-teal);
  color: #fff;
  border-radius: 90px;
  font-size: 0.875rem;
  font-family: var(--font-family);
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.search-btn:hover { opacity: 0.88; }

/* ==================== 二级分类导航（Sub-nav） ==================== */
.sub-nav {
  background: var(--color-bg-nav);
  height: 66px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sub-nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.sub-nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

.sub-nav-author-slot {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 12px;
}

.sub-nav-author-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 0.8125rem;
  color: #f96a60;
  border: 1px solid #f96a60;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

.sub-nav-author-btn:hover {
  background: rgba(249, 106, 96, 0.08);
  color: #e85a50;
}

.sub-nav-author-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: #888;
  background: #f0f1f2;
  border-radius: 6px;
  white-space: nowrap;
}

.sub-nav-link {
  font-size: 1rem;
  color: var(--color-text-dark);
  white-space: nowrap;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.sub-nav-link:hover { color: var(--color-primary); }

.sub-nav-link--active {
  color: var(--color-primary);
  font-weight: 600;
}

.sub-nav-login {
  font-size: 0.875rem;
  color: var(--color-text-dark);
}

/* 登录后：头像 + 悬停下拉 */
.sub-nav-user {
  flex-shrink: 0;
}

.sub-nav-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  outline: none;
}

.sub-nav-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sub-nav-user-wrap:hover .sub-nav-avatar,
.sub-nav-user-wrap:focus-within .sub-nav-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sub-nav-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

.sub-nav-dropdown-shell {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 10px;
  min-width: 160px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}

.sub-nav-user-wrap:hover .sub-nav-dropdown-shell,
.sub-nav-user-wrap:focus-within .sub-nav-dropdown-shell {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sub-nav-dropdown {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.sub-nav-dropdown-item {
  display: block;
  padding: 10px 20px;
  font-size: 0.875rem;
  color: var(--color-text-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.sub-nav-dropdown-item:hover {
  background: #f5f6f8;
  color: var(--color-primary);
}

.sub-nav-dropdown-item--logout {
  border-top: 1px solid #eee;
  margin-top: 4px;
  padding-top: 12px;
}

/* ==================== Hero 主视觉 ==================== */
.hero {
  height: 420px;
  overflow: hidden;
  position: relative;
}

.hero-bg-wrap {
  position: absolute;
  inset: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==================== 快捷入口（社群/投稿/文案） ==================== */
.quick-links-section {
  background: var(--color-bg-quick);
  padding: 0;
  height: 88px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.quick-links-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.quick-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 24px;
  height: 100%;
  border-right: 1px solid rgba(0,0,0,0.08);
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.quick-item:last-child {
  border-right: none;
}

.quick-item:hover {
  background: rgba(1, 98, 38, 0.04);
}

.quick-item-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.quick-item-title {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-dark);
  line-height: 30px;
  font-weight: 400;
}

.quick-item-desc {
  font-size: 0.875rem; /* 14px */
  color: var(--color-text-light);
  line-height: 30px;
}

.quick-item-arrow {
  width: 19px;
  height: 19px;
  object-fit: contain;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* ==================== 关于我们 ==================== */
.about-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg);
}

.about-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.about-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 1rem;
  color: var(--color-text-dark);
  line-height: 30px;
  font-weight: 300;
}

.about-image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 516px;
  max-width: 44%;
}

.about-img {
  width: 100%;
  height: 261px;
  object-fit: cover;
  border-radius: 20px;
}

/* ==================== 热销书籍 ==================== */
.hot-books-section {
  background: #fff;
  padding: var(--section-padding) 0;
}

/* 与设计稿：未选中标签浅灰底（仅热销区，避免影响其它 filter-tab） */
.hot-books-section .filter-tabs--hot .filter-tab:not(.filter-tab--active) {
  background: #f1f1f1;
  color: var(--color-text);
  border: none;
}

.books-list--hot-loading {
  opacity: 0.55;
  pointer-events: none;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.books-list--hot-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 120px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hot-books-empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 0.9375rem;
  color: var(--color-text-light);
  text-align: center;
  width: 100%;
}

/* 书籍轮播外层（含左右箭头） */
.books-carousel-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* 书籍列表（默认：等分占位） */
.books-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}

/* 热销：每屏约 5 本等宽，多本横向滚动（对齐设计稿横向轮播） */
.hot-books-section .books-list--hot {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hot-books-section .books-list--hot::-webkit-scrollbar {
  display: none;
}

.book-card {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.hot-books-section .book-card--hot {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc((100% - 96px) / 5);
  flex: 0 0 calc((100% - 96px) / 5);
  min-width: 0;
}

.hot-books-section .book-card--hot .book-name {
  font-weight: 500;
}

/* 简介允许两行（稿中第三张卡为两行文案） */
.hot-books-section .book-card--hot .book-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.5;
  max-height: 3.1em;
}

.book-cover {
  width: 100%;
  aspect-ratio: 124 / 170;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.book-name {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-dark);
  font-weight: 400;
  line-height: 30px;
  margin-top: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-author {
  font-size: 0.875rem;
  color: var(--color-text-gray);
  line-height: 30px;
}

.book-desc {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 30px;
}

/* 轮播箭头按钮 */
.carousel-arrow {
  position: relative;
  width: 40px;
  height: 40px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 灰色圆底（替代 arrow-circle-gray.png） */
.carousel-arrow--surface-gray {
  background: #e8e8e8;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.carousel-arrow--surface-gray:hover {
  background: #dedede;
}

/* 浅灰圆底（替代 arrow-circle-white.png，比 surface-gray 更浅） */
.carousel-arrow--surface-light {
  background: #f2f2f2;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.carousel-arrow--surface-light:hover {
  background: #e8e8e8;
}

.carousel-arrow-bg {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}

.carousel-arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 轮播进度点 */
.carousel-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.carousel-dot {
  width: 23px;
  height: 2px;
  background: #e8e8e8;
  border-radius: 1px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  padding: 0;
}

.carousel-dot--active {
  background: var(--color-accent-orange);
}

/* ==================== 强推书籍 ==================== */
.recommend-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* 装饰背景图（低透明度） */
.recommend-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
}

.recommend-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-container {
  position: relative;
  z-index: 1;
}

.recommend-carousel-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 8px;
}

/* 4列网格 */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.recommend-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 带背景色的排名卡片（全局前三名） */
.recommend-card {
  border-radius: 10px;
  padding: 14px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 8px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-height: 131px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recommend-card--gold   { background: -webkit-linear-gradient(top, #fbf7f3, #fdfaf6); background: linear-gradient(180deg, #fbf7f3, #fdfaf6); }
.recommend-card--green  { background: #f5faf8; }
.recommend-card--yellow { background: #fffcf3; }

.recommend-card-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.recommend-card-text {
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* 书封面（卡片内，大尺寸） */
.rank-book-cover {
  width: 78px;
  height: 107px;
  object-fit: cover;
  border-radius: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.rank-book-title {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-genre {
  font-size: 0.875rem;
  color: var(--color-text-gray);
  font-weight: 300;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-genre--gold { color: var(--color-rank-title-gold); }

/* 普通行条目（第4名起） */
.recommend-row-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-height: 131px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recommend-row-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

/* 小书封面（行条目右侧） */
.rank-book-thumb {
  width: 78px;
  height: 107px;
  object-fit: cover;
  border-radius: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* ==================== 作者空间 ==================== */
.author-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg);
}

.dotted-divider {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  object-fit: contain;
}

/* 7列作者网格 */
.author-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  margin-bottom: 0;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.author-card {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  background: #fffbf5;
  border-radius: 20px;
  padding: 24px 10px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.author-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

a.author-card--link {
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.author-card--link:focus-visible {
  outline: 2px solid var(--color-primary, #f95a5b);
  outline-offset: 2px;
}

/* 首页：书籍 / 强推 / 视频卡片链接 */
a.book-card--link {
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.book-card--link:focus-visible {
  outline: 2px solid var(--color-primary, #f95a5b);
  outline-offset: 2px;
}

a.recommend-card--link {
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.recommend-row-item--link {
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.video-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.video-card--link:focus-visible {
  outline: 2px solid var(--color-primary, #f95a5b);
  outline-offset: 2px;
}

.author-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}

.author-name {
  font-size: 1rem;
  color: var(--color-text-dark);
  font-weight: 500;
  margin-bottom: 8px;
}

.author-desc {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

/* 作者空间：左右箭头 + 横向翻页（每屏 7×2，与设计稿一致） */
.author-carousel-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.author-slider-viewport {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.author-slider-viewport::-webkit-scrollbar {
  display: none;
}

.author-slider-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.author-slide {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  min-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.author-grid--slide {
  margin-bottom: 0;
}

/* 桌面：每格宽度按「最多 7 列」计算，人数少时靠左排布，不拉满整行 */
@media (min-width: 1025px) {
  .author-section .author-grid .author-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc((100% - 96px) / 7);
    flex: 0 0 calc((100% - 96px) / 7);
    max-width: calc((100% - 96px) / 7);
    min-width: 0;
  }
}

/* ==================== 推荐视频 ==================== */
.videos-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg);
}

/* 4列视频网格 */
.video-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.video-card {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

/* 首页推荐视频：固定一行 4 个，缩小卡片宽度（避免 flex:1+内容最小宽度导致只排 3 个） */
.videos-section .video-grid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 16px;
}

.videos-section .video-card {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc((100% - 48px) / 4);
  flex: 0 0 calc((100% - 48px) / 4);
  max-width: calc((100% - 48px) / 4);
  min-width: 0;
}

.videos-section .video-thumb-wrap {
  min-width: 0;
}

/* 视频缩略图容器（保持宽高比） */
.video-thumb-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 274 / 176;
  background: #ddd;
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.video-card:hover .video-thumb {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

/* 视频遮罩：播放按钮 + 时长 */
.video-overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px 14px;
  background: -webkit-linear-gradient(top, transparent 50%, rgba(0,0,0,0.25) 100%);
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.25) 100%);
}

.play-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.video-duration {
  font-size: 0.875rem;
  color: #fff;
  font-weight: 400;
  line-height: 30px;
}

.video-title {
  font-size: 1rem;
  color: var(--color-text-dark);
  line-height: 30px;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== 文案征集活动 Banner ==================== */
.campaign-section {
  position: relative;
  height: 288px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.campaign-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.campaign-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.campaign-section .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.campaign-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.campaign-title {
  font-size: 3.5rem; /* 56px */
  color: #03063f;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

.campaign-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 63px;
  padding: 0 40px;
  background: var(--color-accent-blue);
  border-radius: 900px;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 400;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.campaign-btn:hover { opacity: 0.88; }

/* ==================== 男频/女频排行榜 ==================== */
.ranking-section {
  background: var(--color-bg-light);
  padding: var(--section-padding) 0;
}

/* 双标题行 */
.ranking-heads {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
  margin-bottom: 16px;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.ranking-head-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
}

.ranking-head-title {
  font-size: 1.625rem;
  color: var(--color-text);
  font-weight: 400;
}

/* 男频标题下划线 */
.ranking-head-line {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--color-text);
  border-radius: 90px;
}

/* 排行标签行（同一套筛选同时作用于男频/女频两榜） */
.ranking-filters {
  margin-bottom: 20px;
  overflow-x: auto;
}

.ranking-filter-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* 双面板布局：用 Grid 固定两列，仅一侧有数据时仍占半宽，避免单面板 flex:1 拉满整行导致版式错乱 */
.ranking-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
}

.ranking-panel {
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 6px 10px 8.2px rgba(0,0,0,0.03);
  box-shadow: 6px 10px 8.2px rgba(0,0,0,0.03);
  min-height: 700px;
}

/* 仅有一个榜（只有男频或只有女频）时占满一行，避免右侧空半屏 */
.ranking-panels > .ranking-panel:only-child {
  grid-column: 1 / -1;
}

.panel-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.panel-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-content {
  position: relative;
  z-index: 1;
  padding: 40px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.panel-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
}

.panel-header-title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.panel-title {
  font-size: 1.25rem; /* 20px */
  color: var(--color-text);
  font-weight: 400;
  line-height: 30px;
}

.panel-date {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 30px;
}

/* 第1名大卡片区域 */
.panel-top-book {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  -webkit-box-shadow: 0px 4px 8.7px rgba(0,0,0,0.02);
  box-shadow: 0px 4px 8.7px rgba(0,0,0,0.02);
}

a.panel-top-book--link {
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a.panel-top-book--link:focus-visible {
  outline: 2px solid var(--color-primary, #f95a5b);
  outline-offset: 2px;
}

.panel-top-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.panel-top-rank-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
  min-width: 0;
}

.panel-top-title-text {
  font-size: 1.125rem;
  font-weight: 400;
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-top-author {
  font-size: 1rem;
  color: var(--color-text-gray);
  margin-bottom: 8px;
}

.panel-top-desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.panel-top-cover {
  width: 133px;
  height: 183px;
  object-fit: cover;
  border-radius: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-shadow: 0px 5px 5.7px 2px rgba(0,0,0,0.07);
  box-shadow: 0px 5px 5.7px 2px rgba(0,0,0,0.07);
}

/* 排名列表（02-08） */
.panel-rank-empty {
  margin: 0 0 16px;
  padding: 32px 16px;
  font-size: 0.9375rem;
  color: var(--color-text-light);
  text-align: center;
}

.panel-rank-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none;
}

.panel-rank-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a.panel-rank-item--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 1.125rem; /* 18px */
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.panel-rank-list > li:last-child a.panel-rank-item--link {
  border-bottom: none;
}

a.panel-rank-item--link:focus-visible {
  outline: 2px solid var(--color-primary, #f95a5b);
  outline-offset: 2px;
}

.panel-rank-title {
  color: var(--color-text);
  font-weight: 400;
  font-size: 1.125rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================== 社群广场 ==================== */
.community-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg);
}

/* 3列社群网格 */
.community-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.community-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.03);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.03);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(33.333% - 14px);
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.community-card:hover {
  -webkit-box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
}

a.community-card--link {
  text-decoration: none;
  color: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

a.community-card--link:hover .community-name {
  color: var(--color-primary);
}

.community-grid > a.community-card--link:first-child {
  -webkit-box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
  box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
}

/* 首张卡片有稍重的阴影 */
.community-card--shadow-special {
  -webkit-box-shadow: -1px 6px 5.1px 5px rgba(0,0,0,0.03);
  box-shadow: -1px 6px 5.1px 5px rgba(0,0,0,0.03);
}

.community-avatar {
  width: 91px;
  height: 91px;
  border-radius: 50%;
  object-fit: cover;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
}

.community-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.community-name {
  font-size: 1.125rem;
  color: var(--color-text-dark);
  font-weight: 400;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-members {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: var(--color-text-gray);
}

/* ==================== 页脚 ==================== */
.footer {
  background: var(--color-bg-gray);
  padding: 40px 0;
}

.footer-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}

.footer-brand-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-logo-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.footer-logo-img {
  width: 80px;
  height: 60px;
  object-fit: contain;
}

.footer-logo-text {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 400;
}

/* 社交图标组（轻微叠层） */
.footer-socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.social-item {
  position: relative;
  width: 46px;
  height: 46px;
}

/* 叠层效果：后两个图标向左偏移 */
.social-item--overlap {
  margin-left: -8px;
}

.social-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.social-icon-img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 页脚导航 */
.footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-nav-link {
  font-size: 1.125rem;
  color: var(--color-text);
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.footer-nav-link:hover {
  color: var(--color-primary);
}

/* 版权说明（保留后台 textarea 换行） */
.footer-copyright {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 24px;
}

.footer-copyright-line {
  margin: 0 0 6px;
}

.footer-copyright-line:last-child {
  margin-bottom: 0;
}

.footer-copyright-text {
  white-space: pre-line;
  word-break: break-word;
}

/* ============================================================
   响应式断点 - 平板（≤1024px）
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 48px;
  }

  .logo-text { font-size: 1.75rem; }

  .search-bar { width: 360px; }

  .main-nav { gap: 18px; }

  .sub-nav-links { gap: 32px; }

  .about-content { flex-direction: column; }
  .about-image { width: 100%; max-width: 100%; }
  .about-img { height: 220px; }

  /* 强推书籍：4列变2列 */
  .recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 作者：7列变4列 */
  .author-grid { flex-wrap: wrap; }
  .author-card { width: calc(25% - 12px); flex: none; }

  /* 视频：4列变2列（首页推荐视频单独覆盖为一行 2 个） */
  .video-grid { flex-wrap: wrap; }
  .video-card { width: calc(50% - 10px); flex: none; }
  .videos-section .video-grid {
    gap: 16px;
  }
  .videos-section .video-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 8px);
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
    width: auto;
  }

  /* 排行榜：两列变一列 */
  .ranking-panels {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ranking-panel { min-height: auto; }

  /* 社群：3列变2列 */
  .community-card { width: calc(50% - 10px); }

  /* 热销：每屏约 4 本 */
  .hot-books-section .book-card--hot {
    -ms-flex: 0 0 calc((100% - 72px) / 4);
    flex: 0 0 calc((100% - 72px) / 4);
  }

  .campaign-title { font-size: 2.5rem; }
}

/* ============================================================
   响应式断点 - 移动端（≤768px）
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 36px;
    --container-max: 100%;
  }

  .container { padding: 0 16px; }

  /* Header：主栏目 → Logo → 搜索 → 二级栏目（均在 header 内） */
  .header {
    padding-bottom: 0;
  }
  .header > .container {
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .header-mobile-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .header-mobile-nav::-webkit-scrollbar {
    display: none;
  }
  .header-inner {
    flex-wrap: wrap;
    gap: 10px;
    min-height: auto;
    padding: 0;
  }
  .logo-wrap { margin-right: 0; width: 100%; }
  .logo-img { height: 44px; }
  .logo-text { font-size: 1.25rem; }
  .header-right { width: 100%; align-items: stretch; gap: 10px; }
  .main-nav { display: none; }
  .search-bar { width: 100%; max-width: 100%; height: 44px; }
  .search-scope-details { display: none; }

  /* 二级栏目：搜索框下方 */
  .header .sub-nav {
    height: auto;
    min-height: 0;
    padding: 0 0 10px;
    background: var(--color-bg);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .header .sub-nav .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sub-nav-inner {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .sub-nav-links {
    gap: 10px;
    flex-wrap: nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .sub-nav-link {
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 90px;
    font-size: 0.8125rem;
    background: #f3f4f5;
    color: var(--color-text-dark);
    white-space: nowrap;
  }
  .sub-nav-link--active {
    background: -webkit-linear-gradient(177.33deg, #f95a5b 3.07%, #fe9930 103.92%);
    background: linear-gradient(92.67deg, #f95a5b 3.07%, #fe9930 103.92%);
    color: #fff;
    font-weight: 500;
  }
  .sub-nav-user,
  .sub-nav-login,
  .sub-nav-author-slot {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .sub-nav-author-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
  .sub-nav-login {
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  /* 区块标题（热销 / 强推等） */
  .section-head {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-bottom: 8px;
  }
  .section-deco {
    width: 22px;
    height: 22px;
  }
  .section-title {
    font-size: 1.25rem;
    white-space: normal;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .section-subtitle {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .more-btn {
    height: 32px;
    padding: 0 14px;
    font-size: 0.8125rem;
    margin-left: auto;
  }

  /* 热销书籍：分类横向滑动 */
  .hot-books-section .filter-tabs--hot {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 6px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hot-books-section .filter-tabs--hot::-webkit-scrollbar {
    display: none;
  }
  .hot-books-section .filter-tab {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    font-size: 0.8125rem;
  }
  .books-carousel-wrap {
    gap: 0;
  }

  /* Hero */
  .hero { height: 220px; }

  /* Quick links */
  .quick-links-section { height: auto; }
  .quick-links-inner { flex-direction: column; }
  .quick-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 14px 0; }
  .quick-item:last-child { border-bottom: none; }

  /* About */
  .about-text { font-size: 0.9375rem; }
  .about-img { height: 180px; }

  /* Hot books */
  .books-list { gap: 12px; }
  .hot-books-section .book-card--hot {
    -ms-flex: 0 0 calc((100% - 24px) / 3);
    flex: 0 0 calc((100% - 24px) / 3);
  }
  .carousel-arrow { width: 32px; height: 32px; }
  .carousel-arrow-bg { width: 32px; height: 32px; }
  .book-name { font-size: 1rem; }

  /* 强推书籍 */
  .recommend-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .recommend-container .section-subtitle {
    margin-bottom: 12px;
  }
  .recommend-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .recommend-col {
    gap: 10px;
  }
  .recommend-card,
  .recommend-row-item {
    min-height: 0;
    padding: 12px;
  }
  .rank-book-cover,
  .rank-book-thumb {
    width: 64px;
    height: 88px;
    border-radius: 8px;
  }
  .rank-book-title {
    font-size: 0.9375rem;
    -webkit-line-clamp: 2;
  }
  .rank-genre {
    font-size: 0.8125rem;
  }
  .recommend-carousel-wrap {
    flex-direction: column;
    gap: 0;
  }
  .carousel-arrow--prev,
  .carousel-arrow--next { display: none; }
  .author-carousel-wrap .carousel-arrow--author { display: none; }

  /* 作者：4列变3列 */
  .author-card { width: calc(33.333% - 11px); }

  /* 视频：变1列 */
  .video-grid { flex-direction: column; }
  .video-card { width: 100%; }
  .videos-section .video-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* Campaign */
  .campaign-section { height: auto; padding: 40px 0; }
  .campaign-content { margin-left: 0; align-items: center; text-align: center; }
  .campaign-title { font-size: 1.5rem; white-space: normal; }
  .campaign-btn { font-size: 1.125rem; height: 48px; }

  /* 排行 */
  .ranking-heads { gap: 20px; flex-wrap: wrap; }
  .ranking-head-title { font-size: 1.25rem; }
  .panel-content { padding: 20px 16px; }
  .panel-top-book { flex-direction: column; }
  .panel-top-cover { width: 100px; height: 137px; align-self: flex-end; }
  a.panel-rank-item--link { font-size: 1rem; }
  .panel-rank-title { font-size: 1rem; }

  /* 社群：1列 */
  .community-card { width: 100%; }

  /* 页脚 */
  .footer-nav { gap: 24px; }
  .footer-nav-link { font-size: 1rem; }
  .footer-copyright { font-size: 0.8125rem; }
}

/* ============================================================
   响应式断点 - 小屏移动端（≤480px）
   ============================================================ */
@media (max-width: 480px) {
  .author-card { width: calc(50% - 8px); }
  .hot-books-section .book-card--hot {
    -ms-flex: 0 0 calc((100% - 12px) / 2);
    flex: 0 0 calc((100% - 12px) / 2);
  }
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 0 12px; font-size: 0.8125rem; }
  .section-title { font-size: 1.375rem; }
}

/* ==================== 浏览器兼容处理 ==================== */
/* Firefox: 隐藏滚动条但保留滚动功能 */
.ranking-filters { scrollbar-width: none; }
.ranking-filters::-webkit-scrollbar { display: none; }

/* Safari: 确保 aspect-ratio 正常降级 */
@supports not (aspect-ratio: 1 / 1) {
  .video-thumb-wrap { padding-bottom: 64.23%; height: 0; overflow: hidden; }
  .video-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .book-cover { height: 170px; object-fit: cover; }
}

/* ============================================================
   书籍分类页（Figma 节点 1:512，基准宽度 1920px）
   ============================================================ */
.page-book-category .bc-main {
  background: #f8f9f9;
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-book-category .bc-inner {
  max-width: 1195px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 面包屑 */
.bc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 35px;
  font-size: 1.875rem; /* 30px */
  line-height: 1.2;
}

.bc-crumb--muted {
  color: #999;
}

.bc-crumb--strong {
  color: #333;
  font-weight: 400;
}

.bc-crumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.bc-crumb-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.bc-crumb-link {
  color: inherit;
  text-decoration: none;
}

.bc-crumb-link:hover {
  color: #f96a60;
}

.bc-crumb-count {
  margin-left: 2px;
  font-size: 0.55em;
  font-weight: 400;
  vertical-align: baseline;
}

/* 筛选工具条 */
.bc-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 65px;
  background: #eff2f3;
  padding: 12px 20px;
  margin-bottom: 24px;
}

.bc-filter-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-width: 0;
  flex: 1 1 auto;
}

.bc-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: #333;
}

.bc-filter-count {
  color: #fa6156;
}

.bc-chevron {
  display: block;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.bc-filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px 0 14px;
  background: #f96a60;
  border-radius: 5px;
  color: #fff;
  font-size: 0.875rem;
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
}

.bc-tag img {
  flex-shrink: 0;
  opacity: 0.95;
}

a.bc-tag {
  text-decoration: none;
  color: #fff;
}

a.bc-tag:hover {
  filter: brightness(0.97);
}

.bc-filter-details {
  position: relative;
}

/* 分类面板：一级常显，二/三级联动 */
.bc-cat-panel {
  background: #fff;
  border: 1px solid #e8eaeb;
  border-radius: 12px;
  padding: 16px 18px 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bc-cat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f3;
}

.bc-cat-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.bc-cat-row--hidden {
  display: none;
}

.bc-cat-row-label {
  flex: 0 0 72px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6a7282;
  line-height: 36px;
  padding-top: 2px;
}

.bc-cat-row-items {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.bc-cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 90px;
  font-size: 0.9375rem;
  color: #333;
  background: #eff2f3;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  box-sizing: border-box;
}

button.bc-cat-pill {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.bc-cat-pill:hover {
  background: #e8eced;
  color: #333;
}

.bc-cat-pill--active,
.bc-cat-pill--active:hover {
  background: #f96a60;
  color: #fff;
  border-color: #f96a60;
}

.bc-cat-row-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #99a1af;
  line-height: 36px;
}

@media (max-width: 640px) {
  .bc-cat-row {
    flex-direction: column;
    gap: 8px;
  }

  .bc-cat-row-label {
    line-height: 1.3;
    flex: none;
  }
}

.bc-filter-details--cat .bc-filter-menu {
  min-width: 200px;
  z-index: 31;
}

.bc-filter-menu--cascade {
  display: grid;
  grid-template-columns: repeat(3, minmax(148px, 1fr));
  min-width: 520px;
  max-width: 720px;
  padding: 0;
  overflow: hidden;
}

.bc-cat-col {
  border-right: 1px solid #e8eaeb;
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: 6px;
}

.bc-cat-col:last-child {
  border-right: none;
}

.bc-cat-col-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0.92) 100%);
}

.bc-filter-menu--cascade .bc-filter-menu-item {
  padding: 9px 14px;
}

.bc-filter-menu--cascade button.bc-filter-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 0.9375rem;
  color: #333;
  cursor: pointer;
  font-family: var(--font-family);
  box-sizing: border-box;
}

.bc-filter-menu--cascade button.bc-filter-menu-item:hover {
  background: #f3f5f6;
}

.bc-cat-empty-hint {
  margin: 0;
  padding: 14px;
  font-size: 0.875rem;
  color: #99a1af;
  line-height: 1.45;
}

.bc-filter-summary-label {
  flex-shrink: 0;
}

.bc-filter-summary-path {
  margin-left: 8px;
  font-size: 0.9375rem;
  color: #6a7282;
  max-width: min(280px, 36vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bc-filter-menu--cascade {
    grid-template-columns: 1fr;
    min-width: min(100vw - 32px, 320px);
    max-width: none;
  }

  .bc-cat-col {
    border-right: none;
    border-bottom: 1px solid #e8eaeb;
    max-height: 220px;
  }

  .bc-cat-col:last-child {
    border-bottom: none;
  }
}

.bc-filter-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: #333;
  font-family: var(--font-family);
  min-width: 0;
  max-width: 100%;
}

.bc-filter-summary::-webkit-details-marker {
  display: none;
}

.bc-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  z-index: 30;
}

.bc-filter-menu-item {
  display: block;
  padding: 10px 16px;
  font-size: 0.9375rem;
  color: #333;
  text-decoration: none;
}

.bc-filter-menu-item:hover {
  background: #f3f5f6;
}

.bc-filter-menu-item--current {
  font-weight: 500;
  color: #f96a60;
}

/* 排序 */
.bc-sort-group {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  min-height: 41px;
}

.bc-sort-btn {
  font-size: 1rem;
  color: #333;
  padding: 0 22px;
  min-height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-family: var(--font-family);
}

.bc-sort-btn--active {
  background: #f96a60;
  color: #fff;
  min-width: 108px;
  border-radius: 0;
}

.bc-sort-btn:not(.bc-sort-btn--active) {
  padding-left: 18px;
}

/* 子分类 pill */
.bc-subcats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.page-book-category .bc-subcats--tags {
  margin-bottom: 32px;
}

.bc-pill {
  height: 34px;
  padding: 0 16px;
  border-radius: 90px;
  font-size: 0.875rem;
  color: #333;
  background: #eeefef;
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
  line-height: 30px;
  white-space: nowrap;
}

.bc-pill--active {
  color: #fff;
  background: linear-gradient(92.67deg, #f95a5b 3.07%, #fe9930 103.92%);
}

.page-book-category a.bc-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.page-book-category .bc-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #666;
  padding: 40px 16px;
  margin: 0;
  font-size: 15px;
}

.page-book-category .bc-title-link {
  color: inherit;
  text-decoration: none;
}

.page-book-category .bc-title-link:hover {
  color: #f96a60;
}

/* 书籍网格 */
.bc-books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 93px;
  row-gap: 0;
}

.bc-book-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

/* 奇数行（第 1、2 列）：细线分隔（对齐设计稿 line） */
.bc-book-card:nth-child(4n + 1),
.bc-book-card:nth-child(4n + 2) {
  border-bottom: 1px solid #e0e0e0;
}

/* 偶数行：设计稿中的渐变分隔条 */
.bc-book-card:nth-child(4n + 3),
.bc-book-card:nth-child(4n + 4) {
  border-bottom: none;
  padding-bottom: 28px;
  margin-bottom: 18px;
  background-image: url("../img/figma-bc-line-fade.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 10px;
}

.bc-cover-wrap {
  flex-shrink: 0;
  width: 93px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.bc-cover-wrap--127 {
  height: 127px;
}

.bc-cover-wrap--137 {
  height: 137px;
}

.bc-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.bc-book-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bc-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: #333;
  line-height: 30px;
  margin-bottom: 2px;
}

.bc-author {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin-bottom: 6px;
}

.bc-excerpt {
  font-size: 0.75rem;
  line-height: 20px;
  color: #333;
  margin-bottom: 8px;
  max-width: 480px;
}

.bc-excerpt p {
  margin: 0;
}

.bc-excerpt p + p {
  margin-top: 0;
}

.bc-excerpt--tall {
  min-height: 50px;
}

.bc-meta {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin-bottom: 8px;
}

.bc-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.bc-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 89px;
  height: 34px;
  padding: 0 14px;
  background: #eeefef;
  border-radius: 90px;
  font-size: 0.875rem;
  color: #333;
  line-height: 30px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.bc-read-btn:hover {
  opacity: 0.85;
}

.bc-read-btn--tall {
  height: 44px;
  line-height: 40px;
}

/* 列表底部分隔线 */
.bc-line-footer {
  width: 100%;
  margin: 8px 0 24px;
  line-height: 0;
}

.bc-line-footer-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* 分页 */
.bc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 16px 0 8px;
}

/* ThinkPHP 分页：nav.bc-pagination 内 ul.pagination（Bootstrap 结构） */
.bc-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 0;
}

.bc-pagination .pagination > li {
  display: inline-flex;
  float: none;
  margin: 0;
}

.bc-pagination .pagination > li > a,
.bc-pagination .pagination > li > span {
  position: relative;
  box-sizing: border-box;
  float: none;
  margin: 0;
  text-decoration: none;
  transition: opacity 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* 上一页 / 下一页：与 bc-page-btn 一致；箭头用 ::before 避免 text-indent 导致背景被裁切 */
.bc-pagination .pagination > li:first-child > a,
.bc-pagination .pagination > li:first-child > span,
.bc-pagination .pagination > li:last-child > a,
.bc-pagination .pagination > li:last-child > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 26px;
  min-width: 39px;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 5px;
  /* background-color: #e5e5e5; */
  /* color: transparent; */
  /* font-size: 0; */
  line-height: 0;
}

.bc-pagination .pagination > li:first-child > a::before,
.bc-pagination .pagination > li:first-child > span::before,
.bc-pagination .pagination > li:last-child > a::before,
.bc-pagination .pagination > li:last-child > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: url("../img/figma-cf-page-arrow.png") no-repeat center / contain;
  pointer-events: none;
}

.bc-pagination .pagination > li:first-child > a::before,
.bc-pagination .pagination > li:first-child > span::before {
  transform: rotate(180deg);
}

.bc-pagination .pagination > li:first-child > a:hover,
.bc-pagination .pagination > li:first-child > a:focus,
.bc-pagination .pagination > li:last-child > a:hover,
.bc-pagination .pagination > li:last-child > a:focus {
  opacity: 0.85;
  background-color: #e5e5e5;
}

.bc-pagination .pagination > li.disabled:first-child > span,
.bc-pagination .pagination > li.disabled:last-child > span {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 页码：与 bc-page-num 一致（排除首末与当前页 .active） */
.bc-pagination .pagination > li:not(:first-child):not(:last-child):not(.active) > a,
.bc-pagination .pagination > li:not(:first-child):not(:last-child):not(.active) > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.875rem;
  line-height: 26px;
  color: #333;
  background: #fff;
  border: 1px solid #e5e5e5;
  text-indent: 0;
}

.bc-pagination .pagination > li:not(:first-child):not(:last-child):not(.active) > a:hover,
.bc-pagination .pagination > li:not(:first-child):not(:last-child):not(.active) > a:focus {
  opacity: 0.9;
  border-color: #ccc;
  color: #333;
}

.bc-pagination .pagination > li.active > span,
.bc-pagination .pagination > li.active > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.875rem;
  line-height: 26px;
  background: #fa6725;
  color: #fff;
  border: 1px solid #fa6725;
  cursor: default;
  text-indent: 0;
}

.bc-pagination .pagination > li.active > a:hover,
.bc-pagination .pagination > li.active > a:focus {
  opacity: 1;
  color: #fff;
  border-color: #fa6725;
}

.bc-pagination .pagination > li.disabled:not(:first-child):not(:last-child) > span {
  opacity: 0.45;
  cursor: not-allowed;
}

.bc-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 26px;
  border-radius: 5px;
  background: #e5e5e5;
  transition: opacity 0.2s;
}

.bc-page-btn:hover {
  opacity: 0.85;
}

.bc-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 26px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 0.875rem;
  color: #333;
  line-height: 26px;
  background: #fff;
  border: 1px solid #e5e5e5;
}

.bc-page-num--current {
  background: #fa6725;
  color: #fff;
  border-color: #fa6725;
}

.bc-page-ellipsis {
  font-size: 0.875rem;
  color: #333;
  padding: 0 4px;
  line-height: 26px;
}

.bc-page-arrow {
  display: block;
}

.bc-page-arrow--prev {
  transform: rotate(180deg);
}

.bc-page-arrow--next {
  transform: none;
}

/* 书籍分类页 - 平板 */
@media (max-width: 1024px) {
  .page-book-category .bc-books-grid {
    column-gap: 40px;
  }

  .bc-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .bc-sort-group {
    justify-content: flex-end;
  }
}

/* 书籍分类页 - 移动 */
@media (max-width: 768px) {
  .page-book-category .bc-breadcrumb {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

  .page-book-category .bc-books-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .bc-book-card:nth-child(4n + 3),
  .bc-book-card:nth-child(4n + 4) {
    background-image: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  .bc-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 24px;
    scrollbar-width: none;
  }

  .bc-subcats::-webkit-scrollbar {
    display: none;
  }

  .bc-excerpt {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .bc-book-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .bc-cover-wrap {
    width: 100%;
    max-width: 120px;
    height: auto !important;
    aspect-ratio: 93 / 127;
  }

  .bc-cover-wrap--137 {
    aspect-ratio: 93 / 137;
  }
}

/* ============================================================
   相似书籍推荐（Figma 节点 1:2039，基准 1920px）
   说明：节点 1:2222、1:2444 与 MCP 配额冲突未单独导出；版式与
   1:2039 全页一致，页脚区与 1:2221 版权块对应 index 页脚。
   ============================================================ */
.page-sim-books .sim-page-title {
  font-size: 1.875rem;
  color: #333;
  font-weight: 400;
  margin: 0 0 43px;
  line-height: 1.2;
}

.page-sim-books .bc-filter-toolbar {
  margin-bottom: 61px;
}

.page-sim-books .bc-book-card:nth-child(4n + 3),
.page-sim-books .bc-book-card:nth-child(4n + 4) {
  background-image: url("../img/figma-sim-line-fade.png");
}

@media (max-width: 1024px) {
  .page-sim-books .bc-books-grid {
    column-gap: 40px;
  }

  .page-sim-books .bc-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-sim-books .bc-sort-group {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .page-sim-books .sim-page-title {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

  .page-sim-books .bc-books-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .page-sim-books .bc-book-card:nth-child(4n + 3),
  .page-sim-books .bc-book-card:nth-child(4n + 4) {
    background-image: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  .page-sim-books .bc-excerpt {
    max-width: none;
  }
}

/* ============================================================
   书籍介绍 1:2222（book-detail.html）与阅读页 1:2444（book-read.html）
   文件 2gGgOwqSzCXiJM8tzQyrrL，1920 基准
   ============================================================ */
.page-book-detail {
  background: #f8f9f9;
}

.page-book-read {
  background: #e0e0e0;
}

.bd-wrap {
  background: #f8f9f9;
}

.bd-hero {
  position: relative;
  min-height: 426px;
  width: 100%;
  overflow: hidden;
}

.bd-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bd-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0.34deg, #f8f9f9 1.44%, rgba(248, 249, 249, 0.42) 98.84%);
  pointer-events: none;
}

.bd-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1197px;
  margin: 0 auto;
  padding: 31px 24px 48px;
  text-align: center;
}

.bd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 36px;
}

.bd-crumb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.63);
  border-radius: 90px;
  font-size: 1rem;
  color: #333;
}

a.bd-crumb-pill {
  text-decoration: none;
}

a.bd-crumb-pill:hover {
  color: #f96a60;
}

.bd-crumb-ico {
  display: flex;
  line-height: 0;
}

.bd-title-main {
  font-size: 3.125rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 24px;
  line-height: 1.2;
}

.bd-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.bd-author-avatar {
  border-radius: 50%;
  object-fit: cover;
}

a.bd-author-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  border-radius: 50%;
  transition: opacity 0.2s;
}

a.bd-author-link:hover {
  opacity: 0.9;
}

.bd-author-name {
  font-size: 1rem;
  color: #333;
}

.bd-publisher-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

.bd-publisher-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 90px;
  font-size: 0.8125rem;
  color: #f96a60;
  background: rgba(249, 106, 96, 0.1);
  border: 1px solid rgba(249, 106, 96, 0.35);
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

.bd-publisher-chip:hover {
  background: #f96a60;
  color: #fff;
}

.bd-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.bd-notice-txt {
  font-size: 1rem;
  color: #f96a60;
  text-align: left;
}

.bd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.bd-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: 90px;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(94.4deg, #f95a5b 3.07%, #fe9930 103.92%);
}

.bd-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.bd-stat-card {
  width: 218px;
  min-height: 65px;
  padding: 8px 16px 12px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bd-stat-label {
  font-size: 0.875rem;
  color: #333;
}

.bd-stat-num {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

.bd-container {
  max-width: 1197px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.bd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  margin-top: 24px;
  background: #eff2f3;
}

.bd-section-head:first-of-type {
  margin-top: 0;
}

.bd-section-title {
  font-size: 1.125rem;
  font-weight: 400;
  color: #333;
}

.bd-view-all {
  font-size: 1rem;
  color: #999;
}

.bd-view-all:hover {
  color: #f96a60;
}

.bd-intro {
  padding: 24px 0 32px;
  font-size: 1rem;
  line-height: 36px;
  color: #333;
}

.bd-intro p {
  margin: 0 0 0;
}

.bd-section-head--toc {
  margin-top: 0;
}

.bd-toc-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  font-size: 1rem;
  color: #333;
}

.bd-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.bd-check--on {
  color: #333;
}

.bd-toc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 8px;
  flex-wrap: wrap;
}

.bd-toc-latest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(92.42deg, #f95a5b 3.07%, #fe9930 103.92%);
}

.bd-toc-vol {
  font-size: 0.875rem;
  color: #333;
}

.bd-toc-part {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 16px;
}

.bd-chapter-item {
  padding: 20px 0 16px;
}

.bd-chapter-name {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.bd-chapter-snippet {
  font-size: 0.875rem;
  line-height: 24px;
  color: #333;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bd-chapter-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.875rem;
  color: #999;
}

.bd-line {
  width: 100%;
  line-height: 0;
}

.bd-line img {
  width: 100%;
  height: auto;
  display: block;
}

.bd-more {
  text-align: center;
  padding: 28px 0 40px;
}

.bd-more a {
  font-size: 1rem;
  color: #f96a60;
}

.bd-comment-list {
  list-style: none;
  padding: 16px 0 0;
}

.bd-comment {
  display: flex;
  gap: 16px;
  padding: 16px 0;
}

.bd-cmt-av {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.bd-cmt-user {
  font-size: 1.125rem;
  color: #000;
  margin-bottom: 4px;
}

.bd-cmt-time {
  font-size: 0.875rem;
  color: #999;
  margin-bottom: 8px;
}

.bd-cmt-text {
  font-size: 0.875rem;
  color: #000;
  margin-bottom: 8px;
}

.bd-cmt-chap {
  font-size: 0.875rem;
}

.bd-cmt-chap .muted {
  color: #999;
}

.bd-cmt-chap .accent {
  color: #f96a60;
}

.bd-cmt-sep {
  list-style: none;
  line-height: 0;
}

.bd-cmt-sep img {
  width: 100%;
  height: auto;
  display: block;
}

.bd-post-cmt {
  text-align: center;
  padding: 24px 0 40px;
}

.bd-post-cmt a {
  font-size: 1rem;
  color: #f96a60;
}

.bd-rec-wrap {
  position: relative;
  padding: 16px 0 48px;
}

.bd-rec-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.bd-rec-card {
  flex: 0 0 124px;
  scroll-snap-align: start;
  color: inherit;
}

.bd-rec-cover {
  width: 124px;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.bd-rec-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-rec-title {
  font-size: 1.125rem;
  color: #000;
  margin-bottom: 4px;
}

.bd-rec-author {
  font-size: 0.875rem;
  color: #666;
}

.bd-rec-next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-line-page {
  width: 100%;
  line-height: 0;
}

.bd-line-page img {
  width: 100%;
  display: block;
}

/* 阅读区 1:2444 */
.rd-wrap {
  background: #e0e0e0;
  padding: 24px 16px 48px;
}

.rd-panel {
  position: relative;
  max-width: 1197px;
  margin: 0 auto;
  background: #f2f2f2;
  padding: 32px 48px 48px;
  min-height: 400px;
  isolation: isolate;
}

.rd-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.rd-back {
  display: flex;
  line-height: 0;
  flex-shrink: 0;
}

.rd-back img {
  transform: rotate(180deg);
}

.rd-book-name {
  font-size: 1.875rem;
  font-weight: 400;
  color: #333;
  margin: 0;
}

.rd-line {
  width: 100%;
  margin: 8px 0 20px;
  line-height: 0;
}

.rd-line img {
  width: 100%;
  display: block;
}

.rd-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.rd-mode {
  min-height: 34px;
  padding: 0 20px;
  border-radius: 90px;
  font-size: 0.875rem;
  color: #333;
  background: rgba(0, 0, 0, 0.07);
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
}

button.rd-mode {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.rd-mode--active {
  color: #fff;
  background: linear-gradient(94.21deg, #f95a5b 3.07%, #fe9930 103.92%);
}

.rd-chapter-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 8px;
}

.rd-chapter-meta {
  font-size: 1rem;
  color: #999;
  margin-bottom: 32px;
}

.rd-tools-wrap {
  position: absolute;
  right: 24px;
  top: 120px;
  z-index: 5;
  width: 56px;
}

.rd-tools {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-tool {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f2f2f2;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 4px;
}

.rd-font-pop {
  position: absolute;
  top: 132px;
  right: 0;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.rd-font-pop.is-open {
  display: flex;
}

.rd-font-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
}

.rd-font-btn:hover {
  border-color: #f96a60;
  color: #f96a60;
}

.rd-font-label {
  font-size: 13px;
  color: #666;
  min-width: 42px;
  text-align: center;
}

/* 阅读页：本章视频弹层 */
.rd-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.rd-video-modal[hidden] {
  display: none;
}

.rd-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.rd-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(85vh, 100%);
  background: #111;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rd-video-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
}

.rd-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.rd-video-modal__inner {
  padding: 44px 12px 12px;
  box-sizing: border-box;
}

.rd-video-modal__video {
  width: 100%;
  max-height: min(72vh, 80vw);
  vertical-align: middle;
  background: #000;
  border-radius: 8px;
}

.rd-drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
}

.rd-drawer-mask[hidden] {
  display: none;
}

.rd-drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 88vw);
  max-width: 100%;
  background: #fff;
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.rd-drawer.is-open {
  transform: translateX(0);
}

.rd-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.rd-toc-head {
  display: flex;
  gap: 12px;
  padding: 20px 16px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
}

.rd-toc-cover-wrap {
  flex-shrink: 0;
  line-height: 0;
}

.rd-toc-cover {
  width: 56px;
  height: 76px;
  object-fit: cover;
  border-radius: 4px;
}

.rd-toc-head-text {
  min-width: 0;
  flex: 1;
}

.rd-toc-book-title {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  display: inline;
  line-height: 1.4;
}

.rd-toc-book-gt {
  color: #999;
  font-weight: 400;
}

.rd-toc-book-title:hover {
  color: #f96a60;
}

.rd-toc-status,
.rd-toc-author {
  font-size: 0.8125rem;
  color: #999;
  margin: 8px 0 0;
  line-height: 1.4;
}

.rd-toc-count {
  padding: 12px 16px 8px;
  margin: 0;
  font-size: 0.9375rem;
  color: #666;
  flex-shrink: 0;
}

.rd-toc-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.rd-toc-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #333;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.rd-toc-item:hover {
  background: #fafafa;
}

.rd-toc-item--active {
  color: #f96a60;
}

.rd-toc-item--active:hover {
  color: #f96a60;
}

.rd-toc-pin {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rd-toc-pin--empty {
  visibility: hidden;
}

.rd-toc-item-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.rd-body {
  font-size: 1.125rem;
  line-height: 46px;
  color: #333;
  max-width: 1022px;
  margin-bottom: 40px;
  /* Excel/纯文本中的 \n 在 HTML 里默认会被折叠；pre-line 保留换行并仍自动折行 */
  white-space: pre-line;
  word-break: break-word;
}

.rd-body p {
  margin: 0 0 0;
  text-indent: 2em;
  white-space: pre-line;
}

/* 无 <p> 包裹时整块正文首行缩进 */
.rd-body:not(:has(p)) {
  text-indent: 2em;
}

/* 正文防随手复制（无法防止查看源码或抓包） */
.page-book-read .rd-body,
.page-book-read .rd-body * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rd-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 40px;
  max-width: 1010px;
}

.rd-pager-prev,
.rd-pager-next {
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 1rem;
  color: #666;
}

.rd-pager-prev {
  background: #e5e5e5;
  justify-content: flex-start;
}

.rd-pager-next {
  background: #fff;
  justify-content: flex-end;
}

.rd-cmt-bar {
  background: #fff;
  min-height: 48px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.rd-cmt-title {
  font-size: 1.125rem;
  color: #333;
  font-weight: 400;
  margin: 0;
}

.rd-cmt-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rd-cmt {
  display: flex;
  gap: 16px;
  padding: 20px 0;
}

.rd-cmt-av {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.rd-cmt-user {
  font-size: 1.125rem;
  color: #000;
  margin: 0 0 4px;
}

.rd-cmt-sub {
  font-size: 0.875rem;
  color: #999;
  margin: 0 0 8px;
}

.rd-cmt-txt {
  font-size: 0.875rem;
  color: #000;
  margin: 0;
  line-height: 1.5;
}

.rd-cmt-line {
  list-style: none;
  line-height: 0;
}

.rd-cmt-line img {
  width: 100%;
  display: block;
}

.rd-post {
  text-align: center;
  padding: 28px 0 8px;
}

.rd-post a {
  font-size: 1rem;
  color: #f96a60;
}

@media (max-width: 1024px) {
  .page-book-read .rd-panel {
    padding: 24px 24px 40px;
  }

  .page-book-read .rd-tools-wrap {
    position: relative;
    width: auto;
    align-self: flex-end;
    margin-bottom: 16px;
  }

  .page-book-read .rd-tools {
    flex-direction: row;
    justify-content: flex-end;
  }

  .page-book-read .rd-font-pop {
    top: calc(100% + 8px);
    right: 0;
  }
}

.bd-chapter-name a {
  color: inherit;
  text-decoration: none;
}

.bd-chapter-name a:hover {
  color: #f96a60;
}

.bd-cta {
  margin: 24px 0 0;
  text-align: center;
}

.bd-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 28px;
  border-radius: 90px;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(94.4deg, #f95a5b 3.07%, #fe9930 103.92%);
  transition: opacity 0.2s;
}

.bd-cta-btn:hover {
  opacity: 0.9;
  color: #fff;
}

@media (max-width: 768px) {
  .page-book-detail .bd-title-main {
    font-size: 2rem;
  }

  .bd-crumb {
    justify-content: center;
  }

  .bd-rec-next {
    display: none;
  }

  .page-book-read .rd-panel {
    padding: 20px 16px 32px;
  }

  .page-book-read .rd-body {
    font-size: 1rem;
    line-height: 2;
  }

  .page-book-read .rd-pager {
    flex-direction: column;
  }

  .page-book-read .rd-pager-prev,
  .page-book-read .rd-pager-next {
    width: 100%;
  }
}

/* ============================================================
   精选视频列表（Figma 节点 1:717，基准 1920px）
   ============================================================ */
.page-featured-videos .fv-main {
  background: #f8f9f9;
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-featured-videos .fv-inner {
  max-width: 1195px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-featured-videos .fv-breadcrumb {
  margin-bottom: 35px;
}

.page-featured-videos .fv-filter-toolbar {
  margin-bottom: 24px;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  position: relative;
  z-index: 2;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.page-featured-videos .fv-filter-form {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.page-featured-videos .fv-filter-left {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.page-featured-videos .fv-filter-form .fv-filter-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: default;
}

.page-featured-videos .fv-filter-label__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

.page-featured-videos .fv-filter-label__wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.page-featured-videos .fv-filter-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
}

.page-featured-videos .fv-filter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 40px;
  min-width: 140px;
  padding: 6px 34px 6px 12px;
  border: 1px solid #d8dcde;
  border-radius: 8px;
  background-color: #fff;
  font-size: 0.9375rem;
  color: #333;
  max-width: 200px;
  font-family: var(--font-family);
  cursor: pointer;
  -webkit-transition: border-color 0.15s, box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.page-featured-videos .fv-filter-select:hover {
  border-color: #c5c9cc;
}

.page-featured-videos .fv-filter-select:focus {
  outline: none;
  border-color: #f96a60;
  -webkit-box-shadow: 0 0 0 2px rgba(249, 106, 96, 0.2);
  box-shadow: 0 0 0 2px rgba(249, 106, 96, 0.2);
}

/* 排序：与左侧灰条同高，可点击；选中项白字 */
.page-featured-videos .fv-sort-group {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  min-height: 0;
  margin-left: auto;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.page-featured-videos .fv-sort-group a.fv-sort-btn {
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
  min-width: 108px;
  padding: 0 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 100%;
  font-size: 0.9375rem;
  color: #444;
  background: #fff;
  border: none;
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
}

.page-featured-videos .fv-sort-group a.fv-sort-btn:hover {
  background: #f5f6f7;
  color: #222;
}

.page-featured-videos .fv-sort-group a.fv-sort-btn.bc-sort-btn--active {
  background: #f96a60;
  color: #fff;
}

.page-featured-videos .fv-sort-group a.fv-sort-btn.bc-sort-btn--active:hover {
  background: #e85a50;
  color: #fff;
}

/* 分类 pill：保证在内容层之上可点 */
.page-featured-videos .fv-subcats {
  position: relative;
  z-index: 2;
}

.page-featured-videos .fv-subcats a.bc-pill {
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.fv-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 274px));
  gap: 34px 34px;
  justify-content: center;
  margin-bottom: 28px;
}

.fv-card {
  min-width: 0;
}

.fv-card-media {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fv-thumb {
  width: 100%;
  height: 176px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  max-width: none;
}

.fv-card-overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none;
}

.fv-play-stack {
  position: relative;
  width: 120px;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.fv-play-deco {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 120px;
  height: 120px;
  -o-object-fit: contain;
  object-fit: contain;
}

.fv-play-ico {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
  object-fit: contain;
}

.fv-card--plain .fv-play-ico {
  width: 56px;
  height: 56px;
}

.fv-time {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 0.875rem;
  line-height: 30px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.fv-card-title {
  display: block;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 30px;
  font-weight: 400;
  color: #000;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.fv-card-title:hover {
  color: var(--color-primary);
}

.page-featured-videos .fv-line-footer {
  margin: 8px 0 24px;
}

.page-featured-videos .fv-pagination {
  padding-bottom: 8px;
}

@media (max-width: 1200px) {
  .fv-video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .fv-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .page-featured-videos .fv-breadcrumb {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

  .page-featured-videos .fv-filter-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 14px;
  }

  .page-featured-videos .fv-sort-group {
    margin-left: 0;
    width: 100%;
  }

  .page-featured-videos .fv-sort-group a.fv-sort-btn {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: 44px;
  }

  .fv-video-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-featured-videos .bc-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .page-featured-videos .bc-subcats::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================
   社群广场（Figma 节点 1:943，基准 1920px）
   ============================================================ */
.page-community-square .cs-main {
  background: #f8f9f9;
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-community-square .cs-inner {
  max-width: 1195px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-community-square .cs-breadcrumb {
  margin-bottom: 35px;
}

.page-community-square .cs-filter-toolbar {
  margin-bottom: 32px;
}

.cs-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 379px) minmax(0, 379px) minmax(0, 379px);
  grid-template-columns: repeat(3, minmax(0, 379px));
  gap: 29px 30px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 28px;
}

.cs-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  min-height: 133px;
  padding: 0 18px 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  min-width: 0;
}

a.cs-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a.cs-card:hover .cs-card-title {
  color: var(--color-primary);
}

/* 设计稿每行第一列卡片阴影略强（3 列时第 1、4、7…） */
.page-community-square .cs-grid .cs-card:nth-child(3n + 1) {
  -webkit-box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
  box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
}

.cs-card-avatar {
  width: 91px;
  height: 91px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.cs-card-body {
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.cs-card-title {
  font-size: 1.125rem;
  font-weight: 400;
  color: #000;
  line-height: 30px;
  margin: 0 0 4px;
}

.cs-card-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: #666;
  line-height: 30px;
}

.cs-card-people-ico {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
}

.page-community-square .cs-line-footer {
  margin: 8px 0 24px;
}

.page-community-square .cs-pagination {
  padding-bottom: 8px;
}

@media (max-width: 1280px) {
  .cs-grid {
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .page-community-square .cs-grid .cs-card:nth-child(3n + 1) {
    -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  }

  .page-community-square .cs-grid .cs-card:nth-child(2n + 1) {
    -webkit-box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
    box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
  }
}

@media (max-width: 768px) {
  .page-community-square .cs-breadcrumb {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

  .cs-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-card {
    padding: 0 16px;
  }

  .page-community-square .cs-grid .cs-card:nth-child(3n + 1),
  .page-community-square .cs-grid .cs-card:nth-child(2n + 1) {
    -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  }
}

/* ============================================================
   社群详情（Figma 节点 1:1148，基准 1920px）
   ============================================================ */
.page-community-detail .cd-main {
  background: #f8f9f9;
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-community-detail .cd-inner {
  max-width: 1198px;
  margin: 0 auto;
  padding: 0 24px;
}

.cd-crumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-bottom: 28px;
}

.cd-crumb-pill {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 18px;
  border-radius: 90px;
  background: rgba(255, 255, 255, 0.63);
  font-size: 1rem;
  color: #333;
  white-space: nowrap;
}

a.cd-crumb-pill:hover {
  color: var(--color-primary);
}

.cd-crumb-pill--current {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-crumb-sep {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 0;
}

.cd-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 247px;
  margin-bottom: 36px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
}

.cd-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.cd-hero-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 24px 32px 24px 28px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cd-hero-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 23px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 360px;
  flex: 1 1 360px;
}

.cd-hero-avatar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cd-hero-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  line-height: 30px;
  margin: 0 0 8px;
}

.cd-hero-desc {
  font-size: 0.875rem;
  line-height: 30px;
  color: #333;
  margin: 0 0 16px;
  max-width: 327px;
}

.cd-hero-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cd-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 108px;
  height: 34px;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 1rem;
  font-family: var(--font-family);
  line-height: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.cd-btn:hover {
  opacity: 0.9;
}

.cd-btn--primary {
  background: #f96a60;
  color: #fff;
}

.cd-btn--outline {
  background: #fff;
  border-color: #f96a60;
  color: #f96a60;
}

.cd-stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px 40px;
  min-width: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 320px;
  flex: 0 1 320px;
}

.cd-stat--wide {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / -1;
  text-align: center;
}

.cd-stat-label {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin: 0 0 2px;
}

.cd-stat-value {
  margin: 0;
  line-height: 1.2;
}

.cd-stat-num {
  font-size: 1.5rem;
  color: #000;
  line-height: 30px;
}

.cd-stat-unit {
  font-size: 1rem;
  color: #999;
  margin-left: 2px;
}

.cd-works-head {
  font-size: 1.25rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 16px;
  line-height: 1.4;
}

.cd-works-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cd-work-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
}

.cd-work-cover {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 93px;
  height: 137px;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.cd-work-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

.cd-work-title {
  font-size: 1.125rem;
  font-weight: 400;
  color: #333;
  line-height: 30px;
  margin: 0 0 8px;
}

.page-community-detail .cd-work-title .cd-work-title-link {
  color: inherit;
  text-decoration: none;
}

.page-community-detail .cd-work-title .cd-work-title-link:hover {
  color: #f96a60;
}

.cd-work-excerpt {
  font-size: 0.75rem;
  line-height: 20px;
  color: #333;
  margin-bottom: 8px;
}

.cd-work-excerpt p {
  margin: 0;
}

.cd-work-excerpt p + p {
  margin-top: 0;
}

.cd-work-meta {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin: 0;
}

.cd-work-author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 200px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.cd-work-author-av {
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cd-work-author-txt {
  text-align: left;
  min-width: 0;
}

.cd-work-author-name {
  font-size: 1.125rem;
  color: #000;
  line-height: 30px;
  margin: 0 0 2px;
}

.cd-work-author-meta {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin: 0;
}

.cd-work-sep {
  list-style: none;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.cd-line-img {
  width: 100%;
  max-width: 1196px;
  height: auto;
  display: block;
}

.page-community-detail .cd-line-footer {
  margin: 8px 0 24px;
}

.page-community-detail .cd-join-form {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: top;
}

.page-community-detail .cd-stats {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.page-community-detail .cd-work-empty {
  margin: 0;
  padding: 40px 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: #999;
}

.page-community-detail ul.cd-works-list > li.cd-work-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 93px minmax(0, 1fr) minmax(160px, 220px);
  grid-template-columns: 93px minmax(0, 1fr) minmax(160px, 220px);
  gap: 20px 24px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: unset;
  flex-wrap: unset;
}

.page-community-detail .cd-work-item .cd-work-body {
  -webkit-box-flex: unset;
  -ms-flex: unset;
  flex: unset;
  max-width: none;
  min-width: 0;
}

.page-community-detail .cd-pagination {
  padding-bottom: 8px;
}

.page-community-detail .cd-hero-bg--fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #dfece6 0%, #f4f9f7 55%, #eef5f2 100%);
}

.page-community-detail .cd-rich {
  background: #fff;
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 24px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  font-size: 1rem;
  line-height: 1.75;
  color: #333;
}

.page-community-detail .cd-rich p {
  margin: 0 0 1em;
}

.page-community-detail .cd-rich p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .cd-work-item {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .page-community-detail ul.cd-works-list > li.cd-work-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .cd-work-author {
    width: 100%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-left: 113px;
  }
}

@media (max-width: 768px) {
  .cd-crumb {
    margin-bottom: 20px;
  }

  .cd-hero-inner {
    padding: 20px 18px;
  }

  .cd-hero-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
  }

  .cd-hero-desc {
    max-width: none;
  }

  .cd-hero-actions {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .cd-stats {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    max-width: 100%;
  }

  .cd-work-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-community-detail ul.cd-works-list > li.cd-work-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .cd-work-author {
    padding-left: 0;
    width: 100%;
  }

  .cd-work-cover {
    width: 100%;
    max-width: 120px;
    height: auto;
    aspect-ratio: 93 / 137;
  }
}

/* ============================================================
   视频播放页（Figma 节点 1:2521，基准 1920px）
   左栏约 1387px + 右栏 533px，Grid 固定比例避免 flex 提前换行
   ============================================================ */
.page-video-play {
  background: #e0e0e0;
}

.page-video-play .vp-main {
  padding: 0 0 40px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* 主舞台：左视频区 + 右侧栏同高拉伸 */
.vp-stage {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 533px;
  grid-template-columns: minmax(0, 1fr) 533px;
  width: 100%;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  min-height: 0;
}

.vp-video-pane {
  position: relative;
  min-width: 0;
  min-height: 280px;
  height: 100%;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.vp-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.vp-bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.vp-video-inset {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 18px 28px 28px 36px;
  width: auto;
  max-width: min(1292px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1292 / 836;
  overflow: hidden;
  border-radius: 2px;
}

.vp-main-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}

.page-video-play .vp-video-inset video.vp-player {
  background: #000;
}

/* 目录/字号在设计稿中位于右侧白底栏右下角 */
.vp-float-tools {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

.vp-float-btn {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f2f2f2;
  color: #333;
  font-size: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  line-height: 1.2;
  font-family: var(--font-family);
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.vp-float-btn:hover {
  opacity: 0.88;
}

.vp-sidebar {
  position: relative;
  background: #fff;
  padding: 28px 28px 120px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
}

.vp-sidebar-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
}

.vp-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #000;
  line-height: 1.35;
  margin: 0 0 16px;
}

.vp-tags-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.vp-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 4px 12px;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: #9a9a9a;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  white-space: nowrap;
  font-family: var(--font-family);
}

.vp-tag--primary {
  color: #f96a60;
  border-color: #f96a60;
  background: #fff;
}

.vp-intro-line {
  margin: 0 0 12px;
  line-height: 0;
}

.vp-line-img {
  width: 100%;
  max-width: 458px;
  height: auto;
  display: block;
}

.vp-intro {
  font-size: 0.875rem;
  line-height: 36px;
  color: #333;
  margin: 0 0 24px;
}

.vp-intro--muted {
  color: #999;
}

.vp-comment-empty {
  font-size: 0.875rem;
  color: #999;
  margin: 0 0 24px;
  line-height: 1.6;
}

.vp-comment-form {
  margin: 0 0 20px;
}

.vp-comment-form__label {
  display: block;
  font-size: 0.8125rem;
  color: #666;
  margin-bottom: 8px;
}

.vp-comment-textarea {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: var(--font-family);
  resize: vertical;
  min-height: 72px;
  margin-bottom: 10px;
}

.vp-comment-textarea:focus {
  outline: none;
  border-color: #f96a60;
}

.vp-comment-submit {
  padding: 8px 20px;
  font-size: 0.875rem;
  color: #fff;
  background: #f96a60;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-family);
}

.vp-comment-submit:hover {
  opacity: 0.92;
}

.vp-comment-tip {
  font-size: 0.875rem;
  color: #333;
  margin: 0 0 16px;
  line-height: 1.6;
}

.vp-comment-tip--muted {
  color: #999;
}

.vp-comment-login {
  color: #f96a60;
  text-decoration: none;
}

.vp-comment-login:hover {
  text-decoration: underline;
}

.page-video-play .vp-comments .vp-cmt + .vp-cmt {
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-top: 4px;
}

.vp-expand {
  color: #f96a60;
  white-space: nowrap;
}

.vp-expand:hover {
  text-decoration: underline;
}

.vp-comment-hd {
  background: #efefef;
  min-height: 52px;
  line-height: 52px;
  padding: 0 16px;
  font-size: 1rem;
  color: #666;
  margin: 0 0 16px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.vp-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vp-cmt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  padding: 16px 0 12px;
}

.vp-cmt-av {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.vp-cmt-body {
  min-width: 0;
}

.vp-cmt-user {
  font-size: 1.125rem;
  color: #000;
  margin: 0 0 4px;
}

.vp-cmt-sub {
  font-size: 0.875rem;
  color: #999;
  margin: 0 0 8px;
}

.vp-cmt-txt {
  font-size: 0.875rem;
  color: #000;
  margin: 0;
  line-height: 1.5;
}

.vp-cmt-line {
  list-style: none;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.vp-cmt-line img {
  width: 100%;
  max-width: 432px;
  display: block;
}

.vp-pager-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px 24px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.vp-pager {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1010px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
}

.vp-pager-prev,
.vp-pager-next {
  min-width: 0;
  min-height: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
  font-size: 1rem;
  color: #666;
  text-decoration: none;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.vp-pager-prev {
  background: #e5e5e5;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.vp-pager-next {
  background: #fff;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.vp-pager-prev:hover,
.vp-pager-next:hover {
  opacity: 0.9;
}

.vp-pager-prev--disabled,
.vp-pager-next--disabled {
  color: #bbb;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .vp-stage {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .vp-video-pane {
    min-height: 360px;
    height: auto;
  }

  .vp-video-inset {
    margin: 16px 20px 24px;
    max-width: min(1292px, calc(100% - 40px));
  }

  .vp-sidebar {
    max-width: none;
    padding-bottom: 120px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: 1px solid #d8d8d8;
  }

  .vp-float-tools {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 768px) {
  .vp-title {
    font-size: 1.25rem;
  }

  .vp-sidebar {
    padding: 24px 20px 32px;
  }

  .vp-pager {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 16px 16px 0;
  }

  .vp-pager-prev,
  .vp-pager-next {
    width: 100%;
  }
}

/* ============================================================
   作者主页（Figma 节点 1:1293）
   ============================================================ */
.page-author-profile .ap-main {
  background: #f8f9f9;
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-author-profile .ap-inner {
  max-width: 1195px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-author-profile .ap-author-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 36px;
}

.page-author-profile .ap-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.page-author-profile .ap-author-text {
  flex: 1;
  min-width: 0;
}

.page-author-profile .ap-name {
  font-size: 1.125rem;
  font-weight: 400;
  color: #000;
  line-height: 30px;
  margin: 0 0 2px;
}

.page-author-profile .ap-bio {
  font-size: 0.875rem;
  color: #999;
  line-height: 30px;
  margin: 0;
  max-width: 280px;
}

.page-author-profile .ap-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.page-author-profile .ap-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.page-author-profile .ap-stat-label {
  font-size: 1rem;
  color: #999;
  line-height: 30px;
}

.page-author-profile .ap-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
  line-height: 30px;
}

.page-author-profile .ap-stat-divider {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.page-author-profile .ap-stat-divider img {
  width: 66px;
  height: 1px;
  object-fit: cover;
  transform: rotate(90deg);
  flex-shrink: 0;
}

.page-author-profile .ap-follow {
  width: 108px;
  height: 34px;
  border-radius: 5px;
  background: #f96a60;
  color: #fff;
  font-size: 1rem;
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
  margin-left: auto;
  transition: opacity 0.2s;
}

.page-author-profile .ap-follow:hover {
  opacity: 0.9;
}

.page-author-profile a.ap-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.page-author-profile .ap-follow--on {
  background: #fff;
  color: #f96a60;
  border: 1px solid #f96a60;
}

.page-author-profile .ap-follow--on:hover {
  opacity: 1;
  background: #fff5f4;
}

.page-author-profile .ap-follow--self,
.page-author-profile .ap-follow--self:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.page-author-profile .ap-follow--self:hover {
  opacity: 1;
}

.page-author-profile .ap-works-head {
  margin-bottom: 0;
}

.page-author-profile .ap-line-toolbar {
  line-height: 0;
  margin: 0;
}

.page-author-profile .ap-line-toolbar-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1196px;
}

.page-author-profile .ap-works-title {
  font-size: 1.25rem;
  color: #333;
  font-weight: 400;
  line-height: 1.4;
  margin: 12px 0;
  padding: 0;
}

.page-author-profile .ap-filter-toolbar {
  margin-top: 24px;
  margin-bottom: 24px;
}

.page-author-profile .ap-subcats {
  margin-bottom: 32px;
}

.page-author-profile .bc-book-card:nth-child(4n + 1),
.page-author-profile .bc-book-card:nth-child(4n + 2),
.page-author-profile .bc-book-card:nth-child(4n + 3),
.page-author-profile .bc-book-card:nth-child(4n + 4) {
  border-bottom: none;
  background-image: none;
}

.page-author-profile .bc-books-grid .bc-book-card:nth-child(-n + 4) {
  background: url("../img/figma-ap-line-row.png") no-repeat center bottom;
  background-size: 100% 1px;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.page-author-profile .bc-books-grid .bc-book-card:nth-child(n + 5) {
  background: url("../img/figma-ap-line-card-bottom.png") no-repeat center bottom;
  background-size: 100% 10px;
  padding-bottom: 28px;
  margin-bottom: 18px;
}

.page-author-profile .bc-books-grid .bc-book-card:nth-child(n) {
  border-bottom: none;
}

.page-author-profile .ap-line-footer {
  margin-top: 8px;
}

.page-author-profile .ap-pagination {
  padding-bottom: 24px;
}

@media (max-width: 1024px) {
  .page-author-profile .bc-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-author-profile .bc-sort-group {
    justify-content: flex-end;
  }

  .page-author-profile .bc-books-grid {
    column-gap: 40px;
  }

  .page-author-profile .ap-follow {
    margin-left: 0;
  }

  .page-author-profile .ap-stats {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .page-author-profile .ap-author-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-author-profile .ap-stats {
    width: 100%;
    justify-content: flex-start;
  }

  .page-author-profile .bc-books-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .page-author-profile .bc-books-grid .bc-book-card:nth-child(-n + 4) {
    background-image: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .page-author-profile .bc-books-grid .bc-book-card:nth-child(n + 5) {
    background-image: none;
    border-bottom: 1px solid #ddd;
  }

  .page-author-profile .bc-books-grid .bc-book-card:last-child {
    border-bottom: none;
  }

  .page-author-profile .bc-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .page-author-profile .bc-subcats::-webkit-scrollbar {
    display: none;
  }

  .page-author-profile .bc-excerpt {
    max-width: none;
  }
}

/* ============================================================
   社群广场：全宽详情弹层
   ============================================================ */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.cs-modal[hidden] {
  display: none !important;
}

.cs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.cs-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.cs-modal-bar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid #e5e5e5;
  background: #fafafa;
}

.cs-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.cs-modal-close {
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.cs-modal-iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
}

body.cs-modal-open {
  overflow: hidden;
}

/* 社群详情嵌入弹层 iframe：隐藏全站头尾 */
body.cd-embed .header,
body.cd-embed .sub-nav,
body.cd-embed .footer {
  display: none !important;
}

body.cd-embed.page-community-detail {
  padding-top: 0;
}

body.cd-embed .cd-main {
  padding-top: 16px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ============================================================
   作者认证申请
   ============================================================ */
.page-author-apply {
  background: #f8f9f9;
}

.page-author-apply .aa-main {
  padding: 36px 0 56px;
  min-height: 50vh;
}

.page-author-apply .aa-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-author-apply .aa-breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 24px;
  color: #666;
}

.page-author-apply .aa-bc-link {
  color: #f96a60;
  text-decoration: none;
}

.page-author-apply .aa-bc-link:hover {
  text-decoration: underline;
}

.page-author-apply .aa-bc-sep {
  margin: 0 8px;
  color: #ccc;
}

.page-author-apply .aa-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 12px;
}

.page-author-apply .aa-lead {
  font-size: 0.9375rem;
  color: #666;
  line-height: 1.7;
  margin: 0 0 28px;
}

.page-author-apply .aa-panel {
  padding: 16px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.page-author-apply .aa-panel--notice {
  background: #f0f7ff;
  border: 1px solid #cfe8ff;
  color: #333;
}

.page-author-apply .aa-panel--warn {
  background: #fff8f0;
  border: 1px solid #ffd8b8;
  color: #333;
}

.page-author-apply .aa-notice-title,
.page-author-apply .aa-warn-title {
  font-weight: 600;
  margin: 0 0 8px;
}

.page-author-apply .aa-notice-text,
.page-author-apply .aa-warn-text {
  margin: 0;
  font-size: 0.9375rem;
}

.page-author-apply .aa-notice-meta {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: #888;
}

.page-author-apply .aa-form {
  background: #fff;
  padding: 28px 24px 32px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.page-author-apply .aa-field {
  margin-bottom: 20px;
}

.page-author-apply .aa-label {
  display: block;
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 8px;
}

.page-author-apply .aa-req {
  color: #f96a60;
}

.page-author-apply .aa-input,
.page-author-apply .aa-textarea {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: var(--font-family);
}

.page-author-apply .aa-textarea {
  resize: vertical;
  min-height: 88px;
}

.page-author-apply .aa-input:focus,
.page-author-apply .aa-textarea:focus {
  outline: none;
  border-color: #f96a60;
}

.page-author-apply .aa-upload-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}

.page-author-apply .aa-file {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.page-author-apply .aa-upload-hint {
  font-size: 0.8125rem;
  color: #999;
}

.page-author-apply .aa-preview {
  margin-top: 10px;
}

.page-author-apply .aa-preview-img {
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #eee;
}

.page-author-apply .aa-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.page-author-apply .aa-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 0.9375rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-family);
  text-decoration: none;
  border: 1px solid transparent;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.page-author-apply .aa-btn--primary {
  background: #f96a60;
  color: #fff;
  border-color: #f96a60;
}

.page-author-apply .aa-btn--primary:hover {
  opacity: 0.92;
}

.page-author-apply .aa-btn--line {
  background: #fff;
  color: #333;
  border-color: #ccc;
}

.page-author-apply .aa-btn--line:hover {
  border-color: #f96a60;
  color: #f96a60;
}

.page-author-apply .aa-btn--ghost {
  background: transparent;
  color: #666;
  border-color: #ddd;
}

.page-author-apply .aa-btn--ghost:hover {
  border-color: #bbb;
  color: #333;
}

/* ============================================================
   征文专区（Figma 1:1673）
   ============================================================ */
.page-submission-zone .cf-main {
  /* background: #f8f9f9; */
  padding: 44px 0 48px;
  min-height: 40vh;
}

.page-submission-zone .cf-inner {
  max-width: 1196px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-submission-zone .cf-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin: 0 0 40px;
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 400;
}

.page-submission-zone .cf-page-title {
  color: #333;
}

.page-submission-zone .cf-page-count {
  color: #999;
  font-size: 1.875rem;
}

.page-submission-zone .cf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 385px));
  justify-content: space-between;
  gap: 20px 21px;
  margin-bottom: 8px;
}

.page-submission-zone .cf-card {
  display: flex;
  flex-direction: column;
  min-height: 417px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px 5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* 整卡可点进详情：外层为 <a.cf-card--link> */
.page-submission-zone .cf-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.page-submission-zone .cf-card--link:hover {
  box-shadow: 0 6px 12px 6px rgba(0, 0, 0, 0.06);
}

.page-submission-zone .cf-card-cover-wrap {
  flex-shrink: 0;
  height: 225px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.page-submission-zone .cf-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-submission-zone .cf-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px 21px 20px;
  min-height: 0;
}

.page-submission-zone .cf-card-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: #000;
  margin: 0 0 10px;
  line-height: 1.3;
}

.page-submission-zone .cf-card-meta {
  font-size: 1rem;
  line-height: 26px;
  color: #666;
  margin: 0 0 12px;
}

.page-submission-zone .cf-card-line {
  line-height: 0;
  margin: 0 0 12px;
}

.page-submission-zone .cf-card-line-img {
  width: 100%;
  max-width: 332px;
  height: auto;
  display: block;
}

.page-submission-zone .cf-card-enter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  font-size: 1rem;
  line-height: 26px;
  color: #666;
  text-decoration: none;
  transition: opacity 0.2s;
}

.page-submission-zone .cf-card--link:hover .cf-card-enter {
  opacity: 0.85;
}

.page-submission-zone .cf-card-enter-ico {
  flex-shrink: 0;
  display: block;
}

.page-submission-zone .cf-line-footer {
  margin: 24px 0 8px;
}

.page-submission-zone .cf-pagination {
  padding-bottom: 8px;
}

@media (max-width: 1280px) {
  .page-submission-zone .cf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

@media (max-width: 768px) {
  .page-submission-zone .cf-page-head {
    font-size: 1.5rem;
    margin-bottom: 28px;
  }

  .page-submission-zone .cf-page-count {
    font-size: 1.5rem;
  }

  .page-submission-zone .cf-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-submission-zone .cf-card {
    min-height: 0;
  }
}

/* ============================================================
   征文活动详情（Figma 1:1816）
   ============================================================ */
.page-submission-detail .sd-main {
  /* background: #f8f9f9; */
  padding-bottom: 0;
}

.page-submission-detail .sd-hero {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;
}

.page-submission-detail .sd-hero-img {
  width: 100%;
  height: 503px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-submission-detail .sd-article {
  padding: 0 0 8px;
}

.page-submission-detail .sd-inner {
  max-width: 1196px;
  margin: 0 auto;
  padding: 33px 24px 0;
  box-sizing: border-box;
}

.page-submission-detail .sd-header {
  margin-bottom: 24px;
}

.page-submission-detail .sd-title {
  font-size: 1.875rem;
  font-weight: 400;
  color: #000;
  margin: 0 0 16px;
  line-height: 1.2;
}

.page-submission-detail .sd-meta {
  font-size: 1rem;
  line-height: 26px;
  color: #666;
  margin: 0;
}

.page-submission-detail .sd-prose {
  font-size: 1rem;
  line-height: 40px;
  color: #000;
  margin: 0 0 32px;
}

.page-submission-detail .sd-prose p {
  margin: 0 0 1em;
}

.page-submission-detail .sd-prose p:last-child {
  margin-bottom: 0;
}

.page-submission-detail .sd-figure {
  margin: 0 0 32px;
  line-height: 0;
}

.page-submission-detail .sd-figure-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.page-submission-detail .sd-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 56px;
}

.page-submission-detail .sd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  width: 100%;
  max-width: 481px;
  min-height: 66px;
  padding: 0 32px;
  border-radius: 90px;
  font-size: 1.125rem;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(101.45deg, #f95a5b 3.07%, #fe9930 103.92%);
  transition: opacity 0.2s;
  box-sizing: border-box;
}

.page-submission-detail .sd-cta:hover {
  opacity: 0.92;
}

.page-submission-detail .sd-cta.sd-cta--submit {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.page-submission-detail .sd-enroll {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.page-submission-detail .sd-enroll-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #000;
  margin: 0 0 16px;
  line-height: 1.3;
}

.page-submission-detail .sd-enroll-tip {
  font-size: 1rem;
  line-height: 26px;
  color: #333;
  margin: 0 0 16px;
}

.page-submission-detail .sd-enroll-tip--muted {
  color: #888;
}

.page-submission-detail .sd-enroll-tip--ok {
  color: #2e7d32;
}

.page-submission-detail .sd-enroll-form {
  max-width: 640px;
}

.page-submission-detail .sd-enroll-field {
  display: block;
  margin-bottom: 16px;
}

.page-submission-detail .sd-enroll-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 8px;
}

.page-submission-detail .sd-enroll-input,
.page-submission-detail .sd-enroll-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  background: #fff;
  font-family: inherit;
}

.page-submission-detail .sd-enroll-textarea {
  resize: vertical;
  min-height: 120px;
}

.page-submission-detail .sd-enroll-input:focus,
.page-submission-detail .sd-enroll-textarea:focus {
  outline: none;
  border-color: #fe9930;
  box-shadow: 0 0 0 2px rgba(254, 153, 48, 0.15);
}

.page-submission-detail .sd-enroll .sd-cta-wrap {
  padding-top: 8px;
  padding-bottom: 0;
}

.page-submission-detail .sd-footer-line {
  width: 100%;
  line-height: 0;
  margin: 0;
}

.page-submission-detail .sd-footer-line-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

@media (max-width: 1024px) {
  .page-submission-detail .sd-hero-img {
    height: min(380px, 42vw);
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .page-submission-detail .sd-inner {
    padding-top: 24px;
  }

  .page-submission-detail .sd-title {
    font-size: 1.5rem;
  }

  .page-submission-detail .sd-prose {
    line-height: 1.75;
  }

  .page-submission-detail .sd-cta-wrap {
    padding-bottom: 40px;
  }
}

/* ============================================================
   加入社群（Figma 1:1962）
   ============================================================ */
.page-join-community .jc-main {
  background: #f8f9f9;
  padding: 44px 0 0;
  min-height: 40vh;
}

.page-join-community .jc-inner {
  max-width: 1186px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.page-join-community .jc-title {
  font-size: 1.875rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 32px;
}

.page-join-community .jc-section {
  margin-bottom: 24px;
}

.page-join-community .jc-section-head {
  height: 47px;
  line-height: 47px;
  padding: 0 24px;
  background: #d1dfe4;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin: 0;
}

.page-join-community .jc-fields {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.page-join-community .jc-input,
.page-join-community .jc-textarea {
  width: 100%;
  max-width: 772px;
  min-height: 59px;
  padding: 16px 20px;
  border: 1px solid #dadada;
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-family);
  color: #333;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
}

.page-join-community .jc-textarea {
  min-height: 140px;
  resize: vertical;
  text-align: left;
}

.page-join-community .jc-field--tall .jc-textarea {
  min-height: 209px;
}

.page-join-community .jc-field--avatar {
  max-width: 772px;
  min-height: 209px;
  border: 1px solid #dadada;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 20px 24px;
  box-sizing: border-box;
}

.page-join-community .jc-avatar-label {
  font-size: 1rem;
  color: #333;
  margin-bottom: 16px;
}

.page-join-community .jc-avatar-img {
  border-radius: 50%;
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.page-join-community .jc-agree-bar {
  margin-top: 8px;
  min-height: 47px;
  background: #eff2f3;
  display: flex;
  align-items: center;
  padding: 0 20px;
  max-width: 1196px;
}

.page-join-community .jc-agree {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #999;
}

.page-join-community .jc-checkbox {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  flex-shrink: 0;
  accent-color: #f96a60;
}

.page-join-community .jc-submit-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 0 32px;
}

.page-join-community .jc-submit {
  min-width: 280px;
  width: 100%;
  max-width: 481px;
  min-height: 66px;
  border: none;
  border-radius: 90px;
  font-size: 1.125rem;
  color: #fff;
  font-family: var(--font-family);
  cursor: pointer;
  background: linear-gradient(101.45deg, #f95a5b 3.07%, #fe9930 103.92%);
  transition: opacity 0.2s;
}

.page-join-community .jc-submit:hover {
  opacity: 0.92;
}

.page-join-community .jc-footer-line {
  line-height: 0;
  width: 100%;
}

.page-join-community .jc-footer-line-img {
  width: 100%;
  height: auto;
  display: block;
}

.page-join-community .jc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .page-join-community .jc-input,
  .page-join-community .jc-textarea {
    text-align: left;
  }
}

/* ============================================================
   发布投稿（Figma 1:1878）
   ============================================================ */
.page-publish-submission .ps-main {
  background: #f8f9f9;
  padding-bottom: 0;
}

.page-publish-submission .ps-inner {
  max-width: 1196px;
  margin: 0 auto;
  padding: 44px 24px 24px;
}

.page-publish-submission .ps-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.page-publish-submission .ps-title {
  font-size: 1.875rem;
  font-weight: 400;
  color: #333;
  margin: 0;
}

.page-publish-submission .ps-publish-mini {
  flex-shrink: 0;
  width: 100px;
  height: 60px;
  border: none;
  border-radius: 90px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-family);
  cursor: pointer;
  background: linear-gradient(92.65deg, #f95a5b 3.07%, #fe9930 103.92%);
}

.page-publish-submission .ps-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.page-publish-submission .ps-upload-card {
  background: #fff;
  border: 1px solid #dadada;
  border-radius: 20px;
  min-height: 530px;
  padding: 32px 24px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-publish-submission .ps-upload-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
}

.page-publish-submission .ps-upload-icon-wrap {
  position: relative;
  /* width: 47px;
  height: 47px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-publish-submission .ps-upload-ring {
  position: absolute;
  inset: 0;
}

.page-publish-submission .ps-upload-plus {
  position: relative;
  z-index: 1;
}

.page-publish-submission .ps-upload-label {
  font-size: 1rem;
  color: #333;
  margin: 0;
}

.page-publish-submission .ps-upload-hint {
  font-size: 0.875rem;
  line-height: 24px;
  color: #666;
  text-align: center;
  max-width: 218px;
  margin: 24px 0 0;
}

.page-publish-submission .ps-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-publish-submission .ps-block-head {
  height: 47px;
  line-height: 47px;
  padding: 0 24px;
  background: #d1dfe4;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  margin: 0;
}

.page-publish-submission .ps-block-body {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.page-publish-submission .ps-block-body--flush {
  padding-top: 0;
  padding-bottom: 16px;
}

.page-publish-submission .ps-block-body--cat {
  padding-top: 16px;
  padding-bottom: 8px;
}

.page-publish-submission .ps-cat-tip {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fff9e6;
  border-radius: 6px;
  border: 1px solid #f0e6c8;
}

.page-publish-submission .ps-cat-fieldset {
  border: none;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}

.page-publish-submission .ps-cat-legend {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding: 0;
}

.page-publish-submission .ps-cat-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-publish-submission .ps-cat-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #eef2f5;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  font-size: 0.9375rem;
  color: #333;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.page-publish-submission .ps-cat-radio:has(input:checked) {
  background: #e6f4f1;
  border-color: #71c9db;
}

.page-publish-submission .ps-cat-radio input {
  margin: 0;
  flex-shrink: 0;
  accent-color: #016226;
}

/* 投稿页 · 三级分类联动 */
.page-publish-submission .ps-cat-cascade {
  margin: 0;
}

.page-publish-submission .ps-cat-cascade-card {
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fa 100%);
  border: 1px solid #e1e6ea;
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 6px 28px rgba(17, 24, 39, 0.06);
}

.page-publish-submission .ps-cat-cascade-title {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef1f4;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2c3338;
  letter-spacing: 0.01em;
}

.page-publish-submission .ps-cat-cascade-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
}

.page-publish-submission .ps-cat-step {
  flex: 1 1 160px;
  min-width: 148px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-publish-submission .ps-cat-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-publish-submission .ps-cat-step-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f95a5b 0%, #fe9930 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(249, 90, 91, 0.32);
}

.page-publish-submission .ps-cat-step-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5560;
}

.page-publish-submission .ps-cat-step-select {
  width: 100%;
  min-height: 50px;
  padding: 0 40px 0 16px;
  border: 1px solid #cfd6dd;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: #1f2933;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378899a' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.page-publish-submission .ps-cat-step-select:hover {
  border-color: #f96a60;
}

.page-publish-submission .ps-cat-step-select:focus {
  outline: none;
  border-color: #f96a60;
  box-shadow: 0 0 0 3px rgba(249, 106, 96, 0.22);
}

.page-publish-submission .ps-cat-step-join {
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 12px;
  color: #b8c2cc;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 200;
  user-select: none;
}

.page-publish-submission .ps-cat-cascade-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef1f4;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #6b7785;
}

.page-publish-submission .ps-cat-cascade-foot strong {
  color: #f96a60;
  font-weight: 600;
}

@media (max-width: 768px) {
  .page-publish-submission .ps-cat-cascade-card {
    padding: 18px 16px 16px;
  }

  .page-publish-submission .ps-cat-cascade-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .page-publish-submission .ps-cat-step {
    max-width: none;
  }

  .page-publish-submission .ps-cat-step-join {
    align-self: center;
    margin: 2px 0;
    transform: rotate(90deg);
  }
}

.page-publish-submission .ps-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.page-publish-submission .ps-tag-grid--dense {
  gap: 8px 12px;
}

.page-publish-submission .ps-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #333;
  cursor: pointer;
}

.page-publish-submission .ps-check input {
  margin: 0;
  flex-shrink: 0;
  accent-color: #016226;
}

.page-publish-submission .ps-cat-custom {
  margin-top: 8px;
}

.page-publish-submission .ps-cat-custom-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}

.page-publish-submission .ps-cat-custom-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dadada;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: #333;
  background: #fff;
  box-sizing: border-box;
}

.page-publish-submission .ps-cat-custom-input::placeholder {
  color: #bbb;
}

.page-publish-submission .ps-input,
.page-publish-submission .ps-textarea {
  width: 100%;
  min-height: 59px;
  padding: 16px 20px;
  border: 1px solid #dadada;
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-family);
  color: #333;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
}

.page-publish-submission .ps-textarea {
  min-height: 188px;
  text-align: left;
  resize: vertical;
}

.page-publish-submission .ps-editor-box {
  border: 1px solid #dadada;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  line-height: 1.6;
  padding: 12px;
}

.page-publish-submission .ps-editor-textarea {
  min-height: 360px;
}

.page-publish-submission .ps-public {
  padding: 16px 0 8px 29px;
}

.page-publish-submission .ps-public-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.page-publish-submission .ps-public-label {
  font-size: 1rem;
  color: #000;
}

.page-publish-submission .ps-public-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  user-select: none;
}

.page-publish-submission .ps-public-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #f96a60;
  cursor: pointer;
  flex-shrink: 0;
}

.page-publish-submission .ps-public-check-text {
  line-height: 1.4;
}

.page-publish-submission .ps-public-hint {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 24px;
  color: #f96a60;
  max-width: 420px;
}

.page-publish-submission .ps-next-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 0 48px;
}

.page-publish-submission .ps-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  width: 100%;
  max-width: 481px;
  min-height: 66px;
  padding: 0 24px;
  border-radius: 90px;
  font-size: 1.125rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(101.45deg, #f95a5b 3.07%, #fe9930 103.92%);
  transition: opacity 0.2s;
  box-sizing: border-box;
}

.page-publish-submission .ps-next-btn:hover {
  opacity: 0.92;
}

.page-publish-submission .ps-footer-line {
  line-height: 0;
  width: 100%;
}

.page-publish-submission .ps-footer-line-img {
  width: 100%;
  height: auto;
  display: block;
}

.page-publish-submission .ps-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .page-publish-submission .ps-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-publish-submission .ps-upload-card {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .page-publish-submission .ps-input,
  .page-publish-submission .ps-textarea {
    text-align: left;
  }

}

/* ============================================================
   个人中心（Figma 1:1460）
   ============================================================ */
.page-user-center .uc-main {
  background: #f8f9f9;
  padding: 44px 0 0;
}

.page-user-center .uc-inner {
  max-width: 1196px;
  margin: 0 auto;
  padding: 0 24px 48px;
  position: relative;
}

.page-user-center .uc-profile-zone {
  position: relative;
  margin-bottom: 32px;
}

.page-user-center .uc-user-menu {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.page-user-center .uc-menu-trigger {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  display: block;
}

.page-user-center .uc-menu-av {
  border-radius: 50%;
  display: block;
}

.page-user-center .uc-menu-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 128px;
  padding: 12px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.13);
  flex-direction: column;
  gap: 0;
}

.page-user-center .uc-menu-panel--open {
  display: flex;
}

.page-user-center .uc-menu-item {
  padding: 8px 16px;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.page-user-center .uc-menu-item:hover {
  background: #f5f5f5;
}

.page-user-center .uc-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-right: 160px;
  margin-bottom: 24px;
}

.page-user-center .uc-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.page-user-center .uc-hero-text {
  flex: 1;
  min-width: 0;
}

.page-user-center .uc-name {
  font-size: 1.125rem;
  color: #000;
  margin: 0 0 4px;
  line-height: 30px;
}

.page-user-center .uc-name-link {
  color: inherit;
  text-decoration: none;
}

.page-user-center .uc-name-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.page-user-center .uc-bio {
  font-size: 0.875rem;
  color: #999;
  margin: 0;
  line-height: 30px;
}

.page-user-center .uc-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.page-user-center .uc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-user-center .uc-stat-label {
  font-size: 1rem;
  color: #999;
  line-height: 30px;
}

.page-user-center .uc-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
  line-height: 30px;
}

.page-user-center .uc-stat-divider img {
  width: 66px;
  height: 1px;
  transform: rotate(90deg);
  flex-shrink: 0;
}

.page-user-center .uc-follow {
  width: 108px;
  height: 34px;
  border-radius: 5px;
  border: none;
  background: #f96a60;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-family);
  cursor: pointer;
  margin-left: auto;
}

.page-user-center .uc-signature-strip {
  background: #f6f6f1;
  min-height: 168px;
  padding: 20px 26px;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.page-user-center .uc-sig-line {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 30px;
  color: #000;
}

.page-user-center .uc-sig-strong {
  font-weight: 400;
}

.page-user-center .uc-sig-line--sub {
  font-size: 1rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-user-center .uc-edit-ico {
  display: inline-block;
  vertical-align: middle;
}

.page-user-center .uc-section {
  margin-bottom: 40px;
}

.page-user-center .uc-section--last {
  margin-bottom: 24px;
}

.page-user-center .uc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.page-user-center .uc-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  line-height: 30px;
}

.page-user-center .uc-publish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: #f96a60;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.page-user-center .uc-publish-btn:hover {
  color: #fff;
  opacity: 0.9;
}

.page-user-center .uc-works {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
}

.page-user-center .uc-works-head {
  display: grid;
  grid-template-columns: minmax(100px, 1.2fr) minmax(140px, 2fr) minmax(72px, 0.8fr) minmax(80px, 0.9fr) 100px 120px 150px;
  align-items: stretch;
  min-height: 47px;
  background: #d1dfe4;
  font-size: 1rem;
  color: #000;
}

.page-user-center .uc-wh-cell {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.page-user-center .uc-wh-add {
  background: #f96a60;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.page-user-center .uc-wh-add-inner {
  font-size: 1rem;
  white-space: nowrap;
}

.page-user-center .uc-works-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.2fr) minmax(140px, 2fr) minmax(72px, 0.8fr) minmax(80px, 0.9fr) 100px 120px 150px;
  align-items: center;
  min-height: 52px;
  padding: 12px 0;
  font-size: 1rem;
}

.page-user-center .uc-wc-spacer {
  min-height: 1px;
}

.page-user-center .uc-wc-title {
  padding: 0 12px;
}

.page-user-center .uc-wc-title a {
  color: #f96a60;
  text-decoration: none;
}

.page-user-center .uc-wc-title a:hover {
  text-decoration: underline;
}

.page-user-center .uc-wc-date,
.page-user-center .uc-wc-count,
.page-user-center .uc-wc-audit {
  padding: 0 12px;
  color: #333;
}

.page-user-center .uc-wc-sort {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
}

.page-user-center .uc-sort-field {
  margin: 0;
  display: block;
}

.page-user-center .uc-sort-input {
  width: 72px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #dadada;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  color: #333;
  background: #fff;
}

.page-user-center .uc-sort-input:focus {
  outline: none;
  border-color: #f96a60;
}

.page-user-center .uc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-user-center .uc-wc-action {
  padding: 0 12px;
}

.page-user-center .uc-wc-action a {
  color: #00c0b6;
  text-decoration: none;
  margin-right: 12px;
}

.page-user-center .uc-wc-action a:hover {
  text-decoration: underline;
}

.page-user-center .uc-works-line {
  line-height: 0;
  margin: 0;
}

.page-user-center .uc-row-line-img {
  width: 100%;
  height: auto;
  display: block;
}

.page-user-center .uc-fans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.page-user-center .uc-fan-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.page-user-center .uc-fan-av {
  border-radius: 50%;
  flex-shrink: 0;
}

.page-user-center .uc-fan-name {
  font-size: 1.125rem;
  margin: 0 0 4px;
  line-height: 30px;
}

.page-user-center .uc-fan-bio {
  font-size: 0.875rem;
  color: #999;
  margin: 0;
  line-height: 30px;
}

.page-user-center .uc-communities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.page-user-center .uc-com-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  min-height: 133px;
  padding: 16px 18px;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.page-user-center .uc-com-card:first-child {
  box-shadow: -1px 6px 5.1px 5px rgba(0, 0, 0, 0.03);
}

.page-user-center .uc-com-av {
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.page-user-center .uc-com-name {
  font-size: 1.125rem;
  margin: 0 0 6px;
  line-height: 30px;
}

.page-user-center .uc-com-meta {
  margin: 0;
  font-size: 1rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 30px;
}

.page-user-center .uc-com-people {
  flex-shrink: 0;
}

.page-user-center .uc-footer-line {
  line-height: 0;
  width: 100%;
}

.page-user-center .uc-footer-line-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .page-user-center .uc-section-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .page-user-center .uc-hero {
    padding-right: 0;
  }

  .page-user-center .uc-user-menu {
    position: static;
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
  }

  .page-user-center .uc-menu-panel {
    right: auto;
    left: 0;
  }

  .page-user-center .uc-works-head {
    display: none;
  }

  .page-user-center .uc-works-row {
    grid-template-columns: 1fr;
    gap: 8px;
    border-bottom: 1px solid #e5e5e5;
    padding: 16px 12px;
  }

  .page-user-center .uc-wh-add {
    display: none;
  }

  .page-user-center .uc-communities {
    grid-template-columns: 1fr;
  }

  .page-user-center .uc-fans {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-user-center .uc-follow {
    width: 100%;
    margin-left: 0;
  }

  .page-user-center .uc-stats {
    margin-left: 0;
  }
}

/* ==================== 阅读记录页（Figma 1:1591） ==================== */
.page-reading-history .sub-nav-inner--with-user {
  gap: 16px;
}

.page-reading-history .rh-sub-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-reading-history .rh-sub-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.page-reading-history .rh-main {
  position: relative;
  background: #fff;
}

.page-reading-history .rh-inner {
  max-width: 1195px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  width: 100%;
}

.page-reading-history .rh-tabs-row {
  position: relative;
  padding-bottom: 10px;
}

.page-reading-history .rh-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 48px;
}

.page-reading-history .rh-tab {
  font-size: 1.875rem;
  font-weight: 400;
  color: #666;
  line-height: 1.2;
  white-space: nowrap;
}

.page-reading-history .rh-tab--active {
  color: #333;
}

.page-reading-history .rh-tab--video {
  font-size: 1.5rem;
}

.page-reading-history .rh-tab-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: #333;
  -webkit-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

.page-reading-history .rh-tab-line {
  line-height: 0;
  margin: 0 0 8px;
}

.page-reading-history .rh-tab-line-img {
  width: 100%;
  max-width: 1195px;
  height: auto;
}

.page-reading-history .rh-block-title {
  font-size: 1.625rem;
  font-weight: 400;
  color: #333;
  margin: 28px 0 20px;
  line-height: 1.3;
}

.page-reading-history .rh-books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 93px;
  -moz-column-gap: 93px;
  column-gap: 93px;
  row-gap: 0;
}

.page-reading-history .rh-books-grid .bc-book-card {
  border-bottom: none;
  background: none;
  padding-bottom: 22px;
  margin-bottom: 0;
}

.page-reading-history .rh-books-grid .bc-book-card:nth-child(4n + 1),
.page-reading-history .rh-books-grid .bc-book-card:nth-child(4n + 2),
.page-reading-history .rh-books-grid .bc-book-card:nth-child(4n + 3),
.page-reading-history .rh-books-grid .bc-book-card:nth-child(4n + 4) {
  border-bottom: none;
  background: none;
  padding-bottom: 22px;
  margin-bottom: 0;
}

.page-reading-history .rh-row-lines {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 93px;
  margin-top: 4px;
  margin-bottom: 32px;
  max-width: 1195px;
}

.page-reading-history .rh-row-line {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  line-height: 0;
}

.page-reading-history .rh-line-img {
  width: 100%;
  max-width: 515px;
  height: auto;
  display: block;
}

.page-reading-history .rh-panel--videos {
  margin-top: 8px;
}

.page-reading-history .rh-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 274px));
  gap: 32px 48px;
}

.page-reading-history .rh-video-card {
  min-width: 0;
}

.page-reading-history .rh-video-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  line-height: 0;
}

.page-reading-history .rh-video-img {
  width: 100%;
  height: auto;
  display: block;
}

.page-reading-history .rh-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-reading-history .rh-play-ico {
  display: block;
  width: 48px;
  height: auto;
}

.page-reading-history .rh-video-time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.page-reading-history .rh-video-title {
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

.page-reading-history .rh-footer-line {
  line-height: 0;
  width: 100%;
}

.page-reading-history .rh-footer-line-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .page-reading-history .rh-books-grid {
    grid-template-columns: 1fr;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }

  .page-reading-history .rh-row-lines {
    display: none;
  }

  .page-reading-history .rh-videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .page-reading-history .rh-tabs {
    gap: 28px;
  }

  .page-reading-history .rh-tab {
    font-size: 1.375rem;
  }

  .page-reading-history .rh-tab--video {
    font-size: 1.125rem;
  }

  .page-reading-history .rh-videos-grid {
    grid-template-columns: 1fr;
  }

  .page-reading-history .sub-nav-inner--with-user {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* ==================== 登录页（Figma 1:2627） ==================== */
.page-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

.page-login .login-main {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 560px;
  isolation: isolate;
}

.page-login .login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.page-login .login-bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.page-login .login-main-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.page-login .login-card {
  width: 100%;
  max-width: 459px;
  min-height: 479px;
  padding: 47px 40px 40px;
  background: #fff;
  border-radius: 20px;
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.page-login .login-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: #000;
  margin: 0 0 8px;
  line-height: 1.3;
}

.page-login .login-sub {
  font-size: 1rem;
  color: #999;
  margin: 0 0 24px;
  line-height: 1.5;
}

.page-login .login-form {
  max-width: 380px;
}

.page-login .login-field {
  margin-bottom: 21px;
}

.page-login .login-field--phone .login-phone-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 57px;
  padding: 0 14px 0 18px;
  background: #f3f5f4;
  border: 1px solid #f96a60;
  border-radius: 10px;
  gap: 10px;
}

.page-login .login-cc {
  font-size: 1rem;
  color: #000;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-login .login-cc-divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 19px;
}

.page-login .login-divider-img {
  width: auto;
  height: 19px;
  display: block;
}

.page-login .login-input--phone {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: var(--font-family);
  color: #333;
  outline: none;
}

.page-login .login-input--phone::-webkit-input-placeholder {
  color: #999;
}

.page-login .login-input--phone::-moz-placeholder {
  color: #999;
}

.page-login .login-input--phone:-ms-input-placeholder {
  color: #999;
}

.page-login .login-input--phone::placeholder {
  color: #999;
}

.page-login .login-field--code {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 57px;
  padding: 0 16px;
  background: #f3f5f4;
  border-radius: 10px;
}

.page-login .login-input--code {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: var(--font-family);
  color: #333;
  outline: none;
}

.page-login .login-input--code::-webkit-input-placeholder {
  color: #999;
}

.page-login .login-input--code::-moz-placeholder {
  color: #999;
}

.page-login .login-input--code:-ms-input-placeholder {
  color: #999;
}

.page-login .login-input--code::placeholder {
  color: #999;
}

.page-login .login-get-code {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 1rem;
  font-family: var(--font-family);
  color: #f96a60;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

.page-login .login-get-code:hover {
  opacity: 0.88;
}

.page-login .login-agree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #666;
}

.page-login .login-radio-input {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 3px 10px 0 0;
  cursor: pointer;
  accent-color: #f96a60;
}

.page-login .login-agree-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.page-login .login-agree-links {
  color: #f96a60;
}

.page-login .login-submit {
  width: 100%;
  max-width: 380px;
  height: 57px;
  border-radius: 60px;
  background: #f96a60;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-family);
  font-weight: 400;
}

.page-login .login-submit:hover {
  opacity: 0.94;
}

@media (max-width: 900px) {
  .page-login .login-main-inner {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .page-login .login-card {
    padding: 36px 28px 32px;
  }
}

@media (max-width: 480px) {
  .page-login .login-main {
    min-height: 480px;
  }

  .page-login .login-main-inner {
    padding: 24px 16px 40px;
  }

  .page-login .login-form {
    max-width: none;
  }

  .page-login .login-submit {
    max-width: none;
  }
}

/* ============================================================
   会员资料 / 注册等页：与 FastAdmin frontend.css 同页时，
   保留站点头尾 .container 版心，避免被 Bootstrap 覆盖错乱
   ============================================================ */
.header .container,
.sub-nav .container,
.footer .container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.page-member-settings .member-settings-main {
  padding: 32px 0 56px;
  min-height: 40vh;
}

.page-member-settings .sidenav .list-group-item {
  border-radius: 8px;
}

.page-member-settings #content-container.container {
  max-width: var(--container-max);
}

/* ============================================================
   编辑资料 /user/profile（与会员中心 uc-* 统一，不依赖 Bootstrap）
   ============================================================ */
.page-user-profile-edit .uc-pe-breadcrumb {
  margin-bottom: 24px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-gray);
}

.page-user-profile-edit .uc-pe-bc-link {
  color: var(--color-primary);
  text-decoration: none;
}

.page-user-profile-edit .uc-pe-bc-link:hover {
  text-decoration: underline;
}

.page-user-profile-edit .uc-pe-bc-sep {
  margin: 0 10px;
  color: #ccc;
}

.page-user-profile-edit .uc-pe-bc-current {
  color: var(--color-text);
}

.page-user-profile-edit .uc-profile-edit-section {
  max-width: 640px;
}

.page-user-profile-edit .uc-pe-lead {
  margin: -8px 0 24px;
  font-size: 0.875rem;
  color: var(--color-text-gray);
  line-height: 1.65;
}

.page-user-profile-edit .uc-pe-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-user-profile-edit .uc-pe-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 600px) {
  .page-user-profile-edit .uc-pe-field:not(.uc-pe-field--avatar) {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .page-user-profile-edit .uc-pe-field:not(.uc-pe-field--avatar) .uc-pe-label {
    flex: 0 0 96px;
    margin: 0;
    text-align: right;
  }

  .page-user-profile-edit .uc-pe-field:not(.uc-pe-field--avatar) .uc-pe-input,
  .page-user-profile-edit .uc-pe-field:not(.uc-pe-field--avatar) .uc-pe-static {
    flex: 1;
    min-width: 0;
  }
}

.page-user-profile-edit .uc-pe-label {
  font-size: 0.9375rem;
  color: var(--color-text);
  font-weight: 500;
}

.page-user-profile-edit .uc-pe-input {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-family);
  transition: border-color 0.2s;
}

.page-user-profile-edit .uc-pe-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(1, 98, 38, 0.12);
}

.page-user-profile-edit .uc-pe-static {
  font-size: 1rem;
  color: var(--color-text-gray);
  padding: 10px 0;
  word-break: break-all;
}

.page-user-profile-edit .uc-pe-field--readonly .uc-pe-static {
  padding: 6px 0;
}

.page-user-profile-edit .uc-pe-field--avatar .uc-pe-avatar-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.page-user-profile-edit .uc-pe-avatar-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
}

.page-user-profile-edit .uc-pe-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-user-profile-edit .uc-pe-avatar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.page-user-profile-edit .uc-pe-file {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.page-user-profile-edit .uc-pe-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.page-user-profile-edit .uc-pe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
}

.page-user-profile-edit .uc-pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-family);
  text-decoration: none;
  border: none;
  line-height: 1.3;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.page-user-profile-edit .uc-pe-btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.page-user-profile-edit .uc-pe-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
}

.page-user-profile-edit .uc-pe-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.page-user-profile-edit .uc-pe-btn--line {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid #b8d4c8;
}

.page-user-profile-edit .uc-pe-btn--line:hover:not(:disabled) {
  background: #f4faf7;
}

.page-user-profile-edit .uc-pe-btn--ghost {
  background: transparent;
  color: var(--color-text-gray);
  border: 1px solid #ddd;
}

.page-user-profile-edit .uc-pe-btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-user-profile-edit .uc-pe-muted {
  color: var(--color-text-light);
}

/* ==================== 消息通知 ==================== */
.page-notifications .un-main,
.page-notification-detail .un-main {
  padding: 24px 0 48px;
}

.page-notifications .un-inner,
.page-notification-detail .un-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.un-page-head {
  margin-bottom: 24px;
}

.un-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.35;
}

.un-empty {
  margin: 0;
  padding: 48px 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: #888;
  line-height: 1.6;
}

.un-empty code {
  font-size: 0.8125rem;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.un-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e8eaeb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.un-item {
  border-bottom: 1px solid #eee;
}

.un-item:last-child {
  border-bottom: 0;
}

.un-item-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: #333;
  transition: background 0.15s;
}

.un-item-link:hover {
  background: #f8f9fa;
}

.un-item-title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.un-item-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: #999;
}

.un-item-time {
  white-space: nowrap;
}

.un-pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.un-footer-line {
  margin-top: 32px;
  text-align: center;
}

.un-footer-line-img {
  width: 100%;
  max-width: 1920px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.un-back-nav {
  margin-bottom: 20px;
}

.un-back-link {
  font-size: 0.9375rem;
  color: #f96a60;
  text-decoration: none;
}

.un-back-link:hover {
  text-decoration: underline;
}

.un-detail-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.un-detail-title {
  font-size: 1.375rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 8px;
  line-height: 1.4;
}

.un-detail-time {
  margin: 0;
  font-size: 0.875rem;
  color: #999;
}

.un-detail-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==================== 新闻资讯 ==================== */
.page-news-index .nw-main,
.page-news-detail .nw-main {
  padding: 20px 0 48px;
}

.nw-inner {
  max-width: 1196px;
  margin: 0 auto;
  padding: 0 16px;
}

.nw-inner--article {
  max-width: 880px;
}

.nw-crumb {
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 20px;
}

.nw-crumb-link {
  color: #f96a60;
  text-decoration: none;
}

.nw-crumb-link:hover {
  text-decoration: underline;
}

.nw-crumb-sep {
  margin: 0 8px;
  color: #ccc;
}

.nw-crumb-current {
  color: #333;
}

.nw-crumb-current--truncate {
  display: inline-block;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.nw-page-head {
  margin-bottom: 28px;
}

.nw-page-title {
  font-size: 1.75rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 8px;
  line-height: 1.3;
}

.nw-page-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: #888;
}

.nw-empty {
  margin: 0;
  padding: 48px 16px;
  text-align: center;
  color: #999;
  font-size: 0.9375rem;
}

.nw-empty code {
  font-size: 0.8125rem;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.nw-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat(3, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

@media (max-width: 1024px) {
  .nw-grid {
    -ms-grid-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nw-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.nw-card {
  margin: 0;
  border: 1px solid #e8eaeb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.nw-card:hover {
  border-color: #e0e0e0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.nw-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nw-card-cover {
  aspect-ratio: 16 / 9;
  background: #f0f1f3;
  overflow: hidden;
}

.nw-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nw-card-cover--placeholder {
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: linear-gradient(135deg, #f5f6f7 0%, #e8eaed 100%);
}

.nw-card-body {
  padding: 16px 18px 18px;
}

.nw-card-title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nw-card-intro {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.55;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nw-card-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: #aaa;
}

.nw-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.nw-article-head {
  margin-bottom: 20px;
}

.nw-article-title {
  font-size: 1.75rem;
  font-weight: 500;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.35;
}

.nw-article-meta {
  margin: 0;
  font-size: 0.875rem;
  color: #999;
}

.nw-article-cover {
  margin: 0 0 24px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}

.nw-article-cover-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.nw-article-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #fafafa;
  border-left: 3px solid #f96a60;
  border-radius: 0 8px 8px 0;
}

.nw-article-body {
  font-size: 1rem;
  line-height: 1.85;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}

.nw-back-wrap {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.nw-back-link {
  font-size: 0.9375rem;
  color: #f96a60;
  text-decoration: none;
}

.nw-back-link:hover {
  text-decoration: underline;
}