/* ========== 平台动态页面样式 ========== */

/* 页面整体 */
.pd-page {
    width: 100%;
    background: #F2F6FF;
    overflow: hidden;
}

/* 通用内容容器 */
.pd-container {
    width: 75rem;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===========================================
   一、Hero 区（顶部 Banner，背景图形式）
   - 用 background-image 渲染而非 <img>，避免在宽屏下被 object-fit: cover 拉伸导致的文字锯齿
   - 配合 image-rendering: high-quality 改善浏览器缩放算法
   - 终极方案：提供 2x 分辨率图片（topBanner@2x.png，宽 ≥ 3840px）以彻底避免缩放
   =========================================== */
.pd-hero {
    position: relative;
    width: 100%;
    height: 23.75rem;
    overflow: hidden;
    box-sizing: border-box;
}

.pd-hero-banner {
    background: url("/static/img/platformDynamicsImages/topBanner.png") no-repeat center top;
    background-size: 100% 23.75rem;
    /* 改善缩放时的文字边缘锯齿（Safari / 老 Chrome 走 -webkit-optimize-contrast；现代浏览器走 high-quality） */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    /* 强制 GPU 渲染，避免某些情况下 text 重采样模糊 */
    transform: translateZ(0);
    will-change: transform;
}

.pd-search.pd-search-overlay {
    position: absolute;
    top: 50%;
    left: 22rem;
    z-index: 1;
    width: 45rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0.875rem;
    padding: 0 0.625rem;
    box-sizing: border-box;
    overflow: hidden;
}

.pd-search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: Source Han Sans SC;
    font-size: 1rem;
    color: #1D2129;
    font-weight: normal;
    line-height: 1.125rem;
    padding: 0;
}

.pd-search-input::placeholder {
    color: #686F7B;
}

/* 清空按钮（X.png，0.75rem × 0.75rem）—— 仅在输入框有值时显示，点击清空 + 触发搜索 */
.pd-clear-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    object-fit: contain;
    display: block;
    cursor: pointer;
    user-select: none;
}

/* 模块内提升 .isHide 隐藏的特异性（两个 class > 单个 class） */
.pd-clear-icon.isHide {
    display: none;
}

.pd-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 6rem;
    height: 2.8125rem;
    border-radius: 0.75rem;
    background: #2563EB;
    color: #ffffff;
    font-family: Source Han Sans SC;
    font-size: 1.375rem;
    font-weight: normal;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-search-btn:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.375rem 1rem 0 rgba(37, 99, 235, 0.4);
}

.pd-search-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.125rem 0.5rem 0 rgba(37, 99, 235, 0.3);
}

/* ===========================================
   二、主内容卡片
   =========================================== */
.pd-main {
    position: relative;
    width: 100%;
    margin-top: 2.5rem;
    padding-bottom: 5rem;
    box-sizing: border-box;
    z-index: 2;
}

/* 仅"全部"模式展示卡样式（白底 + 圆角 + 阴影） */
.pd-main>.pd-container.pd-mode-all {
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 2rem 0 rgba(31, 56, 100, 0.08);
    padding: 1.75rem 1.5rem 2.5rem;
    box-sizing: border-box;
}

/* ===========================================
   三、标签栏
   =========================================== */
.pd-tabs {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.875rem;
    box-sizing: border-box;
}

.pd-tab {
    width: 6rem;
    height: 2.25rem;
    line-height: 2.25rem;
    text-align: center;
    border-radius: 0.75rem;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: 350;
    color: #86909C;
    background: #F5F8FD;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.pd-tab:hover {
    color: #165DFF;
}

.pd-tab.active {
    color: #ffffff;
    background: #3A69F9;
    font-weight: 500;
}

/* ===========================================
   四、两大块布局：推荐阅读 + 最新动态
   =========================================== */
.pd-content-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.pd-block {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-block-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: Microsoft YaHei;
    font-size: 1.125rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.75rem;
    margin: 0;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

/* 块内左右两列：左内容 / 右侧栏 */
.pd-block-grid {
    display: flex;
    gap: 1.875rem;
    box-sizing: border-box;
}

/* ===========================================
   五、第一块：推荐阅读(左) + 新手必看(右)
   =========================================== */
.pd-recommend-list {
    flex: 1;
    display: flex;
    gap: 1rem;
    box-sizing: border-box;
}

.pd-recommend-main {
    width: 29.375em;
    height: 21.125rem;
    background: #F3F7FD;
    border-radius: 1rem;
    padding: 1.25rem 0 0 1.25rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pd-recommend-main:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.25rem 0 rgba(31, 56, 100, 0.1);
}

.pd-recommend-main-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
    height: 100%;
}

.pd-recommend-main-card:hover {
    transform: translateY(-0.125rem);
}

.pd-recommend-main-tag,
.pd-recommend-side-tag,
.pd-latest-item-tag {
    display: inline-block;
    width: 5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.375rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3A69F9;
    background: transparent;
    border: 0.0625rem solid #3A69F9;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 平台公告 - 蓝色描边 */
.pd-tag-announcement {
    color: #3A69F9;
    border-color: #3A69F9;
    background: #F5F8FD;
}

/* 功能说明 - 橙色描边 */
.pd-tag-feature {
    color: #FF643A;
    border-color: #FF643A;
    background: #FEF6EE;
}

/* 平台活动 - 红色描边 */
.pd-tag-activity {
    color: #FF4D4F;
    border-color: #FF4D4F;
    background: #FAE9E9;
}

.pd-tag-default {
    color: #86909C;
    border-color: #86909C;
}

.pd-recommend-main-title {
    font-family: Source Han Sans SC;
    font-size: 1.5rem;
    font-weight: bold;
    color: #1D2129;
    line-height: 1.4;
    margin-top: 1.125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-recommend-main-summary {
    font-family: Source Han Sans SC;
    font-size: 0.9375rem;
    font-weight: normal;
    color: #4E5969;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 行容器：info(summary+date) + cover 同一行，左右等高 */
.pd-recommend-main-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    box-sizing: border-box;
}

/* info 列：包裹 summary + date，summary 靠上、date 靠下(与 cover 底对齐) */
.pd-recommend-main-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* date 作为 info 列内的纯文本块，不作为独立"层" */
.pd-recommend-main-date {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    line-height: normal;
    margin-bottom: 0.625rem;
}

.pd-recommend-side-action,
.pd-latest-item-action {
    display: inline-flex;
    align-items: center;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.5rem;
    color: #3A69F9;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.pd-recommend-side-action:hover,
.pd-latest-item-action:hover {
    color: #0E42D2;
}

.pd-recommend-side-action .arrow,
.pd-latest-item-action .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.pd-recommend-side-action:hover .arrow,
.pd-latest-item-action:hover .arrow {
    transform: translateX(0.25rem);
}

.pd-recommend-main-cover {
    flex-shrink: 0;
    width: 10.875rem;
    height: 10.875rem;
    background-image: url('/static/img/platformDynamicsImages/recommend_1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-sizing: border-box;
}

.pd-recommend-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pd-recommend-side-item {
    border: 0.0625rem solid #DBE3F7;
    border-radius: 0.75rem;
    padding: 1.25rem 0 0 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pd-recommend-side-item:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.25rem 0 rgba(31, 56, 100, 0.1);
}

.pd-recommend-side-title {
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-recommend-side-bottom {
    display: flex;
    justify-content: space-between;
    gap: 0.875rem;
    flex: 1;
}

.pd-recommend-side-left {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.pd-recommend-side-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.pd-recommend-side-date {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    line-height: normal;
}

.pd-recommend-side-cover {
    width: 4.75rem;
    height: 4.75rem;
    background-image: url('/static/img/platformDynamicsImages/recommend_2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-sizing: border-box;
    align-self: flex-end;
}

/* ===========================================
   六、新手必看(右栏)
   =========================================== */
.pd-newbie-block {
    width: 21.25rem;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-sizing: border-box;
    border: 0.0625rem solid #DBE3F7;
}

.pd-newbie-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #3A69F9;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.75rem;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.pd-newbie-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-newbie-item {
    height: 4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    background: #F7F8FD;
    border: 0.0625rem solid #F2F3F5;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.pd-newbie-item:hover {
    border-color: #C9CDD4;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(31, 56, 100, 0.06);
    transform: translateX(0.125rem);
}

.pd-newbie-item-icon {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    flex-shrink: 0;
}

.pd-newbie-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pd-newbie-item-title {
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: bold;
    color: #333333;
    line-height: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-newbie-item-summary {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #666666;
    line-height: 1.125rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-newbie-item-arrow {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===========================================
   七、第二块：最新动态(左) + 热门文章+联系客服(右)
   =========================================== */
.pd-latest-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-latest-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    padding: 1.25rem;
    border: 0.0625rem solid #DBE3F7;
    border-radius: 0.75rem;
    background: #FFFEFE;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.pd-latest-item:hover {
    border-color: #C9CDD4;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(31, 56, 100, 0.06);
}

.pd-latest-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: pointer;
}

.pd-latest-item-title {
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.75rem;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-latest-item-summary {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #666666;
    line-height: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-latest-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.pd-latest-item-date {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #666666;
    line-height: 1.5rem;
}

/* ===========================================
   八、第二块右侧栏：热门文章 + 联系客服
   =========================================== */
.pd-col-right {
    width: 21.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pd-hot-card {
    background: #ffffff;
    border: 0.0625rem solid #DBE3F7;
    border-radius: 0.75rem;
    padding: 1.1875rem 1.25rem;
    box-sizing: border-box;
}

.pd-hot-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #3A69F9;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.75rem;
    margin-bottom: 1.125rem;
}

.pd-hot-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 1.25rem;
}

.pd-hot-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

.pd-hot-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    font-family: Source Han Sans SC;
    font-size: 0.75rem;
    font-weight: bold;
    color: #999999;
    flex-shrink: 0;
    box-sizing: border-box;
}

.pd-hot-item:nth-child(1) .pd-hot-rank,
.pd-hot-item:nth-child(2) .pd-hot-rank,
.pd-hot-item:nth-child(3) .pd-hot-rank {
    color: #3A69F9;
    background: #D8E2FE;
    border-radius: 0.75rem;
}

.pd-hot-title-text {
    flex: 1;
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: 500;
    color: #333333;
    line-height: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-hot-item:hover .pd-hot-title-text {
    color: #165DFF;
}

.pd-hot-views {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 3rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #96A2C0;
    font-weight: normal;
    line-height: 0.875rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.pd-hot-views-icon {
    width: 1rem;
    height: 0.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===========================================
   九、联系客服
   =========================================== */
.pd-contact-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem 0.75rem 0.75rem 1.25rem;
    box-sizing: border-box;
    border: 0.0625rem solid #DBE3F7;
}

.pd-contact-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: bold;
    color: #3A69F9;
    line-height: 0.875rem;
}

.pd-contact-subtitle {
    font-family: Source Han Sans SC;
    font-size: 0.75rem;
    font-weight: 500;
    color: #999999;
    line-height: 1.1252rem;
    box-sizing: border-box;
    margin: 0.25rem 0 1.375rem;
}

.pd-contact-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    box-sizing: border-box;
}

.pd-contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.pd-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

.pd-contact-item-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
}

.pd-contact-item-btn {
    width: 8.75rem;
    height: 2rem;
    border-radius: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    margin-top: 0.625rem;
    margin-left: -0.5rem;
    display: flex;
    justify-content: center;
    background: #E5EFFF;
    border: 0.0625rem solid #D1DDF1;
}

.pd-contact-item-btn:hover {
    background: #E1E9FF;
    transform: translateY(-0.0625rem);
}

.pd-contact-item-btn .pd-contact-item-text {
    color: #1D2129;
    font-size: 0.875rem;
    font-weight: 500;
}

.pd-contact-item-text {
    color: #333333;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.pd-contact-phone {
    color: #333333;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.125rem;
    font-variant-numeric: tabular-nums;
    font-family: Source Han Sans SC;
}

/* 二维码红框占位：宽 10.125rem，高 10.5rem */
.pd-qr-placeholder {
    width: 10.125rem;
    height: 10.5rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid #D1DDF1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pd-contact-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    font-family: Source Han Sans SC;
    font-size: 0.625rem;
    font-weight: normal;
    line-height: 0.625rem;
    color: #95A2B8;
    box-sizing: border-box;
}

.img-text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ===========================================
   十、空状态
   =========================================== */
.pd-empty {
    padding: 3rem 0;
    text-align: center;
    font-family: Source Han Sans SC;
    font-size: 1rem;
    color: #86909C;
    line-height: normal;
    background: #ffffff;
    border-radius: 0.75rem;
    border: 0.0625rem dashed #E5E6EB;
    box-sizing: border-box;
}

/* ===========================================
   十一、骨架屏
   =========================================== */
@keyframes pdShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.pd-skeleton-row,
.pd-skeleton-hot,
.pd-skeleton-newbie,
.skeleton-recommend-main,
.skeleton-side-item {
    background: linear-gradient(90deg,
            #f0f0f0 0%,
            #f8f8f8 50%,
            #f0f0f0 100%);
    background-size: 200% 100%;
    animation: pdShimmer 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
}

.pd-skeleton-row {
    height: 4.5rem;
    border-radius: 0.75rem;
}

.pd-skeleton-hot {
    height: 2.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.pd-skeleton-hot:last-child {
    margin-bottom: 0;
}

.pd-skeleton-newbie {
    height: 3.5rem;
    border-radius: 0.75rem;
}

.pd-recommend-skeleton {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1rem;
}

.skeleton-recommend-main {
    height: 15.5rem;
    border-radius: 1rem;
}

.pd-recommend-skeleton .skeleton-recommend-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-side-item {
    height: 7.25rem;
    flex: 1;
    border-radius: 1rem;
}

/* ===========================================
   十二、入场动画
   =========================================== */
.pd-block {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.pd-block.pd-block-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================
   十三、列表视图（非"全部" tab 展示）
   =========================================== */
.pd-list-view {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    box-sizing: border-box;
}

.pd-list-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
}

.pd-list-row {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.0625rem solid #DBE3F7;
    border-radius: 0.75rem;
    min-width: 0;
    overflow: hidden;
}

.pd-list-row:hover {
    background: #F7F8FD;
    border-color: #C9CDD4;
    box-shadow: 0 0.375rem 1.125rem 0 rgba(31, 56, 100, 0.10);
    transform: translateY(-0.0625rem);
}

.pd-list-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-list-row-title {
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: 500;
    color: #333333;
    line-height: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标题与摘要之间的分割线 */
.pd-list-row-divider {
    height: 0.0625rem;
    background: #E5E6EB;
    box-sizing: border-box;
}

.pd-list-row-summary {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #666666;
    line-height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-list-row-date {
    flex-shrink: 0;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #9E9E9E;
    line-height: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* ===========================================
   十三·B、搜索结果视图（顶部关键字检索触发）
   - 独立 section（.pd-search-section），与列表视图（pd-main）/详情视图（pd-detail）平级
   - 大背景纯白（区别于 .pd-page 的 #F2F6FF 浅蓝）
   - 隐藏：pdTabs / pdContentGrid / pdListView
   - 展示：pdSearchSection（顶部"共检索XX条" + 列表行 + 分页）
   - 单行结构（三行布局）：
       第一行：标签 + 标题（同一行，关键字标红）
       第二行：摘要（跨满整行，无分割线）
       第三行：浏览量 + 发布日期（最右侧）
   =========================================== */
.pd-search-section {
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
    padding-bottom: 5rem;
}

.pd-search-view {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 顶部"面包屑 + 共检索XX条"统计行（横向布局：面包屑左 / 检索数推到最右） */
.pd-search-view-header {
    display: flex;
    margin: 2.375rem 0;
    align-items: center;
    gap: 0.625rem;
    box-sizing: border-box;
}

/* 面包屑：与 .pd-detail-breadcrumb 视觉一致 */
.pd-search-crumb-link {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-search-crumb-link:hover {
    color: #165DFF;
}

.pd-search-crumb-sep {
    color: #C9CDD4;
    user-select: none;
    font-size: 0.875rem;
}

.pd-search-crumb-current {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #3A69F9;
    font-weight: 500;
}

.pd-search-view-count {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    font-weight: normal;
    user-select: none;
}

/* 搜索结果列表容器（与 .pd-list-rows 视觉一致） */
.pd-search-rows,
.pd-list-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-search-rows {
    gap: 1.875rem;
}

/* 单行卡片：单列三行布局，宽度 100% */
.pd-search-row {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 0.625rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.0625rem solid #DBE3F7;
    border-radius: 0.75rem;
    min-width: 0;
    overflow: hidden;
}

.pd-search-row:hover {
    background: #F7F8FD;
    border-color: #C9CDD4;
    box-shadow: 0 0.375rem 1.125rem 0 rgba(31, 56, 100, 0.10);
    transform: translateY(-0.0625rem);
}

/* 第一行：标签 + 标题 */
.pd-search-row-title-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    min-width: 0;
}

/* 标签：复用 .pd-tag-* 配色（announcement=蓝、feature=橙、activity=红、default=灰） */
.pd-search-row-tag {
    display: inline-block;
    width: 5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.375rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3A69F9;
    background: #F5F8FD;
    border: 0.0625rem solid #3A69F9;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 标题：单行省略，关键字标红 */
.pd-search-row-title {
    flex: 1;
    min-width: 0;
    font-family: Source Han Sans SC;
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 关键字高亮：红色加粗 */
.pd-highlight {
    color: #FF4D4F;
    font-weight: 600;
    font-style: normal;
}

/* 第二行：摘要（单行省略，无分割线） */
.pd-search-row-summary {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9E9E9E;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.875rem 0;
}

/* 第三行：浏览量 + 发布日期（推到最右侧，横向排列） */
.pd-search-row-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.375rem;
    box-sizing: border-box;
    min-width: 0;
}

.pd-search-row-views {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #96A2C0;
    line-height: 1.375rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.pd-search-row-icon {
    width: 1rem;
    height: 0.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

.pd-search-row-date {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #9E9E9E;
    line-height: 1.375rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===========================================
   十四、分页
   =========================================== */
.pd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.25rem 0;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.pd-pagination-info {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    line-height: 1.5rem;
}

.pd-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    box-sizing: border-box;
}

.pd-page-btn {
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0 0.5rem;
    line-height: 1.75rem;
    text-align: center;
    border: 0.0625rem solid #E5E6EB;
    border-radius: 0.25rem;
    background: #ffffff;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #4E5969;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.pd-page-btn:hover:not(.disabled):not(.active) {
    color: #165DFF;
    border-color: #165DFF;
}

.pd-page-btn.active {
    color: #ffffff;
    background: #3A69F9;
    border-color: #3A69F9;
    font-weight: 500;
}

.pd-page-btn.disabled {
    color: #C9CDD4;
    background: #F7F8FA;
    cursor: not-allowed;
}

.pd-page-ellipsis {
    min-width: 1.875rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    user-select: none;
}

.pd-pagination-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

.pd-page-size-select {
    height: 1.875rem;
    padding: 0 1.75rem 0 0.5rem;
    border: 0.0625rem solid #E5E6EB;
    border-radius: 0.25rem;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%2386909C' stroke-width='1.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.5rem center;
    background-size: 0.625rem 0.625rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #4E5969;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

.pd-page-size-select:focus {
    border-color: #3A69F9;
}

/* ===========================================
   十五、文章详情视图（同页切换）
   前缀：pd-detail-*（与列表视图 pd-* 完全隔离）
   =========================================== */
.pd-detail {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}

/* 面包屑 */
.pd-detail-breadcrumb {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    padding: 2rem 0 0;
}

.pd-detail-breadcrumb .pd-container {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    line-height: 1.5rem;
}

.pd-detail-crumb {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #86909C;
    line-height: 1.125rem;
    font-weight: normal;
    user-select: none;
    box-sizing: border-box;
}

.pd-detail-crumb-link {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-detail-crumb-link:hover {
    color: #165DFF;
}

.pd-detail-crumb-current {
    color: #3A69F9;
    font-weight: 500;
}

.pd-detail-crumb-sep {
    color: #C9CDD4;
    user-select: none;
}

/* 详情主区 */
.pd-detail-main {
    position: relative;
    width: 100%;
    padding: 0 0 5rem;
    box-sizing: border-box;
    z-index: 2;
}

.pd-detail-main .pd-container {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2.5rem 3rem;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}

/* 文章标题 */
.pd-detail-title {
    font-family: Microsoft YaHei;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333333;
    line-height: normal;
    text-align: center;
    margin: 0 0 1.875rem;
    box-sizing: border-box;
}

/* meta */
.pd-detail-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    color: #999999;
    line-height: 1.375rem;
    font-weight: normal;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.pd-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

.pd-detail-meta-icon {
    width: 1rem;
    height: 0.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

.pd-detail-meta-label {
    color: #86909C;
    margin-right: 0.125rem;
}

.source-item {
    max-width: 20rem;
}

.source-label {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 正文 —— 对齐 Quill 雪主题预览样式（14px / 1.5 / Helvetica Neue + PingFang） */
.pd-detail-content {
    padding: 1.875rem 3rem 3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    color: #1f2329;
    word-break: break-word;
    white-space: pre-wrap;
    box-sizing: border-box;
}

/* 重置块级元素默认 margin/padding，对齐 Quill 内部行为 */
.pd-detail-content p,
.pd-detail-content ol,
.pd-detail-content ul,
.pd-detail-content pre,
.pd-detail-content blockquote,
.pd-detail-content h1,
.pd-detail-content h2,
.pd-detail-content h3,
.pd-detail-content h4,
.pd-detail-content h5,
.pd-detail-content h6 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 段落间距：与编辑器视觉一致的小间距 */
.pd-detail-content p {
    margin-bottom: 0.375rem;
}

/* 标题：还原 Quill 雪主题默认字号/加粗 */
.pd-detail-content h1,
.pd-detail-content h2,
.pd-detail-content h3,
.pd-detail-content h4,
.pd-detail-content h5,
.pd-detail-content h6 {
    font-weight: 600;
    color: #1f2329;
}

.pd-detail-content h1 {
    font-size: 1.75rem;
}

.pd-detail-content h2 {
    font-size: 1.3125rem;
}

.pd-detail-content h3 {
    font-size: 1.0225rem;
}

.pd-detail-content h4 {
    font-size: 0.875rem;
}

.pd-detail-content h5 {
    font-size: 0.72625rem;
}

.pd-detail-content h6 {
    font-size: 0.58625rem;
}

/* Quill 雪主题对齐格式类 */
.pd-detail-content .ql-align-center {
    text-align: center;
}

.pd-detail-content .ql-align-right {
    text-align: right;
}

.pd-detail-content .ql-align-justify {
    text-align: justify;
}

.pd-detail-content .ql-align-left {
    text-align: left;
}

/* Quill 雪主题缩进格式类（1em ≈ 1 个中文字符） */
.pd-detail-content .ql-indent-1 {
    padding-left: 3em;
}

.pd-detail-content .ql-indent-2 {
    padding-left: 6em;
}

.pd-detail-content .ql-indent-3 {
    padding-left: 9em;
}

.pd-detail-content .ql-indent-4 {
    padding-left: 12em;
}

.pd-detail-content .ql-indent-5 {
    padding-left: 15em;
}

.pd-detail-content .ql-indent-6 {
    padding-left: 18em;
}

.pd-detail-content .ql-indent-7 {
    padding-left: 21em;
}

.pd-detail-content .ql-indent-8 {
    padding-left: 24em;
}

.pd-detail-content .ql-indent-9 {
    padding-left: 27em;
}

/* Quill 雪主题字号格式类 */
.pd-detail-content .ql-size-small {
    font-size: 0.75em;
}

.pd-detail-content .ql-size-large {
    font-size: 1.5em;
}

.pd-detail-content .ql-size-huge {
    font-size: 2.5em;
}

/* Quill 雪主题字体格式类 */
.pd-detail-content .ql-font-serif {
    font-family: Georgia, 'Times New Roman', serif;
}

.pd-detail-content .ql-font-monospace {
    font-family: Monaco, 'Courier New', monospace;
}

/* 图片：等比缩放至铺满盒子（width: 100% 让图片始终占满容器宽度，height: auto 保持比例）
   - 不再用 max-width: 100%，否则源图较小时只显示原始尺寸，不会填满容器
   - object-fit: contain 防止图片被异常拉伸（仅对替换元素有效，冗余写一次保险） */
.pd-detail-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    box-sizing: border-box;
    object-fit: contain;
}

/* 视频：等比缩放至铺满盒子 + 强制 16:9 宽高比
   - 源视频若是超宽比例（如 4:1），height: auto 算出很小的高度 → 播放器只有薄薄一条
   - 强制 aspect-ratio: 16/9 让播放器有合理高度（800 宽 → 450 高）
   - object-fit: cover 让视频内容填满播放器（必要时裁剪边缘）
   - background: #000 兜底隐藏视频未加载完成时的透出 */
.pd-detail-content video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    background: #000;
    box-sizing: border-box;
}

/* iframe（嵌入视频/分享卡片）：与 video 同处理（YouTube/B站等都期望 16:9） */
.pd-detail-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    margin: 0.5rem 0;
    border: 0;
    border-radius: 0.25rem;
    background: #000;
    box-sizing: border-box;
}

/* Quill 编辑器设定的对齐方式（width: 100% 时视觉差异较小，但保留规则以应对源尺寸 < 容器宽度的场景）
   - ql-align-left 段内的 img/video → 居左
   - ql-align-right 段内的 img/video → 居右
   - ql-align-center 段内的 img/video → 居中 */
.pd-detail-content .ql-align-left img,
.pd-detail-content .ql-align-left video,
.pd-detail-content .ql-align-left iframe {
    margin-left: 0;
    margin-right: auto;
}

.pd-detail-content .ql-align-right img,
.pd-detail-content .ql-align-right video,
.pd-detail-content .ql-align-right iframe {
    margin-left: auto;
    margin-right: 0;
}

.pd-detail-content .ql-align-center img,
.pd-detail-content .ql-align-center video,
.pd-detail-content .ql-align-center iframe {
    margin-left: auto;
    margin-right: auto;
}

/* 表格：quill-table-better 输出的 <table> 标签兜底
   - 表格自身保留自然列宽，不再强制 table-layout: fixed / width: 100%
   - 关键：white-space: nowrap 强制单元格不折行 → 表格自然宽度 = 各列内容宽度之和
   - 当自然宽度 > 容器宽度时，wrapper 出现内部横向滚动条（避免整页被宽表撑开）
   - 注意：table 不能加 max-width: 100%，否则会约束表格宽度使溢出无法发生 */
.pd-detail-content table {
    width: auto !important;
    border-collapse: collapse !important;
    table-layout: auto;
    white-space: nowrap;
    margin: 0.5rem 0;
    box-sizing: border-box;
}

/* 单元格：继承 nowrap，并把内嵌 <p> 也设为 nowrap（Quill 段落元素会重置 white-space） */
.pd-detail-content table th,
.pd-detail-content table td {
    white-space: nowrap;
}

.pd-detail-content table th p,
.pd-detail-content table td p {
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

/* 表格横向滚动容器（JS 在 renderArticle 时把 <table> 包到该 div 里） */
.pd-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    margin: 0.5rem 0;
}

.pd-table-wrapper::-webkit-scrollbar {
    height: 0.5rem;
}

.pd-table-wrapper::-webkit-scrollbar-thumb {
    background: #C9CDD4;
    border-radius: 0.25rem;
}

.pd-table-wrapper::-webkit-scrollbar-track {
    background: #F2F3F5;
    border-radius: 0.25rem;
}

.pd-detail-content table,
.pd-detail-content th,
.pd-detail-content td {
    border: 0.0625rem solid #dcdfe6 !important;
    vertical-align: top;
    box-sizing: border-box;
}

.pd-detail-content th,
.pd-detail-content td {
    padding: 0.375rem 0.625rem !important;
    min-width: 3.75rem;
    background: #ffffff;
    min-height: 1.5em;
}

.pd-detail-content th {
    background: #f5f7fa !important;
    font-weight: 600;
}

.pd-detail-content td>p,
.pd-detail-content th>p {
    margin: 0;
    padding: 0;
}

/* 链接
   - 修复"显示成纯文本无法点击"问题：
     1) 加下划线让视觉上明显是链接
     2) cursor: pointer + pointer-events: auto 保证鼠标指针与可点击
     3) word-break: break-all 让长 URL 不撑破容器
     4) position: relative + z-index 避免被其他层遮挡
     5) target=_blank 的外链加 rel="noopener noreferrer"（JS 在 renderArticle 阶段补） */
.pd-detail-content a {
    color: #165DFF;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    /* 长 URL / 长路径允许在任意字符间断行，避免溢出 */
    word-break: break-all;
    transition: color 0.2s ease;
}

.pd-detail-content a:hover {
    color: #0E42D2;
    text-decoration: underline;
}

.pd-detail-content a:visited {
    color: #7B36CB;
}

/* 列表 */
.pd-detail-content ul,
.pd-detail-content ol {
    margin: 0 0 0.5rem 1.5rem;
    padding: 0;
    box-sizing: border-box;
}

.pd-detail-content li {
    margin-bottom: 0.25rem;
}

/* Quill 展平列表拆分后，兄弟列表的缩进还原
   - 顶层列表保留默认 1.5rem margin-left（与原 ol/ul 样式一致）
   - 子列表用 .pd-list-indent-N 累加 margin-left，还原 ql-indent-N 的 3em*N 缩进
   - 必须与 platformDynamics.html 的 transformQuillLists 配套使用 */
.pd-detail-content .pd-list-group {
    margin: 0 0 0.5rem 1.5rem;
    padding: 0;
    box-sizing: border-box;
}

.pd-detail-content .pd-list-indent-1 {
    /* 1.5rem (顶层) + 3em (ql-indent-1) */
    margin-left: 4.5em;
}

.pd-detail-content .pd-list-indent-2 {
    /* 1.5rem + 6em */
    margin-left: 7.5em;
}

.pd-detail-content .pd-list-indent-3 {
    /* 1.5rem + 9em */
    margin-left: 10.5em;
}

.pd-detail-content .pd-list-indent-4 {
    margin-left: 13.5em;
}

/* 引用 */
.pd-detail-content blockquote {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: #F7F8FD;
    border-left: 0.1875rem solid #3A69F9;
    color: #4E5969;
    border-radius: 0 0.25rem 0.25rem 0;
    box-sizing: border-box;
}

/* 行内 code */
.pd-detail-content code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.8125rem;
    background: #F5F8FD;
    color: #3A69F9;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.1875rem;
    box-sizing: border-box;
}

/* 代码块 */
.pd-detail-content pre {
    background: #1D2129;
    color: #E5E6EB;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    box-sizing: border-box;
}

.pd-detail-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

/* 空/错误 */
.pd-detail-empty {
    padding: 5rem 0;
    text-align: center;
    font-family: Source Han Sans SC;
    font-size: 1rem;
    color: #86909C;
    line-height: normal;
    box-sizing: border-box;
}

/* 骨架屏 */
@keyframes pdDetailShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.pd-detail-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
}

.pd-detail-skeleton-title,
.pd-detail-skeleton-meta-item,
.pd-detail-skeleton-line {
    background: linear-gradient(90deg,
            #f0f0f0 0%,
            #f8f8f8 50%,
            #f0f0f0 100%);
    background-size: 200% 100%;
    animation: pdDetailShimmer 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
}

.pd-detail-skeleton-title {
    height: 2.25rem;
    width: 60%;
    margin: 0 auto 0.5rem;
}

.pd-detail-skeleton-meta {
    display: flex;
    justify-content: center;
    gap: 1.875rem;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.pd-detail-skeleton-meta-item {
    height: 1.25rem;
    width: 5rem;
    border-radius: 0.375rem;
}

.pd-detail-skeleton-line {
    height: 1rem;
    width: 100%;
}

.pd-detail-skeleton-line-short {
    width: 70%;
}