/* 全局样式重置：清除所有元素的默认边距和内边距 */
* {
    margin: 0;           /* 外边距设为0 */
    padding: 0;          /* 内边距设为0 */
    box-sizing: border-box; /* 盒模型：宽高包含边框和内边距 */
}

/* 页面主体样式 */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 设置字体：优先使用系统字体，保证跨平台一致性 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #ffffff;  /* 白色背景 */
    color: #1a1a1a;            /* 深灰色文字，比纯黑更柔和 */
    min-height: 100vh;         /* 最小高度为视口高度，确保页面至少占满屏幕 */
    display: flex;             /* 使用弹性布局 */
    flex-direction: column;    /* 垂直排列子元素 */
    align-items: stretch;
}

/* 链接样式 */
a {
    color: #1a73e8;       /* 蓝色链接，类似浏览器默认色 */
    text-decoration: none; /* 去掉下划线 */
}

/* 页头样式 */
.header {
    background-color: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: none;
    box-shadow: none;
}

/* 股票详情页标题居中（仅影响stock_detail.html） */
.stock-detail-header {
    position: relative;
}

.stock-detail-header .header-content {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

.stock-detail-header .header-content h1 {
    margin: 0;
}

/* 页头内容区域 */
.header-content {
    flex: 1;
    text-align: center;
}

/* 页头标题 */
.header-content h1 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* 页头股票代码 */
.header-content .header-code {
    font-size: 12px;
    color: #999999;
    margin-left: 4px;
}

/* 风险提示文字 */
.header-content .risk-tip {
    font-size: 8px;
    font-weight: normal;
    color: #888;
    line-height: 1.3;
    padding: 0 40px;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 页头副标题/状态文字 */
.header-content span {
    font-size: 12px;    /* 小字体 */
    color: #666666;     /* 灰色文字 */
}

/* 页头股票代码 */
.header-content .header-code {
    font-size: 12px;
    color: #999999;
    margin-left: 4px;
}

/* 市场状态标签 */
.market-status {
    display: inline-block;      /* 行内块元素 */
    background-color: #10b981; /* 绿色背景（表示交易中） */
    color: #fff;               /* 白色文字 */
    padding: 2px 8px;          /* 上下2px，左右8px内边距 */
    border-radius: 12px;       /* 圆角，标签形状 */
    font-size: 12px;           /* 小字体 */
    margin-left: 8px;          /* 左边距 */
}

/* 返回按钮和收藏按钮样式 */
.back-btn, .favorite-btn {
    background-color: transparent;
    border: none;
    color: #1a1a1a;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.back-btn {
    font-size: 22px;
    font-weight: 700;
}

.favorite-btn {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    padding: 3px 5px;
    gap: 2px;
}

.favorite-btn span {
    font-size: 12px;
}

/* 按钮悬停效果 */
.back-btn:hover, .favorite-btn:hover {
    background-color: transparent;
    color: #333;
}

.favorite-btn:hover {
    color: #666;
}

/* 搜索栏样式 */
.search-bar {
    display: flex;               /* 弹性布局 */
    gap: 8px;                    /* 元素间距 */
    padding: 12px 16px;          /* 内边距 */
    background-color: #f8f9fa;   /* 极浅灰色背景 */
    border-bottom: 1px solid #e8e8e8; /* 底部边框 */
}

/* 搜索输入框 */
.search-bar input {
    flex: 1;                     /* 占据剩余空间 */
    background-color: #ffffff;   /* 白色背景 */
    border: 1px solid #d0d0d0;   /* 灰色边框 */
    border-radius: 8px;          /* 圆角 */
    padding: 10px 12px;          /* 内边距 */
    color: #1a1a1a;              /* 深灰色文字 */
    font-size: 14px;             /* 字体大小 */
}

/* 搜索按钮 */
.search-bar button {
    background-color: #1a73e8;   /* 蓝色背景 */
    border: none;                /* 无边框 */
    border-radius: 8px;          /* 圆角 */
    padding: 10px 16px;          /* 内边距 */
    color: #fff;                 /* 白色文字 */
    font-size: 14px;             /* 字体大小 */
    cursor: pointer;             /* 手型光标 */
}

/* 搜索按钮悬停效果 */
.search-bar button:hover {
    background-color: #1557b0;   /* 悬停时蓝色变深 */
}

/* 主内容区域 */
.main {
    flex: 1;                     /* 占据剩余空间，让页脚固定在底部 */
    width: 100%;
    padding: 0;                  /* 去除内边距 */
    padding-bottom: 60px;        /* 底部留出空间给固定导航栏 */
}

/* 区块样式 */
section {
    margin-bottom: 24px;         /* 区块之间的间距 */
}

/* 区块标题 */
section h2 {
    font-size: 16px;             /* 字体大小 */
    font-weight: 600;            /* 半粗 */
    margin-bottom: 12px;         /* 底部边距 */
    color: #1a1a1a;              /* 深灰色文字 */
}

/* 大盘指数网格布局 */
.index-grid {
    display: grid;                           /* 网格布局 */
    grid-template-columns: repeat(2, 1fr);   /* 两列，每列等分 */
    gap: 12px;                              /* 网格间距 */
}

/* 大盘指数卡片 */
.index-card {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 12px;                     /* 圆角 */
    padding: 16px;                          /* 内边距 */
    border: 1px solid #e8e8e8;              /* 浅灰色边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 轻微阴影 */
}

/* 指数名称 */
.index-card .name {
    font-size: 14px;      /* 字体大小 */
    color: #666666;       /* 灰色文字 */
    margin-bottom: 8px;   /* 底部边距 */
}

/* 指数价格 */
.index-card .price {
    font-size: 22px;      /* 较大字体 */
    font-weight: 600;     /* 半粗 */
    color: #1a1a1a;       /* 深灰色文字 */
    margin-bottom: 4px;   /* 底部边距 */
}

/* 涨跌幅 */
.index-card .change {
    font-size: 14px;      /* 字体大小 */
}

/* 上涨样式 - 红色 */
.change.up {
    color: #ef4444;   /* 红色（A股习惯：红涨） */
}

/* 下跌样式 - 绿色 */
.change.down {
    color: #10b981;   /* 绿色（A股习惯：绿跌） */
}

/* 平盘样式 */
.change.unchanged {
    color: #999999;   /* 灰色 */
}

/* 热门板块列表 */
.sector-list {
    display: grid;                           /* 网格布局 */
    grid-template-columns: repeat(3, 1fr);   /* 三列 */
    gap: 12px;                              /* 间距 */
}

/* 板块项 */
.sector-item {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 8px;                      /* 圆角 */
    padding: 12px;                           /* 内边距 */
    text-align: center;                      /* 文字居中 */
    border: 1px solid #e8e8e8;              /* 浅灰色边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); /* 轻微阴影 */
}

/* 板块名称 */
.sector-item .name {
    font-size: 13px;      /* 字体大小 */
    color: #333333;       /* 深灰色 */
    margin-bottom: 4px;   /* 底部边距 */
}

/* 板块涨跌幅 */
.sector-item .change {
    font-size: 14px;      /* 字体大小 */
    font-weight: 600;     /* 半粗 */
}

/* 排行榜入口网格 */
.rank-grid {
    display: grid;                           /* 网格布局 */
    grid-template-columns: repeat(3, 1fr);   /* 三列 */
    gap: 12px;                              /* 间距 */
}

/* 排行榜入口项 */
.rank-item {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 12px;                     /* 圆角 */
    padding: 20px 12px;                     /* 内边距 */
    text-align: center;                      /* 居中 */
    border: 1px solid #e8e8e8;              /* 边框 */
    cursor: pointer;                         /* 手型光标 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 阴影 */
    transition: all 0.2s ease;               /* 过渡动画 */
}

/* 排行榜入口悬停效果 */
.rank-item:hover {
    background-color: #f8f9fa;   /* 背景变浅 */
    transform: translateY(-2px); /* 向上移动2px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 阴影加深 */
}

/* 排行榜图标 */
.rank-item .rank-icon {
    font-size: 28px;      /* 大图标 */
    margin-bottom: 8px;   /* 底部边距 */
}

/* 排行榜文字 */
.rank-item span {
    font-size: 14px;      /* 字体大小 */
    color: #333333;       /* 深灰色 */
}

/* 股票列表容器 */
.stock-list {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 12px;                     /* 圆角 */
    border: 1px solid #e8e8e8;              /* 边框 */
    overflow-x: auto;                        /* 允许水平滚动 */
    overflow-y: hidden;                      /* 隐藏垂直溢出 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 阴影 */
}

/* 股票列表项 */
.stock-item {
    display: flex;               /* 弹性布局 */
    align-items: center;         /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    padding: 14px 16px;         /* 内边距 */
    border-bottom: 1px solid #f0f0f0; /* 底部分隔线 */
    cursor: pointer;             /* 手型光标 */
    transition: background-color 0.15s ease; /* 背景色过渡 */
}

/* 最后一项去掉底部边框 */
.stock-item:last-child {
    border-bottom: none;
}

/* 股票项悬停效果 */
.stock-item:hover {
    background-color: #fafafa;   /* 悬停时背景变浅 */
}

/* 股票信息区域 */
.stock-info {
    flex: 1;           /* 占据剩余空间 */
}

/* 股票名称 */
.stock-info .name {
    font-size: 15px;      /* 字体大小 */
    font-weight: 500;     /* 中等粗细 */
    color: #1a1a1a;       /* 深灰色 */
    margin-bottom: 2px;   /* 底部边距 */
}

/* 股票代码 */
.stock-info .code {
    font-size: 12px;      /* 小字体 */
    color: #999999;       /* 浅灰色 */
}

/* 股票价格区域 */
.stock-price {
    text-align: right;     /* 右对齐 */
}

/* 价格 */
.stock-price .price {
    font-size: 15px;      /* 字体大小 */
    font-weight: 600;     /* 半粗 */
    color: #1a1a1a;       /* 深灰色 */
    margin-bottom: 2px;   /* 底部边距 */
}

/* 涨跌幅 */
.stock-price .change {
    font-size: 13px;      /* 字体大小 */
}

/* 排行榜标签切换 */
.rank-tabs {
    display: flex;               /* 弹性布局 */
    background-color: #f8f9fa;   /* 浅灰色背景 */
    border-radius: 8px;          /* 圆角 */
    padding: 4px;                /* 内边距 */
    margin-bottom: 16px;         /* 底部边距 */
}

/* 标签项 */
.tab-item {
    flex: 1;
    padding: 6px;
    text-align: center;
    font-size: 12px;
    border-radius: 0;
    cursor: pointer;
    color: #666666;
    transition: all 0.2s ease;
    background-color: transparent;
    position: relative;
}

/* 激活状态的标签 */
.tab-item.active {
    background-color: transparent;
    color: #1a1a1a;
    font-weight: 700;
}

/* 激活标签下方的蓝色横线 */
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background-color: #1a73e8;
    border-radius: 1px;
}

/* 新闻列表 - 卡片样式 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background-color: #f5f5f5;
}

/* 帖子卡片 */
.post-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.post-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 卡片头部 - 用户信息 */
.post-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.post-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
    display: block;
}

.post-user-info {
    display: flex;
    flex-direction: column;
}

.post-username {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.post-time {
    font-size: 5px;
    color: #999;
    margin-top: 2px;
}

/* 卡片标题 */
.post-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 卡片摘要 */
.post-card-summary {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 帖子缩略图 */
.post-card-thumbnail {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}

.post-card-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 帖子图片 - 单图大图 */
.post-card-images.single {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}
.post-card-images.single img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 帖子图片 - 多图并排一行（2-3图） */
.post-card-images.multi {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    overflow: hidden;
}
.post-card-images.multi img {
    flex: 1;
    min-width: 0;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* 卡片操作栏 */
.post-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 1px solid #f0f0f0;
}

.post-actions-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.post-action-item:hover {
    background-color: #f5f5f5;
}

/* 股票标签样式 */
.stock-tag-item {
    background: none;
    border: none;
    border-radius: 0;
    max-width: 180px;
    overflow: hidden;
    padding: 3px 2px;
}

.stock-tag-item:hover {
    background: none;
}

.stock-tag-item .stock-name {
    color: #1a73e8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.stock-tag-empty {
    width: 0;
    padding: 0;
    margin: 0;
}

.action-icon {
    font-size: 16px;
}

.action-text {
    font-size: 13px;
    color: #666;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .news-list {
        padding: 0;
        gap: 8px;
    }
    
    .post-card {
        padding: 12px 12px 2px;
        border-radius: 10px;
    }
    
    .post-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .post-avatar-img {
        width: 36px;
        height: 36px;
    }
    
    .post-card-title {
        font-size: 15px;
    }
    
    .post-card-summary {
        font-size: 13px;
        -webkit-line-clamp: 4;
    }
    
    .post-card-thumbnail {
        max-height: 180px;
    }

    .post-card-thumbnail img {
        max-height: 180px;
    }

    .post-card-images.single {
        max-height: 180px;
    }

    .post-card-images.single img {
        max-height: 180px;
    }

    .post-card-images.multi img {
        height: 100px;
        min-width: 0;
    }

    .post-card-images.multi {
        gap: 3px;
    }

    /* 分享按钮栏 - 更紧凑 */
    .post-card-actions {
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .post-action-item {
        gap: 3px;
        padding: 1px 3px;
    }
    .post-action-item.stock-tag-item {
        max-width: none;
        flex: 1;
        padding: 1px 0;
        overflow: hidden;
    }
    .post-action-item.stock-tag-item .stock-name {
        max-width: none;
        font-size: 12px;
        white-space: nowrap;
        overflow: visible;
    }
    .post-actions-right {
        flex-shrink: 0;
        gap: 2px;
    }
    .action-icon {
        font-size: 13px;
    }
    .action-text {
        font-size: 12px;
    }
}

/* 登录注册容器 */
.auth-container {
    min-height: 100vh;              /* 最小高度占满屏幕 */
    display: flex;                  /* 弹性布局 */
    flex-direction: column;         /* 垂直排列 */
    align-items: center;            /* 水平居中 */
    justify-content: center;        /* 垂直居中 */
    padding: 24px;                 /* 内边距 */
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); /* 渐变背景 */
}

/* 登录注册头部 */
.auth-header {
    text-align: center;      /* 文字居中 */
    margin-bottom: 32px;    /* 底部边距 */
}

/* 登录注册标题 */
.auth-header h1 {
    font-size: 28px;      /* 大字体 */
    font-weight: 700;     /* 粗体 */
    color: #1a1a1a;       /* 深灰色 */
    margin-bottom: 8px;   /* 底部边距 */
}

/* 登录注册副标题 */
.auth-header p {
    font-size: 14px;      /* 字体大小 */
    color: #666666;       /* 灰色 */
}

/* 登录注册表单 */
.auth-form {
    width: 100%;                  /* 宽度100% */
    max-width: 360px;             /* 最大宽度360px */
    background-color: #ffffff;    /* 白色背景 */
    border-radius: 16px;          /* 圆角 */
    padding: 24px;               /* 内边距 */
    border: 1px solid #e8e8e8;   /* 边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
}

/* 表单组 */
.form-group {
    margin-bottom: 20px;   /* 底部边距 */
}

/* 表单标签 */
.form-group label {
    display: block;        /* 块级元素 */
    font-size: 14px;       /* 字体大小 */
    color: #666666;        /* 灰色 */
    margin-bottom: 8px;    /* 底部边距 */
}

/* 表单输入框 */
.form-group input {
    width: 100%;           /* 宽度100% */
    background-color: #ffffff;    /* 白色背景 */
    border: 1px solid #d0d0d0;   /* 灰色边框 */
    border-radius: 8px;           /* 圆角 */
    padding: 12px 16px;          /* 内边距 */
    color: #1a1a1a;              /* 深灰色文字 */
    font-size: 15px;             /* 字体大小 */
    transition: border-color 0.2s ease; /* 边框颜色过渡 */
}

/* 输入框聚焦状态 */
.form-group input:focus {
    outline: none;              /* 去掉默认聚焦边框 */
    border-color: #1a73e8;      /* 蓝色边框 */
}

/* 验证码输入区域 */
.code-input {
    display: flex;   /* 弹性布局 */
    gap: 8px;        /* 间距 */
}

/* 验证码输入框 */
.code-input input {
    flex: 1;   /* 占据剩余空间 */
}

/* 获取验证码按钮 */
.code-input button {
    background-color: #1a73e8;   /* 蓝色背景 */
    border: none;                /* 无边框 */
    border-radius: 8px;          /* 圆角 */
    padding: 12px 16px;          /* 内边距 */
    color: #fff;                 /* 白色文字 */
    font-size: 14px;             /* 字体大小 */
    cursor: pointer;             /* 手型光标 */
    transition: background-color 0.2s ease; /* 背景色过渡 */
}

/* 获取验证码按钮悬停效果 */
.code-input button:hover:not(:disabled) {
    background-color: #1557b0;   /* 蓝色变深 */
}

/* 获取验证码按钮禁用状态 */
.code-input button:disabled {
    background-color: #d0d0d0;   /* 灰色背景 */
    cursor: not-allowed;          /* 禁用光标 */
}

/* 错误提示 */
.error {
    color: #ef4444;    /* 红色 */
    font-size: 12px;   /* 小字体 */
    margin-top: 4px;   /* 顶部边距 */
    display: block;    /* 块级元素 */
}

/* 提交按钮 */
.submit-btn {
    width: 100%;                  /* 宽度100% */
    background-color: #1a73e8;    /* 蓝色背景 */
    border: none;                 /* 无边框 */
    border-radius: 8px;           /* 圆角 */
    padding: 14px;                /* 内边距 */
    color: #fff;                  /* 白色文字 */
    font-size: 16px;              /* 字体大小 */
    font-weight: 500;             /* 中等粗细 */
    cursor: pointer;              /* 手型光标 */
    margin-top: 8px;              /* 顶部边距 */
    transition: background-color 0.2s ease; /* 背景色过渡 */
}

/* 提交按钮悬停效果 */
.submit-btn:hover {
    background-color: #1557b0;   /* 蓝色变深 */
}

/* 登录注册页脚 */
.auth-footer {
    margin-top: 24px;   /* 顶部边距 */
    font-size: 14px;    /* 字体大小 */
    color: #666666;     /* 灰色 */
}

/* 页脚链接 */
.auth-footer a {
    margin-left: 4px;   /* 左边距 */
}

/* 底部导航栏 */
.footer-nav {
    position: fixed;              /* 固定定位 */
    bottom: 0;                    /* 固定在底部 */
    left: 0;                      /* 左边对齐 */
    right: 0;                     /* 右边对齐 */
    background-color: #ffffff;    /* 白色背景 */
    display: flex;                /* 弹性布局 */
    border-top: none;             /* 去除顶部边框 */
    padding: 0;                   /* 去除内边距 */
    box-shadow: none;             /* 去除阴影 */
    z-index: 9999;               /* 确保导航栏在最上层 */
    -webkit-transform: translateZ(0);  /* 修复移动端 fixed 定位问题 */
    transform: translateZ(0);
}

/* 移动端隐藏底部导航（APP端使用原生导航栏） */
@media screen and (max-width: 800px) {
    .footer-nav {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* 导航项 */
.nav-item {
    flex: 1;                       /* 等分 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 水平居中 */
    justify-content: center;       /* 垂直居中 */
    padding: 12px 8px;             /* 内边距 */
    cursor: pointer;               /* 手型光标 */
    transition: color 0.2s ease;   /* 颜色过渡 */
}

/* 导航图标已移除 */
.nav-item .nav-icon {
    display: none;
}

/* 导航文字 */
.nav-item span {
    font-size: 13px;      /* 字体大小 */
    font-weight: 600;     /* 加粗 */
    color: #999999;       /* 灰色 */
}

/* 激活状态的导航文字 */
.nav-item.active span {
    color: #1a73e8;       /* 蓝色 */
    font-weight: 700;     /* 更粗 */
}

/* 中间 + 号按钮 - 抖音风格 */
.nav-item-plus {
    flex: 0 0 auto;
    width: 56px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.nav-item-plus .plus-icon {
    width: 48px;
    height: 32px;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: relative;
    pointer-events: none;
}

/* + 按钮禁用态（无发帖/发视频权限） */
.nav-item-plus-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}
.nav-item-plus-disabled .plus-icon {
    color: #999 !important;
    background: transparent !important;
}

/* 发帖/发视频选择弹窗 */
.publish-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 10000;
}

.publish-modal.show {
    display: flex;
}

.publish-content {
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 400px;
    padding: 20px 0 40px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.publish-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

.publish-option:hover {
    background: #f5f5f5;
}

.publish-option:active {
    background: #e8e8e8;
}

.publish-icon {
    margin-right: 10px;
    font-size: 24px;
}

.publish-divider {
    height: 1px;
    background: #eee;
    margin: 0 20px;
}

/* APP端 + 号按钮样式 */
@media screen and (max-width: 800px) {
    .nav-item-plus {
        width: 64px;
    }
    
    .nav-item-plus .plus-icon {
        width: 56px;
        height: 36px;
        font-size: 28px;
    }
}

/* 股票详情信息栏（左右并排布局） */
.stock-info-bar {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    margin-bottom: 4px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

/* 左侧价格区域 */
.stock-info-left {
    flex: 0 0 auto;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 右侧信息区域 */
.stock-info-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 价格区域（紧凑版） */
.price-section {
    text-align: left;
    margin-bottom: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 股票价格 */
.price-section .price {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1px;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.1;
}

/* 涨跌幅信息 */
.price-section .change-info {
    display: flex;
    gap: 6px;
}

/* 涨跌幅 */
.price-section .change {
    font-size: 12px;
    font-weight: 600;
}

/* 信息行（一排3项） */
.info-row {
    display: flex;
    gap: 2px;
}

/* 信息项（紧凑版） */
.info-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1px 2px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

/* 信息标签 */
.info-item .info-label {
    display: block;
    font-size: 10px;
    color: #999999;
    margin-bottom: 0;
    line-height: 1.2;
}

/* 信息值 */
.info-item .info-value {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.2;
}

/* K线图标签 */
.chart-tabs {
    display: flex;               /* 弹性布局 */
    background-color: transparent; /* 透明背景 */
    border-radius: 0;            /* 无圆角 */
    padding: 0;                  /* 无内边距 */
    margin-bottom: 0;            /* 无底部边距 */
    border-bottom: 1px solid #e5e7eb; /* 底部分割线 */
}

/* K线图容器 */
.chart-container {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 0;                       /* 无圆角 */
    padding: 0;                             /* 无内边距 */
    border: none;                           /* 无边框 */
    margin-bottom: 0;                       /* 无底部边距 */
    box-shadow: none;                       /* 无阴影 */
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* K线图占位符 */
.chart-placeholder {
    display: flex;               /* 弹性布局 */
    flex-direction: column;      /* 垂直排列 */
    align-items: center;         /* 水平居中 */
    justify-content: center;     /* 垂直居中 */
    padding: 40px;              /* 内边距 */
    color: #999999;              /* 灰色 */
}

/* K线图占位符图标 */
.chart-placeholder span {
    font-size: 48px;      /* 大图标 */
    margin-bottom: 12px;  /* 底部边距 */
}

/* 公告区域 */
.notice-section {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 12px;                     /* 圆角 */
    padding: 16px;                          /* 内边距 */
    border: 1px solid #e8e8e8;              /* 边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 阴影 */
}

/* 公告标题 */
.notice-section h3 {
    font-size: 15px;      /* 字体大小 */
    font-weight: 600;     /* 半粗 */
    color: #1a1a1a;       /* 深灰色 */
    margin-bottom: 12px;  /* 底部边距 */
}

/* 公告列表 */
.notice-list {
    display: flex;               /* 弹性布局 */
    flex-direction: column;      /* 垂直排列 */
    gap: 12px;                  /* 间距 */
}

/* 公告项 */
.notice-item {
    display: flex;               /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    padding: 12px;               /* 内边距 */
    background-color: #f8f9fa;   /* 浅灰色背景 */
    border-radius: 8px;          /* 圆角 */
}

/* 公告标题 */
.notice-item .notice-title {
    font-size: 14px;      /* 字体大小 */
    color: #333333;       /* 深灰色 */
}

/* 公告时间 */
.notice-item .notice-time {
    font-size: 12px;      /* 小字体 */
    color: #999999;       /* 灰色 */
}

/* 内容标签页 */
.content-tabs {
    display: flex;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e5e7eb;
}

.content-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background-color: transparent;
}

.content-tab.active {
    background-color: transparent;
    color: #1a1a1a;
    font-weight: 700;
}

.content-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background-color: #1a73e8;
    border-radius: 1px;
}

.content-tab:hover {
    color: #333;
    background-color: transparent;
}

.content-tab.active:hover {
    background-color: transparent;
}

.content-tab-panels {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.content-tab-panel {
    display: none;
    padding: 0px;
}

.content-tab-panel.active {
    display: block;
}

/* 视频列表 */
.video-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.video-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.video-item:hover {
    background-color: #e8e8e8;
}

.video-thumb {
    position: relative;
    width: 120px;
    height: 67px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.video-thumb img,
.video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.video-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: #aaa;
    font-size: 28px;
}

.video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.video-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #999;
}

/* 视频弹窗 */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 10000;
}

.video-modal-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-modal-content video {
    max-width: 100%;
    max-height: 85vh;
}

/* 简介内容 */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
}

.profile-grid {
    display: flex;
    flex-direction: column;
}

.profile-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-label {
    font-size: 13px;
    color: #666666;
    min-width: 120px;
    flex-shrink: 0;
}

.profile-value {
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 500;
    flex: 1;
    text-align: left;
    word-break: break-all;
}

.profile-long {
    text-align: left;
    font-weight: normal;
    line-height: 1.6;
    white-space: pre-wrap;
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 4px;
}

.profile-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 股本股东页面样式 */
.shareholder-container {
    padding: 15px;
}

.shareholder-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    background: #f5f7fa;
    padding: 4px;
    border-radius: 8px;
}

.shareholder-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s;
}

.shareholder-tab:hover {
    background: #e8ecf0;
}

.shareholder-tab.active {
    background: #4a90d9;
    color: #fff;
}

.date-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.date-tab {
    padding: 8px 16px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.3s;
}

.date-tab:hover {
    border-color: #4a90d9;
    color: #4a90d9;
}

.date-tab.active {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}

.shareholder-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.shareholder-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shareholder-table th {
    background: #f5f7fa;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

.shareholder-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.shareholder-table tr:hover td {
    background: #f8f9fa;
}

.shareholder-table .empty-row {
    padding: 40px;
    color: #999;
}

/* 新闻详情 */
.news-detail {
    background-color: #ffffff;               /* 白色背景 */
    border-radius: 12px;                     /* 圆角 */
    padding: 20px;                          /* 内边距 */
    border: 1px solid #e8e8e8;              /* 边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 阴影 */
}

/* 新闻详情标题 */
.news-detail h2 {
    font-size: 20px;      /* 字体大小 */
    font-weight: 600;     /* 半粗 */
    color: #1a1a1a;       /* 深灰色 */
    margin-bottom: 16px;  /* 底部边距 */
    line-height: 1.5;     /* 行高 */
}

/* 新闻元信息 */
.news-meta {
    display: flex;   /* 弹性布局 */
    gap: 16px;       /* 间距 */
    font-size: 14px; /* 字体大小 */
    color: #999999;  /* 灰色 */
    margin-bottom: 20px; /* 底部边距 */
}

/* 新闻内容 */
.news-content {
    font-size: 16px;    /* 字体大小 */
    color: #333333;     /* 深灰色 */
    line-height: 1.8;   /* 行高 */
}

/* 新闻内容段落 */
.news-content p {
    margin-bottom: 16px; /* 底部边距 */
}

/* 空状态 */
.empty-state {
    display: flex;               /* 弹性布局 */
    flex-direction: column;      /* 垂直排列 */
    align-items: center;         /* 水平居中 */
    justify-content: center;     /* 垂直居中 */
    padding: 60px 20px;         /* 内边距 */
}

/* 空状态图标 */
.empty-icon {
    font-size: 64px;      /* 大图标 */
    margin-bottom: 16px;  /* 底部边距 */
}

/* 空状态文字 */
.empty-state p {
    font-size: 16px;      /* 字体大小 */
    color: #999999;       /* 灰色 */
    margin-bottom: 20px;  /* 底部边距 */
}

/* 空状态按钮 */
.empty-btn {
    background-color: #1a73e8;   /* 蓝色背景 */
    border: none;                /* 无边框 */
    border-radius: 8px;          /* 圆角 */
    padding: 12px 24px;          /* 内边距 */
    color: #fff;                 /* 白色文字 */
    font-size: 15px;             /* 字体大小 */
    cursor: pointer;             /* 手型光标 */
    transition: background-color 0.2s ease; /* 背景色过渡 */
}

/* 空状态按钮悬停效果 */
.empty-btn:hover {
    background-color: #1557b0;   /* 蓝色变深 */
}

/* 搜索结果区域 */
.search-results {
    margin-bottom: 24px;   /* 底部边距 */
}

/* 搜索结果标题 */
.search-results h3 {
    font-size: 15px;      /* 字体大小 */
    color: #666666;       /* 灰色 */
    margin-bottom: 12px;  /* 底部边距 */
}

/* Toast提示框基础样式 */
.toast {
    position: fixed;              /* 固定定位 */
    top: 50%;                     /* 垂直居中 */
    left: 50%;                    /* 水平居中 */
    transform: translate(-50%, -50%); /* 真正居中 */
    background: rgba(0, 0, 0, 0.85); /* 半透明黑色背景 */
    color: #fff;                  /* 白色文字 */
    padding: 16px 28px;          /* 内边距 */
    border-radius: 10px;         /* 圆角 */
    font-size: 15px;             /* 字体大小 */
    z-index: 1000;               /* 最高层级 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 阴影 */
}

/* ============================================
   帖子详情页样式 - 现代杂志风格
   ============================================ */

/* 返回箭头 */
.back-arrow {
    font-size: 24px;
    margin-right: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.back-arrow:hover {
    transform: translateX(-3px);
}

/* 帖子详情卡片 */
.news-detail {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 0;
    padding: 24px 20px;
    margin: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

/* 帖子标题 */
.detail-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 12px;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 作者信息行 */
.detail-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 0;
    margin-bottom: 1px;
    border-bottom: none;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-details {
    flex: 1;
    min-width: 0;
}

.author-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.author-time {
    font-size: 5px;
    color: #999;
}

.follow-btn {
    padding: 6px 16px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.follow-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 帖子正文内容 */
.detail-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    padding: 0;
    border-top: none;
    border-bottom: none;
    margin-bottom: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.detail-content p {
    margin-bottom: 12px;
    text-indent: 2em;
}

/* 操作栏 - 点赞/评论/分享 */
.detail-actions {
    display: flex;
    justify-content: space-around;
    padding: 0px 0;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 0px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0px 6px;
    border-radius: 8px;
    transition: background-color 0.2s;
    font-family: inherit;
}

.action-btn:hover {
    background: #f5f5f5;
}

.action-btn:active {
    opacity: 0.7;
}

.action-icon {
    font-size: 20px;
    line-height: 1;
}

.action-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.action-icon-wrap img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.action-text {
    font-size: 12px;
    color: #666;
}

/* 按钮激活状态 */
.action-btn.active .action-icon {
    color: #ff4757;
}

.action-btn.collect-btn.active .action-icon {
    color: #ffa502;
}

.action-btn.collect-btn.active .action-text {
    color: #ffa502;
    font-weight: 600;
}

.like-btn.liked {
    color: #dc2626;
}

.like-btn.liked .action-icon {
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ============================================
   评论区样式
   ============================================ */

/* ============ 评论区样式（雪球风格） ============ */
.comments-section {
    background: #ffffff;
    border-radius: 0;
    padding: 16px 20px 20px;
    margin: 0;
    border-top: 10px solid #f0f0f0;
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.comments-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.comments-count {
    color: #999;
    font-size: 14px;
    font-weight: 400;
}

/* 排序Tab */
.comments-sort-tabs {
    display: flex;
    gap: 16px;
}

.sort-tab {
    font-size: 13px;
    color: #999;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
    position: relative;
}

.sort-tab.active {
    color: #1a1a1a;
    font-weight: 600;
}

.sort-tab.active::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #1a73e8;
    border-radius: 1px;
}

/* 评论输入区 */
.comment-input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 8px;
}

#commentInput {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    outline: none;
    font-family: inherit;
}

#commentInput::placeholder {
    color: #999;
}

.submit-comment-btn {
    padding: 6px 14px;
    background: none;
    color: #1a73e8;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-comment-btn:hover {
    background: rgba(26, 115, 232, 0.08);
}

/* 评论列表 */
.comments-list {
    display: flex;
    flex-direction: column;
}

/* 评论项 - 雪球风格 */
.comment-item {
    display: flex;
    gap: var(--cl-item-gap, 10px);
    padding: var(--cl-item-padding-y, 16px) 0;
    border-bottom: 1px solid var(--cl-divider-color, #f5f5f5);
}

.comment-item:last-child {
    border-bottom: none;
}

/* 头像 */
.comment-avatar-wrap {
    flex-shrink: 0;
    width: var(--cl-avatar-size, 36px);
    height: var(--cl-avatar-size, 36px);
}

.comment-avatar {
    width: var(--cl-avatar-size, 36px);
    height: var(--cl-avatar-size, 36px);
    border-radius: var(--cl-avatar-radius, 50%);
    object-fit: cover;
    display: block;
}

.comment-avatar-fallback {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: calc(var(--cl-avatar-size, 36px) * 0.389);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-avatar-radius, 50%);
}

/* 评论主体 */
.comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cl-body-gap, 6px);
}

.comment-header-row {
    display: flex;
    align-items: center;
    gap: var(--cl-header-gap, 8px);
}

.comment-nickname {
    font-size: var(--cl-nickname-size, 14px);
    font-weight: 500;
    color: var(--cl-nickname-color, #333);
}

.comment-time {
    font-size: var(--cl-time-size, 12px);
    color: var(--cl-time-color, #999);
}

.comment-text {
    font-size: var(--cl-text-size, 14px);
    line-height: var(--cl-text-line-height, 1.6);
    color: var(--cl-text-color, #333);
    word-break: break-word;
}

/* 操作栏 */
.comment-actions-row {
    display: flex;
    gap: var(--cl-actions-gap, 20px);
    margin-top: var(--cl-actions-margin-top, 4px);
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--cl-action-color, #999);
    font-size: var(--cl-action-size, 12px);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}

.comment-action-btn:hover {
    background: #f5f5f5;
    color: #666;
}

.comment-action-btn.liked {
    color: #ff6b6b;
}

.action-icon-wrap {
    font-size: 13px;
}

/* 回复输入框 */
.reply-input-container {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
}

.reply-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.reply-input:focus {
    border-color: #1a73e8;
}

.reply-submit-btn {
    padding: 6px 14px;
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.reply-submit-btn:hover {
    background: #1557b0;
}

/* 回复列表容器（抖音风格：白底 + 分割线，无边框圆角） */
.comment-replies {
    margin-top: var(--cl-reply-margin-top, 10px);
    background: #ffffff;
    border-top: 1px solid var(--cl-divider-color, #f0f0f0);
    border-bottom: 1px solid var(--cl-divider-color, #f0f0f0);
    padding: 0;
}

/* 回复项（完整小评论项，抖音风格） */
.reply-item {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cl-divider-color, #f0f0f0);
}
.reply-item:last-child { border-bottom: none; }

/* 回复项头像（一级头像的 60%） */
.reply-avatar-wrap { flex-shrink: 0; width: 22px; height: 22px; }
.reply-avatar {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block;
    font-size: 8px; font-weight: 600; color: #fff;
}
.reply-avatar-fallback { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; }

/* 回复项主体 */
.reply-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reply-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reply-nickname { font-size: 12px; font-weight: 500; color: var(--cl-reply-name-color, #1a73e8); }
.reply-arrow { font-size: 11px; color: #999; }
.reply-to-name { font-size: 12px; font-weight: 500; color: #999; cursor: pointer; }
.reply-time { font-size: 11px; color: #bbb; }
.reply-text {
    font-size: 13px; color: var(--cl-reply-item-color, #333); line-height: 1.5; word-break: break-word;
}
.reply-actions { display: flex; gap: 14px; margin-top: 2px; }
.reply-action-btn {
    display: inline-flex; align-items: center; gap: 2px;
    background: none; border: none; color: #aaa; font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.15s;
}
.reply-action-btn:hover { color: #666; background: #f7f7f7; }
.reply-action-btn.liked { color: #ff6b6b; }
.reply-action-btn img { width: 12px; height: 12px; }
.reply-action-icon { font-size: 11px; display: inline-flex; align-items: center; }

/* 回复数徽章 */
.reply-count-badge {
    display: inline-block; min-width: 18px; height: 16px; line-height: 16px;
    padding: 0 5px; background: #e8eaed; color: #5f6368;
    font-size: 10px; border-radius: 8px; margin-left: 2px;
}

/* 评论按钮 - 已点赞状态 */
.comment-action-btn.liked { color: #ff6b6b; }
.comment-action-btn.liked .like-count-num { color: #ff6b6b; }

/* 评论输入区回复模式 */
.comment-input-area.reply-mode {
    background: #e8f0fe;
    border: 1px solid #1a73e8;
}

/* 空状态 */
.no-comments {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

.no-comments::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    background: url('icons/24/comment.png') center/contain no-repeat;
}

/* 兼容旧图标引用 */
.comment-reply-btn img.reply-icon,
.reply-btn img.reply-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

/* 成功Toast */
.toast-success {
    background: rgba(16, 185, 129, 0.9); /* 绿色背景 */
}

/* 错误Toast */
.toast-error {
    background: rgba(239, 68, 68, 0.9); /* 红色背景 */
}

/* 删除自选按钮 */
.remove-fav {
    background-color: #fef2f2;   /* 浅红色背景 */
    border: 1px solid #fecaca;   /* 红色边框 */
    color: #dc2626;              /* 红色文字 */
    border-radius: 50%;          /* 圆形 */
    width: 28px;                 /* 宽度 */
    height: 28px;                /* 高度 */
    font-size: 14px;             /* 字体大小 */
    cursor: pointer;             /* 手型光标 */
    display: flex;               /* 弹性布局 */
    align-items: center;         /* 垂直居中 */
    justify-content: center;     /* 水平居中 */
}

/* 删除自选按钮悬停效果 */
.remove-fav:hover {
    background-color: #fee2e2;   /* 背景变深 */
}

/* 用户操作区域 */
.user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 认证按钮（登录/注册） */
.auth-buttons {
    display: flex;
    gap: 8px;
}

/* 页头按钮基础样式 */
.header-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-weight: 500;
}

/* 登录按钮 */
.login-btn {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #d0d0d0;
}

.login-btn:hover {
    background-color: #e8e8e8;
}

/* 注册按钮 */
.register-btn {
    background-color: #1a73e8;
    color: #fff;
}

.register-btn:hover {
    background-color: #1557b0;
}

/* 退出按钮 */
.logout-btn {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.logout-btn:hover {
    background-color: #fecaca;
}

/* ==================== 帖子详情页媒体样式 ==================== */

/* 详情页媒体容器 */
/* 详情页媒体区：贴边（突破卡片左右20px内边距），图片/视频全宽排列 */
.detail-media {
    margin: 14px -20px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 详情页图片：贴边全宽 + 自然高度，超高带上限（居中裁剪，点击全屏看全图） */
.detail-image {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
    border-radius: 0;
    display: block;
    cursor: pointer;
}

/* 详情页视频：贴边全宽 */
.detail-video {
    width: 100%;
    max-height: 70vh;
    border-radius: 0;
    background: #000;
    display: block;
}

/* ==================== 全屏图片查看器 ==================== */
/* 查看器允许横向滑动；缩放/平移由 JS 接管（touchmove preventDefault） */
.img-viewer {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.img-viewer-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
    pointer-events: none;
}

.img-viewer-count {
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}

.img-viewer-close {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
}

/* 切页 = 原生横向滚动 + scroll-snap 吸附（浏览器自己处理滑动/惯性/光栅化） */
/* 不设 CSS scroll-behavior:smooth：初始定位必须瞬时，否则点后面的图打开会有从第1张滑过来的动画；
   需要动画的切页（箭头/键盘）由 JS scrollTo({behavior:'smooth'}) 显式指定 */
.img-viewer-track {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox 隐藏滚动条 */
    touch-action: pan-x;
}

/* WebKit 隐藏滚动条 */
.img-viewer-track::-webkit-scrollbar {
    display: none;
}

.img-viewer-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    touch-action: pan-x;
}

/* 图片加载中转圈（大图手机端下载慢时给用户反馈） */
.img-viewer-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: imgViewerSpin 0.8s linear infinite;
    pointer-events: none;
}

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

/* 图片加载失败提示 */
.img-viewer-error {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
}

.img-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.img-viewer-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.img-viewer-arrow:active {
    background: rgba(255,255,255,0.3);
}

.img-viewer-prev { left: 14px; }
.img-viewer-next { right: 14px; }

/* 触屏设备隐藏左右箭头（靠滑动切换） */
@media (pointer: coarse), (hover: none) {
    .img-viewer-arrow { display: none; }
}

/* 图片预览遮罩层 */
.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
}

.image-preview-overlay img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

.image-preview-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-overlay .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== 用户认证昵称颜色 ==================== */

/* 大V：橙色昵称 */
.nickname-v {
    color: #f5a623 !important;
}

/* 企业认证：蓝色昵称 */
.nickname-company {
    color: #1a73e8 !important;
}


/* 用户信息显示 */
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-info span {
    font-size: 13px;
    color: #666;
}

/* 响应式适配：屏幕宽度小于等于375px时生效 */
@media (max-width: 375px) {
    /* 页头标题 */
    .header-content h1 {
        font-size: 16px;  /* 字体变小 */
    }
    
    /* 指数卡片价格 */
    .index-card .price {
        font-size: 18px;  /* 字体变小 */
    }
    
    /* 股票详情信息栏：移动端保持横向排列 */
    .stock-info-bar {
        flex-direction: row;
        gap: 4px;
        padding: 4px 6px;
    }
    
    .stock-info-left {
        min-width: 90px;
    }
    
    .info-item .info-value {
        font-size: 11px;
    }
}

/* =========================================================
   图标图片统一替换样式（替代原 emoji）
   目录：static/icons/24/  和  static/icons/48/
   ========================================================= */

/* 导航图标（底部导航栏 48x48）- 仅显示文字，隐藏图标 */
.footer-nav .nav-item .nav-icon {
    display: none !important;
}
.footer-nav .nav-item .nav-icon img {
    display: none;
}
/* 激活状态的导航图标稍微高亮或使用独立 active.png 时启用 */
.footer-nav .nav-item.active .nav-icon img {
    opacity: 1;
}

/* 中间 + 号图标（可替换 nav_plus.png） */
.nav-item-plus .plus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-item-plus .plus-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* 发布弹窗图标（48x48） */
.publish-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.publish-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 操作栏图标（视频详情/帖子卡片 24x24） */
.action-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.action-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 视频占位图标（大，48x48 场景） */
.video-thumb-placeholder span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.video-thumb-placeholder span img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    opacity: 0.7;
}

/* 空状态图标（48x48） */
.empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.empty-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.8;
}

/* 上传区占位图标（48x48） */
.upload-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.upload-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* 搜索按钮图标 */
.search-btn .search-btn-icon,
.search-btn-header .search-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.search-btn .search-btn-icon img,
.search-btn-header .search-btn-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.9;
}

/* 回复/评论按钮里的图标（小尺寸） */
.comment-reply-btn img.reply-icon,
.reply-btn img.reply-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

/* 上传选项卡图标（本地上传/B站链接） */
.source-tab .source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
}
.source-tab .source-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 发帖/发视频按钮的小图标 */
.post-tool-btn .tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    vertical-align: middle;
}
.post-tool-btn .tool-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 自选按钮里的收藏图标 */
.fav-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.fav-btn-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 后台侧边栏菜单图标 */
.sidebar-menu li a span.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;
}
.sidebar-menu li a span.menu-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 后台数据卡片图标 */
.stat-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stat-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}