/* 移动端优化：固定播放器在底部 */
@media (max-width: 768px) {
    body {
        height: auto;
        min-height: 100vh;
        display: block;
    }

    #content {
        scroll-behavior: smooth;
        overflow-y: visible;
        padding: 10px 5%;
        padding-bottom: 200px; /* 为固定播放器预留足够空间 */
        min-height: calc(100vh - 200px);
    }

    /* 固定播放器在底部 */
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #1a1a1a;
        border-top: 1px solid #333;
        padding: 10px;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        /* 适配iOS安全区域 */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    /* 隐藏移动端footer中的导航链接，节省空间 */
    .lesson-footer-links {
        display: none;
    }

    /* 隐藏版权信息，节省空间 */
    footer hr,
    footer p {
        display: none;
    }
}

/* 桌面端保持原有布局 */
@media (min-width: 769px) {
    body{
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #content {
        scroll-behavior: smooth;
        flex: 1;
        overflow-y: auto;
        padding: 10px 5% ;
        min-height: 0;
    }
}

#player {
    display: block; /* 变为块级元素 */
    margin: 0 auto; /* 左右自动外边距实现居中 */
}


.sentence {
    background: #333333;
    color: #aaaaaa;
    margin: 8px 0;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 只在非触摸设备上启用hover效果 */
@media (hover: hover) and (pointer: fine) {
    .sentence:hover {
        color: white;
        transform: translateX(8px);
        background: linear-gradient(135deg, #667eea, #764ba2);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }
}

.sentence.active {
    color: #ffffff;
    background: #3c45cc; /* 淡黄色高亮 */
    transform: translateX(8px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.sentence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

/* 只在非触摸设备上启用hover效果 */
@media (hover: hover) and (pointer: fine) {
    .sentence:hover::before {
        transform: scaleY(1);
    }
}


.en {
    font-size: 18px;
    font-weight: bold;
}

.cn {
    font-size: 12px;
    color: #b5b5b5;
}

/* ========================================
   音频播放器增强功能样式
======================================== */

.enhanced-player {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 倍速按钮样式 */
.rate-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 50px;
    min-height: 36px;
}

.rate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.rate-btn:active {
    transform: translateY(0);
}

/* 不同倍速的视觉反馈 */
.rate-0_5 {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
}
.rate-0_75 {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: #333;
}
.rate-1_0 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.rate-1_25 {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    color: #333;
}
.rate-1_5 {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
    color: #333;
}

/* 全局循环按钮样式 */
.global-loop-btn {
    background: linear-gradient(135deg, #2d3748, #4a5568);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 44px;
    min-height: 36px;
}

.global-loop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(45, 55, 72, 0.3);
}

.global-loop-btn:active {
    transform: translateY(0);
}

/* 循环模式样式 */
.loop-none {
    background: linear-gradient(135deg, #2d3748, #4a5568);
}
.loop-single {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.loop-all {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

/* 课程导航按钮样式 */
.nav-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 44px;
    min-height: 36px;
}

.nav-btn:hover {
    background: linear-gradient(135deg, #495057, #343a40);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn:disabled {
    background: linear-gradient(135deg, #adb5bd, #6c757d);
    cursor: not-allowed;
    opacity: 0.6;
}

.nav-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* 快捷键帮助样式 */
.keyboard-shortcuts {
    text-align: center;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.keyboard-shortcuts small {
    color: #888888;
    font-size: 11px;
    line-height: 1.3;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .enhanced-player {
        margin: 5px 0;
    }

    .player-controls {
        gap: 8px;
    }

    .rate-btn, .global-loop-btn, .nav-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 13px;
        padding: 6px 10px;
    }

    /* 确保播放器在移动端可见 */
    #player {
        width: 100%;
        max-width: 100%;
    }

    /* 移动端快捷键帮助样式 */
    .keyboard-shortcuts {
        margin-top: 6px;
        padding: 4px 8px;
    }

    .keyboard-shortcuts small {
        font-size: 10px;
        line-height: 1.2;
    }
}

/* ========================================
   单句循环功能样式
======================================== */

/* 句子控制按钮容器 */
.sentence-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 单句循环按钮 */
.loop-toggle {
    background: linear-gradient(135deg, #2d3748, #4a5568);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loop-toggle:hover {
    background: linear-gradient(135deg, #4a5568, #667eea);
    transform: scale(1.05);
}

.loop-toggle.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* 循环进度指示器 */
.loop-progress {
    font-size: 12px;
    color: #cccccc;
    margin-left: 5px;
    min-width: 40px;
}

.loop-progress.active {
    color: #667eea;
    font-weight: bold;
}

/* 循环次数选择器 */
.loop-count-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.loop-count-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #cccccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 20px;
    text-align: center;
}

.loop-count-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.loop-count-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* 循环状态不再使用背景高亮，统一使用active状态 */

/* 移动端适配 */
@media (max-width: 768px) {
    .sentence-controls {
        gap: 6px;
        margin-top: 6px;
        padding-top: 6px;
    }

    .loop-toggle {
        min-width: 36px;
        min-height: 36px;
        font-size: 13px;
        padding: 4px 8px;
    }

    .loop-progress {
        font-size: 11px;
        min-width: 35px;
    }

    .loop-count-btn {
        padding: 1px 4px;
        font-size: 10px;
        min-width: 18px;
    }

    /* 移动端不再需要复杂的状态冲突处理，统一使用active高亮 */
}

/* 桌面端专用元素 - 在移动端隐藏 */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* 移动端专用元素 - 在桌面端隐藏（预留，暂未使用） */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}