/* ============================================
   底部Tab导航栏 - CSS样式
   技术栈：Flex布局 + 固定底部 + iPhone安全区适配
   主色调：红色 #e74c3c
   配合 components/bottom-nav.html 使用
   ============================================ */

/* ---------- 全局基础重置（建议放在全局CSS中） ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 适配手机宽度，防止横向滚动 */
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    /* 为底部导航留出空间，避免内容被遮挡 */
    /* 导航栏高度60px + 安全区约20px = 80px */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* ---------- 底部导航栏主体 ---------- */
.bottom-nav {
    /* 固定定位：始终吸附在页面底部 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

    /* Flex布局：水平排列，均分空间 */
    display: flex;
    flex-direction: row;
    justify-content: space-around;  /* 菜单项均匀分布 */
    align-items: center;

    /* 高度 = 基础60px + iPhone底部安全区高度 */
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    /* 底部内边距 = 安全区高度，将内容顶到安全区上方 */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* 背景样式 */
    background-color: #ffffff;
    /* 顶部阴影：营造悬浮感 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);

    /* 最大宽度限制，适配不同手机 */
    max-width: 100vw;
    overflow: hidden;
}

/* ---------- 单个导航项 ---------- */
.nav-item {
    /* Flex列布局：图标在上，文字在下，居中对齐 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 点击区域 */
    flex: 1;                    /* 均分宽度 */
    height: 100%;
    padding: 6px 0;

    /* 链接样式重置 */
    text-decoration: none;
    color: #999999;             /* 默认灰色 */
    cursor: pointer;

    /* 点击态过渡动画 */
    transition: color 0.2s ease;

    /* 防止文字选中 */
    user-select: none;
    -webkit-user-select: none;

    /* 点击态：轻微缩放反馈 */
    -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* ---------- 激活状态（红色） ---------- */
.nav-item.active {
    color: #e74c3c;             /* 主色调红色 */
}

/* ---------- 图标样式 ---------- */
.nav-icon {
    display: block;
    font-size: 22px;            /* 图标大小 */
    line-height: 1;
    margin-bottom: 3px;         /* 图标与文字间距 */
    transition: color 0.2s ease;
}

/* ---------- 文字标签样式 ---------- */
.nav-label {
    display: block;
    font-size: 11px;            /* 小字适配手机 */
    line-height: 1;
    letter-spacing: 0.5px;      /* 字间距 */
    transition: color 0.2s ease;
}

/* ============================================
   页面内容区域适配（可选）
   如需在页面中引用本CSS，将以下内容也一并复制
   ============================================ */

/* 页面主内容容器，防止被底部导航遮挡 */
.page-content {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================
   暗色模式支持（可选）
   ============================================ */
@media (prefers-color-scheme: dark) {
    .bottom-nav {
        background-color: #1a1a1a;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }
    .nav-item {
        color: #777777;
    }
    .nav-item.active {
        color: #e74c3c;
    }
}


/* ============================================
   首页主体内容样式 - 移动端H5
   主色调：红色 #e74c3c / 金色 #d4a843
   兼容微信内置浏览器（-webkit-前缀）
   ============================================ */

/* ---------- 全局背景 ---------- */
.page-content {
    /* 浅灰背景，区分白色卡片 */
    background-color: #f5f5f5;
    /* 底部留出导航栏空间 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
}

/* ============================================
   模块1：顶部公告卡片
   ============================================ */
.notice-card {
    /* 浅红色背景圆角卡片 */
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;

    /* 弹性布局：头像左 + 文字右 */
    display: flex;
    align-items: flex-start;
    gap: 12px;

    /* 适配手机 */
    max-width: 100%;
    overflow: hidden;
}

.notice-avatar {
    flex-shrink: 0; /* 头像不缩放 */
}

.avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;              /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    /* 金色渐变 */
    background: linear-gradient(135deg, #f0c75e 0%, #d4a843 100%);
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.35);
}

.notice-text {
    flex: 1;
    min-width: 0; /* flex子元素文字溢出截断关键属性 */
}

.notice-title {
    font-size: 14px;
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notice-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    /* 多行文字截断（最多3行） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* ============================================
   模块2：全屏横幅广告
   ============================================ */
.banner-ad {
    /* 蓝红渐变背景 */
    background: linear-gradient(135deg, #3a7bd5 0%, #e74c3c 100%);
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;          /* 隐藏溢出装饰元素 */
    /* 适配手机宽度 */
    max-width: 100%;
}

/* 背景装饰金币/礼盒 */
.banner-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;      /* 不影响点击 */
    z-index: 0;
}

.decor-coin {
    position: absolute;
    font-size: 28px;
    opacity: 0.25;
    animation: coinFloat 3s ease-in-out infinite;
}

.decor-coin-1 { top: 8px;  right: 60px;  animation-delay: 0s;   }
.decor-coin-2 { bottom: 10px; right: 20px; animation-delay: 0.8s; font-size: 36px; }
.decor-coin-3 { top: 10px;  right: 100px; animation-delay: 1.6s; font-size: 22px; }
.decor-coin-4 { bottom: 15px; right: 90px; animation-delay: 2.2s; font-size: 20px; }

@keyframes coinFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(10deg); }
}

.banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-info {
    flex: 1;
    min-width: 0;
}

.banner-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.banner-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
    line-height: 1.4;
}

.text-gold {
    color: #ffd700;
    font-weight: 700;
    font-size: 16px;
}

.banner-tip {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
}

/* 红色圆角按钮 */
.banner-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 10px 22px;
    background: #e74c3c;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 22px;          /* 圆角按钮 */
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(231, 76, 60, 0.5);
    /* 微信内置浏览器兼容 */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.banner-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 6px rgba(231, 76, 60, 0.4);
}

/* ============================================
   模块3：横向滚动专家头像区
   ============================================ */
.expert-section {
    margin-bottom: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.section-more {
    font-size: 12px;
    color: #999;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* 横向滚动外层容器 */
.expert-scroll-wrapper {
    /* 允许内层超出时水平滚动 */
    overflow-x: auto;
    overflow-y: hidden;
    /* 隐藏滚动条（微信/WebKit） */
    -webkit-overflow-scrolling: touch;   /* iOS平滑滚动 */
    scrollbar-width: none;                /* Firefox隐藏滚动条 */
    -ms-overflow-style: none;             /* IE隐藏滚动条 */
    /* 适配手机宽度 */
    max-width: 100%;
}

.expert-scroll-wrapper::-webkit-scrollbar {
    display: none;                        /* Chrome/Safari隐藏滚动条 */
}

/* 横向滚动内层：white-space不换行 + inline-block子元素 */
.expert-scroll {
    display: flex;
    gap: 14px;
    padding: 4px 2px 8px;  /* 上下留白给阴影空间 */
    /* 宽度自适应内容 */
    white-space: nowrap;
}

/* 单个专家项 */
.expert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;           /* 不压缩，保证可滚动 */
    width: 62px;
    text-align: center;
}

/* 头像外框 + 角标容器 */
.expert-avatar-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
}

/* 圆形专家头像 */
.expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 各专家头像颜色 */
.avatar-red    { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.avatar-blue   { background: linear-gradient(135deg, #3498db, #2980b9); }
.avatar-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.avatar-green  { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.avatar-orange { background: linear-gradient(135deg, #f39c12, #e67e22); }

/* 自定义图片头像 - 覆盖纯色背景，显示图片 */
.avatar-img {
    background: #eee !important;
    overflow: hidden;
    padding: 0 !important;
    font-size: 0 !important;
}
.avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 默认头像占位（无上传头像时显示人物图标） */
.avatar-default {
    background: #ddd !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 24px !important;
    padding: 0 !important;
}

/* 右上角红色小圆角标（连红数字） */
.expert-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;         /* 圆角胶囊形 */
    box-shadow: 0 1px 3px rgba(231,76,60,0.4);
    white-space: nowrap;
}

.expert-name {
    font-size: 12px;
    color: #333;
    font-weight: 600;
    margin-bottom: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expert-streak {
    font-size: 11px;
    color: #999;
}

/* "更多"专家入口样式 */
.expert-item-more .expert-avatar-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
}
.expert-item-more .expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #666;
    font-size: 16px;
    font-weight: 700;
}
.avatar-more {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #666;
    font-size: 16px;
    font-weight: 700;
}

.expert-streak span {
    color: #e74c3c;
    font-weight: 700;
}

/* ============================================
   模块4：搜索栏
   ============================================ */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    max-width: 100%;
}

.search-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    z-index: 1;
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 34px;   /* 左侧留图标空间 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 19px;        /* 圆角搜索框 */
    font-size: 13px;
    color: #333;
    outline: none;
    /* 微信浏览器兼容 */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease;
}

.search-input::placeholder {
    color: #bbb;
}

.search-input:focus {
    border-color: #e74c3c;
}

/* ============================================
   模块5：资讯卡片列表
   ============================================ */

/* --- 通用卡片基底 --- */
.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* 左上角红色标签 */
.card-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    margin-bottom: 10px;
}

.card-tag-hot {
    /* 上期中特码 - 红色标签 */
    background: #e74c3c;
}

/* 红黑标签 - 红底黑字 */
.card-tag-red {
    background: #e74c3c;
    color: #fff;
}

.card-tag-black {
    background: #1a1a1a;
    color: #fff;
}

/* 右下角红黑圆形花边印章标识 - 纯CSS实现 */
.card-tag-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 43px;
    height: 43px;
    z-index: 2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    /* 微微旋转模拟印章盖印 */
    transform: rotate(-12deg);
    /* 外阴影 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* 红色印章 */
.card-tag-badge.tag-red {
    color: #c0392b;
    background: transparent;
    /* 外圈花边：虚线边框 */
    border: 2px dashed #c0392b;
    /* 内圈：白色环 + 颜色细线 */
    box-shadow:
        0 2px 6px rgba(0,0,0,0.2),
        inset 0 0 0 4px #fff,
        inset 0 0 0 6px #c0392b;
}
/* 黑色印章 */
.card-tag-badge.tag-black {
    color: #1a1a1a;
    background: transparent;
    /* 外圈花边：虚线边框 */
    border: 2px dashed #1a1a1a;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.2),
        inset 0 0 0 4px #fff,
        inset 0 0 0 6px #1a1a1a;
}

/* 右上角免费标识 */
.card-free-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-block;
    padding: 2px 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
}

/* 卡片主体弹性布局：头像左 + 内容右 */
.info-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-avatar-wrap {
    flex-shrink: 0;
}

.info-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 花头像特殊处理 */
.avatar-flower {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(255,154,158,0.4);
}

.info-card-content {
    flex: 1;
    min-width: 0;
}

.info-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    margin-bottom: 6px;
    /* 最多2行截断 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.info-card-title-lg {
    font-size: 15px;
    font-weight: 700;
    color: #c0392b;
}

.info-card-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 6px;
}

/* 底部元信息：浏览人数 + 时间 */
.info-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #aaa;
}

.meta-views {
    color: #999;
}

.meta-time {
    color: #bbb;
}

/* 活动卡片特殊样式 */
.info-card-event {
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
    border: 1px solid rgba(212,168,67,0.2);
}

/* ============================================
   微信内置浏览器兼容性补丁
   ============================================ */
/* 禁止长按弹出菜单（微信常见问题） */
.notice-card,
.banner-ad,
.expert-item,
.info-card,
.search-input {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* iOS点击高亮清除 */
a, button, .nav-item, .banner-btn, .expert-item {
    -webkit-tap-highlight-color: transparent;
}


/* ============================================
   首页样式覆盖 v6 - 整合版（含喇叭图标）
   需求：
   1. 页面背景大红色 #dd2828
   2. 滚动公告卡片：白色圆角+喇叭图标+红色文字跑马灯
   3. 热门专家白色圆角卡片，双排每行4个
   4. 搜索模块白色圆角卡片，无放大镜图标
   5. 各模块上下留间距，底部导航不变
   ============================================ */

/* ---------- 1. 页面整体背景：正大红 ---------- */
.page-content {
    background-color: #dd2828;    /* 正大红背景 */
}

/* ---------- 2. 横向滚动公告栏（白色卡片+喇叭图标+跑马灯） ---------- */

/* 外层白色圆角卡片，flex布局：喇叭图标左 + 滚动文字右 */
.marquee-notice {
    display: flex;                /* 弹性布局 */
    align-items: center;          /* 垂直居中 */
    gap: 8px;                     /* 喇叭与文字间距 */
    background-color: #ffffff;    /* 白色卡片 */
    border-radius: 12px;          /* 圆角 */
    padding: 10px 14px;           /* 内边距 */
    margin-bottom: 12px;          /* 与下方专家模块间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 喇叭图标：固定不滚动 */
.marquee-icon {
    flex-shrink: 0;               /* 不压缩 */
    font-size: 18px;              /* 喇叭大小 */
    line-height: 1;
    z-index: 1;                   /* 在滚动文字上方 */
    background: #ffffff;          /* 白色背景遮挡后方滚动文字 */
}

/* 滚动区域外层：flex:1 占剩余宽度，overflow裁剪 */
.marquee-track-wrap {
    flex: 1;
    min-width: 0;                 /* 允许收缩 */
    overflow: hidden;             /* 裁剪溢出文字 */
}

/* 滚动轨道：flex + 动画无限滚动 */
.marquee-track {
    display: flex;
    white-space: nowrap;          /* 不换行 */
    animation: marqueeScroll 20s linear infinite; /* 20秒匀速滚动 */
}

/* 每段文字 */
.marquee-text {
    display: inline-block;
    flex-shrink: 0;
    padding-right: 40px;          /* 两段文字间距 */
    font-size: 13px;
    color: #e74c3c;               /* 红色文字 */
    font-weight: 500;
    line-height: 1.6;
}

/* 跑马灯关键帧：移动-50%（两份相同文字总宽的一半，实现无缝循环） */
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 触摸时暂停滚动 */
.marquee-notice:active .marquee-track {
    animation-play-state: paused;
}

/* ---------- 3. 热门专家：白色圆角卡片 + 双排每行4个 ---------- */
.expert-section {
    background-color: #ffffff;    /* 白色卡片 */
    border-radius: 12px;
    padding: 14px 14px 6px;
    margin-bottom: 12px;          /* 与搜索栏间距 */
    max-width: 100%;
}

/* 标题深色文字 */
.expert-section .section-title {
    color: #333;
}

/* 取消横向滚动 */
.expert-scroll-wrapper {
    overflow-x: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
}

/* 专家双排网格：flex-wrap换行 */
.expert-scroll {
    display: flex;
    flex-wrap: wrap;              /* 换行，实现两排 */
    white-space: normal;          /* 允许换行 */
    gap: 12px 0;                  /* 行间距 */
    justify-content: flex-start;
    padding: 4px 0 8px;
}

/* 每个专家占25% = 每行4个 */
.expert-item {
    flex-shrink: 0;
    width: 25%;
    text-align: center;
}

/* ---------- 4. 搜索栏：整块白色圆角卡片 ---------- */

/* 搜索模块整体白色圆角卡片 */
.search-bar {
    background-color: #ffffff;    /* 白色卡片 */
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;          /* 与资讯卡片间距 */
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

/* "最新资料"黑色文字 */
.search-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;                  /* 深黑文字 */
    white-space: nowrap;
    flex-shrink: 0;
}

/* 输入框外层 */
.search-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

/* 隐藏放大镜图标 */
.search-icon {
    display: none;
}

/* 输入框：浅灰底色，无边框，在白色卡片内形成层次 */
.search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;              /* 左右对称 */
    background-color: #f5f5f5;    /* 浅灰底色 */
    border: none;
    border-radius: 18px;          /* 胶囊圆角 */
    font-size: 13px;
    color: #333;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.search-input::placeholder {
    color: #bbb;
}

.search-input:focus {
    background-color: #eeeeee;    /* 聚焦时底色微变 */
}


/* ============================================
   专家列表页样式（expert.html）v2
   整体大红背景 #dd2828，模块白色圆角卡片
   六边形排名徽章：金/银/铜/黑
   条目间分割线，适配手机宽度
   兼容微信浏览器
   ============================================ */

/* ---------- 专家页容器：大红背景 + 内边距 ---------- */
.page-expert {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================
   模块1：顶部搜索栏白色卡片
   ============================================ */
.expert-search-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;          /* 与专家列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧"搜索专家"文字 */
.expert-search-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;                  /* 深黑文字 */
    white-space: nowrap;
    flex-shrink: 0;
}

/* 搜索输入框外层 */
.expert-search-input-wrap {
    flex: 1;
    min-width: 0;
}

/* 搜索输入框：浅灰底色，无放大镜图标，无placeholder文字 */
.expert-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;              /* 左右对称 */
    background-color: #f5f5f5;    /* 浅灰底色 */
    border: none;
    border-radius: 18px;          /* 胶囊圆角 */
    font-size: 13px;
    color: #333;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.expert-search-input::placeholder {
    color: #bbb;
}

.expert-search-input:focus {
    background-color: #eeeeee;
}

/* ============================================
   模块2：专家列表（整体白色圆角卡片容器）
   ============================================ */
.expert-list {
    background-color: #ffffff;    /* 白色圆角卡片包裹整个列表 */
    border-radius: 12px;
    padding: 6px 0;               /* 上下留白给条目呼吸空间 */
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- 单条专家行 ---------- */
.expert-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    max-width: 100%;
    box-sizing: border-box;
    /* 微信浏览器兼容 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ---------- 条目分割线 ---------- */
.expert-row-divider {
    height: 1px;
    background-color: #f0f0f0;    /* 浅灰色分割线 */
    margin: 0 14px;               /* 左右留边距，不顶满 */
}

/* 最后一条不显示分割线 */
.expert-row-divider:last-child {
    display: none;
}

/* ============================================
   六边形排名徽章（CSS clip-path 实现）
   第1名金色 / 第2名银色 / 第3名铜色 / 4名+黑色
   ============================================ */

/* 排名徽章外层容器 */
.expert-rank-wrap {
    flex-shrink: 0;
    width: 32px;                  /* 六边形宽度 */
    height: 32px;                 /* 六边形高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 六边形基底：clip-path 裁剪为六边形 */
.expert-rank {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* CSS六边形裁剪 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 六边形内部数字 */
.expert-rank span {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* --- 第1名：金色六边形 --- */
.hex-gold {
    background: linear-gradient(135deg, #f9d423 0%, #f7971e 50%, #e6a817 100%);
    box-shadow: 0 2px 6px rgba(247, 151, 30, 0.4);
}

.hex-gold span {
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* --- 第2名：银色六边形 --- */
.hex-silver {
    background: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 50%, #9a9a9a 100%);
    box-shadow: 0 2px 6px rgba(150, 150, 150, 0.35);
}

.hex-silver span {
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* --- 第3名：铜色六边形 --- */
.hex-bronze {
    background: linear-gradient(135deg, #e8a87c 0%, #cd7f32 50%, #a0522d 100%);
    box-shadow: 0 2px 6px rgba(205, 127, 50, 0.35);
}

.hex-bronze span {
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* --- 4名以后：黑色六边形 --- */
.hex-black {
    background: linear-gradient(135deg, #555 0%, #222 50%, #111 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* ============================================
   圆形专家头像
   ============================================ */
.expert-row-avatar {
    flex-shrink: 0;
}

.expert-row-avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ============================================
   中间信息区：第一行名称 + 第二行"认证专家"
   ============================================ */
.expert-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;       /* 纵向排列：名称在上，认证在下 */
    gap: 2px;                     /* 两行间距 */
}

/* 专家名称：第一行 */
.expert-row-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* "认证专家"灰色小字：第二行 */
.expert-row-cert {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    line-height: 1.3;
}

/* ============================================
   连中信息：红色文字，独立列
   ============================================ */
.expert-row-streak {
    font-size: 13px;
    color: #e74c3c;               /* 红色文字"X连中" */
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   右侧"+关注"按钮：红色圆角
   ============================================ */
.expert-follow-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 14px;
    background-color: #e74c3c;    /* 红色背景 */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 16px;          /* 圆角按钮 */
    text-decoration: none;
    white-space: nowrap;
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.expert-follow-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
}


/* ============================================
   往期推荐页样式（forecast.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   复用首页资讯卡片 .info-card 样式
   适配手机宽度，无横向滚动
   兼容微信浏览器
   ============================================ */

/* ---------- 往期推荐页容器：大红背景 + 内边距 ---------- */
.page-forecast {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================
   模块1：顶部搜索栏白色圆角卡片
   ============================================ */
.forecast-search-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;          /* 与下方资讯列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧"往期推荐"文字 */
.forecast-search-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;                  /* 深黑文字 */
    white-space: nowrap;
    flex-shrink: 0;
}

/* 搜索输入框外层 */
.forecast-search-input-wrap {
    flex: 1;
    min-width: 0;
}

/* 搜索输入框：浅灰底色，无放大镜图标，无placeholder文字 */
.forecast-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;              /* 左右对称 */
    background-color: #f5f5f5;    /* 浅灰底色 */
    border: none;
    border-radius: 18px;          /* 胶囊圆角 */
    font-size: 13px;
    color: #333;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.forecast-search-input::placeholder {
    color: #bbb;
}

.forecast-search-input:focus {
    background-color: #eeeeee;
}

/* ============================================
   模块2：资讯卡片列表
   复用首页 .info-card 白色圆角卡片样式
   新增：作者灰色小字 + 纯资讯展示（无付费/价格）
   ============================================ */
.forecast-list {
    max-width: 100%;
}

/* 往期推荐资讯卡片：覆盖部分首页样式，适配纯资讯场景 */
.forecast-info-card {
    /* 继承 .info-card 的白色背景+圆角+阴影 */
    /* 移除可能存在的右上角角标占位 */
    margin-bottom: 10px;          /* 卡片之间间距 */
}

/* 作者灰色小字：位于标题下方、浏览量上方 */
.forecast-card-author {
    font-size: 12px;
    color: #999;                  /* 灰色小字 */
    margin-bottom: 6px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 覆盖：隐藏首页卡片中的红色标签和免费角标（往期推荐页不需要） */
.forecast-info-card .card-tag,
.forecast-info-card .card-free-badge {
    display: none;
}

/* 确保卡片内容区不受隐藏标签影响 */
.forecast-info-card .info-card-body {
    padding-top: 0;               /* 标签隐藏后无需顶部留白 */
}


/* ============================================
   个人中心页样式（mine.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：个人信息卡 → 余额卡 → 标签栏 → 功能菜单
   红白搭配，适配手机宽度，无横向滚动
   兼容微信浏览器
   ============================================ */

/* ---------- 个人中心页容器：大红背景 + 内边距 ---------- */
.page-mine {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================
   模块1：个人信息卡片（浅粉渐变圆角背景）
   ============================================ */
.mine-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    /* 浅粉渐变背景，喜庆温暖 */
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 12px;          /* 与余额卡片间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 圆形用户头像 */
.mine-profile-avatar {
    flex-shrink: 0;
}

.mine-avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0c75e 0%, #d4a843 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 3px 10px rgba(212, 168, 67, 0.35);
}

/* 右侧用户名 */
.mine-profile-info {
    flex: 1;
    min-width: 0;
}

.mine-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

/* ============================================
   模块2：余额卡片（白色圆角容器）
   ============================================ */
.mine-balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 16px 16px;
    margin-bottom: 12px;          /* 与标签栏间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧：文字 + 红色余额 */
.mine-balance-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mine-balance-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.mine-balance-amount {
    font-size: 22px;
    font-weight: 800;
    color: #e74c3c;               /* 红色数字 */
    line-height: 1;
}

/* 右侧按钮：仅展示，无充值付费文案 */
.mine-balance-right {
    flex-shrink: 0;
}

.mine-balance-btn {
    display: inline-block;
    padding: 6px 16px;
    background-color: #f5f5f5;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   模块3：标签栏卡片（全部 / 待支付 / 已支付）
   ============================================ */
.mine-tabs-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 12px;          /* 与菜单列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 单个标签按钮：三等分 */
.mine-tab-item {
    flex: 1;                      /* 均分宽度 */
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;                  /* 默认灰色 */
    text-decoration: none;
    border-radius: 10px;          /* 内部圆角 */
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

/* 激活状态：红色背景白色文字 */
.mine-tab-item.active {
    background-color: #e74c3c;    /* 红色激活背景 */
    color: #fff;
}

/* 未激活点击态 */
.mine-tab-item:active:not(.active) {
    background-color: #f5f5f5;
}

/* ============================================
   模块4：功能菜单列表（白色圆角卡片）
   ============================================ */
.mine-menu-card {
    background-color: #ffffff;    /* 白色圆角卡片包裹 */
    border-radius: 12px;
    padding: 4px 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* 单条菜单项：图标 + 文字 + 箭头 */
.mine-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mine-menu-item:active {
    background-color: #f9f9f9;    /* 点击态浅灰 */
}

/* 左侧图标 */
.mine-menu-icon {
    flex-shrink: 0;
    font-size: 18px;
    width: 24px;
    text-align: center;
    line-height: 1;
}

/* 中间文字 */
.mine-menu-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧箭头 */
.mine-menu-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: #ccc;
    font-weight: 300;
    line-height: 1;
}

/* 菜单项之间分割线 */
.mine-menu-divider {
    height: 1px;
    background-color: #f5f5f5;    /* 极浅灰分割线 */
    margin: 0 16px;               /* 左右留边距 */
}

/* ============================================
   个人中心页样式 v2 - 饱满铺满屏幕调整
   需求：
   1. 页面主体背景统一大红#dd2828，消除底部空白
   2. 放大余额卡片高度，加宽内部留白
   3. 增大顶部用户信息卡片高度，上下增加内边距
   4. 下方功能菜单卡片高度自适应，底部距离导航栏留合适间距
   5. 保留现有布局，圆角不变，红白配色不变，适配手机
   ============================================ */

/* ---------- 1. 页面容器：强制铺满屏幕，消除底部空白 ---------- */
/* 通过 min-height 让页面内容至少撑满整个可视区，杜绝大片红色空白 */
.page-mine {
    min-height: 100vh;            /* 最小高度 = 屏幕高度，确保铺满 */
    display: flex;
    flex-direction: column;       /* 纵向弹性布局，子元素依次排列 */
    padding: 16px 14px calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
    /* 底部内边距 = 导航栏高度60px + 安全区 + 16px呼吸间距，避免紧贴导航栏 */
    box-sizing: border-box;
}

/* ---------- 2. 顶部个人信息卡片：加高加宽上下内边距 ---------- */
.mine-profile-card {
    padding: 28px 18px;           /* 上下28px（原18px），左右18px（原16px），整体更高更舒展 */
    margin-bottom: 14px;          /* 与余额卡间距微调 */
    border-radius: 14px;          /* 保持原圆角不变 */
}

/* 头像同步放大，与更高卡片匹配 */
.mine-avatar-circle {
    width: 64px;                  /* 原56px → 64px */
    height: 64px;
    font-size: 32px;              /* 原28px → 32px */
}

/* 昵称字号适当加大 */
.mine-profile-name {
    font-size: 20px;              /* 原18px → 20px */
}

/* ---------- 3. 余额卡片：整体做大，加大内部留白 ---------- */
.mine-balance-card {
    padding: 22px 20px;           /* 上下22px（原16px），左右20px（原16px），更宽松 */
    margin-bottom: 14px;          /* 与标签栏间距 */
    border-radius: 12px;          /* 保持原圆角不变 */
    min-height: 72px;             /* 保证最小高度，视觉上更厚实 */
}

/* 余额标签字号加大 */
.mine-balance-label {
    font-size: 15px;              /* 原14px → 15px */
}

/* 余额数字加大加粗 */
.mine-balance-amount {
    font-size: 28px;              /* 原22px → 28px，更醒目 */
}

/* 右侧按钮适当加大 */
.mine-balance-btn {
    padding: 8px 20px;            /* 原6px 16px → 8px 20px */
    font-size: 13px;              /* 原12px → 13px */
}

/* ---------- 4. 标签栏卡片：保持原有，间距微调 ---------- */
.mine-tabs-card {
    margin-bottom: 14px;          /* 与菜单间距保持一致 */
}

/* ---------- 5. 功能菜单卡片：高度自适应，底部留合适间距 ---------- */
.mine-menu-card {
    flex: 1;                      /* 自动拉伸占据剩余空间，消除底部空白 */
    margin-bottom: 0;             /* 底部间距由页面容器 padding-bottom 统一控制 */
    border-radius: 12px;          /* 保持原圆角不变 */
}

/* 菜单项垂直间距适当加大，点击区域更舒适 */
.mine-menu-item {
    padding: 18px 18px;           /* 原15px 16px → 18px 18px，更高更易点 */
}

/* 分割线左右边距同步调整 */
.mine-menu-divider {
    margin: 0 18px;               /* 原16px → 18px */
}

/* ============================================
   专家列表页样式 v3 - "认证专家"标签改为红色边框样式
   需求：
   1. 页面背景、六边形排名、头像、连中文字、关注按钮全部保留不变
   2. "认证专家"文字改为红色字体，外围加细红色圆角边框小标签样式
   3. 只覆盖CSS，不改动HTML结构
   ============================================ */

/* "认证专家"标签：红色文字 + 细红色圆角边框 */
.expert-row-cert {
    display: inline-block;        /* 改为行内块，让边框紧贴文字 */
    font-size: 11px;              /* 保持原字号 */
    color: #e74c3c;               /* 红色字体（原#999灰色） */
    padding: 1px 8px;             /* 上下1px 左右8px 留白 */
    border: 1px solid #e74c3c;    /* 细红色圆角边框 */
    border-radius: 8px;           /* 圆角小标签 */
    line-height: 1.5;
    white-space: nowrap;
    width: fit-content;           /* 宽度自适应文字内容 */
}

/* ============================================
   专家详情页样式（detail.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：头部卡片 → 资讯卡片列表
   红白喜庆配色，适配手机375宽度，无横向滚动
   兼容微信浏览器
   ============================================ */

/* ---------- 页面容器：大红背景 + 内边距 ---------- */
.page-detail {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ============================================
   模块1：顶部专家头部卡片（白色圆角）
   布局：[圆形头像] [名称+认证标签] ... [连红数]
   ============================================ */
.detail-header-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 12px;          /* 与资讯列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧圆形专家头像 */
.detail-header-avatar {
    flex-shrink: 0;
}

.detail-avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* 中间信息区：名称 + 认证标签（纵向排列） */
.detail-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 专家名称 */
.detail-header-name {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

/* "认证专家"红色圆角标签 */
.detail-header-cert {
    display: inline-block;
    font-size: 11px;
    color: #e74c3c;               /* 红色文字 */
    padding: 2px 10px;
    border: 1px solid #e74c3c;    /* 细红色圆角边框 */
    border-radius: 8px;           /* 圆角小标签 */
    line-height: 1.4;
    white-space: nowrap;
    width: fit-content;           /* 宽度自适应文字 */
}

/* 右侧连红数红色文字 */
.detail-header-streak {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    color: #e74c3c;               /* 红色醒目 */
    white-space: nowrap;
}

/* ============================================
   模块2：资讯卡片列表
   复用首页 .info-card 白色圆角卡片样式
   ============================================ */
.detail-feed-list {
    max-width: 100%;
}

/* 资讯卡片：覆盖首页样式，适配专家详情场景 */
.detail-info-card {
    margin-bottom: 10px;          /* 卡片之间间距 */
}

/* 作者灰色小字（位于标题下方、浏览量上方） */
.detail-card-author {
    font-size: 12px;
    color: #999;                  /* 灰色小字 */
    margin-bottom: 6px;
    line-height: 1.4;
}

/* 隐藏首页卡片中的红色标签和免费角标（详情页不需要） */
.detail-info-card .card-tag,
.detail-info-card .card-free-badge {
    display: none;
}

/* 确保卡片内容区不受隐藏标签影响 */
.detail-info-card .info-card-body {
    padding-top: 0;
}

/* ============================================
   链接跳转样式适配
   需求：
   1. 首页热门专家卡片 .expert-item 改为 <a> 标签后去掉下划线，保留原有样式
   2. 专家列表 .expert-row 改为 <a> 标签后去掉下划线，保留原有样式
   ============================================ */

/* 首页热门专家卡片链接：去掉默认下划线，继承原有颜色 */
a.expert-item {
    text-decoration: none;        /* 去掉下划线 */
    color: inherit;               /* 继承父元素颜色，不影响内部文字 */
}

/* 专家列表条目链接：去掉默认下划线，保留原有flex布局 */
a.expert-row {
    text-decoration: none;        /* 去掉下划线 */
    color: inherit;               /* 继承父元素颜色 */
}

/* 专家列表条目链接点击态 */
a.expert-row:active {
    background-color: #f9f9f9;    /* 浅灰点击反馈 */
}

/* ============================================
   攻略详情页样式（article.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：标题卡片 → 正文区域 → 往期资讯卡片
   正文分免费/付费两种展示逻辑
   红白主色调，适配手机宽度，兼容微信浏览器
   ============================================ */

/* ---------- 页面容器：大红背景 + 内边距 ---------- */
.page-article {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ============================================
   模块1：标题卡片（白色圆角）
   大号标题 + 作者名称 + 浏览量，无免费/付费标签
   ============================================ */
.article-title-card {
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 14px;
    padding: 20px 16px;
    margin-bottom: 12px;          /* 与正文区域间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 大号资讯标题 */
.article-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* 底部作者 + 浏览量（flex横向排列） */
.article-title-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
}

.article-author {
    color: #e74c3c;               /* 红色作者名 */
    font-weight: 600;
}

.article-views {
    color: #aaa;                  /* 灰色浏览量 */
}

/* ============================================
   模块2：正文区域（白色圆角卡片）
   包含免费和付费两种展示逻辑
   ============================================ */
.article-body-card {
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 12px;          /* 与往期资讯间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* --- 2a. 免费资讯：完整正文 --- */
.article-body-text {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
}

.article-body-text p {
    margin-bottom: 12px;          /* 段落间距 */
}

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

.article-body-text strong {
    color: #222;
    font-weight: 700;
}

/* --- 2b. 付费资讯：居中打赏提示（无预览文字） --- */
.article-body-paid {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;            /* 保持卡片视觉饱满 */
}

/* 居中打赏提示容器（纵向排列：文字→按钮） */
.article-paid-hint {
    display: flex;
    flex-direction: column;       /* 纵向排列 */
    align-items: center;
    text-align: center;
    gap: 20px;
}

/* 红色醒目提示文字（无预览文字，仅居中提示） */
.article-paid-text {
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;               /* 红色文字 */
    line-height: 1.5;
    margin: 0;
}

/* 红色圆角打赏按钮 */
.article-paid-btn {
    display: inline-block;
    padding: 12px 44px;
    background-color: #e74c3c;    /* 红色背景 */
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 22px;          /* 圆角按钮 */
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(231, 76, 60, 0.4);
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.article-paid-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
}

/* ============================================
   模块3：往期资讯卡片列表
   模块标题「往期资讯」，仅展示当前作者的文章
   复用首页 .info-card 白色圆角卡片样式
   卡片外层 <a> 链接，点击可跳转对应文章
   ============================================ */
.article-related {
    max-width: 100%;
}

/* 往期资讯标题 */
.article-related-header {
    margin-bottom: 10px;
    padding: 0 4px;
}

.article-related-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;                  /* 白色文字（大红背景上） */
}

/* 往期资讯卡片：覆盖首页样式 */
.article-related-card {
    margin-bottom: 10px;          /* 卡片之间间距 */
}

/* 往期卡片中的作者灰色小字 */
.article-card-author {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* 隐藏首页卡片中的红色标签和免费角标 */
.article-related-card .card-tag,
.article-related-card .card-free-badge {
    display: none;
}

/* 确保卡片内容区不受隐藏标签影响 */
.article-related-card .info-card-body {
    padding-top: 0;
}

/* 往期资讯卡片链接：去掉默认下划线，保留卡片样式 */
a.article-related-card {
    display: block;               /* 保持块级卡片布局 */
    text-decoration: none;        /* 去掉下划线 */
    color: inherit;               /* 继承原有文字颜色 */
}

a.article-related-card:active {
    opacity: 0.92;                /* 点击态微暗反馈 */
}

/* ============================================
   资讯卡片链接跳转样式适配
   将 .info-card 改为 <a> 标签后，去掉默认下划线，
   保留原有卡片布局和配色
   ============================================ */
a.info-card {
    display: block;               /* 保持块级卡片布局 */
    text-decoration: none;        /* 去掉下划线 */
    color: inherit;               /* 继承原有文字颜色 */
}

a.info-card:active {
    opacity: 0.92;                /* 点击态微暗反馈 */
}

/* ============================================
   我的关注页样式（follow.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：顶部标题栏 → 关注作者列表
   红白主色调，适配手机宽度，兼容微信浏览器
   ============================================ */

/* ---------- 页面容器：大红背景 + 内边距 ---------- */
.page-follow {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ============================================
   模块1：顶部标题栏（白色圆角卡片）
   左侧返回箭头 + 居中标题「我的关注」
   箭头点击返回 mine.html 个人中心
   ============================================ */
.follow-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;          /* 与关注列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧返回箭头：绝对定位靠左 */
.follow-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #333;
    text-decoration: none;
    line-height: 1;
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.follow-back-btn:active {
    opacity: 0.6;
}

/* 居中标题 */
.follow-top-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1;
}

/* ============================================
   模块2：关注作者列表（白色圆角卡片整体包裹）
   复用专家列表简化样式：头像 + 昵称 + 取消关注按钮
   点击作者卡片跳转 detail.html 作者主页
   ============================================ */
.follow-list {
    background-color: #ffffff;    /* 白色圆角卡片包裹整个列表 */
    border-radius: 12px;
    padding: 6px 0;               /* 上下留白给条目呼吸空间 */
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- 单条关注行 ---------- */
.follow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    max-width: 100%;
    box-sizing: border-box;
    text-decoration: none;        /* 去掉链接下划线 */
    color: inherit;               /* 继承文字颜色 */
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: background 0.15s ease;
}

.follow-row:active {
    background-color: #f9f9f9;    /* 点击态浅灰 */
}

/* ---------- 条目分割线 ---------- */
.follow-row-divider {
    height: 1px;
    background-color: #f0f0f0;    /* 浅灰色分割线 */
    margin: 0 14px;               /* 左右留边距 */
}

/* ---------- 圆形作者头像 ---------- */
.follow-row-avatar {
    flex-shrink: 0;
}

.follow-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ---------- 中间昵称区 ---------- */
.follow-row-info {
    flex: 1;
    min-width: 0;
}

.follow-row-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ---------- 右侧「取消关注」按钮：浅灰背景圆角 ---------- */
.follow-unfollow-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 14px;
    background-color: #f5f5f5;    /* 浅灰背景 */
    color: #999;                  /* 灰色文字 */
    font-size: 12px;
    font-weight: 500;
    border-radius: 14px;          /* 圆角按钮 */
    white-space: nowrap;
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.follow-unfollow-btn:active {
    background-color: #e74c3c;    /* 点击变红 */
    color: #fff;
}

/* ============================================
   浏览记录页样式（history.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：顶部标题栏 → 攻略记录列表
   复用全站资讯卡片样式，红白主色调
   适配手机宽度，兼容微信浏览器
   ============================================ */

/* ---------- 页面容器：大红背景 + 内边距 ---------- */
.page-history {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ============================================
   模块1：顶部标题栏（白色圆角卡片）
   左侧返回箭头 + 居中标题「浏览记录」
   ============================================ */
.history-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;          /* 与记录列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧返回箭头 */
.history-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #333;
    text-decoration: none;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.history-back-btn:active {
    opacity: 0.6;
}

/* 居中标题 */
.history-top-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1;
}

/* ============================================
   模块2：攻略记录列表
   复用全站 .info-card 白色圆角卡片样式
   每条外层 <a href="article.html"> 点击打开对应攻略
   ============================================ */
.history-list {
    max-width: 100%;
}

/* 浏览记录卡片：覆盖首页样式 */
.history-info-card {
    margin-bottom: 10px;          /* 卡片之间间距 */
}

/* 记录卡片中的作者灰色小字 */
.history-card-author {
    font-size: 12px;
    color: #999;                  /* 灰色小字 */
    margin-bottom: 6px;
    line-height: 1.4;
}

/* 隐藏首页卡片中的红色标签和免费角标 */
.history-info-card .card-tag,
.history-info-card .card-free-badge {
    display: none;
}

/* 确保卡片内容区不受隐藏标签影响 */
.history-info-card .info-card-body {
    padding-top: 0;
}

/* ============================================
   订单中心页样式（order.html）
   整体大红背景 #dd2828，模块白色圆角卡片
   布局：顶部标题栏 → 切换标签 → 订单列表
   仅展示打赏订单，红白主色调
   适配手机宽度，兼容微信浏览器
   ============================================ */

/* ---------- 页面容器：大红背景 + 内边距 ---------- */
.page-order {
    background-color: #dd2828;    /* 大红背景 */
    padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ============================================
   模块1：顶部标题栏（白色圆角卡片）
   左侧返回箭头 + 居中标题「订单中心」
   箭头点击返回 mine.html 个人中心
   ============================================ */
.order-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;          /* 与标签栏间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 左侧返回箭头：绝对定位靠左 */
.order-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #333;
    text-decoration: none;
    line-height: 1;
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.order-back-btn:active {
    opacity: 0.6;
}

/* 居中标题 */
.order-top-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1;
}

/* ============================================
   模块2：标签栏卡片（全部 / 待支付 / 已支付）
   复用 mine-tabs 样式，三等分红色激活态
   ============================================ */
.order-tabs-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;    /* 白色圆角卡片 */
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 12px;          /* 与订单列表间距 */
    max-width: 100%;
    box-sizing: border-box;
}

/* 单个标签按钮：三等分 */
.order-tab-item {
    flex: 1;                      /* 均分宽度 */
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;                  /* 默认灰色 */
    text-decoration: none;
    border-radius: 10px;          /* 内部圆角 */
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

/* 激活状态：红色背景白色文字 */
.order-tab-item.active {
    background-color: #e74c3c;    /* 红色激活背景 */
    color: #fff;
}

/* 未激活点击态 */
.order-tab-item:active:not(.active) {
    background-color: #f5f5f5;
}

/* ============================================
   模块3：订单列表（白色圆角卡片整体包裹）
   每条订单卡片：攻略标题 + 作者 + 打赏金额 + 时间 + 状态
   ============================================ */
.order-list {
    background-color: #ffffff;    /* 白色圆角卡片包裹整个列表 */
    border-radius: 12px;
    padding: 4px 0;               /* 上下留白给条目呼吸空间 */
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- 单条订单卡片（外层 <a> 链接） ---------- */
.order-card {
    display: block;
    padding: 14px 16px;
    text-decoration: none;        /* 去掉链接下划线 */
    color: inherit;               /* 继承文字颜色 */
    max-width: 100%;
    box-sizing: border-box;
    /* 微信兼容 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: background 0.15s ease;
    /* 订单间分割线用 border-bottom */
    border-bottom: 1px solid #f0f0f0;
}

/* 最后一条不显示底部边框 */
.order-card:last-child {
    border-bottom: none;
}

/* 点击态浅灰反馈 */
.order-card:active {
    background-color: #f9f9f9;
}

/* ---------- 订单标题（攻略标题，多行截断2行） ---------- */
.order-card-header {
    margin-bottom: 10px;
}

.order-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    /* 最多2行截断 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---------- 订单底部信息行（flex左右分布） ---------- */
.order-card-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

/* 左侧：作者 + 打赏金额（纵向排列） */
.order-card-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 作者灰色小字 */
.order-card-author {
    font-size: 12px;
    color: #999;
    line-height: 1.3;
}

/* 打赏金额红色文字 */
.order-card-amount {
    font-size: 13px;
    font-weight: 700;
    color: #e74c3c;               /* 红色金额 */
    line-height: 1.3;
}

/* 右侧：时间 + 状态（纵向排列，右对齐） */
.order-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* 订单时间灰色小字 */
.order-card-time {
    font-size: 11px;
    color: #bbb;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---------- 订单状态标签（圆角小标签） ---------- */
.order-card-status {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;          /* 圆角小标签 */
    line-height: 1.4;
    white-space: nowrap;
}

/* 已支付状态：浅红底 + 红色文字 */
.status-paid {
    background-color: #fff0f0;
    color: #e74c3c;
}

/* 待支付状态：浅灰底 + 灰色文字 */
.status-pending {
    background-color: #f5f5f5;
    color: #999;
}