/* =====================================================
  比赛推荐页样式
  基于 home.css 视觉体系扩展（左侧导航 + 右侧内容框架）
  基调：黑灰白
  ===================================================== */

/* 筛选栏：横向滚动支持 */
.jc-filter-bar {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.jc-filter-bar::-webkit-scrollbar {
    display: none;
}

.jc-filter-bar .filter-btn {
    flex-shrink: 0;
}

/* 竞足/竞篮/其他 按钮圆角 */
.filter-btn-round {
    border-radius: 25px;
}

/* 顶部筛选栏「关注 / 其他」入口：位于灰色胶囊框内，样式跟随组内按钮
   （透明底 + 灰字，鼠标经过变黑）——不带 .filter-btn，因此不参与竞足 / 竞篮类型筛选。 */
.rc-nav-follow,
.rc-nav-other {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 26px;
    border: none;
    border-radius: 25px;
    background: transparent;
    color: #666;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rc-nav-follow:hover,
.rc-nav-other:hover {
    color: #222;
}

/* 【由 Agent 完成】2026-10-01 顶部「关注 / 专家 / 推荐」入口图标：15px，与 14px 文字协调
   （recommend_list 页「专家」= layui-icon-user；expert_more 页「推荐」= layui-icon-read） */
.rc-nav-follow .layui-icon,
.rc-nav-other .layui-icon {
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 768px) {
    .rc-nav-follow,
    .rc-nav-other {
        padding: 7px 18px;
        font-size: 13px;
    }
}

/* 顶部右上角「用户条」样式已抽到公共文件 user_strip.css（各页面共用） */

/* 【由 Agent 完成】2026-09-29 售卖截止后：支付按钮置灰不可点 */
.rd-btn[disabled],
.rd-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rd-btn-main[disabled],
.rd-btn-main.disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 竞足 / 竞篮 / 其他：三个选项同处一个灰色胶囊框（分段控件）
   框内不留间隙，按钮直接撑满整框 */
.jc-type-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    flex-shrink: 0;
    overflow: hidden;
    background: #f2f4f7;
    border-radius: 25px;
}

.jc-filter-bar .jc-type-group .filter-btn {
    padding: 9px 26px;
    border-radius: 25px;
    font-size: 14px;
    color: #666;
    background: transparent;
}

/* 选中项：灰框内黑色胶囊 + 白字，字号比未选中大 2 号 */
.jc-filter-bar .jc-type-group .filter-btn.active {
    background: #222;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.jc-filter-bar .jc-type-group .filter-btn:hover {
    background: transparent;
    color: #222;
}

.jc-filter-bar .jc-type-group .filter-btn.active:hover {
    background: #222;
    color: #fff;
}

/* 【由 Agent 完成】2026-10-01 统一「推荐首页 / 专家排行页」顶端按钮的高度与宽度：
   两页灰胶囊组内所有按钮（关注 / 竞足·竞篮·足球·篮球 / 专家·推荐）统一
   电脑端 高 40px、宽 84px；手机端 高 35px、宽 66px，文字水平居中 */
.jc-filter-bar .jc-type-group > .filter-btn,
.jc-filter-bar .jc-type-group > .rc-nav-follow,
.jc-filter-bar .jc-type-group > .rc-nav-other,
.jc-filter-bar .jc-type-group > .em-type-follow,
.jc-filter-bar .jc-type-group > .em-nav-recommend {
    box-sizing: border-box;
    height: 40px;
    width: 84px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
}

/* 【由 Agent 完成】2026-10-01 顶端两个跨页入口按钮的内部右侧留白各增加 5px
   （按钮宽高固定 84px / 40px，box-sizing: border-box，故只改 padding-right：
     内容区右边界左移 5px，文字居中后右侧留白 +5px，即 8px → 13px）
   · 比赛推荐页（recommend_list）的「专家」按钮 → .rc-nav-other
   · 专家排行页（expert_more）的「推荐」按钮 → .em-nav-recommend
   两按钮都带这些类，用 :not() 区分彼此，互不影响 */
.jc-filter-bar .jc-type-group > .rc-nav-other:not(.em-nav-recommend),
.jc-filter-bar .jc-type-group > .em-nav-recommend {
    padding-right: 13px;
}

@media (max-width: 768px) {
    .jc-filter-bar .jc-type-group .filter-btn {
        padding: 7px 18px;
        font-size: 13px;
    }

    .jc-filter-bar .jc-type-group .filter-btn.active {
        font-size: 15px;
    }

    /* 手机端同样统一：高 35px、宽 66px */
    .jc-filter-bar .jc-type-group > .filter-btn,
    .jc-filter-bar .jc-type-group > .rc-nav-follow,
    .jc-filter-bar .jc-type-group > .rc-nav-other,
    .jc-filter-bar .jc-type-group > .em-type-follow,
    .jc-filter-bar .jc-type-group > .em-nav-recommend {
        height: 35px;
        width: 66px;
        padding: 0 6px;
    }

    /* 手机端同样：右侧留白 6 → 11px（+5px） */
    .jc-filter-bar .jc-type-group > .rc-nav-other:not(.em-nav-recommend),
    .jc-filter-bar .jc-type-group > .em-nav-recommend {
        padding-right: 11px;
    }
}

/* =====================================================
   广告区：电脑端 3 个并排；手机端只显示一个，自动轮播
   纯文字 + 图标 + 渐变背景，不使用图片
   ===================================================== */
.rc-ad-zone {
    margin: 16px 30px 0;   /* 与下方推荐列表左右侧对齐 */
}

.rc-ad-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.rc-ad {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 16px 18px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rc-ad:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.rc-ad-model   { background: linear-gradient(135deg, #3b6cf6, #6a8cff); }
.rc-ad-vip     { background: linear-gradient(135deg, #f0a020, #f7c05a); }
.rc-ad-publish { background: linear-gradient(135deg, #22262c, #4a5058); }

.rc-ad-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-ad-icon .layui-icon {
    font-size: 22px;
    color: #fff;
}

.rc-ad-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-ad-main strong {
    font-size: 16px;
    font-weight: 700;
}

.rc-ad-main em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.92;
}

.rc-ad-go {
    flex: none;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.26);
    white-space: nowrap;
}

/* 轮播指示点：默认隐藏，仅手机端显示 */
.rc-ad-dots {
    display: none;
}

/* =====================================================
   热门专家区：白色圆角通栏
   ===================================================== */
.rc-expert-zone {
    margin: 16px 30px 20px;   /* 左右与推荐列表对齐，下方与列表间距 20px */
    padding: 16px 18px 18px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    /* 下阴影收窄（原 0 6px 18px）：手机端搜索条吸顶后层级更高，
       过大的扩散会被搜索条白底裁掉，看起来像被截断 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.rc-expert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;      /* 窄屏放不下时标题与排序标签自动换行 */
    gap: 12px;
    margin-bottom: 14px;
}

.rc-expert-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

/* 标题后的球类图标（⚽️ / 🏀）：与文字留一小段空格 */
.rc-expert-ball {
    margin-left: 5px;
    font-size: 15px;
    line-height: 1;
    vertical-align: baseline;
}

/* 排序标签：三个同处一个圆角灰底胶囊内 */
.rc-expert-tabs {
    display: flex;
    align-items: center;
    gap: 0;               /* 灰框与选中黑框之间不留任何间隔 */
    flex: none;
    padding: 0;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;     /* 黑块贴边时同样按 20px 圆角裁剪 */
}

.rc-expert-tab {
    padding: 7px 16px;
    border: none;
    border-radius: 20px;
    background: transparent;   /* 默认透明，底色由外层灰框提供 */
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.rc-expert-tab.active,
.rc-expert-tab:hover {
    background: #222;
    color: #fff;
}

/* 「更多」与前面的「连红」拉开 5px（同组其余标签仍 gap:0 紧贴）
   ——分组感：前三个是排序标签，右边这个是展开/收起开关 */
.rc-expert-tab[data-sort='more'] {
    margin-left: 5px;
}

.rc-expert-wrap {
    position: relative;
}

/* 专家横排：一屏 4 个，超出后横向滚动（电脑端点右侧竖排三点，手机端手指左滑） */
.rc-expert-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
}

.rc-expert-grid::-webkit-scrollbar {
    display: none;                    /* Chrome / Safari */
}

/* 点「更多」后：换行铺开显示全部专家（不再横向滚动） */
.rc-expert-grid.expanded {
    flex-wrap: wrap;
    overflow-x: visible;
}

/* 该球类暂无专家时的占位文案（竞足 → 足球专家，竞篮 → 篮球专家） */
.rc-expert-none {
    width: 100%;
    padding: 30px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* 电脑端：右侧竖排三个点（仅在专家超出一屏时出现） */
.rc-expert-more {
    display: none;
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 22px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #9ca3af;
    cursor: pointer;
    z-index: 2;
}

.rc-expert-more .layui-icon {
    font-size: 18px;
    line-height: 1;
}

.rc-expert-more:hover {
    color: #222;
}

.rc-expert-viewmore {
    margin: 14px 0 6px;    /* 下方再留 6px */
    display: flex;         /* 两枚按钮并排、右对齐、同宽 */
    justify-content: flex-end;
    gap: 10px;
}

.rc-expert-viewmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                    /* 图标与文字间距 */
    width: 148px;                /* 「我的关注」与「查看更多专家」同宽 */
    padding: 8px 0;
    border: 1px solid #e5e7eb;   /* 灰边框（更浅） */
    border-radius: 999px;        /* 胶囊 */
    background: #ffffff;         /* 白底 */
    color: #6b7280;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rc-expert-viewmore-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

/* 「我的关注」与「查看更多专家」两枚按钮风格完全一致（白底灰框灰字，仅文案不同），
   不再给「我的关注」单独写黑胶囊样式；.rc-follow-btn 只作标识用，不定义外观 */

/* 专家卡：竖排（头像 → 昵称 → 几中几），参考设计稿样式 */
.rc-expert-card {
    /* flex-grow:1 → 专家不足一屏（<9 个）时自动摊开撑满通栏；
       flex-shrink:0 → 超出一屏时保持单卡宽度，由横向滚动查看 */
    flex: 1 0 calc((100% - 96px) / 9);   /* 电脑端一屏 9 个（8 个 12px 间距） */
    width: auto;
    min-width: 0;      /* 允许卡片窄于内容，昵称按省略号截断而不是撑宽卡片 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px 10px;
    /* 固定卡片高度：昵称长短 / 有无战绩文案不影响高度，整排对齐（130 = 内边距16 + 头像64 + 昵称29 + 战绩21） */
    height: 130px;
    box-sizing: border-box;
}

/* 热门专家区：刷新后逐个滑出（从左向右滑入 + 淡入，延迟由 JS 按卡片顺序错开）
   位移取负值：向左偏移不产生右侧溢出，避免动画期间误判为「专家超出一屏」 */
@keyframes rcExpertSlideIn {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rc-expert-card.rc-expert-slide {
    animation: rcExpertSlideIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 系统开启「减少动态效果」时不做位移，直接显示 */
@media (prefers-reduced-motion: reduce) {
    .rc-expert-card.rc-expert-slide {
        animation: none;
    }
}

/* 点「更多」展开时：原本被横向滚动藏在右侧的专家卡逐个滑出
   （放在 .rc-expert-slide 之后，覆盖首屏入场动画） */
@keyframes rcExpertPopIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rc-expert-card.rc-expert-pop {
    animation: rcExpertPopIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 平板：一屏 7 个专家，超出点右侧竖排三点
   （必须放在基础 .rc-expert-card 之后，否则会被上面的 flex 简写覆盖） */
@media (min-width: 769px) and (max-width: 1199px) {
    .rc-expert-card {
        flex: 1 0 calc((100% - 72px) / 7);   /* 6 个 12px 间距；不足 7 个时摊开撑满 */
    }
}

.rc-expert-avatar {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: visible;   /* 让火焰角标能露在头像外 */
}

.rc-expert-avatar img {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* 首位专家头像右下角的火焰角标 */
.rc-expert-fire {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-expert-fire .layui-icon {
    font-size: 11px;
    line-height: 1;
}

.rc-expert-name {
    margin-top: 8px;
    max-width: 100%;
    font-size: 12px;      /* 专家名称统一 12px */
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-expert-record {
    margin-top: 4px;
    font-size: 12px;
    color: #9ca3af;
}

/* 黑色圆角返回按钮（推荐详情顶部） */
.filter-btn-dark {
    background: #222;
    color: #fff;
    border-radius: 25px;
}

.filter-btn-dark:hover {
    background: #000;
    color: #fff;
}

/* 推荐详情 meta 行：发布时间 + 截止时间 + 阅读量 + 收藏 */
.rd-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    color: #95a5a6;
}

.rd-meta-left {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    min-width: 0;
}

.rd-meta-left span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-meta-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.rd-view-wrap {
    color: var(--gray-600);
    font-size: 14px;
    white-space: nowrap;
}

.rd-view-count {
    color: #e53935;
    font-weight: 700;
}

.rd-fav-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gray-500);
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease;
}

.rd-fav-icon:hover {
    color: var(--gray-900);
}

.rd-fav-icon.faved {
    color: #ff9800;
}

/* 推荐详情：作者信息模块（比赛卡片上方）——左 作者 / 右 胜率+近N中N */
.rd-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 左右都贴下方 .rd-match-info 卡片外沿（30px 处）：
       头像左边缘对齐卡片左侧，百分比右边缘对齐卡片右侧，各 -1px 抵消占位边框 */
    margin: 9px 29px 0;    /* 上方间距再 -5px */
    padding: 12px 0;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 12px;
}

.rd-author-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* 头像容器：圆形黑底，关注按钮贴其底部、左右撑满不留白 */
.rd-author-avatar {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #111;
    overflow: visible;
}

.rd-avatar-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.rd-author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* 「认证专家」：跟在昵称右边的红色小标签（10px + 2px 白色外框） */
.rd-author-badge {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;                   /* 上间距再 +1px（原 -3px，标签整体再下移 1px） */
    margin-left: 1px;            /* 左移 2px（原 3px） */
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 400;
    color: #fff;
    background: #e5484d;
    border: 2px solid #fff;      /* 2px 白色外框 */
    border-radius: 12px 0 12px 0;     /* 圆角 12px，右上 / 左下仍为直角 */
    white-space: nowrap;
    box-sizing: content-box;
}

/* 关注按钮：头像底部下移 2px，左右撑满头像宽度（两侧不留白）
   【由 Agent 完成】2026-09-28 上下间距 1px、文字 8px（原 2px / 10px） */
.rd-follow-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    width: 100%;
    padding: 1px 0;
    font-size: 8px;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    background: #111111;
    border: 2px solid #fff;
    border-radius: 999px;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity .15s ease;
}

.rd-follow-btn:hover { opacity: .85; }

/* 已关注态：左右各内缩 2px（上下间距与基础态一致，都是 1px） */
.rd-follow-btn.followed {
    background: #e5484d;
    left: 2px;
    right: 2px;
    width: auto;
    padding: 1px 0;
}

a.rd-avatar-link:hover img {
    opacity: .85;
}

.rd-author-info {
    min-width: 0;
}

.rd-author-name {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-author-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: nowrap;
}

/* 称号：纯灰字，无外框、不斜体 */
.rd-author-title {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* 右侧：胜率（大红字，整数）+ 最高连中（小灰字） */
.rd-author-right {
    flex: none;
    text-align: center;
}

/* 详情页作者卡：胜率上方的统计范围标签（近10场 / 近30天 / 总14场） */
.rd-rate-tag {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: #9ca3af;
    white-space: nowrap;
}

.rd-author-rate {
    font-size: 33px;
    font-weight: 700;
    color: #e5484d;
    line-height: 1.1;
}

.rd-author-rate span {
    font-size: 14px;
    margin-left: 1px;
}

.rd-author-form {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
}

/* 最高连中：场次数字红色、比正文大 2 号、加粗 */
.rd-form-num {
    font-size: 13px;
    font-weight: 700;
    color: #e5484d;
}

/* 手机端：作者模块随卡片左右边距收窄 */
@media (max-width: 768px) {
    .rd-author {
        /* 同桌面：左右都贴下方卡片外沿（16px 处，-1px 抵消边框） */
        margin: 5px 15px 0;
        padding: 10px 0;
    }

    .rd-author-avatar {
        width: 48px;
        height: 48px;
    }

    .rd-author-name {
        font-size: 14px;
    }

    .rd-author-rate {
        font-size: 27px;
    }
}

/* 手机端：方案标签统一铺满整行（比分标签仍按内容自适应） */
@media (max-width: 768px) {
    .rd-rec-item,
    .rd-rec-item.is-sub,
    .rd-rec-item.is-main {
        width: 100%;
        max-width: 100%;
    }
}

/* 推荐详情：比赛信息通栏（home 卡片风格） */
.rd-match-info {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 20px;
    margin: 9px 30px 24px;    /* 与上方作者卡片间距再 -5px */
}

/* 可点击（有比赛 id）：鼠标经过 / 按下给出反馈
   常态留一圈透明边框占位，hover 时只改颜色，避免边框出现导致内容位移 */
.rd-match-info.is-clickable {
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.rd-match-info.is-clickable:hover {
    border-color: #111111;   /* 鼠标经过：只变外框边线，背景色保持 #f5f5f5 不变 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.rd-match-info.is-clickable:active {
    border-color: #111111;
    box-shadow: none;
    transform: scale(.99);
}

.rd-match-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.rd-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 60px;
}

.rd-match-team .team-logo {
    width: 60px;
    height: 60px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.rd-match-team .team-logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.rd-match-team .team-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-900);
    max-width: 90px;
    text-align: center;
    line-height: 1.2;
    word-break: break-all;
    /* 队名已在模板截断到 6 字：不再用 line-clamp，避免出现省略号 */
    display: block;
    overflow: visible;
}

.rd-match-vs {
    text-align: center;
    font-size: 14px;
    color: var(--gray-900);
    font-weight: bold;
}

.rd-match-vs div {
    font-size: 12px;
    font-weight: normal;
    color: #999;
}

.rd-match-status {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: normal;
    color: #999;
    background: #fff;
    border: 0.8px solid #d9d9d9;
    border-radius: 10px;
    line-height: 1.4;
}

/* 进行中：红色背景框（白字 + 红色边框，与胶囊同形状） */
.rd-match-status.rd-status-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 600;
    background: #e5484d;
    border: 0.8px solid #e5484d;
}

/* 进行中：状态胶囊内的闪烁圆点 */
.rd-live-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    animation: rd-live-blink 1s ease-in-out infinite;
}

@keyframes rd-live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .2; }
}

.rd-match-vs .rd-score {
    display: block;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    margin: 1px 0;
    word-break: break-all;
}

/* 未开赛：比分处显示「VS」，与联赛名同色（#999） */
.rd-match-vs .rd-score.rd-score-vs {
    color: #999;
}

@media (max-width: 768px) {
    .rd-match-info {
        margin: 0 16px 16px;
        padding: 16px;
    }

    .rd-match-teams {
        gap: 16px;
    }

    .rd-match-info {
        margin: 5px 16px 16px;
        padding: 16px;
    }

    .rd-match-top {
        justify-content: space-between;
        gap: 0;
    }

    .rd-match-team .team-logo {
        width: 55px;
        height: 55px;
    }

    .rd-match-team .team-logo img {
        width: 45px;
        height: 45px;
    }

    .rd-match-team .team-name {
        font-size: 12px;
        max-width: 72px;
    }

    .rd-match-vs .rd-score {
        font-size: 24px;
    }

    .rd-meta {
        gap: 6px;
    }

    .rd-meta-left {
        gap: 6px;
        font-size: 11px;
    }

    .rd-meta-left span {
        max-width: none;
    }

    .rd-meta-right {
        gap: 6px;
    }

    .rd-view-wrap {
        font-size: 11px;
    }

    .rd-fav-icon {
        font-size: 16px;
    }
}

/* 选择免费/付费后：顶部「全部推荐」按钮变为灰色底灰边框 */
.jc-filter-bar .filter-btn.dimmed {
    background-color: #f2f3f5 !important;
    color: #6b7280 !important;
    border: 0.8px solid #d9dce1 !important;
}

/* ============ 卡片网格 ============ */
.recommend-card-box {
    padding: 0 30px 40px;
    margin-top: -15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* ============ 搜索条 ============ */
.recommend-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 30px 40px;
}

/* ============ 搜索筛选层：电脑端屏幕正中弹出 / 手机平板从顶部滑出 ============ */

/* 搜索条容器（触发框外层，仅占位 / 适配宽度） */
.rc-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
}

/* 搜索条本身：无输入框，整条可点 → 展开筛选层。
   样式参考发布推荐页「今日比赛」选择框：白底 + 浅灰描边 + 圆角，左放大镜、右侧下拉箭头 */
.rc-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    height: 40px;
    padding: 0 14px;
    border: 0.8px solid #e3e5e8;
    border-radius: 20px;
    background: #fff;
    color: #1f2937;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.rc-search-bar:hover {
    border-color: #d5d8dd;
}

.rc-search-ico {
    flex: none;
    color: #9ca3af;
    font-size: 16px;
}

.rc-search-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-search-text.placeholder {
    color: #9ca3af;
}

.rc-search-arrow {
    flex: none;
    color: #9ca3af;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.rc-search-bar.open .rc-search-arrow {
    transform: rotate(180deg);       /* 展开时箭头翻转，与「今日比赛」下拉一致 */
}

/* 压暗遮罩：两种形态共用（点击关闭），置于浮动按钮之上、面板之下 */
.rc-search-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* 下沿延伸到 iOS 底部安全区之外，避免 iPhone 底部那条露出不透明的页面内容 */
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.rc-search-mask.show {
    opacity: 1;
    visibility: visible;
}

/* 电脑端（默认）：屏幕正中弹出（缩放 + 淡入），最顶层遮挡页面 */
.rc-search-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(920px, 92vw);
    max-width: 92vw;
    max-height: 470px;           /* 层固定高度 350 → 470（增加 120px），超出内部滚动 */
    z-index: 1001;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, .22);
    padding: 0 26px;              /* 电脑端：左右留白 16 → 26（+10） */
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .25s ease, transform .28s ease,
                visibility .28s, padding .28s;
}

.rc-search-panel.open {
    height: 470px;                /* 电脑端固定 350 → 470（增加 120px），超出内部滚动 */
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    padding: 16px 26px;           /* 电脑端：左右留白 16 → 26（+10），上下不变 */
    /* 纵向 flex：滚动区占满剩余高度，底部按钮固定贴在层的下沿，不随内容滚动 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 足球 / 篮球（非关注专家）：层高 +6px（470 → 476），比赛卡片滚动区随之变化 */
.rc-search-panel.open:not(.mode-experts) {
    height: 476px;
    max-height: 476px;
}

/* 层内滚动区：标签 / 联赛 / 比赛 / 专家卡片都在这里滚动（min-height:0 让 flex 子项可收缩） */
.rc-sp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 第一排 / 第二排：标签（快捷入口 + 联赛名） */
.rc-sp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* 联赛标签：滚动比赛卡片时吸在滚动区顶部不动（第一排球类标签本就在滚动区外，也已固定）；
   背景白 + z-index 保证卡片从下方滚过时不透出 */
.rc-sp-leagues {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    margin-bottom: 16px;      /* 联赛标签与下方比赛卡片的间距 4 → 16（+12） */
}

/* 第一排右侧提示：「你已进入<足球>专栏」，与选项卡同一行、右对齐 */
.rc-sp-tip {
    margin-left: auto;        /* 推到最右侧 */
    align-self: center;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* 按钮上方单独一行：写清当前筛选条件（球类 / 联赛 / 比赛 / 专家） */
.rc-sp-summary {
    flex: none;                       /* 不参与伸缩，始终在按钮上方 */
    /* 下沿紧贴下方虚线（底部对齐）：与虚线之间不留间距，间距改放在上方 */
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px 8px 0 0;   /* 左下 / 右下取消圆角：下沿与虚线齐平 */
    background: #f7f8fa;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-all;
}

/* 筛选条件说明：非变量文字（前缀 / 字段名 / 全部 / 分隔符）淡色 */
.rc-sps-lab {
    color: #9ca3af;
}

/* 筛选条件说明：实际选中的选项加粗变黑 */
.rc-sps-val {
    color: #111827;
    font-weight: 700;
}

/* 层底部操作区：确定 / 重置并排；flex 布局下固定贴在层的下沿，内容滚动时不移动 */
.rc-sp-actions {
    flex: none;                       /* 不参与伸缩，始终占据层底部 */
    display: flex;
    gap: 12px;
    margin-top: 0;                    /* 虚线上方不留间距：筛选提示框下沿与虚线底部对齐 */
    padding: 14px 0 2px;              /* 虚线与按钮之间的间距 */
    border-top: 1px dashed #f0f1f3;   /* 按钮上方虚线分隔，与层内其他分隔线同色 */
    background: #fff;
}

.rc-sp-btn {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 重置：白底 + 浅灰描边 + 深灰文字（与层内标签同款） */
.rc-sp-btn-reset {
    border: 0.8px solid #e3e5e8;
    background: #fff;
    color: #4b5563;
}

/* 确定：黑底白字（主按钮） */
.rc-sp-btn-ok {
    border: 0.8px solid #222222;
    background: #222222;
    color: #fff;
    font-weight: 600;
}

/* 移上 / 按下：重置保留同款反馈；确定已是黑色，只在移上 / 按下时加深为纯黑 */
.rc-sp-btn-reset:hover,
.rc-sp-btn-reset:active {
    border-color: #222222;
    color: #222222;
}

.rc-sp-btn-ok:hover,
.rc-sp-btn-ok:active {
    border-color: #000000;
    background: #000000;
    color: #fff;
}

.rc-sp-btn-reset:active,
.rc-sp-btn-ok:active {
    transform: scale(0.98);
}

/* 电脑 / 平板：两个按钮固定 200px 并居中（手机端仍平分整行） */
@media (min-width: 769px) {
    .rc-sp-actions {
        justify-content: center;
    }

    .rc-sp-btn {
        flex: none;
        width: 200px;
    }
}

/* 层内空状态：当前球类（如篮球）暂无数据 —— 纯文字提示，固定高度 170px（175 → 170，缩减 5px），文字垂直水平居中 */
.rc-sp-empty {
    box-sizing: border-box;
    height: 170px;
    margin: 4px 0 8px;
    padding: 22px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #95a5a6;
    font-size: 14px;
}

/* 第一排（足球 / 篮球 / 关注专家 / 排行榜）：固定在层的顶部，不随内容滚动（flex 固定项）；
   下方虚线分隔，与下面的内容区隔开 */
#rcSpQuick {
    flex: none;
    margin-top: 5px;              /* 电脑 / 平板端：第一行按钮上边距 +5px（手机端下方重置为 0） */
    /* 虚线上下间距统一 10px：与「关注专家」标签下的间距保持一致
       （专家模式见 .mode-experts #rcSpQuick：下方由卡片区的 padding-top 10px 顶出同样间距） */
    padding-bottom: 10px;
    margin-bottom: 15px;          /* 虚线与下方「全部 / 联赛」标签行的间距 10 → 15（+5px） */
    border-bottom: 1px dashed #f0f1f3;
}

/* 选中 = 黑色标签按钮（未选中白底描边，hover 变深） */
.rc-sp-chip {
    padding: 8px 18px;            /* 上下各缩减 2px（10 → 8） */
    border: 0.8px solid #e3e5e8;
    border-radius: 20px;
    background: #fff;
    color: #4b5563;
    font-size: 12px;              /* 14 → 12 */
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}

.rc-sp-chip:hover {
    border-color: #222;
    color: #222;
}

.rc-sp-chip.active {
    background: #222;
    border-color: #222;
    color: #fff;
    font-weight: 600;
}

/* 第一排：足球 / 篮球 / 关注专家 / 排行榜 —— 分段控件，与顶部「竞足 / 竞篮」同款：
   同处一个灰色胶囊框内（框内不留间隙），选中 = 黑底白字且字号大 2 号 */
.rc-sp-seg {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #f2f4f7;
    border-radius: 25px;
}

.rc-sp-seg-btn {
    flex-shrink: 0;
    padding: 9px 26px;
    border: none;
    border-radius: 25px;
    background: transparent;
    color: #666;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s;
}

.rc-sp-seg-btn.active {
    background: #222;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.rc-sp-seg-btn:hover {
    background: transparent;
    color: #222;
}

.rc-sp-seg-btn.active:hover {
    background: #222;
    color: #fff;
}

@media (max-width: 768px) {
    .rc-sp-seg-btn {
        padding: 7px 16px;      /* 手机端收紧：4 个标签在窄屏也同处一行胶囊内 */
        font-size: 13px;
    }

    .rc-sp-seg-btn.active {
        font-size: 15px;
    }
}

/* 足球 / 篮球（非关注专家）：滚动条只出现在比赛卡片区内部，不超出卡片区域
   —— 滚动区不滚动，卡片区用 flex 撑满剩余高度并自己滚动 */
.rc-search-panel.open:not(.mode-experts) .rc-sp-scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rc-search-panel.open:not(.mode-experts) .rc-sp-leagues {
    flex: none;                   /* 联赛标签保持自身高度，不参与伸缩 */
    flex-wrap: nowrap;            /* 不换行：所有联赛标签排成一排 */
    overflow-x: auto;             /* 超出部分向左滑查看 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* 滚动条隐藏 */
    padding-bottom: 2px;
}

/* 联赛行滚动条隐藏（WebKit） */
.rc-search-panel.open:not(.mode-experts) .rc-sp-leagues::-webkit-scrollbar {
    display: none;
}

/* 标签本身不压缩：保证每个联赛名完整显示，靠横向滚动而不是挤压 */
.rc-search-panel.open:not(.mode-experts) .rc-sp-league {
    flex: none;
}

.rc-search-panel.open:not(.mode-experts) .rc-sp-matches {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;             /* 高度交给 flex：占满滚动区剩余空间 */
    overflow-y: auto;
    /* 卡片不足三排时也从容器顶部开始排（不再垂直居中），留白全部落在下方 */
    align-content: start;
}

/* 加载中 / 空状态：保持自身高度，让剩余空间全部归比赛卡片区 */
.rc-search-panel.open:not(.mode-experts) .rc-sp-loading,
.rc-search-panel.open:not(.mode-experts) .rc-sp-empty {
    flex: none;
}

/* 关注专家模式：滚动区本身不再滚动（滚动交给专家卡片列表），
   卡片区纵向撑满剩余高度 —— 上沿紧贴上方虚线、下沿紧贴下方虚线 */
.rc-search-panel.mode-experts.open .rc-sp-scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rc-search-panel.mode-experts #rcSpQuick {
    padding-bottom: 10px;     /* 标签按钮与下方虚线之间留出间距 */
    margin-bottom: 0;
    flex: none;               /* 第一排标签不参与伸缩，保持自身高度 */
}

/* 关注专家模式：层整体加高 50px，容纳加高后的专家滚动区（350 → 400） */
.rc-search-panel.mode-experts.open {
    height: 435px;        /* 400 → 435：给按钮上方新增的「筛选条件」说明行留出高度 */
}

/* 内容区（滚动条内部）：上下各留 14px 内边距；
   容器高度固定 260px（210 → 260，+50px），超出则内部滚动 */
.rc-search-panel.mode-experts .rc-sp-experts {
    margin-top: 0;
    padding: 14px 8px 14px 0;   /* 滚动条内部：上 14px / 下 14px（10 → 14，+4px）/ 右 8px */
    flex: none;
    height: 260px;            /* 210 → 260（+50px） */
    max-height: 260px;
    overflow-y: auto;
}

/* 容器底沿与下边虚线对齐：去掉底部操作区上方 14px 间距 */
.rc-search-panel.mode-experts .rc-sp-actions {
    margin-top: 0;
}

/* 加载中：切换球类 / 读取关注专家时的占位（高度与空状态一致：175px，层高不跳动） */
.rc-sp-loading {
    box-sizing: border-box;
    height: 175px;
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #95a5a6;
    font-size: 14px;
}

/* 关注专家：专家卡片网格（超出层高时内部滚动） */
.rc-sp-experts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    max-height: 196px;
    overflow-y: auto;
    padding-bottom: 2px;
}

.rc-sp-expert {
    box-sizing: border-box;
    height: 62px;             /* 卡片固定最大高度：头像 40 + 上下内边距 20 + 边框 2 */
    max-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #f0f1f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    cursor: pointer;
    transition: all .2s ease;
}

.rc-sp-expert:active {
    background: #f7f8fa;
    transform: scale(0.98);
}

/* 选中态：黑边框（点击选中，再点一次取消；同一时间只有一位被选中） */
.rc-sp-expert.selected {
    border-color: #222222;
}

/* 未登录引导：提示文字在内容区内垂直居中，下方是「立即登录 / 注册」胶囊按钮 */
.rc-sp-login-tip {
    grid-column: 1 / -1;          /* 占满整行 */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.rc-sp-login-text {
    color: #95a5a6;
    font-size: 14px;
}

.rc-sp-login-btns {
    display: flex;
    gap: 12px;
}

.rc-sp-login-btn {
    padding: 8px 22px;
    border: 1px solid #e3e5e8;    /* 灰色描边胶囊 */
    border-radius: 20px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all .18s;
}

.rc-sp-login-btn:hover {
    border-color: #c8ccd2;
    color: #000;
}

.rc-sp-login-btn:active {
    background: #f7f8fa;
    transform: scale(0.98);
}

.rc-spe-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.rc-spe-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rc-spe-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「专家认证」标签：红色胶囊，8 号字，上下内间距 2 / 左右 5px */
.rc-spe-badge {
    flex: none;
    padding: 2px 5px;
    border-radius: 999px;              /* 胶囊 */
    background: #e5484d;               /* 红色，与命中率数值同色系 */
    color: #fff;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.rc-spe-sub {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-spe-rate {
    flex: none;
    margin-left: auto;
    text-align: right;
}

.rc-spe-rate-num {
    font-size: 15px;
    font-weight: 700;
    color: #e5484d;          /* 命中率数值：222 → 红色（与页面其他红色数值同色） */
    line-height: 1.1;
}

.rc-spe-pct {
    font-size: 11px;
    font-weight: 400;
    color: #e5484d;          /* 百分号同样红色，与数值保持一致 */
}

.rc-spe-rate-sub,
.rc-spe-rate-none {
    font-size: 11px;
    color: #9ca3af;
}

/* 第三排：比赛卡片网格（电脑端一排 3 个，手机 / 平板端一列），超出容器高度时上下滚动 */
.rc-sp-matches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 293px;                /* 297 → 293（-4px），超出后内部上下滚动 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 四周留白：卡片阴影（0 2px 10px）不再被容器 overflow 裁掉 —— 尤其是最后一排的下阴影 */
    padding: 4px 10px 14px;
}

.rc-sp-matches::-webkit-scrollbar {
    display: none;
}

.rc-sp-match {
    box-sizing: border-box;
    height: 106px;                /* 卡片固定高度：编号+联赛 18 + 时间 18 + 主队下移 2 + 两队各 18 + 队间 2 + 内边距 24 + 边框 2 ≈ 104 → 106 */
    max-height: 106px;
    flex: none;
    width: auto;                  /* 纵向列表：一张卡片占满整行 */
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f0f1f3;
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    transition: all 0.2s ease;
}

/* 按下：黑边框 + 浅灰底 + 轻微下沉（鼠标移上不再有任何变化） */
.rc-sp-match:active {
    border-color: #222222;
    background: #f7f8fa;
    transform: scale(0.98);
}

/* 选中态：黑边框（点击选中，再点一次取消；同一时间只有一张被选中） */
.rc-sp-match.selected {
    border-color: #222222;
}

/* 卡片第一行：竞彩编号 + 联赛名称 */
.rc-spm-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 2px;
}

/* 竞彩编号（如 周三001）：联赛名左侧，灰色小字 */
.rc-spm-no {
    flex: none;
    font-size: 12px;
    color: #9ca3af;
}

.rc-spm-league {
    font-size: 12px;              /* 14 → 12 */
    font-weight: 400;             /* 700 → 400：不加粗 */
    color: #111827;               /* 黑色 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片第二行：开赛时间（独占一行，灰色小字） */
.rc-spm-time {
    font-size: 12px;
    line-height: 16px;
    color: #9ca3af;
    margin-bottom: 2px;
}

/* 卡片第三 / 四行：logo + 队名（主队一行、客队一行） */
.rc-spm-team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* 两队整体 + 右侧 VS：VS 与左侧两行垂直居中 */
.rc-spm-vs-wrap {
    display: flex;
    align-items: center;
}

.rc-spm-teams {
    flex: 1 1 auto;
    min-width: 0;
}

/* 右侧 VS：20 号字，颜色很淡（接近底色） */
.rc-spm-vs {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: #f7f8fa;               /* #f0f1f3 → 再淡一档，几乎融进白底 */
    letter-spacing: 1px;
}

/* 主队行下移 2px */
.rc-spm-team:first-child {
    margin-top: 2px;
}

/* 客队行与主队行之间：4 → 2px（减少 2px） */
.rc-spm-team + .rc-spm-team {
    margin-top: 2px;
}

.rc-spm-logo {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 0;
    object-fit: cover;
}

.rc-spm-name {
    min-width: 0;                 /* 允许队名在窄卡片里省略号截断 */
    font-size: 13px;
    line-height: 18px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-spm-name.home {
    font-weight: 600;             /* 主队稍作区分 */
}

.rc-spm-name.away {
    color: #4b5563;
}

/* ============ 手机 / 平板端（≤1024px）：筛选层从屏幕最顶端向下滑出，置最顶层 ============ */
@media (max-width: 1024px) {
    /* 顶部抽屉：固定贴顶、左右通栏，收起时整块在屏幕上方（translateY(-100%)） */
    .rc-search-panel {
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 470px;            /* 收起态上限：手机 / 平板 / 电脑端展开高度统一 470px（350 → 470） */
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 30px rgba(17, 24, 39, .18);
        transform: translateY(-100%);
    }

    /* 手机 / 平板：层高随内容变化 —— 切换标签（足球 / 篮球 / 关注专家）、有无数据时高度自动伸缩，
       最多 470px；内容超出时仍由滚动区（比赛卡片 / 专家卡片）内部滚动，底部按钮固定在层下沿 */
    .rc-search-panel.open {
        height: auto;                 /* 470 固定 → 自适应（封顶见 max-height） */
        max-height: 470px;
        padding: 18px 16px 16px;      /* 顶部留一点，避开状态栏 */
        overflow: hidden;             /* 滚动交给 .rc-sp-scroll，底部按钮固定在层的下沿 */
        transform: translateY(0);     /* 从顶端滑下 */
    }

    /* 手机 / 平板端：足球 / 篮球封顶 470 → 476 */
    .rc-search-panel.open:not(.mode-experts) {
        height: auto;
        max-height: 476px;
    }

    /* 手机 / 平板端：关注专家模式封顶更高（470 → 520），容纳加高后的滚动区 */
    .rc-search-panel.mode-experts.open {
        height: auto;
        max-height: 520px;
    }

    /* 手机 / 平板端：关注专家内容滚动框高度 215 → 265（+50px）；
       专家数量少时按实际内容收缩（min-height 保证不塌成一团） */
    .rc-search-panel.mode-experts .rc-sp-experts {
        height: auto;
        min-height: 130px;
        max-height: 265px;
        gap: 10px;                    /* 卡片间距 12 → 10（缩小 2px） */
    }

    /* 手机 / 平板：滚过搜索条所在位置时吸顶（top: 0，盖住顶部菜单），往回滚过原位后自动落回；
       层(1001) / 遮罩(1000) 都在它之上，层滑出时直接盖住搜索条。
       z-index 99 高于顶部菜单(98)，吸顶时搜索条取代菜单占据屏幕最顶端。
       padding 与负 margin 抵消，视觉位置不变；未吸顶时背景同页面底色。 */
    .recommend-search {
        position: sticky;
        top: 0;
        z-index: 99;
        margin: -10px 0 30px;
        padding: 10px 16px;
        background: #f7f4f0;          /* 同 --main-bg */
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    /* 吸顶态（JS 检测 rect.top <= 0 加类）：与顶部菜单同款白底 + 落地阴影 */
    .recommend-search.rc-stuck {
        background: #fff;
        box-shadow: 0 2px 8px rgba(17, 24, 39, .08);
    }

    /* 吸顶在最顶部时：搜索条高度 +2px（40 → 42），白条更厚一点 */
    .recommend-search.rc-stuck .rc-search-bar {
        height: 42px;
    }
}

/* 电脑端（>1024px）：足球 / 篮球的比赛卡片滚动高度 +4px（476 → 480） */
@media (min-width: 1025px) {
    .rc-search-panel.open:not(.mode-experts) {
        height: 480px;
        max-height: 480px;
    }
}

@media (max-width: 768px) {
    /* 手机端：第一行按钮不加额外的上边距（保持原样） */
    #rcSpQuick {
        margin-top: 0;
    }

    /* 手机端：搜索条撑满可用宽度 */
    .recommend-search {
        gap: 4px;
    }

    .rc-search-box {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rc-search-bar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* 手机 / 平板：卡片改为一列（电脑端一排 3 个） */
    .rc-sp-matches {
        grid-template-columns: 1fr;
    }

    .rc-sp-match {
        width: auto;
    }
}

/* ============ 置顶 / 到底部浮动按钮 ============ */
.scroll-btns {
    position: fixed;
    right: 24px;
    bottom: 40px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scroll-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.scroll-btn:hover {
    background: #222222;
    color: #ffffff;
}

/* ============ 滚动加载提示 ============ */
.load-tip {
    text-align: center;
    color: #9aa3af;
    font-size: 13px;
    margin-top: -20px;
    padding: 16px 0 50px;
}

/* ============ 免费/付费筛选 ============ */
.price-tabs {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-tab {
    padding: 8px 26px;
    border: 0.8px solid #e3e5e8;
    border-radius: 20px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 手机端简称（默认隐藏） */
.price-tab .tab-short {
    display: none;
}

.price-tab:hover {
    background: #f7f8fa;
    border-color: #222222;
    color: #222222;
}

.price-tab.active {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

/* ============ 推荐卡片 ============ */
.recommend-card {
    position: relative;
    background: #fff;
    border: 0.8px solid #eae5e0;
    border-radius: 14px;
    overflow: hidden;
    padding-top: 5px;                 /* 卡片内部上方留白 +5px */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.35s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}

/* 进入视口前：由 JS 挂上（默认不带，保证脚本异常时卡片依然可见） */
.recommend-card.rc-hidden {
    opacity: 0;
    transform: translateY(28px);
}

/* 进入视口：滑出（上移淡入）到位 */
.recommend-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 收藏按钮：与标签组并排，靠右对齐，纯图标 */
.rc-fav-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #c4c8ce;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* 覆盖 layui 图标默认 16px 字号 */
.rc-fav-btn .layui-icon {
    font-size: 16px;                  /* 与时间图标同大小（layui 默认 16px） */
}

.rc-fav-btn:hover {
    color: #d4a017;
    transform: scale(1.1);
}

.rc-fav-btn.faved {
    color: #f0c24b;
}

/* 收藏按钮移到底部行：位于时间图标左侧，不再自动靠右 */
.rc-foot .rc-fav-btn {
    position: relative;
    top: -2px;                        /* 收藏图标上移 2px */
    margin-left: 0;
    margin-right: 10px;
}

.rc-foot .rc-time {
    margin-right: auto;               /* 时间靠左，价格仍靠右 */
}

.recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.3);
}

/* 封面图：上方间距与标题间距一致(16px)，左右各留白18px，圆角与卡片相同(14px) */
.rc-cover {
    position: relative;
    width: calc(100% - 36px);
    height: 170px;
    margin: 16px 18px 0;
    overflow: hidden;
    background: #f0f2f5;
    cursor: pointer;
    border-radius: 14px;
}

.rc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.recommend-card:hover .rc-cover img {
    transform: scale(1.05);
}

.rc-cover img.rc-default-img {
    object-fit: contain;
    padding: 18px;
    background: #f5f7fa;
}

/* 类型角标 */
.rc-type-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 12px;
    color: #fff;
    background: #222222;
    padding: 3px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 卡片第一行：左侧专家信息（头像 + 昵称）+ 右侧胜率块 */
.rc-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 0;
}

/* 胜率块：红色大号百分比 + 最高连中（参考设计稿），靠右展示 */
.rc-author-rate {
    flex: none;
    /* 副行是「近10场命中率」这类口径标注，留出足够宽度避免挤压左侧头像昵称 */
    min-width: 86px;
    margin-left: auto;
    text-align: right;
}

.rc-rate-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #e5484d;
}

.rc-rate-pct {
    font-size: 14px;
    font-weight: 600;
    margin-left: 1px;
}

.rc-rate-sub {
    margin-top: 2px;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

.rc-rate-sub b {
    color: #e5484d;
    font-weight: 600;
}

/* 命中率不足（低于 50%）时的占位文案：与副行同色同号 */
.rc-rate-none,
.rd-rate-none {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    line-height: 1.2;
}

/* 专家信息：头像（带认证角标）+ 昵称 / 称号 */
.rc-author {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: #6b7280;
    text-decoration: none;
}

.rc-author-avwrap {
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
}

.rc-author-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f1f3;
    border: 1px solid #f0f1f3;
}

/* 认证专家角标：压在头像底部（与专家主页/更多专家页同款红胶囊） */
.rc-author-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.rc-author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.rc-author-name {
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 专家称号：取消灰框（无背景/无内边距），仅保留灰色文字 */
.rc-author-title {
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-author:hover .rc-author-name {
    color: #e5484d;      /* hover 提示可点 */
}

/* 卡片顶部静态标签行：左对齐（上方有专家行时收紧上间距） */
.rc-tags-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 14px 0;
}

.rc-card-top + .rc-tags-top {
    padding-top: 10px;
}

.rc-tag {
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.rc-tag-dark {
    color: #fff;
    background: #222222;
}

.rc-tag-plain {
    color: #555;
    background: #f2f3f5;
    border: 0.8px solid #e3e5e8;
}

/* 推荐角标 */
.rc-push-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #222222;
    background: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 卡片内容 */
.rc-body {
    padding: 16px 18px 10px;          /* 卡片内部下边距再缩减 3px（18 → 13 → 10） */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 无封面图时，内容区顶部留白保持美观 */
.recommend-card .rc-body:first-child {
    padding-top: 20px;
}

.rc-title {
    font-size: 15px;                  /* 标题文字 15px（与专家主页 / 已发布页卡片标题同号） */
    font-weight: 400;                 /* 不加粗 */
    color: #333;
    margin: -3px 0 6px;               /* 标题上移 3px */
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 标题前缀「单场」：与专家主页方案卡同款（灰色小字，标题环绕） */
.rc-title-mode {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
}

/* 比赛信息条：类型 + 开赛时间 + 联赛 + 对阵，整条可点（进推荐详情页） */
.rc-matchbar {
    margin: 3px 0 10px;               /* 比赛条下移 3px */
    padding: 5px 12px;
    border-radius: 8px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;                  /* 比赛条文字 11 → 12 */
    color: #374151;
    cursor: pointer;
    overflow: hidden;
}

.rc-mb-type {
    flex: none;
    font-weight: 400;
    color: #222222;
}

.rc-mb-time,
.rc-mb-league {
    flex: none;
    color: #6b7280;
    white-space: nowrap;
}

.rc-mb-teams {
    flex: 1;
    min-width: 0;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-mb-arrow {
    flex: none;
    margin-left: auto;
    font-size: 12px;
    color: #b6bec9;
}

.rc-title:hover {
    color: #222222;
}

/* 底部信息：取消下边线，靠卡片底部对齐（整体上移 5px） */
.rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 5px;               /* 收藏行上移 5px */
    padding-top: 1px;                 /* 与上方间距再缩减 3px（12 → 6 → 4 → 1） */
    border-top: none;
}

.rc-time {
    font-size: 12px;
    color: #95a5a6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-price {
    font-size: 17px;
    font-weight: 700;
    color: #222222;
}

.rc-price-free {
    font-size: 13px;
    font-weight: 400;
    color: #7d8794;
    background: #f2f4f7;
    padding: 3px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.rc-price-free:hover {
    color: #222222;
    background: #e5e8ec;
}

.rc-price-pay {
    font-size: 13px;
    font-weight: 400;                 /* 问问分不加粗 */
    color: #d4a018;                   /* 问问分：金色文字 */
    background: #f9f2e4;              /* 同色系浅底 */
    padding: 3px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.rc-price-pay:hover {
    color: #b8860b;
    background: #f2e8d6;
}

/* ============ 空状态 ============ */
/* 【由 Agent 完成】2026-10-01 空状态：与「专家们还未发布，请稍后查看」（.jc-empty）同插图；
   虚线框整体高度减少 80px → 上下内距 80px 改为 40px */
.rc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #9aa3af;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #dddddd;
}

/* ============ 空状态（搜索/筛选无结果） ============ */
.jc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #9aa3af;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #dddddd;
}
.jc-empty .jc-empty-icon,
.rc-empty .jc-empty-icon {
    display: block;
    margin: 0 auto 16px;
    width: 60%;
    max-width: 180px;
    height: auto;
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    .recommend-card-box {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px 30px;
    }

    /* 手机端（≤768px）：足球 / 篮球比赛卡片一排两个（电脑端一排 3 个） */
    .rc-sp-matches {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;                /* 8 → 10：卡片之间间距 +2px */
    }

    /* 手机端：筛选条件说明固定一排不换行，内容过长时向左滑查看（滚动条隐藏）；
       文字在框内左右各留白 5px */
    .rc-sp-summary {
        padding-left: 5px;
        padding-right: 5px;
        white-space: nowrap;
        word-break: normal;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rc-sp-summary::-webkit-scrollbar {
        display: none;
    }

    /* 手机端：搜索条与筛选按钮并排，左对齐卡片（margin / padding 抵消，间距不变） */
    .recommend-search {
        margin: -10px 0 30px;
        padding: 10px 16px;
        gap: 8px;
    }

    .rc-search-box {
        flex: 1;
        min-width: 0;
    }

    .rc-search-bar {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .price-tabs {
        gap: 6px;
    }

    .price-tab {
        padding: 6px 14px;
    }

    .price-tab .tab-full {
        display: none;
    }

    .price-tab .tab-short {
        display: inline;
    }

    /* 手机端浮动按钮缩小并贴近边缘；
       层级降到左侧导航(999)与侧栏遮罩(998)之下：展开左侧抽屉时按钮不浮在导航上 */
    .scroll-btns {
        right: 16px;
        bottom: 24px;
        gap: 10px;
        z-index: 997;
    }

    .scroll-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .rc-cover {
        height: 190px;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .recommend-card-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .recommend-card-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1600px) {
    .recommend-card-box {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================
  比赛推荐详情页样式
  ===================================================== */

/* 详情容器 */
.rd-article {
    max-width: 920px;
    margin: 30px auto 40px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* 头图 */
.rd-cover {
    position: relative;
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    background: #f0f2f5;
}

.rd-cover img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.rd-cover .rc-push-tag {
    top: 16px;
    right: 16px;
}

/* 标题区 */
.rd-head {
    padding: 28px 34px 17px;
    border-bottom: 1px solid #f0f2f5;
}

.rd-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.rd-tags .rc-type-tag {
    position: static;
    box-shadow: none;
}

.rd-free-tag,
.rd-pay-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
}

.rd-free-tag {
    color: #7d8794;
    background: #f2f4f7;
}

.rd-pay-tag {
    color: #fff;
    background: #222222;
}

.rd-title {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    margin: 0 0 10px;
    word-break: break-all;
}

.rd-subtitle {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 14px;
    word-break: break-all;
}

/* 免费摘要 */
.rd-summary {
    margin: 21px 34px 0;
    padding: 18px 22px;
    background: #f8f9fb;
    border-left: 3px solid #222222;
    border-radius: 8px;
}

.rd-summary h3 {
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px;
}

.rd-summary-body {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.9;
    word-break: break-all;
}

.rd-summary-body p {
    margin: 0 0 10px;
    text-indent: 2em;
}

.rd-summary-body p:last-child {
    margin-bottom: 0;
}

/* 深度分析 */
.rd-content {
    margin: 6px 34px 34px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 0.8px solid #e5e7eb;
}

/* 温馨提示（正文下方）：桌面与正文同宽，手机端左右同样留出 16px */
.rd-content.rd-tips {
    margin: -30px 34px 4px;
    border-bottom: none;
}

.rd-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 14px;
    border-bottom: 0.8px solid #e5e7eb;
    padding-bottom: 12px;
}

/* 付费文章有遮罩：不显示边线 */
.rd-content.has-mask,
.rd-content.has-mask h3 {
    border-bottom: none;
}

.rd-article-body {
    font-size: 15px;
    color: #374151;
    line-height: 2;
    word-break: break-all;
}

/* 正文段落排版：段间距 + 中文首行缩进 */
.rd-article-body p {
    margin: 0 0 18px;
    text-indent: 2em;
}

.rd-article-body p:last-child {
    margin-bottom: 0;
}

.rd-article-body img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 10px auto;
}

.rd-article-body strong {
    color: #111827;
    font-weight: 700;
}

.rd-article-body em {
    color: #4b5563;
    font-style: italic;
}

.rd-article-body ul,
.rd-article-body ol {
    margin: 0 0 18px;
    padding-left: 2em;
}

.rd-article-body li {
    margin: 0 0 6px;
    list-style-position: outside;
}

.rd-article-body h1,
.rd-article-body h2,
.rd-article-body h3,
.rd-article-body h4 {
    font-weight: 700;
    color: #222222;
    margin: 22px 0 12px;
}

.rd-article-body blockquote {
    margin: 0 0 18px;
    padding: 10px 18px;
    border-left: 3px solid #222222;
    background: #f8f9fb;
    color: #4b5563;
}

/* ===== 【由 Agent 完成】2026-09-28 付费拦截区：售卖倒计时 + 支付弹层滚动锁定 ===== */
/* 倒计时：黑色圆角方块 时 : 分 : 秒，下方灰色「距离售卖截止」 */
.rd-pay-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 1px 0 2px;   /* 上移 15px（原 16px） */
}

.rd-cd-block {
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    /* 【由 Agent 完成】2026-09-29 上半黑色 / 下半深灰色（老式翻牌钟配色） */
    background: linear-gradient(to bottom, #111114 0%, #111114 50%, #45484f 50%, #45484f 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.rd-cd-sep {
    color: #1f2329;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

.rd-pay-countdown-label {
    font-size: 15px;
    color: #9ca3af;
    margin: 8px 0 2px;
}

/* 支付弹层滚动锁定：专用类，只锁滚动不改高度
   （不能复用 mc-drawer-lock —— 其 height:100% 会把 html 压成一屏导致页面跳回顶部） */
html.rd-pay-lock,
body.rd-pay-lock {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none;
}

/* ===== 底部支付弹层 ===== */
.rd-pay-sheet-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 19999;         /* 【由 Agent 完成】2026-09-29 置于页面最顶端（低于 layui layer） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.rd-pay-sheet-mask.show {
    opacity: 1;
    visibility: visible;
}

.rd-pay-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: #fff;
    border-radius: 25px 25px 0 0; /* 上左、上右圆角 25 */
    z-index: 20000;         /* 【由 Agent 完成】2026-09-29 置于页面最顶端（高于全站所有业务浮层） */
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 24px 28px;
    box-sizing: border-box;
}

.rd-pay-sheet.show {
    transform: translateY(0);
}

/* 电脑端：弹层宽度与页面卡片（rd-article 最大 920px）一致并水平居中 */
@media (min-width: 769px) {
    .rd-pay-sheet {
        left: 50%;
        width: 600px;           /* 电脑端弹层固定宽 600px */
        max-width: 600px;
        transform: translate(-50%, 100%);
    }

    .rd-pay-sheet.show {
        transform: translate(-50%, 0);
    }

    /* 电脑端：缩短去支付按钮宽度 */
    .rd-pay-sheet .rd-btn {
        width: 60%;
    }
}

.rd-pay-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    margin-bottom: 14px;
}

.rd-pay-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* 【由 Agent 完成】2026-09-29 说明文字：浅灰色底框、无边框 */
.rd-pay-sheet-tip {
    font-size: 12px;
    color: #9ca3af;
    margin: 8px 0 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #f5f6f7;
    border: none;           /* 不要边线 */
    border-radius: 8px;
    text-align: center;
}

/* 【由 Agent 完成】2026-09-29 顶端信息行：最左侧余额（N 红色），最右侧应付金额（灰色 12px） */
.rd-pay-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.rd-pay-balance {
    font-size: 12px;
    color: #9ca3af;         /* 与右侧「问问分」同一灰色 */
    white-space: nowrap;
}

.rd-pay-balance-num {
    color: #e02020;         /* N 为红色 */
    font-weight: 700;
}

.rd-pay-topay {
    text-align: right;
    white-space: nowrap;
}

.rd-pay-topay-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;         /* 黑色加粗 14 号 */
    margin-right: 4px;
}

.rd-pay-topay-unit {
    font-size: 12px;
    color: #9ca3af;         /* 灰色 12 号 */
    margin-right: 4px;
}

.rd-pay-topay-num {
    font-size: 16px;
    color: #e02020;         /* 红色加粗 16 号 */
    font-weight: 700;
}

.rd-pay-sheet .rd-btn {
    width: 100%;
    margin-top: 0; /* 由优惠券框撑开留白并吸底，按钮紧跟其后 */
    border-radius: 25px;
}

/* 【由 Agent 完成】2026-09-29 按钮上方的优惠券框：白底 + 灰色边框，高 100px */
.rd-pay-coupon {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    margin-top: auto;       /* 整块吸底，紧贴支付按钮上方 */
    margin-bottom: 19px;    /* +5px：整体上移 5px */
    background: #ffffff;
    border: 0.8px solid #eeeeee;    /* 0.8px 淡灰边框 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #9ca3af;
}

.rd-pay-agree {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 12px;
}

.rd-pay-agree input {
    margin: 0;
    flex-shrink: 0;
    accent-color: #222;
}

.rd-pay-agree a {
    color: #6b7280;
    text-decoration: none;
}

/* 底部操作 */
.rd-footer {
    max-width: 920px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 20px;
}

.rd-btn {
    font-size: 14px;
    padding: 10px 26px;
    border: 0.8px solid #dddddd;
    border-radius: 8px;
    background: #fff;
    color: #333333;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.rd-btn-main {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

.rd-btn-main:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* 文章不存在 */
.rd-empty {
    max-width: 560px;
    margin: 80px auto;
    padding: 50px 30px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dddddd;
    border-radius: 14px;
}

.rd-empty h3 {
    font-size: 17px;
    color: #6b7280;
    margin: 14px 0 22px;
}

/* 详情页响应式 */
@media (max-width: 768px) {
    .rd-article {
        margin: 16px 16px 24px;      /* 手机端左右留白 16px，避免内容贴边 */
        border-radius: 10px;
    }

    /* 「文章/内容不存在或已删除」框：手机端左右同样留 16px，不贴屏幕边缘 */
    .rd-empty {
        margin: 40px 16px;
        padding: 40px 18px;
    }

    .rd-cover,
    .rd-cover img {
        max-height: 240px;
    }

    .rd-head {
        padding: 20px 18px 11px;
    }

    .rd-title {
        font-size: 20px;
    }

    .rd-summary {
        margin: 13px 16px 0;
        padding: 14px 16px;
    }

    .rd-content {
        margin: 0 16px 24px;
    }

    /* 温馨提示：手机端左右同样留 16px */
    .rd-content.rd-tips {
        margin: -6px 16px 4px;
    }

    .rd-article-body {
        font-size: 14px;
        line-height: 1.9;
    }

    .rd-footer {
        flex-direction: column;
        padding: 0 24px 30px;
    }

    .rd-btn {
        width: 100%;
    }
}

/* =====================================================
   底部站点信息
   ===================================================== */
.rd-site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 34px;
    margin-top: 60px;
    border-top: 0.8px solid #e5e7eb;
    font-size: 12px;
    color: #999;
    background: transparent;
}

.rd-site-footer a {
    color: #999;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.2s;
}

.rd-site-footer a:hover {
    color: #222222;
}

@media (max-width: 768px) {
    .rd-site-footer {
        padding: 14px 16px;
    }

    .rd-site-footer a {
        margin: 0 0 0 20px;
    }
}

/* =====================================================
   付费内容拦截（遮罩）
   ===================================================== */
.rd-pay-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #eef0f3;
    min-height: 400px;   /* 【由 Agent 完成】2026-09-29 付费阅读区域高度 +100px（原 300px） */
    margin-top: -10px;
}

/* 模糊的付费正文 */
.rd-pay-blur {
    max-height: 340px;
    overflow: hidden;
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    opacity: 0.55;
    padding: 20px 24px;
}

.rd-pay-blur::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 85%);
    pointer-events: none;
}

/* 遮罩层 */
.rd-pay-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 42%, rgba(34, 34, 34, 0.32), rgba(255, 255, 255, 0.72) 78%);
    z-index: 2;
}

.rd-pay-mask .layui-icon-password {
    font-size: 40px;
    color: #222222;
    background: rgba(255, 255, 255, 0.9);
    width: 72px;
    height: 72px;
    line-height: 72px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 14px;
}

.rd-pay-price {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
    letter-spacing: 1px;
}

.rd-pay-tip {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 18px;
}

.rd-pay-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 17px;   /* 【由 Agent 完成】2026-09-29 支付按钮上边距 +15px 后再 +10px，现上移 8px */
}

.rd-pay-actions .rd-btn {
    padding: 11px 36px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

/* 收藏按钮 */
.rd-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 10px 22px;
    border: 1px solid rgba(34, 34, 34, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #222222;
    cursor: pointer;
    transition: all 0.22s ease;
}

.rd-fav-btn:hover {
    border-color: #222222;
    transform: translateY(-1px);
}

.rd-fav-btn .layui-icon {
    color: #d4a017;
}

.rd-fav-btn.faved {
    background: #222222;
    border-color: #222222;
    color: #fff;
    box-shadow: 0 8px 22px rgba(34, 34, 34, 0.2);
}

.rd-fav-btn.faved .layui-icon {
    color: #f0c24b;
}

@media (max-width: 768px) {
    .rd-pay-mask .layui-icon-password {
        width: 56px;
        height: 56px;
        line-height: 56px;
        font-size: 30px;
    }

    .rd-pay-actions {
        flex-direction: column;
        gap: 10px;
        width: 80%;
    }

    .rd-pay-actions .rd-btn,
    .rd-fav-btn {
        width: 100%;
        justify-content: center;
    }

    .rd-pay-blur {
        max-height: 260px;
        padding: 16px;
    }

    .rd-pay-wrap {
        min-height: 360px;   /* 手机端同步 +100px（原 260px） */
    }
}

/* ============ 响应式：手机端顶部介绍描述居中 ============ */
@media (max-width: 768px) {
    .worldcup-intro {
        text-align: center;
    }

    .worldcup-intro p {
        text-align: center;
        margin: 0 auto;
    }
}

/* 已结算免费公开提示（付费正文上方一行小字） */
.rd-settled-tip {
    margin: 0 0 10px;
    font-size: 12px;
    color: #6b7280;
}

/* 推荐方案列表：已购 / 已结算公开 / 免费时展示，主推项红色高亮 +「主推」角标
   两列网格：第 1 列「推荐方案」标题，第 2 列所有方案项 → 次推与主推左边对齐同一竖线 */
.rd-rec-list {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    position: relative;      /* 右上角印章浮动层的定位父级 */
    margin: 0 0 12px;
    padding: 15px 17px;      /* 卡片内部上下左右各 +5px */
    border-radius: 10px;
    background: #f7f8fa;
}

.rd-rec-head {
    grid-column: 1 / -1;    /* 标题独占一行，位于所有方案标签上方 */
    font-size: 12px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

.rd-rec-item {
    position: relative;  /* 结算标识的定位父级 */
    display: inline-flex;
    align-items: center;
    justify-content: center;   /* 未结算：文本居中 */
    text-align: center;
    gap: 4px;
    /* 除比分外，所有方案标签统一宽度 186px */
    width: 186px;
    max-width: 100%;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #374151;
    background: #ffffff;
    border: 0.8px solid #e5e7eb;
    border-radius: 999px;
    white-space: nowrap;
    grid-column: 1 / -1;   /* 方案项统一整行起点，主推 / 次推左边对齐同一竖线 */
    justify-self: start;
}

/* 次推方案：每项单独占一行（宽度与主推一致 186px，过长内部省略） */
.rd-rec-item.is-sub {
    width: 186px;
    max-width: 100%;
    display: block;
    overflow: hidden;    /* 过长文本省略 */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 已结算（带 √/× 标识）：文本靠左，右侧 22px 留给标识 */
.rd-rec-item.has-mark {
    padding-right: 22px;
    justify-content: flex-start;
    text-align: left;
}
.rd-rec-item.has-mark .rd-rec-text { text-align: left; }

/* 结算标识：不做右上角角标，改为在标签内、赔率右侧右对齐 */
.rd-tag-mark {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-style: normal;
    color: #fff;
}

/* 覆盖 layui 字体图标默认字号 / 灰色，并把字形绝对定位到圆心 */
.rd-tag-mark.layui-icon {
    font-size: 9px;
    line-height: 1;
    color: #fff;
}

.rd-tag-mark.layui-icon::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rd-tag-mark.layui-icon.layui-icon-close {
    font-size: 8px;
}

.rd-tag-hit  { background: #40ae2a; }   /* 中 */
.rd-tag-draw { background: #9ca3af; }   /* 走水 */
.rd-tag-miss { background: #e54d42; }   /* 未中 */

.rd-rec-item.is-main {
    width: 186px;        /* 与次推同宽：内容再长也不撑宽标签 */
    overflow: hidden;    /* 文本过长时省略，保持胶囊宽度一致 */
    color: #e5484d;
    border-color: #e5484d;
    background: #fff5f5;
    font-weight: 700;
}

/* 主推项文本：可收缩并省略，「主推」角标与结算标识不被挤掉 */
.rd-rec-item.is-main .rd-rec-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-rec-item.is-main em {
    flex: none;
    font-style: normal;
    font-size: 10px;      /* 「主推」角标文字 10px */
    padding: 0 5px;
    color: #fff;
    background: #e5484d;
    border-radius: 999px;
}

/* 比分推荐：一行横向排列，每个比分一个独立外框（基础样式同次推 .rd-rec-item.is-sub） */
.rd-score-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;    /* 比分之间间距 3px */
}

.rd-rec-item.is-score {
    width: 60px;                 /* 每个比分固定 60px，居中显示 */
    max-width: none;
    padding-right: 10px;         /* 比分无结算标识，右侧恢复常规内边距 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;            /* 比分文本超出 60px 时不撑破 */
    text-overflow: clip;
}

/* 命中的比分：绿色底、无边框 */
.rd-rec-item.is-score.is-hit {
    color: #fff;
    background: #40ae2a;
    border: 0.8px solid transparent;   /* 透明边框占位，去掉边框线但不改变尺寸 */
    font-weight: 700;
}

/* 未中的比分：白底灰边框（与次推标签一致） */
.rd-rec-item.is-score.is-miss {
    color: #374151;
    background: #ffffff;
    border-color: #e5e7eb;
}

/* ============ 付费支付弹层（追加） ============ */

/* 【由 Agent 完成】2026-09-29 高度随内容调整（此处覆盖上方 300px 的旧定义）：
   容纳 100px 优惠券框 + 按钮等，按钮下方还需留出状态提示与协议行的空间 */
.rd-pay-sheet {
    height: 340px;
}

/* 支付处理中状态提示 */
.rd-pay-status {
    font-size: 12px;
    color: #16a34a;
    text-align: center;
    margin: 10px 0 0;
}
/* 收藏按钮高亮（已收藏：金色实心） */
.rd-fav-icon.faved {
    color: #d4a017;
    border-color: #d4a017;
}
.rd-fav-icon.faved i {
    color: #d4a017;
}

/* ============ 统一普通提示层皮肤（member_ui.js 的 mcToast 使用）============
   圆角 + 柔和阴影；是否带遮罩由 mcToast 的 shade 参数控制（默认 0.5 带遮罩） */
.mc-msg-layer {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}
.mc-msg-layer .layui-layer-content {
    border-radius: 12px !important;
}

/* ============ 收藏提示（黑色 80% 透明胶囊，页面最底部）============
   底部居中浮层，距页面底部 20px，2.5s 后自动淡出 */
.rc-save-tip {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 25px;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rc-save-tip .layui-icon { font-size: 14px; line-height: 1; }

.rc-save-tip.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 768px) {
    .rc-save-tip { bottom: 20px; }
}

/* ============ 详情页视频头图（经验详情页）============
   与头图同宽，限制最大高度 420px，黑底避免加载时白块 */
.rd-cover video {
    width: 100%;
    max-height: 420px;
    display: block;
    background: #000;
}

/* ============ 正文宽度的视频 / 封面（经验详情页）============
   左右边距与 .rd-content 保持一致：桌面 34px、移动端 16px */
.rd-media {
    width: auto;        /* 覆盖 .rd-cover 的 width:100%，避免加上左右边距后右侧溢出 */
    max-height: none;   /* 取消 420px 固定高度，容器高度跟随视频实际比例 */
    margin: 18px 34px 4px;
    border-radius: 10px;
}

/* 视频高度自适应：16:9 矮、9:16 高，完全按视频原始比例显示 */
.rd-cover.rd-media video {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    background: #000;
}

@media (max-width: 768px) {
    .rd-media {
        margin: 14px 16px 4px;
    }
}

/* ============ 广告区 / 热门专家区：手机端适配 ============ */
@media (max-width: 768px) {
    /* 广告区：铺满屏宽，一屏一张并居中停留，卡片左右与热门专家区对齐 */
    .rc-ad-zone {
        margin: 12px 0 0;
        overflow: hidden;
        touch-action: pan-y;   /* 横向手势交给 JS 切换广告，纵向仍正常滚页面 */
    }

    /* 手指拖动中：关闭过渡，让广告跟手移动 */
    .rc-ad-track.dragging {
        transition: none;
    }

    .rc-ad-track {
        display: flex;
        width: 300%;          /* 3 个广告并排成一条轨道 */
        gap: 0;
        transition: transform 0.45s ease;
    }

    .rc-ad {
        flex: none;
        /* 轨道 300% 的三分之一 = 一屏宽；左右各留 16px，
           使卡片左右边缘与热门专家区（margin 16px）对齐，切换时居中停留 */
        width: calc(33.3333% - 32px);
        margin: 0 16px;
        min-height: 88px;
        padding: 14px;
        border-radius: 12px;
    }

    .rc-ad:hover {
        transform: none;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    }

    .rc-ad-go {
        padding: 5px 10px;
    }

    .rc-ad-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    .rc-ad-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d5d8dd;
        cursor: pointer;
        transition: all 0.2s;
    }

    .rc-ad-dot.active {
        width: 16px;
        background: #222;
    }

    /* 热门专家区：左右与推荐列表对齐，下方间距 20px；内部下边距再缩减 4px（共 8px） */
    .rc-expert-zone {
        margin: 12px 16px 20px;
        padding: 14px 14px 6px;
    }

    .rc-expert-grid {
        gap: 8px;
    }

    .rc-expert-card {
        flex-basis: calc((100% - 24px) / 4);   /* 手机端一屏 4 个平均分配，超出的左滑查看 */
        height: 120px;                          /* 头像 54px 时对应高度 */
    }

    /* 手机端不显示竖排三点，直接手指左滑 */
    .rc-expert-more {
        display: none !important;
    }

    /* 手机端「我的关注 / 查看更多专家」：并排一行、等宽平分，风格统一为「查看更多专家」的白底灰框 */
    .rc-expert-viewmore {
        margin: 12px 0 11px;
        flex-direction: row;
        gap: 10px;
    }

    .rc-expert-viewmore-btn {
        display: flex;
        flex: 1 1 0;               /* 两枚按钮等宽各占一半 */
        width: auto;
        padding: 12px 0;
        border-radius: 999px;      /* 保持胶囊形 */
        font-size: 14px;
        text-align: center;
    }

    /* 「我的关注」桌面/手机端均与「查看更多专家」同款，此处无需再覆盖外观 */

    .rc-expert-avatar,
    .rc-expert-avatar img {
        width: 54px;
        height: 54px;
    }

    .rc-expert-tab {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* ==========================================================
   【由 Agent 完成】2026-09-29 问问分不足提示弹层（mcConfirm / member_ui.js）
   本页未引入 jingcai.css，故在此补齐 jc-help-layer 皮肤所需样式：
   圆角白卡片 + 标题 + 正文 + 「取消（灰）/ 立即充值（红）」双按钮
   ========================================================== */
/* layui 会把 skin 值直接作为 class 加在外框上（jc-help-layer） */
.jc-help-layer {
    background: transparent !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    border: none !important;
}

.jc-help-layer .layui-layer-content {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* 弹层打开时锁定页面滚动 */
body.jc-no-scroll {
    overflow: hidden !important;
}

/* 手机端：弹层宽度 320px（不超过屏幕 95%）并保持水平居中 */
@media (max-width: 768px) {
    .jc-help-layer {
        width: 320px !important;
        max-width: 95% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.jc-help-box {
    width: 100%;
    padding: 28px 24px 24px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
}

.jc-help-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.4;
}

.jc-help-body {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 24px;
}

/* 【由 Agent 完成】2026-09-29 问问分不足提示：正文第一行「问问分：N」的 N 红色加粗 */
.jc-help-body .rd-recharge-bal {
    color: #e02020;
    font-weight: 700;
}

.jc-help-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.jc-help-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 22px;
    font-size: 15px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.jc-help-btn:active {
    transform: scale(0.98);
}

.jc-help-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.jc-help-cancel:hover {
    background: #e5e7eb;
}

.jc-help-ok {
    background: #ef4444;   /* 红色按钮 */
    color: #fff;
}

.jc-help-ok:hover {
    background: #dc2626;
}