/* 移动端适配样式 - 煤球网 */

/* ==================== 基础响应式设置 ==================== */

/* 小屏幕平板 (768px - 1024px) */
@media (max-width: 1024px) {
    /* 容器宽度适配 */
    .industry-container,
    .coal-market,
    .three-modules,
    .footer-content {
        padding: 0 30px !important;
    }
    
    /* NB指数模块适配 */
    .nb-index-inline {
        min-width: auto !important;
        max-width: 100%;
        padding: 10px 20px !important;
        flex-direction: column;
        height: auto !important;
        gap: 15px;
    }
    
    .nb-logo-img {
        height: 50px !important;
    }
    
    /* 指数卡片适配 */
    .index-card {
        width: 180px !important;
        height: 60px !important;
    }
    
    .port-name {
        font-size: 14px !important;
    }
    
    .price {
        font-size: 24px !important;
    }
    
    .change-value {
        font-size: 16px !important;
    }
}

/* 移动端 (max-width: 890px) */
@media (max-width: 890px) {
    
    /* ========== 全局设置 ========== */
    body {
        min-width: 100% !important;
        font-size: 14px;
    }
    
    /* ========== 注意: 页眉样式已移动到 mobile-pure.css ========== */
    /* 为了避免样式冲突，页眉相关样式全部在 mobile-pure.css 中定义 */
    /* 包括: .top-bar, .logo-section, .top-nav, .coal-nav, .header-actions 等 */
    
    /* ========== Banner适配 - 紧凑设计 ========== */
    
    /* ========== 行业资讯适配 - 精致排版 ========== */
    .industry-news-section {
        padding: 12px 0 !important;
        margin-bottom: 10px !important;
        background: #ffffff !important;
    }
    
    .industry-container {
        padding: 0 12px !important;
    }
    
    .industry-news-section .section-title {
        font-size: 17px !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
    }
    
    .industry-news-section .section-header {
        margin-bottom: 10px !important;
        padding-bottom: 6px !important;
    }
    
    .industry-news-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .industry-card {
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    }
    
    .card-image {
        height: 130px !important;
    }
    
    .overlay-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    .card-meta {
        padding: 10px 12px !important;
        font-size: 11px !important;
        background: #fafafa !important;
    }
    
    /* ========== 煤炭市场板块适配 ========== */
    .coal-market {
        padding: 0 12px !important;
        margin: 6px auto !important;
    }
    
    .market-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 5px;
    }
    
    .market-title {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .market-title h2 {
        font-size: 17px !important;
        flex: 1;
    }
    
    .trend-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .divider-line {
        width: 100% !important;
        margin: 0 !important;
        height: 2px !important;
    }
    
    .market-zone {
        position: static !important;
        font-size: 13px !important;
        margin-top: 4px;
    }
    
    /* NB指数区域 - 超级紧凑 */
    .nb-index-section-inline {
        margin: 6px 0 !important;
        padding: 0 12px !important;
    }
    
    .nb-index-inline {
        min-width: auto !important;
        width: 100% !important;
        padding: 8px 10px !important;
        height: auto !important;
        min-height: 40px !important;
        flex-direction: row !important;
        gap: 8px;
        border-radius: 6px !important;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #c62828 0%, #8b1a1a 100%) !important;
    }
    
    /* 当显示“敬请期待”时的样式 */
    .nb-index-inline:has(.index-cards:empty),
    .nb-index-inline:has([id*="Cards"]:empty) {
        min-height: 40px !important;
        padding: 8px !important;
        justify-content: center;
    }
    
    /* 隐藏NB Logo图片 */
    .nb-logo {
        display: none !important;
    }
    
    /* 指数轮播 - 横向滚动 */
    .index-carousel-home {
        width: 100%;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .index-carousel-home::-webkit-scrollbar {
        display: none !important;
    }
    
    /* 隐藏箭头按钮 */
    .carousel-btn-home {
        display: none !important;
    }
    
    .index-cards {
        gap: 6px !important;
        height: auto !important;
        flex: 1;
        min-width: 0;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .index-cards::-webkit-scrollbar {
        display: none !important;
    }
    
    .index-card {
        width: 130px !important;
        min-width: 130px !important;
        flex: 0 0 auto !important;
        height: 60px !important;
        padding: 6px 8px !important;
    }
    
    .port-name {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }
    
    .price {
        font-size: 17px !important;
    }
    
    .change-value {
        font-size: 12px !important;
    }
    
    /* ========== 三栏模块适配 - 精致设计 ========== */
    .three-modules {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
        margin: 12px auto !important;
    }
    
    .module-box {
        height: auto !important;
        min-height: 280px;
        padding: 15px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    
    .module-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        font-weight: 700 !important;
        color: #333 !important;
        letter-spacing: 0.3px !important;
    }
    
    /* 图表适配 */
    .chart-wrapper {
        height: 220px !important;
        margin-bottom: 12px !important;
    }
    
    .chart-wrapper canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .chart-legend {
        gap: 10px !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap !important;
    }
    
    .legend-item {
        font-size: 12px !important;
    }
    
    /* 新闻列表 - 精致排版 */
    .news-list-module {
        gap: 10px !important;
        max-height: 250px !important;
        overflow-y: auto !important;
    }
    
    .news-title-module {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #333 !important;
        font-weight: 500 !important;
    }
    
    .news-date-module {
        font-size: 12px !important;
        color: #999 !important;
    }
    
    /* ========== 广告位适配 ========== */
    .ad-section {
        padding: 0 12px !important;
        margin: 15px auto !important;
    }
    
    .ad-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .ad-item {
        height: 180px !important;
    }
    
    /* ========== 页脚适配 ========== */
    .footer {
        padding: 25px 0 15px !important;
    }
    
    .footer-content {
        padding: 0 12px !important;
    }
    
    .footer-top {
        flex-direction: column !important;
        gap: 15px;
        align-items: center !important;
    }
    
    .footer-logo-section {
        gap: 12px;
    }
    
    .footer-logo {
        width: 50px !important;
        height: 50px !important;
    }
    
    .footer-company {
        font-size: 14px !important;
    }
    
    .footer-info {
        flex-direction: column;
        gap: 12px !important;
        text-align: center;
    }
    
    .footer-link,
    .footer-email {
        font-size: 13px !important;
    }
    
    .footer-slogan {
        font-size: 15px !important;
    }
}

/* 超小屏幕 (最大3480px) */
@media (max-width: 480px) {
    
    /* 更激进的压缩 */
    .coal-market {
        padding: 0 10px !important;
    }
    
    .market-title h2 {
        font-size: 16px !important;
    }
    
    .nb-index-inline {
        padding: 8px 6px !important;
        min-height: 70px !important;
    }
    
    .nb-logo-img {
        height: 30px !important;
    }
    
    .index-card {
        min-width: 80px;
        padding: 4px 5px !important;
        height: 50px !important;
    }
    
    .port-name {
        font-size: 11px !important;
    }
    
    .price {
        font-size: 16px !important;
    }
    
    .change-value {
        font-size: 12px !important;
    }
    
    .three-modules {
        padding: 0 10px !important;
        gap: 8px !important;
    }
    
    .module-box {
        padding: 10px !important;
        min-height: 260px;
    }
    
    .module-title {
        font-size: 15px !important;
    }
    
    .chart-wrapper {
        height: 200px !important;
    }
    
    /* 注意: 页眉样式在 mobile-pure.css 中 */
    
    /* 行业资讯 */
    .card-image {
        height: 120px !important;
    }
    
    .overlay-title {
        font-size: 15px !important;
    }
}

/* ==================== 横屏优化 ==================== */
@media (max-width: 890px) and (orientation: landscape) {
    /* 注意: 页眉样式在 mobile-pure.css 中 */
    
    .banner-carousel {
        max-height: 120px !important;
    }
    
    .banner-slider {
        height: 120px !important;
    }
    
    .banner-slide,
    .banner-slide img {
        height: 120px !important;
    }
}

/* ==================== 触摸优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大触摸区域 */
    .nav-link,
    .coal-item,
    .btn-login {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* .btn-member 不需要 44px，使用30px窄版设计 */
    
    .industry-card,
    .news-title-module,
    .more-link {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* 禁用悬停效果 */
    .industry-card:hover,
    .ad-item:hover,
    .module-box:hover {
        transform: none !important;
    }
}

/* ==================== 中等屏幕优化 (891px - 1200px) ==================== */
@media (min-width: 891px) and (max-width: 1200px) {
    .industry-container,
    .coal-market,
    .three-modules {
        padding: 0 40px !important;
    }
    
    .industry-news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .three-modules {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .module-box:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
    
    .nb-index-inline {
        min-width: 900px !important;
    }
}

/* ==================== 煤炭工具页面 ==================== */
@media (max-width: 890px) {
    /* 工具横向菜单 */
    .tools-horizontal-menu {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 12px !important;
        background: #f8f8f8 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .tools-horizontal-menu::-webkit-scrollbar {
        display: none !important;
    }
    
    .tool-tab {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-bottom: 3px solid transparent !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 11 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .tool-tab.active {
        border-bottom-color: #e74c3c !important;
        background: rgba(231, 76, 60, 0.05) !important;
    }
    
    .tool-tab:active {
        transform: scale(0.95) !important;
        opacity: 0.9 !important;
    }
    
    .tool-icon {
        font-size: 18px !important;
        pointer-events: none !important;
    }
    
    .tool-name {
        font-size: 12px !important;
        pointer-events: none !important;
    }
    
    /* 工具内容区 */
    .tools-content {
        padding: 12px !important;
        position: relative !important;
    }
    
    .tool-panel {
        padding: 0 !important;
        display: none !important;
    }
    
    .tool-panel.active {
        display: block !important;
    }
    
    /* 移动端提示覆盖层 */
    .tool-panel.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .tool-panel.active::after {
        content: '📱\A\A请使用PC网页版或下载APP\A\A煤炭工具功能较为复杂\A建议在电脑上使用获得更好体验\A\A或下载“煤球”APP使用移动版';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        text-align: center;
        font-size: 15px;
        line-height: 1.8;
        color: #333;
        white-space: pre-line;
        padding: 30px 20px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border: 2px solid #e74c3c;
        max-width: 85%;
    }
    
    /* 配煤软件适配 */
    .blending-layout {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* iframe适配 */
    .premium-calculator-wrapper iframe {
        min-height: 600px !important;
    }
}

/* ==================== 订单货源页面 ==================== */
@media (max-width: 890px) {
    .order-source-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 !important;
    }
    
    .left-panel {
        width: 100% !important;
        padding: 0 12px !important;
    }
    
    /* 煤种筛选区域 */
    .coal-filter {
        background: #ffffff !important;
        padding: 15px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    
    .filter-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 12px 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    .coal-type-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .coal-type-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        margin: 0 !important;
        transition: all 0.3s !important;
    }
    
    .coal-type-item input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    .coal-type-item span {
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .coal-type-item:has(input:checked) {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
    }
    
    /* 发布按钮 */
    .publish-btn {
        padding: 14px 20px !important;
        font-size: 16px !important;
        width: 100% !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* 发布表单弹窗 */
    .modal {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .modal.active {
        display: block !important;
    }
    
    .modal-content {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        width: 100% !important;
    }
    
    .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        border-bottom: 2px solid #f0f0f0 !important;
        background: #ffffff !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .modal-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    .modal-close {
        font-size: 28px !important;
        color: #999 !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    
    .modal-body {
        padding: 20px !important;
        padding-bottom: 100px !important;
    }
    
    .publish-form .form-group {
        margin-bottom: 18px !important;
    }
    
    .form-label {
        display: block !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .required {
        color: #e74c3c !important;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        color: #333 !important;
        background: #f8f9fa !important;
        box-sizing: border-box !important;
    }
    
    .form-textarea {
        min-height: 80px !important;
        resize: vertical !important;
        font-family: inherit !important;
    }
    
    .radio-group,
    .checkbox-group {
        display: flex !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
    }
    
    .radio-item,
    .checkbox-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    
    .radio-item input,
    .checkbox-item input {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
    }
    
    .modal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        padding: 12px 20px !important;
        border-top: 1px solid #e0e0e0 !important;
        display: flex !important;
        gap: 12px !important;
        z-index: 1001 !important;
    }
    
    .modal-footer button {
        flex: 1 !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        font-weight: 500 !important;
    }
    
    .btn-cancel {
        background: #f0f0f0 !important;
        color: #666 !important;
    }
    
    .btn-submit {
        background: #e74c3c !important;
        color: #ffffff !important;
    }
    
    .btn-cancel:active {
        background: #e0e0e0 !important;
    }
    
    .btn-submit:active {
        background: #c0392b !important;
    }
    
    /* Tab切换 */
    .tab-switch {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    .tab-switch::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        flex: 0 0 auto !important;
        min-width: 100px !important;
        font-size: 15px !important;
        padding: 12px 16px !important;
        border-bottom: 3px solid transparent !important;
    }
    
    .tab-btn.active {
        color: #e74c3c !important;
        border-bottom-color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    /* 信息列表 */
    .info-list {
        padding: 15px 12px 80px 12px !important;  /* 底部留空间给发布按钮 */
    }
    
    .info-item {
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border-left: 4px solid #e74c3c !important;
    }
    
    .info-item:active {
        background: #f8f9fa !important;
        transform: scale(0.99);
    }
    
    /* 信息头部 */
    .info-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .user-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .publish-time {
        font-size: 12px !important;
        color: #999 !important;
    }
    
    /* 信息主体 */
    .info-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .info-row {
        display: flex !important;
        align-items: flex-start !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .info-label {
        flex: 0 0 80px !important;
        font-weight: 500 !important;
        color: #666 !important;
    }
    
    .info-value {
        flex: 1 !important;
        color: #333 !important;
        word-break: break-all !important;
    }
    
    /* 重点信息突出显示 */
    .info-row.highlight .info-value {
        color: #e74c3c !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }
    
    /* 信息底部 */
    .info-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .contact-btn {
        flex: 1 !important;
        padding: 10px 20px !important;
        background: #e74c3c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .contact-btn:active {
        background: #c0392b !important;
        transform: scale(0.95);
    }
}

/* ==================== 煤企信息页面 ==================== */
@media (max-width: 890px) {
    /* 主容器 */
    .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* 面包屑导航 */
    .breadcrumb {
        background: #ffffff !important;
        padding: 12px 15px !important;
        font-size: 13px !important;
        color: #999 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin: 0 !important;
    }
    
    .breadcrumb a {
        color: #666 !important;
        text-decoration: none !important;
    }
    
    .breadcrumb span {
        margin: 0 6px !important;
        color: #ccc !important;
    }
    
    /* 筛选区域 */
    .filter-section {
        background: #ffffff !important;
        padding: 15px !important;
        margin-bottom: 8px !important;
    }
    
    .filter-item {
        margin-bottom: 15px !important;
    }
    
    .filter-item:last-child {
        margin-bottom: 0 !important;
    }
    
    .filter-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 10px 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .filter-label::before {
        content: '' !important;
        width: 3px !important;
        height: 14px !important;
        background: #e74c3c !important;
        margin-right: 8px !important;
        border-radius: 2px !important;
    }
    
    /* 筛选选项容器 */
    .filter-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 筛选按钮 */
    .filter-btn {
        padding: 8px 16px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        white-space: nowrap !important;
    }
    
    .filter-btn.active,
    .filter-btn:active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        font-weight: 500 !important;
    }
    
    /* 统计信息 */
    .company-stats {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        padding: 12px 15px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        text-align: center !important;
        margin: 0 0 8px 0 !important;
        box-shadow: 0 2px 6px rgba(231, 76, 60, 0.2) !important;
    }
    
    .company-stats span {
        font-weight: 600 !important;
        font-size: 18px !important;
        margin: 0 4px !important;
    }
    
    /* 企业列表 */
    .company-list {
        padding: 0 12px 15px 12px !important;
    }
    
    /* 企业卡片 */
    .company-card {
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        transition: all 0.3s !important;
    }
    
    .company-card:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }
    
    /* 企业头部区 */
    .company-header {
        background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
        padding: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-bottom: 2px solid #f8f9fa !important;
    }
    
    /* Logo */
    .company-logo {
        width: 70px !important;
        height: 70px !important;
        border-radius: 10px !important;
        object-fit: contain !important;
        background: #ffffff !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
        border: 2px solid #f0f0f0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* 企业基本信息 */
    .company-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .company-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 8px 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.4 !important;
    }
    
    .company-province {
        font-size: 13px !important;
        color: #666 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    
    .company-province::before {
        content: '📍' !important;
        font-size: 13px !important;
    }
    
    /* 企业详细信息 */
    .company-details {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        background: #ffffff !important;
    }
    
    .company-item,
    .detail-row {
        display: flex !important;
        align-items: flex-start !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .company-label,
    .detail-label {
        flex: 0 0 90px !important;
        color: #999 !important;
        font-size: 13px !important;
    }
    
    .company-value,
    .detail-value {
        flex: 1 !important;
        color: #333 !important;
        font-size: 14px !important;
        word-break: break-all !important;
    }
    
    .company-value.highlight,
    .detail-value.highlight {
        color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    /* 企业底部操作栏 */
    .company-footer {
        padding: 12px 15px !important;
        background: #f8f9fa !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .company-type {
        padding: 4px 12px !important;
        background: #fff5f5 !important;
        color: #e74c3c !important;
        border: 1px solid #ffe5e5 !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }
    
    .company-link,
    .view-btn {
        padding: 8px 16px !important;
        background: #e74c3c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: all 0.3s !important;
        box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3) !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    .company-link:active,
    .view-btn:active {
        background: #c0392b !important;
        transform: scale(0.95) !important;
    }
    
    /* 分页 */
    .pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 12px !important;
        flex-wrap: wrap !important;
    }
    
    .pagination button {
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .pagination button.active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    .pagination button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
}

/* ==================== 煤种详情页面 ==================== */
@media (max-width: 890px) {
    /* 主容器 */
    .content-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    
    .coal-main-section {
        width: 100% !important;
    }
    
    .main-content {
        padding: 0 !important;
    }
    
    /* 面包屑导航 */
    .breadcrumb {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .breadcrumb-container {
        padding: 12px 15px !important;
        font-size: 13px !important;
        color: #999 !important;
    }
    
    .breadcrumb-item {
        color: #666 !important;
        text-decoration: none !important;
    }
    
    .breadcrumb-separator {
        margin: 0 6px !important;
        color: #ccc !important;
    }
    
    /* NB指数区域 */
    .nb-index-section {
        background: #ffffff !important;
        padding: 15px !important;
        margin-bottom: 8px !important;
        border-radius: 0 !important;
    }
    
    .section-header {
        margin-bottom: 15px !important;
    }
    
    .section-title {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 10px 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid #f0f0f0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .section-title::before {
        content: '' !important;
        width: 4px !important;
        height: 18px !important;
        background: #e74c3c !important;
        margin-right: 10px !important;
        border-radius: 2px !important;
    }
    
    /* 指数控制器 */
    .index-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .index-select {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        background: #f8f9fa !important;
        color: #333 !important;
    }
    
    .index-date {
        font-size: 12px !important;
        color: #999 !important;
        text-align: right !important;
        padding: 8px 12px !important;
        background: #f8f9fa !important;
        border-radius: 6px !important;
    }
    
    /* 指数轮播 */
    .index-carousel {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    
    .carousel-btn {
        width: 40px !important;
        height: 40px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        flex-shrink: 0 !important;
    }
    
    .carousel-btn:active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
    }
    
    /* 指数值卡片 */
    .index-value-card {
        flex: 1 !important;
        background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border: 2px solid #ffe5e5 !important;
        text-align: center !important;
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.1) !important;
    }
    
    .index-label {
        font-size: 14px !important;
        color: #666 !important;
        margin-bottom: 10px !important;
    }
    
    .index-value {
        font-size: 36px !important;
        font-weight: 700 !important;
        color: #e74c3c !important;
        margin: 10px 0 !important;
    }
    
    .index-change {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }
    
    .change-label {
        font-size: 13px !important;
        color: #999 !important;
    }
    
    .change-value {
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
    }
    
    .change-value.up {
        color: #dc3545 !important;
        background: #ffe5e5 !important;
    }
    
    .change-value.down {
        color: #28a745 !important;
        background: #e5f7e5 !important;
    }
    
    /* 指数图表 */
    .index-chart {
        height: 250px !important;
        margin-top: 20px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 15px !important;
    }
    
    .index-chart canvas {
        max-width: 100% !important;
        height: 100% !important;
    }
    
    /* 价格表格区域 */
    .price-table-section {
        background: #ffffff !important;
        padding: 15px !important;
        margin-bottom: 8px !important;
    }
    
    /* 筛选栏 */
    .filter-bar {
        background: #f8f9fa !important;
        padding: 12px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .filter-left,
    .filter-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .filter-label {
        font-size: 13px !important;
        color: #666 !important;
        font-weight: 500 !important;
    }
    
    .filter-select,
    .filter-date {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        background: #ffffff !important;
        color: #333 !important;
    }
    
    /* 价格表格容器 */
    .price-table-wrapper {
        position: relative !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }
    
    .price-table-wrapper::-webkit-scrollbar {
        height: 4px !important;
    }
    
    .price-table-wrapper::-webkit-scrollbar-thumb {
        background: #e0e0e0 !important;
        border-radius: 2px !important;
    }
    
    /* 价格表格 */
    .price-table {
        min-width: 800px !important;
        width: 100% !important;
        font-size: 12px !important;
        border-collapse: collapse !important;
        background: #ffffff !important;
    }
    
    .price-table thead {
        background: #f8f9fa !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .price-table th {
        padding: 10px 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-align: center !important;
        border-bottom: 2px solid #e0e0e0 !important;
        white-space: nowrap !important;
    }
    
    .price-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
        color: #666 !important;
        text-align: center !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .price-table tr:last-child td {
        border-bottom: none !important;
    }
    
    .price-table tbody tr:active {
        background: #fafafa !important;
    }
    
    /* 价格单元格 */
    .price-cell {
        font-weight: 600 !important;
        color: #e74c3c !important;
        font-size: 13px !important;
    }
    
    /* 价格表遮罩 */
    .price-table-mask {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 20 !important;
    }
    
    .mask-gradient {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 40%, rgba(255,255,255,1) 60%) !important;
    }
    
    .unlock-panel {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        padding: 30px 20px !important;
        border-radius: 12px !important;
        text-align: center !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        min-width: 80% !important;
    }
    
    .unlock-icon {
        font-size: 56px !important;
        margin-bottom: 15px !important;
    }
    
    .unlock-message {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 20px !important;
        line-height: 1.6 !important;
    }
    
    .unlock-btn {
        padding: 14px 40px !important;
        background: #ffffff !important;
        color: #e74c3c !important;
        border: none !important;
        border-radius: 25px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.3s !important;
        margin-bottom: 12px !important;
    }
    
    .unlock-btn:active {
        transform: scale(0.95) !important;
    }
    
    .unlock-hint {
        font-size: 13px !important;
        opacity: 0.9 !important;
    }
    
    /* 空状态 */
    .empty-state {
        padding: 60px 20px !important;
        text-align: center !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
        margin: 20px 0 !important;
    }
    
    .empty-icon {
        font-size: 56px !important;
        margin-bottom: 12px !important;
        opacity: 0.4 !important;
    }
    
    .empty-text {
        font-size: 14px !important;
        color: #999 !important;
    }
    
    /* 分页 */
    .pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 0 !important;
        flex-wrap: wrap !important;
    }
    
    .page-btn {
        min-width: 70px !important;
        height: 40px !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .page-btn:active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
    }
    
    .page-numbers {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    
    .page-number {
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .page-number.active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    /* 侧边栏 - 移动端隐藏 */
    .sidebar {
        display: none !important;
    }
}

/* ==================== 资讯详情页面 ==================== */
@media (max-width: 890px) {
    /* 面包屑导航 */
    .breadcrumb {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .breadcrumb-container {
        padding: 12px 15px !important;
        font-size: 12px !important;
        color: #999 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .breadcrumb-item {
        color: #666 !important;
        text-decoration: none !important;
        font-size: 12px !important;
    }
    
    .breadcrumb-item.active {
        color: #333 !important;
        font-weight: 500 !important;
    }
    
    .breadcrumb-separator {
        margin: 0 6px !important;
        color: #ccc !important;
    }
    
    /* 主容器 */
    .detail-content {
        padding: 0 !important;
        background: #f8f9fa !important;
    }
    
    .detail-container {
        display: block !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* 文章主体 */
    .news-article {
        background: #ffffff !important;
        padding: 15px !important;
        margin-bottom: 8px !important;
        border-radius: 0 !important;
    }
    
    /* 文章标题 */
    .article-title {
        font-size: 20px !important;
        line-height: 1.4 !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin: 0 0 15px 0 !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    /* 文章元信息 */
    .article-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 12px 0 !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        color: #999 !important;
    }
    
    .meta-icon {
        font-size: 14px !important;
    }
    
    /* 文章正文 */
    .article-body {
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #333 !important;
        margin-bottom: 20px !important;
    }
    
    .article-body p {
        margin: 12px 0 !important;
        text-align: justify !important;
    }
    
    .article-body h2,
    .article-body h3 {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 20px 0 12px 0 !important;
        padding-left: 10px !important;
        border-left: 4px solid #e74c3c !important;
    }
    
    .article-body ul,
    .article-body ol {
        padding-left: 20px !important;
        margin: 12px 0 !important;
    }
    
    .article-body li {
        margin: 8px 0 !important;
        line-height: 1.6 !important;
    }
    
    .article-body img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 15px auto !important;
        border-radius: 8px !important;
    }
    
    .article-body blockquote {
        background: #f8f9fa !important;
        border-left: 4px solid #e74c3c !important;
        padding: 12px 15px !important;
        margin: 15px 0 !important;
        font-style: italic !important;
        color: #666 !important;
    }
    
    /* 文章配图 */
    .article-image {
        margin: 20px 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .content-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* 操作按钮 */
    .article-actions {
        display: flex !important;
        gap: 10px !important;
        padding: 20px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .action-btn {
        flex: 1 !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .action-btn:active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        transform: scale(0.98) !important;
    }
    
    .btn-icon {
        font-size: 18px !important;
    }
    
    /* 侧边栏 - 移动端隐藏 */
    .detail-sidebar {
        display: none !important;
    }
}

/* ==================== 资讯列表页面 ==================== */
@media (max-width: 890px) {
    /* 主容器 */
    .main-content {
        padding: 0 !important;
        background: #f8f9fa !important;
    }
    
    .content-container {
        display: block !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* 资讯列表区域 */
    .news-list-section {
        width: 100% !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }
    
    /* 区块头部 */
    .section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px !important;
        background: #ffffff !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    .section-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .section-title::before {
        content: '' !important;
        width: 4px !important;
        height: 18px !important;
        background: #e74c3c !important;
        margin-right: 10px !important;
        border-radius: 2px !important;
    }
    
    /* 筛选器 */
    .filter-group {
        display: flex !important;
        gap: 8px !important;
    }
    
    .filter-select {
        padding: 6px 12px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        background: #f8f9fa !important;
        color: #333 !important;
        min-width: 90px !important;
    }
    
    /* 资讯列表 */
    .news-list {
        padding: 0 !important;
    }
    
    .news-item {
        display: flex !important;
        gap: 12px !important;
        padding: 15px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: background 0.2s !important;
        text-decoration: none !important;
    }
    
    .news-item:active {
        background: #fafafa !important;
    }
    
    /* 资讯缩略图 */
    .news-thumb {
        width: 100px !important;
        height: 75px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        background: #f0f0f0 !important;
    }
    
    .news-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 资讯信息 */
    .news-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-width: 0 !important;
    }
    
    .news-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #333 !important;
        line-height: 1.4 !important;
        margin: 0 0 8px 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .news-meta {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 12px !important;
        color: #999 !important;
    }
    
    .news-meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .meta-icon {
        font-size: 13px !important;
    }
    
    /* 分页 */
    .pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 20px 15px !important;
        background: #ffffff !important;
        flex-wrap: wrap !important;
    }
    
    .page-btn,
    .prev-btn,
    .next-btn {
        min-width: 70px !important;
        height: 40px !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .page-btn:active,
    .prev-btn:active,
    .next-btn:active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
    }
    
    .page-btn:disabled,
    .prev-btn:disabled,
    .next-btn:disabled {
        background: #f0f0f0 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }
    
    .page-numbers {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .page-number {
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }
    
    .page-number.active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    .page-number:active {
        transform: scale(0.95) !important;
    }
    
    /* 侧边栏 - 移动端隐藏 */
    .sidebar {
        display: none !important;
    }
}

/* ==================== 拍卖大厅页面 ==================== */
@media (max-width: 890px) {
    .auction-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .auction-card {
        padding: 15px !important;
    }
    
    .auction-image {
        height: 180px !important;
    }
    
    /* 筛选栏 */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
    
    .search-input {
        width: 100% !important;
    }
    
    .stats-bar {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ==================== 拍卖详情页面 ==================== */
@media (max-width: 890px) {
    .detail-layout {
        grid-template-columns: 1fr !important;
    }
    
    .right-section {
        position: static !important;
    }
    
    .main-image {
        height: 300px !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr !important;
    }
    
    .specs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .current-price {
        font-size: 32px !important;
    }
    
    .countdown-timer {
        font-size: 20px !important;
    }
}

/* ==================== 煤企详情页面 ==================== */
@media (max-width: 890px) {
    .company-detail-container {
        margin: 15px auto !important;
        padding: 0 12px !important;
    }
    
    .company-name {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        padding: 0 15px !important;
    }
    
    .company-basic-info {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    
    .company-logo-wrapper {
        display: flex !important;
        justify-content: center !important;
    }
    
    .company-logo {
        width: 100px !important;
        height: 100px !important;
    }
    
    .company-details-box {
        height: auto !important;
        padding: 15px !important;
    }
    
    .company-logo-text {
        font-size: 20px !important;
    }
    
    .company-details {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .info-item {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .info-label,
    .info-value {
        font-size: 14px !important;
    }
}

/* ==================== 资讯详情页面 ==================== */
@media (max-width: 890px) {
    .detail-container {
        grid-template-columns: 1fr !important;
    }
    
    .detail-content {
        padding: 0 12px !important;
    }
    
    .news-article {
        padding: 15px !important;
    }
    
    .article-title {
        font-size: 20px !important;
    }
    
    .article-meta {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .detail-sidebar {
        flex-direction: column !important;
    }
}

/* ==================== 登录注册页面 ==================== */
@media (max-width: 890px) {
    /* 登录页面 */
    .login-container {
        grid-template-columns: 1fr !important;
    }
    
    .login-welcome {
        display: none !important;
    }
    
    .login-form-wrapper {
        padding: 25px 15px !important;
    }
    
    .welcome-title {
        font-size: 24px !important;
    }
    
    /* 注册页面 */
    .register-box {
        padding: 25px 15px !important;
    }
    
    .btn-code {
        width: 90px !important;
        font-size: 13px !important;
    }
}

/* ==================== 我的页面 ==================== */
@media (max-width: 890px) {
    /* 我的拍卖 */
    .tabs-nav {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
    }
    
    .tab-btn {
        flex: 1 1 45% !important;
        min-width: 100px !important;
    }
    
    .auction-card {
        flex-direction: column !important;
    }
    
    .auction-image {
        width: 100% !important;
        height: 180px !important;
    }
    
    .deposit-stats {
        grid-template-columns: 1fr !important;
    }
    
    /* 我的煤库 */
    .coal-grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .library-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    .btn-add-coal {
        width: 100% !important;
    }
}

/* ==================== 发布页面 ==================== */
@media (max-width: 890px) {
    .publish-form {
        padding: 20px 12px !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-preview {
        width: 100% !important;
    }
    
    .image-preview-list {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    }
}

/* ==================== 价格计算器页面 ==================== */
@media (max-width: 890px) {
    .calculator-layout {
        grid-template-columns: 1fr !important;
    }
    
    .coal-types {
        grid-template-columns: 1fr !important;
    }
    
    .indicators-grid {
        grid-template-columns: 1fr !important;
    }
    
    .result-summary .price {
        font-size: 32px !important;
    }
}

/* ==================== 登录页面 ==================== */
@media (max-width: 890px) {
    /* 主容器 */
    .login-main {
        padding: 0 !important;
        background: #f8f9fa !important;
        min-height: 100vh !important;
    }
    
    .login-container {
        display: block !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* 欢迎区域 - 移动端隐藏 */
    .login-welcome {
        display: none !important;
    }
    
    /* 登录表单区域 */
    .login-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Tab切换 */
    .login-tabs {
        display: flex !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    
    .tab-btn {
        flex: 1 !important;
        height: 44px !important;
        font-size: 14px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .tab-btn.active {
        background: #e74c3c !important;
        color: #ffffff !important;
        border-color: #e74c3c !important;
        font-weight: 600 !important;
    }
    
    /* 表单内容切换 - 增强选择器优先级 */
    .login-form-wrapper .tab-content,
    #wechat-tab,
    #phone-tab,
    #password-tab {
        display: none !important;
        animation: fadeIn 0.3s !important;
    }
    
    .login-form-wrapper .tab-content.active,
    #wechat-tab.active,
    #phone-tab.active,
    #password-tab.active {
        display: block !important;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 微信二维码 */
    .wechat-qr-wrapper {
        padding: 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .qr-code-box {
        width: 250px !important;
        height: 250px !important;
        margin: 0 auto 15px !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 12px !important;
        position: relative !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }
    
    .qr-placeholder {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
        background: #ffffff !important;
    }
    
    /* 当JavaScript设置display:none时，允许隐藏 */
    .qr-placeholder[style*="display: none"],
    .qr-placeholder[style*="display:none"] {
        display: none !important;
    }
    
    #wechatQrCode {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 2 !important;
        display: none !important;  /* 默认隐藏，JavaScript生成后才显示 */
        width: 200px !important;  /* 固定宽度 */
        height: 200px !important;  /* 固定高度 */
    }
    
    /* 当JavaScript设置display:block时，显示二维码 */
    #wechatQrCode[style*="display: block"],
    #wechatQrCode[style*="display:block"] {
        display: block !important;
    }
    
    /* QRCode.js生成的canvas和img叠加显示 */
    #wechatQrCode canvas,
    #wechatQrCode img {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 隐藏canvas，只显示img */
    #wechatQrCode canvas {
        display: none !important;
    }
    
    .qr-icon {
        font-size: 56px !important;
        margin-bottom: 15px !important;
    }
    
    .qr-placeholder p {
        font-size: 14px !important;
        color: #666 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 20px !important;
    }
    
    .qr-tip {
        text-align: center !important;
        font-size: 13px !important;
        color: #999 !important;
        margin: 10px 0 15px 0 !important;
        width: 100% !important;
    }
    
    .refresh-qr-btn {
        width: 250px !important;
        height: 44px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        margin: 0 auto !important;
    }
    
    .refresh-qr-btn:active {
        background: #e0e0e0 !important;
    }
    
    .mock-scan-btn {
        display: none !important;  /* 隐藏测试按钮 */
    }
    
    /* 登录表单 */
    .login-form {
        padding: 0 !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
    }
    
    .form-label {
        display: block !important;
        font-size: 14px !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        font-weight: 500 !important;
    }
    
    .form-input {
        width: 100% !important;
        height: 44px !important;
        padding: 0 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        background: #f8f9fa !important;
        transition: all 0.3s !important;
    }
    
    .form-input:focus {
        border-color: #e74c3c !important;
        background: #ffffff !important;
        outline: none !important;
    }
    
    /* 验证码输入 */
    .code-input-wrapper,
    .password-input-wrapper {
        display: flex !important;
        gap: 10px !important;
        position: relative !important;
    }
    
    .code-input-wrapper .form-input {
        flex: 1 !important;
    }
    
    .send-code-btn {
        width: 110px !important;
        height: 44px !important;
        background: #e74c3c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }
    
    .send-code-btn:active {
        transform: scale(0.98) !important;
    }
    
    .send-code-btn:disabled {
        background: #ccc !important;
        cursor: not-allowed !important;
    }
    
    .toggle-password-btn {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        cursor: pointer !important;
        padding: 5px !important;
    }
    
    /* 表单选项 */
    .form-options {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 15px !important;
        font-size: 13px !important;
    }
    
    .remember-me {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #666 !important;
    }
    
    .forgot-password {
        color: #e74c3c !important;
        text-decoration: none !important;
    }
    
    /* 协议 */
    .form-agreement {
        margin-bottom: 20px !important;
    }
    
    .agreement-checkbox {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 12px !important;
        color: #666 !important;
        line-height: 1.6 !important;
    }
    
    .agreement-text a {
        color: #e74c3c !important;
        text-decoration: none !important;
    }
    
    /* 登录按钮 */
    .login-submit-btn {
        width: 100% !important;
        height: 48px !important;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
        transition: all 0.3s !important;
    }
    
    .login-submit-btn:active {
        transform: scale(0.98) !important;
    }
    
    /* 提示信息 */
    .form-tips {
        margin: 15px 0 !important;
        padding: 10px 12px !important;
        background: #fff3e0 !important;
        border-left: 3px solid #ff9800 !important;
        border-radius: 4px !important;
    }
    
    .tip-text {
        font-size: 12px !important;
        color: #e65100 !important;
        margin: 0 !important;
    }
    
    .test-account-tip {
        margin: 15px 0 !important;
        padding: 10px 12px !important;
        background: #e3f2fd !important;
        border-left: 3px solid #2196f3 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        color: #1565c0 !important;
    }
    
    /* 注册链接 */
    .register-link-wrapper {
        text-align: center !important;
        margin-top: 15px !important;
        font-size: 13px !important;
        color: #666 !important;
    }
    
    .register-link {
        color: #e74c3c !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        margin-left: 5px !important;
    }
    
    /* 其他登录方式 - 移动端隐藏 */
    .other-login {
        display: none !important;
    }
    
    /* 模态框默认隐藏，由JavaScript控制显示 */
    .modal-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }
    
    /* 当模态框被激活时显示 */
    .modal-overlay.active,
    .modal-overlay[style*="display: block"],
    .modal-overlay[style*="display:block"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 25px 20px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .modal-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .modal-desc {
        font-size: 14px !important;
        color: #666 !important;
        margin-bottom: 20px !important;
    }
    
    .modal-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 24px !important;
        background: #f0f0f0 !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #666 !important;
    }
    
    .modal-close:active {
        background: #e0e0e0 !important;
    }
}

/* ==================== 下载页面 ==================== */
@media (max-width: 890px) {
    .download-container {
        margin: 0 !important;
        padding: 20px 15px !important;
    }
    
    .download-header {
        margin-bottom: 30px !important;
    }
    
    .download-title {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    
    .download-subtitle {
        font-size: 14px !important;
    }
    
    .download-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }
    
    .download-card {
        padding: 25px 20px !important;
        border-radius: 12px !important;
    }
    
    .download-icon {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 20px !important;
        font-size: 40px !important;
    }
    
    .card-title {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    
    .card-desc {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    
    .qr-code {
        width: 180px !important;
        height: 180px !important;
        margin: 15px auto !important;
    }
    
    .download-btn {
        padding: 12px 30px !important;
        font-size: 14px !important;
    }
    
    .features-section {
        padding: 30px 0 !important;
        margin-top: 30px !important;
    }
    
    .features-title {
        font-size: 20px !important;
        margin-bottom: 25px !important;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .feature-item {
        padding: 20px !important;
    }
    
    .feature-icon {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }
    
    .feature-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .feature-desc {
        font-size: 13px !important;
    }
}

/* ==================== 开通会员页面 ==================== */
@media (max-width: 890px) {
    .member-container {
        padding: 20px 15px !important;
    }
    
    .page-header {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
    
    .page-title {
        font-size: 22px !important;
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .crown-icon-large {
        width: 28px !important;
        height: 28px !important;
    }
    
    .page-subtitle {
        font-size: 13px !important;
        color: #666 !important;
    }
    
    /* 当前会员状态 */
    .current-member-status {
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: #fff3e0 !important;
        border-radius: 8px !important;
    }
    
    .status-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .status-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #e65100 !important;
    }
    
    /* 煤种会员区域 */
    .coal-member-section {
        margin-bottom: 30px !important;
    }
    
    .section-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .section-title::before {
        content: '' !important;
        width: 4px !important;
        height: 20px !important;
        background: #e74c3c !important;
        border-radius: 2px !important;
    }
    
    .selection-hint {
        font-size: 12px !important;
        color: #999 !important;
        font-weight: 400 !important;
    }
    
    /* 煤种会员网格 */
    .coal-member-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* 煤种会员卡片 */
    .coal-member-card {
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        padding: 15px !important;
    }
    
    .coal-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .coal-icon {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    
    .coal-info {
        flex: 1 !important;
    }
    
    .coal-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 4px !important;
    }
    
    .coal-desc {
        font-size: 12px !important;
        color: #999 !important;
    }
    
    /* 会员选项 */
    .member-options {
        display: flex !important;
        gap: 10px !important;
    }
    
    .option-btn {
        flex: 1 !important;
        position: relative !important;
        cursor: pointer !important;
    }
    
    .option-btn input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .btn-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 12px 8px !important;
        background: #f8f9fa !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 8px !important;
        transition: all 0.3s !important;
    }
    
    .option-btn input:checked + .btn-content {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        border-color: #e74c3c !important;
        color: #ffffff !important;
    }
    
    .btn-label {
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    .btn-price {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #e74c3c !important;
    }
    
    .option-btn input:checked + .btn-content .btn-price {
        color: #ffffff !important;
    }
    
    /* 总计区域 */
    .summary-section {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        padding: 15px !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 100 !important;
    }
    
    .summary-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 12px !important;
    }
    
    .selected-count {
        font-size: 14px !important;
        color: #666 !important;
    }
    
    .total-price {
        font-size: 14px !important;
        color: #333 !important;
    }
    
    .price-value {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #e74c3c !important;
        margin-left: 8px !important;
    }
    
    .pay-btn {
        width: 100% !important;
        height: 48px !important;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
    }
    
    .pay-btn:active {
        transform: scale(0.98) !important;
    }
    
    .pay-btn:disabled {
        background: #ccc !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }
}