@charset "UTF-8";
/* 基础样式 */
span { color: #888888; }
em { color: #cc978e; font-size: 12px; line-height: 1.2 !important; display: inline-block !important; font-style: normal; }
.speaker { font-size: 15px; cursor: pointer; padding: 5px; margin-left: 15px; border-radius: 50%; background: rgba(74, 144, 226, 0.08); transition: all .2s; }
.speaker:active { transform: scale(0.85); background: rgba(74, 144, 226, 0.2); }
.speaker.speaking { animation: a 1s infinite; }

/* 表格样式 */
.tablepress { border: none; border-collapse: collapse; border-spacing: 0; clear: both; margin: 0 auto 1rem; table-layout: auto; width: 97%; }
.tablepress thead th { color: #111; background: #e0e0e0; border: 1px solid #ddd; padding: 0.5rem; }
.tablepress tbody > tr:nth-child(odd) > td { color: #111 !important; background: #fff !important; border: 1px solid #ddd !important; padding: 0.5rem !important; line-height: 2rem; }
.tablepress tbody > tr:nth-child(even) > td { color: #111 !important; background: #f9f9f9 !important; border: 1px solid #ddd !important; padding: 0.5rem !important; line-height: 2rem; }
.tablepress tbody tr:hover td { color: #111 !important; background: #d4e3ff !important; }
.tablepress th, .tablepress td { border: 1px solid #ddd; }

/* 💡 顶部搜索栏的布局样式 */
.controls-container { width: 97%; margin: 20px auto; display: flex; justify-content: flex-start; align-items: center; }
.search-box input { padding: 8px 12px; width: 250px; border: 1px solid #ccc; border-radius: 4px; }
#loadingStatus { color: #666; font-size: 14px; margin-left: 10px; }

/* 💡 底部分页栏容器的样式 */
.bottom-pagination-container { margin: 20px auto; 
    display: flex; 
    justify-content: center; 
    width: 100%;}
.pagination-container { display: flex; align-items: center; gap: 8px; }
.page-btn { padding: 5px 10px; border: 1px solid #ddd; background: #fff; cursor: pointer; border-radius: 4px; }
.page-btn:disabled { background: #eee; cursor: not-allowed; }
.page-btn.active { background: #4A90E2; color: #fff; border-color: #4A90E2; }
.jump-box input { width: 40px; padding: 4px; text-align: center; border: 1px solid #ccc; border-radius: 4px; }
mark { background-color: #ffeb3b; color: #000; }

.audio-btn { 
            background: #924cff; color: white; border: none; padding: 5px 7px; 
             font-size:10px; border-radius: 60px; cursor: pointer; margin-left: 10px;
        }
 .audio-btn:hover { background: #4f00cb; }
/* ==========================================================================
   移动端响应式适配 (屏幕宽度小于 768px 时生效)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 顶部搜索框全宽优化 */
    .controls-container {
        width: 100%;
        padding: 0 12px;
        margin: 15px auto 10px;
    }

    .search-box {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }

    .search-box input {
        width: 100% !important; 
        padding: 12px; 
        font-size: 16px; /* 防止 iOS 自动放大页面 */
        box-sizing: border-box;
        -webkit-appearance: none; 
    }

    #loadingStatus {
        margin-left: 0;
        font-size: 13px;
    }

    /* 2. 底部分页在手机端：支持自动换行，加大触控热区 */
    .bottom-pagination-container {
        width: 100%;
        padding: 0 12px;
        margin: 15px auto 25px; /* 留出底部安全间距 */
    }

    .pagination-container {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .page-btn {
        padding: 10px 14px; 
        font-size: 14px;
        min-height: 40px;
    }

    .jump-box input {
        width: 50px;
        padding: 8px 4px;
    }

    /* 3. 表格安全滚动 */
    .table-responsive {
        width: 100%;
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding: 0 12px;
        box-sizing: border-box;
    }

    .tablepress {
        width: 100%;
    }

    .tablepress tbody > tr > td {
        padding: 12px 10px !important; 
        font-size: 15px; 
        line-height: 1.6rem !important;
    }
    
    .speaker {
        padding: 8px; 
        margin-left: 8px;
    }
}