/* ============================================================
 * 移动端样式
 * 加载入口：module/web/view/mobile/layout/header.php
 * 与 PC 端 site.css 分离，避免互相污染。
 * ============================================================ */

body.theme-mobile {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background: #f4f4f4;
    -webkit-tap-highlight-color: transparent;
}

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

img {
    display: block;
    max-width: 100%;
}

/* ---- 顶部栏 ---- */
.mobile-shell {
    background: #f4f4f4;
    min-height: 100vh;
    padding-bottom: 30px;
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 62px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 100%;
    min-width: 0;
    flex: 1;
}

.logo-img {
    height: 39px;
    width: auto;
    max-width: 50%;
    object-fit: contain;
    object-position: left center;
}

.logo-text {
    font-size: 17px;
    font-weight: 700;
    color: #c40000;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ---- 频道横向滚动条 ---- */
.mobile-channels {
    position: sticky;
    top: 62px;
    z-index: 20;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-channels-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 18px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 14px 9px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-channels-inner::-webkit-scrollbar {
    display: none;
}

.channel-item {
    position: relative;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: #333;
    padding: 4px 0;
}

.channel-item.is-active {
    color: #c40000;
    font-weight: 700;
    font-size: 17px;
}

.channel-item.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #c40000;
}

/* 频道栏右侧"更多"≡按钮，溢出时显示 */
.channel-more-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.channel-more-btn.is-visible {
    display: flex;
}

/* ---- 所有频道弹层 ---- */
.channel-drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
}

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

.channel-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    animation: fadeIn 0.18s ease;
}

.channel-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #f4f4f4;
    padding: 14px 0 22px;
    transform: translateY(-12px);
    opacity: 0;
    animation: slideDown 0.22s ease forwards;
}

.channel-drawer-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-bottom: 4px;
}

.channel-drawer-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #222;
}

.channel-drawer-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-drawer-title {
    padding: 6px 18px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.channel-drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 14px;
}

.channel-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 6px;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.channel-tile.is-active {
    color: #c40000;
    font-weight: 600;
    background: #fff1f1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ---- 主内容容器 ---- */
.mobile-main {
    padding: 0 0 28px;
}

/* ---- 头部要闻轮播（标题压图底部 + 圆点指示器） ---- */
.mobile-headline {
    position: relative;
    margin: 12px 12px 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f1f1;
    aspect-ratio: 16 / 10;
}

.mobile-headline-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-headline-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.mobile-headline-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.mobile-headline-cover {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    overflow: hidden;
}

.mobile-headline-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 标题压图底部：渐变蒙层 + 文字 */
.mobile-headline-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}

.mobile-headline-title {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 30px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 2;
}

/* 底部圆点指示器（白色半透明小圆） */
.mobile-headline-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.mobile-headline-dots .dot {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
    transition: background 0.25s ease, width 0.25s ease;
}

.mobile-headline-dots .dot.is-active {
    background: #fff;
    width: 22px;
}

/* ---- 频道列表（左标题 + 右缩略图） ---- */
.mobile-feed {
    margin-top: 12px;
    background: #fff;
}

.mobile-feed-item {
    display: flex;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #f3f3f3;
}

.mobile-feed-item:last-child {
    border-bottom: 0;
}

.mobile-feed-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-feed-copy h2 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-feed-copy h2 a {
    color: inherit;
}

.mobile-feed-thumb {
    flex: 0 0 auto;
    position: relative;
    width: 110px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f1f1;
}

.mobile-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频文章缩略图播放图标：正中央居中，尺寸较大、颜色较淡 */
.mobile-feed-thumb.is-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    background-image: url('/resource/web/img/play.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

/* ---- 列表底部元信息 ---- */
.meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #999;
    line-height: 1;
}

.meta-line .source {
    color: #c40000;
}

.meta-line .dot {
    color: #d0d0d0;
}

.meta-line .time {
    color: #999;
}

.mobile-feed-tag {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 2px;
    background: #f5f5f5;
    color: #888;
    font-size: 11px;
}

/* ---- 视频分类通栏卡片（m 站频道页用） ---- */
.m-video-feed {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m-video-card {
    display: block;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.m-video-card-cover {
    position: relative;
    display: block;
    width: 100%;
    /* 通栏封图 16:9，按 mobile 实际宽度等比缩放 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f4f4;
}

.m-video-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* m 视频卡片播放图标：居中放大版（在 .is-video 上叠加） */
.m-video-card-cover.is-video::after {
    content: '';
    position: absolute;
    /* 居中：top/left + translate 50% */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    background-image: url('/resource/web/img/play.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

.m-video-card-body {
    padding: 10px 12px 12px;
}

.m-video-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.45;
    color: #222;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.m-video-card-tag {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 2px;
    background: #fff4f4;
    color: #f44336;
    font-size: 11px;
}

/* ---- 分页 ---- */
.mobile-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0 14px;
}

.pager-btn {
    padding: 8px 16px;
    border-radius: 18px;
    background: #c40000;
    color: #fff;
    font-size: 13px;
}

.pager-info {
    color: #888;
    font-size: 13px;
}

/* ---- 右下角"打开APP"浮按钮 ---- */
.mobile-open-app {
    position: fixed;
    right: 14px;
    bottom: 24px;
    z-index: 40;
    min-width: 70px;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(90deg, #fa6c5d 0%, #f0493a 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(240, 73, 58, 0.32);
    cursor: pointer;
}

.mobile-open-app:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(240, 73, 58, 0.32);
}

/* ============================================================
 * 详情页
 * ============================================================ */
.m-article {
    background: #fff;
    padding: 16px 14px 0;
    margin-bottom: 0;
}

.m-article-title {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 700;
    color: #111;
    text-align: justify;
}

/* 来源 / 记者 / 时间 一行式 */
.m-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #999;
    line-height: 1.4;
    padding-bottom: 4px;
}

.m-article-meta .meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    border: 1px solid #c40000;
    border-radius: 50%;
    color: #c40000;
    font-size: 11px;
}

.m-article-meta .meta-source { color: #c40000; }
.m-article-meta .meta-dot    { color: #d0d0d0; }

/* 专题入口条 */
.m-article-topic {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 6px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.m-article-topic .topic-icon { color: #999; font-size: 16px; }
.m-article-topic .topic-label { color: #999; }
.m-article-topic .topic-name { color: #333; font-weight: 500; flex: 1; }
.m-article-topic .topic-arrow { color: #c0c0c0; font-size: 18px; }

/* 封面图 */
.m-article-cover { margin: 16px 0; }
.m-article-cover img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* 正文 */
.m-article-content {
    font-size: 17px;
    line-height: 1.85;
    color: #333;
    word-break: break-all;
    padding-bottom: 8px;
}

.m-article-content p { margin: 0 0 1em; }
.m-article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px auto;
}

/* 免责声明 */
.m-article-disclaimer-title {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: #afafaf;
    line-height: 1.6;
}

.m-article-disclaimer {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    color: #c2c2c2;
    line-height: 1.6;
}

/* 点赞/分享栏 */
.m-article-like-bar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 24px 0 16px;
}

/* ---- 移动端面包屑 ---- */
.breadcrumb {
    margin: 10px 16px 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
}
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.breadcrumb-item a {
    color: #888;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: inline-block;
}
.breadcrumb-item a:active {
    color: #c40000;
}
.breadcrumb-item.is-current span {
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    display: inline-block;
}
.breadcrumb-sep {
    margin: 0 5px;
    color: #ccc;
    font-size: 11px;
    user-select: none;
}

/* ---- 移动端上一篇 / 下一篇 ---- */
.m-article-prev-next {
    margin: 20px 16px 24px;
}
.m-article-prev-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.m-article-prev-next-item {
    background: #fafafa;
    border-radius: 6px;
    padding: 10px 12px;
    border: 1px solid #f0f0f0;
}
.m-article-prev-next-item.is-empty {
    background: transparent;
    border-color: #f5f5f5;
}
.m-article-prev-next-item a {
    display: block;
    text-decoration: none;
    color: #333;
}
.m-article-prev-next-label {
    display: block;
    font-size: 11px;
    color: #999;
    line-height: 1.4;
    margin-bottom: 2px;
}
.m-article-prev-next-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-article-prev-next-item.is-empty .m-article-prev-next-title {
    color: #ccc;
    font-weight: 400;
}

.m-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 130px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(90deg, #fa6c5d 0%, #f0493a 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(240, 73, 58, 0.24);
}

.m-like-btn .m-like-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.m-like-btn .m-like-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.m-like-btn .m-like-count { font-weight: 600; }

/* 点赞图标：未点赞显示空心爱心，已点赞切换为实心爱心 */
.m-like-btn .m-like-icon svg.m-like-icon-heart-filled { display: none; }
.m-like-btn.is-liked .m-like-icon svg.m-like-icon-heart-outline { display: none; }
.m-like-btn.is-liked .m-like-icon svg.m-like-icon-heart-filled { display: block; }

/* 已点赞状态：置灰，不再可点击 */
.m-like-btn.is-liked {
    background: linear-gradient(90deg, #cfcfcf 0%, #bdbdbd 100%);
    box-shadow: none;
    cursor: default;
}

/* 分享按钮：与点赞并排，灰色无边框、黑色文字 */
.m-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 130px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 22px;
    background: #d9d9d9;
    color: #222;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.m-share-btn:active {
    transform: scale(0.96);
}

.m-share-btn .m-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.m-share-btn .m-share-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---- 分享提示遮罩（点击"分享"弹出） ---- */
/* z-index 需压过返回顶部浮动按钮 .footerTop(999)，否则按钮浮在遮罩上 */
.m-share-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.m-share-layer[hidden] {
    display: none;
}

.m-share-mask {
    position: absolute;
    inset: 0;
    background: rgba(30, 30, 30, 0.72);
    animation: fadeIn 0.18s ease;
}

.m-share-tip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    animation: slideDown 0.22s ease forwards;
}

.m-share-tip img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- 视频详情模板（m 端 type=2 文章） ---- */
.m-video-detail {
    background: #000;
    color: #eee;
}

.m-video-player {
    position: relative;
    width: 100%;
    background: #000;
    /* 16:9 兜底；浏览器原生 video 会根据视频实际比例在 controls 内调整 */
    aspect-ratio: 16 / 9;
    max-height: 65vh;
    overflow: hidden;
}

.m-video-player-tag,
.m-video-player-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.m-video-player-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-video-player-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    position: absolute;
    inset: 0;
}

.m-video-player-fallback-icon {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18)
        url('/resource/web/img/play.svg') center / 28px no-repeat;
    z-index: 2;
}

.m-video-player-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    z-index: 2;
}

.m-video-detail-body {
    padding: 14px 16px 18px;
    background: #fff;
    color: #222;
}

.m-video-detail-title {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.45;
    color: #111;
    font-weight: 600;
}

.m-video-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}

.m-video-detail-meta .meta-source {
    color: #c40000;
    font-weight: 500;
}

.m-video-detail-meta .meta-dot {
    color: #d0d0d0;
}

.m-video-detail-content {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}


/* 详情区内的免责声明复用通用样式，但容器内边距已被 body 接管，因此不重复声明 */

.m-comment-illust {
    font-size: 48px;
    line-height: 1;
    opacity: 0.5;
}

.m-comment-tip {
    color: #888;
    font-size: 14px;
}

.m-comment-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    min-width: 180px;
    height: 38px;
    padding: 0 22px;
    border: 1px solid #c40000;
    border-radius: 20px;
    color: #c40000;
    font-size: 14px;
    background: #fff;
}

/* 频道推荐网格 */
.m-channels-recommend {
    padding: 20px 14px 18px;
    background: #fff;
    margin-bottom: 12px;
    text-align: center;
}

.m-channels-title {
    margin: 0 0 14px;
    color: #c40000;
    font-size: 15px;
    font-weight: 600;
}

.m-channels-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}

.m-channel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    color: #555;
    font-size: 13px;
    background: #fff;
}

.m-channel-chip:active {
    background: #f7f7f7;
}

/* 相关推荐 */
.m-related {
    padding: 14px 14px 4px;
    background: #fff;
    margin-bottom: 12px;
}

.m-related-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    border-left: 3px solid #c40000;
    padding-left: 8px;
    line-height: 1;
}

.m-related-list {
    display: grid;
    gap: 14px;
}

.m-related-item {
    display: flex;
    gap: 12px;
}

.m-related-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.m-related-copy h3 {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-related-thumb {
    flex: 0 0 auto;
    width: 100px;
    height: 70px;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f1f1;
}

.m-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 上下篇导航 */
.m-article-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 14px;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.m-article-switch > div { min-width: 0; }

.m-article-switch strong {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 500;
}

.m-article-switch a,
.m-article-switch span {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-article-switch a:hover { color: #c40000; }

.m-switch-next { text-align: right; }

/* 打开 App 区 */
.m-open-app-section {
    padding: 28px 14px 36px;
    background: #fff;
    text-align: center;
    margin-bottom: 60px;
}

.m-open-app-section p {
    margin: 0 0 14px;
    color: #c40000;
    font-size: 15px;
    font-weight: 500;
}

.m-open-app-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 40px;
    padding: 0 28px;
    border: 1px solid #c40000;
    border-radius: 22px;
    color: #c40000;
    font-size: 15px;
    background: #fff;
}

/* 回顶按钮 */
.m-back-top {
    position: fixed;
    right: 14px;
    bottom: 80px;
    z-index: 35;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.m-back-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- 信息流加载状态（more / loading / end / error 四态）---- */
.feed-status-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 20px 16px 28px;
    color: #9b9b9b;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.5px;
    user-select: none;
}

/* 文案两侧的细分割线，收尾更“完结”一些 */
.feed-status-mobile .feed-status-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.feed-status-mobile[data-state="end"] .feed-status-text::before,
.feed-status-mobile[data-state="end"] .feed-status-text::after {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14));
}

.feed-status-mobile[data-state="end"] .feed-status-text::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}

/* 加载圈：仅 loading 态显示 */
.feed-status-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(196, 0, 0, 0.18);
    border-top-color: #c40000;
    border-radius: 50%;
    animation: feedSpin 0.7s linear infinite;
}

.feed-status-mobile[data-state="loading"] .feed-status-spinner {
    display: block;
}

.feed-status-mobile[data-state="loading"] {
    color: #c40000;
}

@keyframes feedSpin {
    to { transform: rotate(360deg); }
}

/* 上拉提示：加一个轻微上浮的箭头 */
.feed-status-mobile[data-state="more"] .feed-status-text::after {
    content: "︿";
    margin-left: 2px;
    font-size: 11px;
    color: #b8b8b8;
    animation: feedHint 1.4s ease-in-out infinite;
}

@keyframes feedHint {
    0%, 100% { transform: translateY(1px); opacity: 0.55; }
    50%      { transform: translateY(-2px); opacity: 1; }
}

/* 失败态：做成可点重试的胶囊 */
.feed-status-mobile[data-state="error"] {
    cursor: pointer;
}

.feed-status-mobile[data-state="error"] .feed-status-text {
    padding: 7px 18px;
    border: 1px solid rgba(196, 0, 0, 0.35);
    border-radius: 999px;
    color: #c40000;
    background: #fff;
}

.feed-status-mobile[data-state="error"]:active .feed-status-text {
    background: rgba(196, 0, 0, 0.06);
}

/* ---- 底部版权信息：版权 + 备案号，居中 ---- */
.mobile-footer {
    padding: 18px 16px 24px;
    background: #f6f6f6;
    border-top: 1px solid #e8e8e8;
    text-align: center;
}

.mobile-footer-line {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
}

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

/* ---- 移动端响应式微调 ---- */
@media (max-width: 360px) {
    .mobile-feed-copy h2 { font-size: 16px; }
    .mobile-feed-thumb { width: 96px; height: 68px; }
}

/* ---- 页面主题 H1（SEO 必需，每页唯一） ---- */
.m-page-h1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 12px 16px 8px;
    color: #222;
}

/* ---- 文章预览页（后台预览按钮） ---- */
.preview-notice {
    margin: 10px 12px 0;
    padding: 9px 12px;
    background: #fff7e6;
    border: 1px solid #ffe1a8;
    border-radius: 6px;
    color: #8a5a00;
    font-size: 13px;
    line-height: 20px;
}

.preview-notice span {
    font-weight: 700;
    margin-right: 6px;
}

/* ============================================================
 * 仿 dutenews m 站文章详情页样式
 * ------------------------------------------------------------
 * 设计基准：html font-size = 32.6px（与参考站 flexible.js 一致），
 * 所有 rem 值即参考站原始值；详情页通过 .page-detail-dutenews
 * 在 <html> 上覆盖 font-size，PC/移动其他页面保持原 px 样式。
 * ============================================================ */

html.page-detail-dutenews,
html:has(body.page-detail-dutenews) {
    font-size: 32.6px;
}

/* 仿 dutenews 详情页时，隐藏项目自带的顶部条 / 频道栏 / 弹层 / 底部版权，
 * 让顶部 dutenews banner 与底部频道宫格 + 红色天际线成为唯一的头/尾。 */
.page-detail-dutenews .mobile-topbar,
.page-detail-dutenews .mobile-channels,
.page-detail-dutenews .channel-drawer,
.page-detail-dutenews .mobile-footer {
    display: none !important;
}
.page-detail-dutenews .mobile-main {
    padding: 0 !important;
}

/* 内容页背景改为纯白（含 body / shell，避免灰底透过露出） */
body.theme-mobile.page-detail-dutenews,
body.theme-mobile.page-detail-dutenews .mobile-shell {
    background: #fff;
}

/* 详情页面包屑：紧凑排列，缩小与顶部 banner / 标题的空隙 */
.page-detail-dutenews .breadcrumb {
    margin: .16rem 16px 0;
    padding: 0;
    line-height: 1.3;
}
.page-detail-dutenews .detailView {
    padding-top: .16rem;
}

/* ---- 顶部要闻 banner（header_components flex big-event-grey） ---- */
/* z-index 必须低于分享遮罩 .m-share-layer(1000)，否则弹分享时 banner 盖在遮罩上 */
.nav-top-container {
    background-color: #fff;
    box-shadow: 0 .02667rem .26667rem rgba(0, 0, 0, 0.07);
    height: 1.9rem;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
}
.carousel-swipe {
    background-color: #fff;
    height: 1.9rem;
}
.header_components.flex.big-event-grey {
    align-items: center;
    background-color: #fff;
    background-image: url('/resource/web/img/open-app-bg.png');
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    box-sizing: border-box;
    display: flex;
    height: 1.9rem;
    justify-content: space-between;
    padding: 0 .42667rem;
}
/* 后台配置的 Logo 宽高比不固定：只定高，宽度自适应并限最大宽，避免拉伸变形 */
.header_components .slogan {
    display: block;
    height: 1.2rem;
    width: auto;
    max-width: 4.6rem;
    object-fit: contain;
}
/* banner 左侧品牌区：Logo + 站名横排（整体是回首页的链接），站名过长时省略号兜底 */
.header_components .header_brand {
    align-items: center;
    display: flex;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
.header_components .site-name {
    color: #333;
    font-size: .4rem;
    font-weight: 600;
    margin-left: .16rem;
    max-width: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header_components .header_btn {
    align-items: center;
    display: flex;
}
.header_components .header_btn button {
    background: linear-gradient(176deg, #fe6134, #f73e31);
    border: none;
    border-radius: .61333rem;
    color: #fff;
    cursor: pointer;
    font-size: .37333rem;
    height: .74667rem;
    line-height: .74667rem;
    padding: 0;
    width: 1.89333rem;
}

/* 文章正文容器：因 banner 高度 1.9rem 固定，需给正文腾出顶部内边距 */
.bg.mainViewPad {
    padding-top: 1.9rem;
}
.mainViewBg {
    background-color: #fff;
}

/* ---- 详情正文 .detailView ---- */
.detailView {
    color: #333;
    hyphens: auto;
    padding: .42667rem;
    word-break: break-all;
}
.detailView > header .title,
.detailView .title {
    color: #333;
    font-size: .66667rem;
    font-weight: 600;
    line-height: 1.01333rem;
    margin: 0;
}
.detailView > header {
    display: block;
}

/* 来源 / 时间 */
.detailView .aside {
    align-items: center;
    color: #999;
    display: flex;
    font-size: .37333rem;
    line-height: .53333rem;
    margin: .42667rem 0;
}
.detailView .aside .enablecopyright {
    border-radius: 50%;
    height: .85333rem;
    margin-left: .10667rem;
    margin-right: .21333rem;
    vertical-align: middle;
    width: .85333rem;
}

/* 摘要折叠 */
.detailView .summary {
    color: #999;
    font-size: .37333rem;
    line-height: .53333rem;
    margin: .42667rem 0;
}
.detailView .summary summary {
    cursor: pointer;
    display: list-item;
}
.detailView .summary p {
    margin: .21333rem 0 0;
}

/* 专题入口条 */
.detailView .special {
    border-radius: .10667rem;
    box-shadow: 0 .08rem .50667rem rgba(0, 0, 0, 0.1);
    margin-bottom: .4rem;
    padding: 0 .32rem;
}
.detailView .special .title {
    align-items: center;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: .4rem;
    height: 1.46667rem;
    justify-content: space-between;
}
.detailView .special .title > div {
    align-items: center;
    display: flex;
}
.detailView .special .title .test {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70vw;
}
.detailView .special .title .icon {
    background-image: url('/resource/web/img/special-icon.png');
    background-size: 100% 100%;
    display: inline-block;
    height: .48rem;
    margin-right: .16rem;
    width: .48rem;
}

/* 正文 */
.detailView section {
    max-width: 100%;
}
.detailView .detailCent,
.detailView .article_cent {
    font-size: .55333rem;
    line-height: .96rem;
    overflow-x: hidden;
    padding-top: .26667rem;
}
.detailView .detailCent p,
.detailView .article_cent p {
    font-size: .55333rem !important;
    line-height: .96rem !important;
    margin: .42667rem 0;
}
.detailView .detailCent img,
.detailView .article_cent img {
    height: auto !important;
    max-width: 100% !important;
    display: block;
    margin: .42667rem auto;
}

/* 免责声明 */
.detailView .detailTip {
    color: #999;
    font-size: .32rem;
    line-height: .53333rem;
    margin: 1.06667rem 0;
    text-align: center;
}
.detailView .detailTip::before {
    content: "⚠ ";
    color: #999;
}

/* ---- 推荐阅读 .relateread ---- */
.relateread {
    border-top: .21333rem solid #f9f9f9;
    box-sizing: border-box;
    left: -.42667rem;
    max-width: calc(100% + .85333rem) !important;
    padding: 0 .42667rem;
    position: relative;
    width: calc(100% + .85333rem);
}
.relateread h5 {
    color: #111;
    font-size: .42667rem;
    font-weight: 700;
    margin: .53333rem 0 .05333rem;
}
.relateread h5::before {
    background: linear-gradient(135deg, #ff795f, #f82f24);
    border-radius: .02667rem;
    content: "";
    display: inline-block;
    height: .29333rem;
    margin-bottom: .02667rem;
    margin-right: .10667rem;
    width: .05333rem;
}
.relateread .list {
    border-bottom: .02667rem solid #f9f9f9;
    color: #111;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: .45333rem;
    justify-content: space-between;
    line-height: .69333rem;
    padding: .4rem 0;
    text-decoration: none;
}
.relateread .list:last-child {
    border-bottom: none;
}
.relateread .news-intro {
    flex: 1;
    margin-right: .42667rem;
    max-width: 100%;
    min-width: 0;
}
.relateread .news-intro .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: .45333rem;
    font-weight: 400;
    line-height: .69333rem;
    min-height: 1.38667rem;
    overflow: hidden;
    padding-top: .10667rem;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
.relateread .desc {
    line-height: .4rem;
    margin-top: .32rem;
}
.relateread .time {
    color: #9c9c9e;
    font-size: .32rem;
    line-height: .4rem;
}
.relateread .news-img {
    flex-shrink: 0;
    height: 2.21333rem;
    position: relative;
    width: 2.98667rem;
}
.relateread .news-img img {
    border-radius: .10667rem;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ---- 频道宫格 + 立即打开 + 红色天际线底图 .category ---- */
.category.big-event-grey {
    background-color: #fff;
    padding: 0 .4rem;
}
.category .category-title {
    color: #f64e45;
    font-size: .45333rem;
    line-height: .53333rem;
    padding: .74667rem 0;
    text-align: center;
}
.category .category-con ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.category .category-con ul::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    width: 0;
}
.category .category-con li.item {
    background: #fff;
    border: .02667rem solid #f3f1f3;
    border-radius: .37333rem;
    box-sizing: border-box;
    float: left;
    height: .74667rem;
    line-height: .69333rem;
    margin: 0 .10667rem .21333rem 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(20% - .21333rem);
}
.category .category-con li.item a {
    color: #666;
    display: block;
    font-size: .32rem;
    line-height: .69333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category .clear {
    clear: both;
}
.category .pagenav_bj {
    margin: 0 -.4rem;
    overflow: hidden;
}
.category .pagenav_bj img {
    display: block;
    width: 100%;
}
.category .footerTop {
    bottom: 10%;
    cursor: pointer;
    height: 1.76rem;
    position: fixed;
    right: .42667rem;
    width: 1.76rem;
    z-index: 999;
}
.category .footerTop img {
    height: 100%;
    width: 100%;
}
.category .footerTop[hidden] {
    display: none;
}

/* 视频详情：播放器顶部留出 1.9rem 给 banner */
.page-detail-dutenews .m-video-player {
    margin-top: -.42667rem;
}

/* ============================================================
 * 作者主页（m 端）
 * ------------------------------------------------------------
 * 设计目标：极简克制，参考微信/知乎专栏作者主页风格：
 *   - 顶部白底，仅展示头像 + 姓名 + 简介；
 *   - 全站 logo 条、频道栏、频道抽屉都隐藏（见下方 body.page-author 规则）；
 *   - tabs 钉在屏幕顶部 sticky。
 *
 * 所有样式均加 .page-author 前缀，避免污染其他页面。
 * ============================================================ */

/* 隐藏全站顶部条 / 频道栏 / 频道抽屉：作者主页是"沉浸式作者空间"，
 * 不需要站点 logo、频道导航、底部版权（按运营 2026-08 简化需求）。
 * 注意用 body.page-author 选择器：header.php 把这些元素输出在 body 里，
 * bodyClass 是 'page-author'，所以 body.page-author 是这些元素的有效祖先。 */
body.page-author .mobile-topbar,
body.page-author .mobile-channels,
body.page-author .channel-drawer,
body.page-author .mobile-footer {
    display: none !important;
}

/* CSS 变量（仅作者页用）：--author-accent 仍被 tabs 下划线使用，保留 */
:root {
    --author-accent: #c40000;
}

/* ---- 头部卡片：白底 + 头像 + 文字块（极简） ----
 * 历史：作者主页头部曾包含淡粉紫渐变背景、橙 V 认证标、"+ 关注"按钮、
 * 三列统计（关注/粉丝/获赞），已于 2026-08 简化时整体移除。
 * 恢复时按以下结构在模板 author.php 里加回，再把以下 CSS 注释里的样式解除注释即可：
 *   <div class="author-header-bg" aria-hidden="true"></div>      <- 渐变装饰层
 *   <div class="author-auth">…</div>                             <- 认证信息
 *   <div class="author-actions"><button class="follow-btn">…</button></div>  <- 关注按钮
 *   <ul class="author-stats">…</ul>                              <- 三列统计
 */
.page-author .author-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* 头像：缩小到 52px，去掉原本的双层白色描边和淡紫阴影，更克制 */
.page-author .author-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f4f4;
}

.page-author .author-avatar-img,
.page-author .author-avatar-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-author .author-avatar-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 右侧文字块：姓名 + 简介垂直堆叠 */
.page-author .author-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* 头像 52px 居中时，文字块略向上微调一点视觉重心 */
    justify-content: center;
}

.page-author .author-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    /* 名字单行省略号：作者名通常不超过 14 字，单行足够 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-author .author-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #888;
    /* 简介最多 2 行省略号，比头条那种压成一行更友好 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 以下样式在简化时已移除（保留注释以备恢复）：
 *
 * .author-header-bg { ... }                 <- 渐变装饰层（var --author-header-grad/decor）
 * .author-auth / .author-auth-badge / .author-auth-text   <- 认证信息 + 橙 V 标识
 * .author-actions / .follow-btn / .follow-btn.is-following  <- 关注按钮两态
 * .author-stats / .stat-item / .stat-value / .stat-label    <- 三列统计（关注/粉丝/获赞）
 *
 * ---- Tabs ----
 * 简化后：顶部条 + 频道栏都已 display:none，tabs 直接钉到屏幕顶部即可。
 * 历史：原来 top: 99px = 顶部条 62px + 频道栏 ≈ 37px。
 */
.page-author .author-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 16px;
}

.page-author .author-tab {
    position: relative;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 15px;
    line-height: 40px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.page-author .author-tab + .author-tab {
    margin-left: 8px;
}

.page-author .author-tab.is-active {
    color: #222;
    font-weight: 700;
    font-size: 16px;
}

.page-author .author-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--author-accent);
}

/* ---- 卡片列表（在作者主页内的微调） ----
 * 作者主页顶部已展示作者信息，所以卡片省掉了小头像/作者名小行，
 * 直接让标题更突出。
 */
.page-author .mobile-feed-item {
    background: #fff;
}

.page-author .mobile-feed-item .meta-line {
    margin-top: 6px;
}

.page-author .mobile-feed-copy h2 {
    font-size: 16px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ♥ 点赞数：与时间/阅读数视觉一致，灰字 */
.page-author .meta-likes {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #999;
    font-size: 12px;
    line-height: 1;
}

.page-author .meta-likes-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* ---- 空态 ---- */
.page-author .author-empty {
    padding: 56px 24px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
    line-height: 1.6;
    background: #fff;
}

/* ---- Tab 内容切换：hidden 属性直接隐藏 ---- */
.page-author .author-feed-pane[hidden] {
    display: none;
}

/* ---- 加载更多状态：跟随对应 tab ---- */
.page-author .feed-status-mobile[hidden] {
    display: none;
}

/* ---- 小屏微调 ---- */
@media (max-width: 360px) {
    .page-author .author-avatar { width: 48px; height: 48px; }
    .page-author .author-name { font-size: 16px; }
}

/* 详情页"来源"链接：让作者名在 detail 页里可点跳作者主页，hover 时给个红色反馈 */
.detailView .aside-source {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailView .aside-source:hover,
.detailView .aside-source:active {
    color: var(--author-accent, #c40000);
}

/* ============================================================
 * 详情页作者介绍卡（partials/author_intro_card.php）
 * ------------------------------------------------------------
 * 位置：detail.php / detail_video.php 中"收录于专题"块的下方。
 * 风格参考微信公众号文章末尾的作者卡：白底 + 圆角 + 头像 + 名字/简介 + 右箭头。
 * 整体是一个 <a>：点击任意区域跳转作者主页。
 *
 * 用 .detailView 前缀隔离作用域，避免污染其它页面。
 * 用 px 单位：作者卡片在作者主页（px）和详情页（rem）都要工作，
 * px 写法保证详情页 rem 重置（font-size:32.6px）不会缩放卡片尺寸。
 * ============================================================ */
.detailView .author-intro-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.detailView .author-intro-card:hover,
.detailView .author-intro-card:active {
    border-color: var(--author-accent, #c40000);
    background: #fffafa;
}

/* 头像：52px 圆形，无阴影描边（与作者主页简化版风格一致） */
.detailView .author-intro-card-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f4f4;
}

.detailView .author-intro-card-avatar img,
.detailView .author-intro-card-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detailView .author-intro-card-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 名字 + 简介：垂直堆叠，flex:1 占满中间空间 */
.detailView .author-intro-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.detailView .author-intro-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    /* 单行省略号：作者名通常 ≤ 14 字，单行足够 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detailView .author-intro-card-intro {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    /* 单行省略号：保持卡片紧凑 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右箭头：默认灰色，hover 时变红 + 微右移（传达"进入"意图） */
.detailView .author-intro-card-action {
    flex: 0 0 auto;
    color: #c0c0c0;
    padding-left: 4px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.detailView .author-intro-card-action svg {
    width: 22px;
    height: 22px;
    display: block;
}

.detailView .author-intro-card:hover .author-intro-card-action,
.detailView .author-intro-card:active .author-intro-card-action {
    color: var(--author-accent, #c40000);
    transform: translateX(2px);
}