.verse-card {
    cursor: pointer;
    transition: background-color 0.1s !important;
}

.verse-card.selected {
    background-color: #fde8d7 !important;
    border-left: 4px solid #f97316 !important;
}

.verse-card.playing {
    background-color: #dcfce7 !important;
    border-left: 4px solid #16a34a !important;
    border-color: #16a34a !important;
}

/* Custom scrollbar styles */
.scrollbar-thin {
    scrollbar-width: thin;
}

.scrollbar-thumb-gray-400::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 4px;
}

.scrollbar-track-gray-100::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

/* 移动端整体缩小与优化 */
@media (max-width: 640px) {
    /* 容器与整体间距 */
    .container { padding-top: 12px !important; padding-bottom: 12px !important; }

    /* 标题缩小 */
    #chapter-title { font-size: 1rem !important; }
    #book-title { font-size: 1.25rem !important; }
    h1.text-4xl { font-size: 1.5rem !important; line-height: 2rem !important; margin-bottom: 1rem !important; }
    h2.text-2xl { font-size: 1rem !important; }

    /* 通用按钮与链接缩小 */
    button, a[href] { font-size: 0.875rem !important; padding: 0.35rem 0.6rem !important; }
    #prev-chapter, #next-chapter, #play-pause { font-size: 0.875rem !important; padding: 0.35rem 0.6rem !important; }

    /* 首页网格与卡片缩小 */
    #testament-container { gap: 0.5rem !important; }
    #old-testament a, #new-testament a { padding: 0.5rem !important; font-size: 0.875rem !important; }
    #old-testament, #new-testament { gap: 0.5rem !important; }

    /* 章节页卡片缩小 */
    #chapter-list { gap: 0.5rem !important; }
    #chapter-list a { padding: 0.5rem !important; font-size: 0.875rem !important; }

    /* verse 页面经节卡片间距缩小 */
    .verse-card { padding: 0.5rem !important; }

    /* 播放列表工具栏按钮在移动端更小 */
    .playlist-toolbar button { font-size: 0.8rem !important; padding: 0.3rem 0.5rem !important; }

    /* 顶部两行控件进一步缩小 */
    .top-controls a[href], .top-controls button { font-size: 0.8rem !important; padding: 0.28rem 0.45rem !important; }

    /* 第二行控制区域在小屏保持单行并减小间距 */
    .controls-row { flex-wrap: nowrap; gap: 4px; }
}