/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== Header样式（查询按钮红色背景） ========== */
.header {
    background-color: #d62839; /* 与查询按钮同色 */
    padding: 10px 15px;
    border-bottom: 1px solid #c02030; /* 稍深的边框增强层次感 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative; /* 新增：为下拉菜单定位 */
    min-height: 60px; /* 增加头部最小高度 */
}
.header > div:first-child {
    font-size: 18px;
    font-weight: 600;
}
.header > div:first-child a {
    color: #ffffff; /* 白色文字更醒目 */
    text-decoration: none;
}

/* ========== 新增：下拉菜单样式 ========== */
.menu-container {
    position: relative;
    display: inline-block;
    min-width: 80px; /* 给工具菜单设置最小宽度 */
    text-align: center;
}
.menu-trigger {
    color: #ffffff;
    text-decoration: none;
    margin-left: 15px;
    font-size: 16px; /* 增大字体 */
    opacity: 1; /* 取消半透明，确保清晰 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px; /* 增加内边距，扩大点击区域 */
    min-width: 80px; /* 工具菜单触发按钮最小宽度 */
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.menu-trigger:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.1); /* hover时增加背景，提升体验 */
}
/* 展开时的按钮高亮样式 */
.menu-trigger.active {
    background-color: rgba(255,255,255,0.15);
}
/* 三条杠图标样式 - 默认状态 */
.menu-trigger::after {
    content: '▼';
    font-size: 14px;
    transition: transform 0.2s ease;
}
/* 展开时图标旋转 */
.menu-trigger.active::after {
    transform: rotate(180deg);
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    min-width: 140px; /* 增大下拉菜单宽度 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 增强阴影，提升层次感 */
    border-radius: 6px;
    z-index: 9999; /* 大幅提高z-index，确保不被遮挡 */
    list-style: none;
    margin-top: 5px;
    padding: 8px 0; /* 增加上下内边距 */
    border: 1px solid #eee; /* 增加边框，增强视觉 */
}
.dropdown-menu li {
    padding: 0;
}
.dropdown-menu li a {
    display: block;
    padding: 10px 20px; /* 增大内边距，提升点击体验 */
    color: #333; /* 加深文字颜色，确保清晰 */
    text-decoration: none;
    font-size: 15px; /* 增大字体 */
    white-space: nowrap;
    transition: all 0.2s ease;
}
.dropdown-menu li a:hover {
    background-color: #f5f5f5;
    color: #d62839; /* 主色调高亮 */
    padding-left: 22px; /* 轻微位移，增强交互反馈 */
}
/* 显示下拉菜单 */
.dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease; /* 添加淡入动画 */
}

/* 导航链接样式优化 */
.header > div:last-child {
    display: flex;
    align-items: center;
}
.header > div:last-child .main-nav {
    color: #ffffff;
    text-decoration: none;
    margin-left: 15px;
    font-size: 16px; /* 增大字体 */
    opacity: 1; /* 取消半透明 */
    display: inline-block;
    padding: 8px 15px; /* 增加内边距 */
    min-width: 80px; /* 给榜单设置最小宽度 */
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}
.header > div:last-child .main-nav:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.1);
}
.header > div:last-child .main-nav.active {
    color: #ffffff;
    font-weight: 600;
    opacity: 1;
    background-color: rgba(255,255,255,0.15);
}
.bond-table th {
    color: #c62828;
    font-weight: 500;
}
._txtnone {
    text-decoration: none;
}
/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== Toolbar原有样式 ========== */
.toolbar {
    background-color: #f8f8f8;
    padding: 8px 15px;
    font-size: 12px;
    color: #d62839;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
}

/* ========== 新增：量能筛选按钮组样式 ========== */
.volume-filter-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
    justify-content: center; /* 核心：水平居中 */
    align-items: center;     /* 可选：垂直居中 */
}

.volume-filter-btn {
    padding: 6px 12px;
    border: 1px solid #ddd; /* 基础边框 */
    border-radius: 2px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}
/* 选中状态样式 - 红色边框突出显示 */
.volume-filter-btn.buy-point.active,.volume-filter-btn.unlimited.active {
    border: 1px solid #d62839 !important;
    font-weight: 600;
}
.volume-filter-btn.sell-point.active {
    border: 1px solid #009688 !important;
    font-weight: 600;
}
/* 买点按钮（低位爆量、低位缩量）特殊背景色 */
.volume-filter-btn.buy-point {
    background-color: #fff5f5; /* 浅红色背景，标识买点 */
    border-color: #fcd0d0;
}
.volume-filter-btn:hover {
    border-color: #d62839;
    color: #d62839;
}
/* 买点按钮选中状态强化 */
.volume-filter-btn.buy-point.active {
    background-color: #ffe0e0;
    color: #d62839;
}

/* 卖点按钮（高位缩量、高位放量）特殊背景色 */
.volume-filter-btn.sell-point {
    background-color: #f0fff0; /* 浅绿色背景，标识卖点 */
    border-color: #b0e0b0; /* 绿色边框 */
}
.volume-filter-btn.sell-point:hover {
    border-color: #e0f8e0;
    color: #009688;
}
/* 卖点按钮选中状态强化 */
.volume-filter-btn.sell-point.active {
    background-color: #e0f8e0;
    color: #009688; /* 绿色文字，与强空头颜色一致 */
}

/* ========== PC端样式（宽度足够单行，不足换行） ========== */
@media (min-width: 768px) {
    .search-box {
        max-width: 580px !important; /* 加宽以容纳新增筛选 */
    }
    .dpNotes {
        color: blue;
        margin-top: 8px;
        text-align: center !important;
        font-size: 12px;
    }

    /* 搜索容器整体样式 */
    .search-container {
        padding: 15px 20px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
    }
    /* 核心：优先单行，宽度不足自动换行 */
    .search-form {
        display: flex;
        align-items: center;
        gap: 12px; /* 控件间距 */
        justify-content: flex-start;
        flex-wrap: wrap; /* 宽度不足时换行 */
        width: 100%;
        /* 最小宽度限制：确保大部分PC屏幕能单行显示 */
        min-width: 700px; /* 加宽以容纳新增筛选 */
    }
    /* 筛选项样式 */
    .filter-item {
        flex: 0 0 auto; /* 不伸缩，保持固定宽度 */
        margin: 0 !important;
    }
    /* 输入框/下拉框样式 */
    .search-input, .trend-select {
        height: 38px;
        padding: 0 10px;
        border-radius: 6px;
        border: 1px solid #ddd;
        font-size: 14px;
        outline: none;
        transition: border 0.2s;
    }
    .search-input:focus, .trend-select:focus {
        border-color: #d62839;
    }
    /* 各控件宽度设置（调整以容纳新增筛选） */
    #trendType {
        width: 120px;
    }
    #py {
        width: 120px;
    }
    #beginDate {
        width: 140px;
    }
    /* 按钮样式 */
    #pySearch, #export {
        height: 38px;
        padding: 0 20px;
        border-radius: 6px;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        transition: opacity 0.2s;
    }
    #pySearch:hover, #export:hover {
        opacity: 0.9;
    }
    #pySearch {
        background-color: #d62839;
    }
    #export {
        background-color: #409eff;
    }
    /* 按钮文字样式 */
    #pySearch span, #export span {
        display: inline-block;
        line-height: 38px;
    }
}

/* ========== 移动端样式（固定宽度比例） ========== */
@media (max-width: 767px) {

    .volume-filter-group {
        gap: 5px;
        justify-content: center; /* 已存在，和PC端保持一致 */
    }
    .volume-filter-btn {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* 移动端导航优化 */
    .header > div:last-child .main-nav,
    .menu-trigger {
        min-width: 70px;
        padding: 6px 10px;
        font-size: 14px;
        margin-left: 8px;
    }
    .dropdown-menu {
        min-width: 120px;
    }
    .dropdown-menu li a {
        padding: 8px 15px;
        font-size: 14px;
    }

    .dpNotes {
        font-size: 10px;
        color: blue;
        margin-top: 8px;
        text-align: center;
    }

    /* 搜索容器整体优化 */
    .search-container {
        padding: 10px 8px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
    }
    /* 核心：移动端尽量单行，自适应收缩 */
    .search-form {
        display: flex;
        align-items: center;
        gap: 5px; /* 缩小间距，适配单行 */
        width: 100%;
        overflow-x: auto; /* 超出可滚动 */
        padding-bottom: 5px;
    }
    /* 筛选项样式 - 不同宽度比例 */
    .filter-item {
        margin: 0 !important;
    }
    /* 趋势筛选框 - 固定宽度 */
    #trendType {
        flex: 0 0 90px !important;
        min-width: 90px !important;
    }
    /* 首字母输入框 - 窄一点 */
    #py {
        flex: 0 0 70px !important;
        min-width: 70px !important;
    }
    /* 日期输入框 - 宽一点 */
    #beginDate {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
    /* 输入框/下拉框样式 - 统一高度和内边距 */
    .search-input, .trend-select {
        width: 100% !important;
        height: 36px !important;
        padding: 0 6px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
        border: 1px solid #ddd !important;
    }
    /* 查询按钮 - 固定宽度，不挤压输入框 */
    #pySearch {
        flex: 0 0 80px !important; /* 固定宽度 */
        height: 36px !important;
        padding: 0 !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        border: none !important;
        color: #fff !important;
        background-color: #d62839 !important;
        white-space: nowrap;
    }
    /* 移动端隐藏导出按钮 */
    #export {
        display: none !important;
    }
    /* 按钮文字居中 */
    #pySearch span {
        display: block;
        line-height: 36px;
        font-size: 13px;
    }
    /* 移动端量能筛选按钮组样式调整 */
    .volume-filter-group {
        gap: 5px;
        justify-content: center;
    }
    .volume-filter-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ========== 通用样式 ========== */
.fs10{
    font-size: 10px;
}
/* 排序箭头样式优化 */
.sort-arrow {
    margin-left: 4px;
    font-size: 12px;
}
/* 趋势类型样式美化 */
.trend-strong-bull {
    color: #d62839;
    font-weight: 600;
}
.trend-weak-bull, .trend-weak-bear {
    color: #666;
}
.trend-strong-bear {
    color: #009688;
    font-weight: 600;
}
/* 合并后的趋势列样式 */
.trend-combined {
    text-align: center;
    line-height: 1.2;
    padding: 4px 0;
}
.trend-strength {
    font-size: 11px;
    opacity: 0.8;
    display: block;
}
.trend-type {
    font-size: 12px;
    font-weight: 500;
    display: block;
}
/* 筛选控件基础样式 */
.filter-item {
    display: inline-block;
}
.trend-select {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    outline: none;
}
/* 加载样式 */
.loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}
/* 表格样式 - 核心修复：确保列对齐 */
.bond-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 关键：固定表格布局，列宽由定义决定 */
}
.bond-table th, .bond-table td {
    padding: 6px 4px;
    font-size: 13px;
    border: 1px solid #eee;
    text-align: center; /* 统一居中对齐 */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
    vertical-align: middle; /* 垂直居中 */
}
/* 为每一列设置固定宽度，确保对齐 */
.bond-table th:nth-child(1), .bond-table td:nth-child(1) { width: 120px; }  /* 可转债 */
.bond-table th:nth-child(2), .bond-table td:nth-child(2) { width: 100px; }  /* 强赎信息 */
.bond-table th:nth-child(3), .bond-table td:nth-child(3) { width: 80px; }   /* 策略 */
.bond-table th:nth-child(4), .bond-table td:nth-child(4) { width: 80px; }   /* 现价 */
.bond-table th:nth-child(5), .bond-table td:nth-child(5) { width: 60px; }   /* 排名 */
.bond-table th:nth-child(6), .bond-table td:nth-child(6) { width: 70px; }   /* 振幅 */
.bond-table th:nth-child(7), .bond-table td:nth-child(7) { width: 80px; }   /* 成交额 */
.bond-table th:nth-child(8), .bond-table td:nth-child(8) { width: 70px; }   /* 量比 */
.bond-table th:nth-child(9), .bond-table td:nth-child(9) { width: 70px; }   /* 5日榜 */
.bond-table th:nth-child(10), .bond-table td:nth-child(10) { width: 70px; } /* 10日榜 */
.bond-table th:nth-child(11), .bond-table td:nth-child(11) { width: 70px; } /* 30日榜 */
.bond-table th:nth-child(12), .bond-table td:nth-child(12) { width: 90px; } /* 日趋势 */
.bond-table th:nth-child(13), .bond-table td:nth-child(13) { width: 80px; } /* 9:25 */
.bond-table th:nth-child(14), .bond-table td:nth-child(14) { width: 80px; } /* 9:30 */
.bond-table th:nth-child(15), .bond-table td:nth-child(15) { width: 90px; } /* 行业 */
.bond-table th:nth-child(16), .bond-table td:nth-child(16) { width: 60px; } /* 评级 */
.bond-table th:nth-child(17), .bond-table td:nth-child(17) { width: 80px; } /* 剩余规模 */
.bond-table th:nth-child(18), .bond-table td:nth-child(18) { width: 80px; } /* 转股比例 */
.bond-table th:nth-child(19), .bond-table td:nth-child(19) { width: 80px; } /* 溢价率 */
.bond-table th:nth-child(20), .bond-table td:nth-child(20) { width: 90px; } /* 备注 */

.bond-table th {
    font-weight: 600;
}
.fixed-column, .fixed-column-header {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
}
.fixed-column-header {
    background-color: #f8f8f8;
    z-index: 2; /* 提高固定列头层级 */
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #f8f8f8;
}
.red {
    color: #d62839;
}
.green {
    color: #009688;
}
.gray {
    color: #999;
}
.price-change {
    font-size: 11px;
    opacity: 0.8;
}
.error {
    text-align: center;
    color: #d62839;
    padding: 20px;
}
/* 页脚样式 */
.footer {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 12px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}
/* 量比列样式 */
.volume-ratio {
    text-align: center;
}
/* 表格容器添加横向滚动 */
.table-container {
    overflow-x: auto; /* 表格超出宽度时显示横向滚动条 */
    margin: 0 auto;
}