/* 暗黑模式规则已迁入 dark-mode-unified.css（原 sound_list.css） */
@charset "utf-8";
/**
 * ==========================================
 * 样音列表页面样式 - 精简优化版 v2.1
 * ==========================================
 * 
 * 📋 文件结构：
 * 1. 页面布局
 * 2. 静态横幅
 * 3. 筛选菜单
 * 4. 样音卡片 - 三种视图模式
 * 5. 响应式适配
 * 
 * ⭐⭐⭐ 统一样式控制点 ⭐⭐⭐
 * 
 * 如果要修改播放器模块的样式（背景、边框、圆角、内边距等），
 * 只需要修改一个地方，就会同时影响所有三种视图：
 * 
 * 位置：第 1200 行左右
 * 类名：.module-player-styled
 * 
 * 包含的样式：
 * - background: 背景色
 * - border: 边框
 * - border-radius: 圆角
 * - padding: 内边距
 * - 悬停效果
 * 
 * 影响范围：
 * ✅ 两列视图（Grid View）
 * ✅ 列表视图（List View）
 * ✅ 卡片视图（Card View）
 * 
 * 优化历史：
 * - 2025-01-14: 统一三种视图的播放器模块样式，删除重复CSS
 * - 2025-01-13: 进一步优化性能，减少重复样式
 * - 删除重复代码、无用样式和冗余媒体查询
 * - 优化选择器性能，减少嵌套层级
 */

/* ===== 页面布局 ===== */
.Content {
    position: relative;
    overflow: visible;
}

@media screen and (max-width: 960px) {
    .Content {
        overflow: visible;
    }
}

/* ===== 音频播放器样式 ===== */
.waveform {
    min-width: 88px;
    width: 100%;
    height: 40px;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    
}

.total-time,
.current-time-on-pointer {
    position: absolute;
    font-size: 12px;
    color: var(--player-time-text-color, #ffffff);
    background: var(--player-time-bg-color, rgba(10, 10, 10, 0.8));
    padding: 2px 4px;
    border-radius: 3px;
    z-index: 3;
}

.total-time {
    right: 5px;
    bottom: 5px;
}

.current-time-on-pointer {
    margin-top: 15px;
    margin-left: -42px;
    display: none;
    z-index: 9999;
}

/* ===== 样音列表页横幅调整 ===== */
.Content .static-banner {
    margin: 0;
    height: 110px; /* 统一高度，不区分大屏 */
}

/* 小屏优化 */
@media (max-width: 960px) {
    .Content .static-banner {
        height: 90px;
    }
}

/* 打字机效果文字 */
.typewriter-text {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 2px;
    border-right: 3px solid #ffffff;
    animation: typing 3.5s steps(15, end), blink-caret 0.75s step-end infinite;
    display: inline-block;
}

/* 打字动画 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #ffffff;
    }
}

/* ===== 筛选样式已移至组件 ===== */
/* 筛选相关样式现在由 /css/web/components/filter_horizontal.css 统一管理 */
/* 筛选交互逻辑由 /js/components/filter-dropdown.js 统一管理 */

/* ===== 题材分类 ===== */
.theme-category {
    width: 100%;
    margin-bottom: 10px;
}

.theme-category-title {
    font-weight: 600;
    color: #444;
    padding: 6px 10px;
    background: var(--color-bg-gray, #f8fafc);
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-category-title:after {
    content: "+";
    font-size: 16px;
    color: #777;
}

.theme-category.active .theme-category-title:after {
    content: "-";
}

.theme-subcategories {
    padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.theme-category.active .theme-subcategories {
    max-height: 500px;
}

/* ========================================
   筛选布局覆盖：三元素布局
   - 左侧（筛选）：固定宽度，靠左
   - 中间（搜索）：占据剩余空间，搜索框在其中居中
   - 右侧（切换）：固定宽度，靠右
   ======================================== */

/* 🔧 移动端筛选下拉菜单修复 - 最高优先级 */
@media (max-width: 878px) {
    /* 确保筛选区域不阻挡下拉菜单 */
    .filter-horizontal {
        overflow: visible;
    }
    
    .filter-horizontal .filter-left-box {
        overflow: visible;
    }
    
    /* ⚠️ 不要覆盖 .filter-items-wrapper 的 overflow */
    /* 让它使用 filter_horizontal.css 的设置：overflow-x: auto, overflow-y: visible */
    /* 下拉菜单使用 position: fixed，不受父容器 overflow 影响 */
}

body .filter-horizontal .filter-left-box {
    flex: 0 0 auto;
    justify-content: flex-start;
}

body .filter-horizontal .filter-center-box {
    flex: 1;
    justify-content: center;
}

body .filter-horizontal .filter-right-box {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* 视图切换按钮样式已统一在 /css/web/components/filter_horizontal.css 中 */

/* ===== 移动端筛选按钮 ===== */
 

.filter-toggle.active {
    left: 330px;
}

.filter-toggle i {
    font-style: normal;
    transition: transform 0.3s ease;
}

.filter-toggle.active i {
    transform: rotate(180deg);
}

/* ===== 侧边栏筛选面板 ===== */
/* 侧边栏筛选 - 极简扁平 */
.sidebar-filter {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100%;
    background: transparent;
    z-index: 1000;
    overflow-y: auto;
    transition: left 0.2s ease; /* ⚡ 快速响应 */
    box-shadow: none; /* 🎨 去掉阴影 */
    border-right: 1px solid var(--card-border, #d4d4d8); /* 🎨 添加边框 */
}

.sidebar-filter.active {
    left: 0;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #1a1a1a; /* 🎨 统一深色背景 */
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.filter-header h3 {
    margin: 0;
    font-size: 16px; /* 📝 缩小字号 */
}

.filter-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.filter-header-actions {
    display: flex;
    align-items: center;
}

.filter-content {
    padding: 15px;
}

/* ===== 筛选部分 ===== */
.filter-section {
    border-bottom: 1px solid #eee;
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.filter-section-title {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.section-toggle {
    font-size: 18px;
    color: #666;
    transition: transform 0.3s ease;
}

.filter-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
}

.filter-section.active .section-toggle {
    transform: rotate(45deg);
}

.filter-section.active .filter-section-content {
    max-height: 800px;
    padding: 15px;
}

/* ===== 分类列表 ===== */
.filter-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-category {
    margin-bottom: 5px;
}

.category-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--color-bg-gray, #f8fafc);
    border-radius: 4px;
    cursor: pointer;
}

.category-name {
    flex: 1;
}

.toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.filter-category.active .toggle-icon {
    transform: rotate(45deg);
}

.subcategories {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 5px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filter-category.active .subcategories {
    max-height: 500px;
}

.subcategory {
    margin: 5px 0;
}

.subcategory a {
    display: block;
    padding: 5px 10px;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
}

.subcategory a:hover {
    background: #eaeaea;
    color: #6d78b6;
}

/* ===== 标签样式 ===== */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-tag {
    margin: 0 5px 8px 0;
}

.filter-tag a {
    display: block;
    padding: 6px 6px;
    background: var(--color-bg-gray, #f8fafc);
    border-radius: 20px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
}

.filter-tag a:hover {
    background: #6d78b6;
    color: white;
}

/* ===== 移动端搜索 ===== */
.mobile-search-wrapper {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.mobile-search-input {
    flex: 1;
    padding: 8px 10px;
    border: none;
    outline: none;
    font-size: 14px;
}

.mobile-search-btn {
    background: #6d78b6;
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
}

/* ===== 遮罩层 ===== */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.filter-overlay.active {
    display: block;
}

/* ===== 清除筛选按钮 ===== */
.filter-reset {
    color: white;
    text-decoration: none;
    margin-right: 15px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-reset:hover {
    background: rgba(255,255,255,0.3);
}

/* .clear-filter 样式已移至组件 */

/* ===== 搜索标签 ===== */
.search-tag {
    display: inline-block;
    background: #ddf0ff;
    padding: 4px 8px;
    border-radius: 4px;
    color: #2c5aa0;
    margin-right: 5px;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #4a90e2;
}

.search-tag img {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

.search-tag:hover {
    background: #c8e6ff;
    color: #2c5aa0;
}

/* ========================================
   已选筛选标签样式
   ✅ 基础样式已移至组件: /css/web/components/filter_horizontal.css
   这里只保留页面特有的补充样式
   ======================================== */

/* 页面特有：隐藏label span */
.Selected > span {
    display: none;
}

/* 没有筛选条件时的样式 */
.NoFilters {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    display: block;
    visibility: hidden;
}

.NoFilters span {
    display: none;
}

/* 筛选结果容器样式 */
.shaixuanjieguo {
   display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* 当没有筛选条件时，筛选结果容器高度为0 */
.shaixuanjieguo.no-filters {
    margin: 0;
    padding: 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
}

/* 移动端：筛选结果容器允许横向滚动 */
@media (max-width: 768px) {
    .shaixuanjieguo.has-filters {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 顺滑滚动 */
        width: 100%;
        max-width: 100vw; /* 确保不超过视口宽度 */
    }
    
    /* 隐藏滚动条（可选，保持美观） */
    .shaixuanjieguo.has-filters::-webkit-scrollbar {
        height: 0;
    }
    
    /* 确保内部 .Selected 容器可以超出父容器宽度并滚动 */
    .shaixuanjieguo.has-filters > .Selected {
        min-width: 100%; /* 至少占满父容器 */
        width: max-content; /* 内容宽度可以超出 */
        flex-shrink: 0; /* 不被压缩 */
    }
    
    /* 确保内部其他内容不被压缩 */
    .shaixuanjieguo.has-filters > * {
        flex-shrink: 0;
    }
}

/* ===== 样音列表 ===== */
.Sound_4-4 {
    width: 100%;
    margin: auto;
    overflow: visible; /* 改为visible，让内容自然显示 */
}

 

/* 两列视图默认使用grid布局 - 只在大于678px时生效 */
@media (min-width: 679px) {
#sound_list:not(.card-view):not(.list-view) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 原 40px 两列中间缝过宽，易被误认为卡片内「右端被抠掉」 */
    column-gap: 22px;
    /* 行间仅用底部分割线，与列表视图一致 */
    row-gap: 0;
    }
}

/* 两列视图的sample-item宽度控制 */
#sound_list:not(.card-view):not(.list-view) .sample-item {
    width: 100%;
    max-width: 100%;
    overflow: visible; /* 改为visible，让弹窗可以超出容器显示 */
    box-sizing: border-box;
}

/* ===== 样音卡片 - 基础样式（所有视图共用）===== */
/* 勿用 transition:all：视图切换会动画化宽高/布局，体感很慢 */
.sample-item {
    position: relative;
    box-sizing: border-box;
    transform: translateY(0);
    transition: transform var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1)), box-shadow var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1));
}

/* 样音库列表容器：默认完全无过渡（!important 覆盖下方各视图里写的 transition），切换两列/列表/卡片时立即重排；仅在悬停时过渡阴影 */
#sound_list .sample-item {
    transform: translateY(0);
    transition: none !important;
}
#sound_list .sample-item:hover {
    transition: background 0.15s ease !important;
}
#sound_list .sample-item .sample-avatar {
    transition: none !important;
}
#sound_list .sample-item:hover .sample-avatar {
    transform: none !important;
}
#sound_list .module-player-styled {
    transition: none !important;
}

/* 与老师卡一致：细边框分层，静止态无重阴影（对齐暗黑模式观感） */
#sound_list {
    font-family: var(--font-sans);
    font-variation-settings: normal;
    --sound-card-border: var(--card-surface-outline, rgba(0, 0, 0, 0.1));
    --sound-card-border-hover: var(--card-surface-outline-hover, rgba(0, 0, 0, 0.18));
    --sound-card-shadow-rest: var(--card-shadow-rest, none);
    --sound-card-shadow-hover: var(--card-shadow-hover-lift, 0 4px 12px rgba(0, 0, 0, 0.05));
    --sound-card-avatar-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
    --sound-list-hover-bg: rgba(0, 0, 0, 0.04);
    /* --sound-list-divider-color 由 sound-card-config-css 注入 */
    /* 列表行：悬停区与上下分割线的等距留白 */
    --sound-list-row-inset: 6px;
    --sound-list-row-inset-x: 8px;
}

/* ========================================
   样音卡片 - 极简扁平设计
   ======================================== */

/* Bunny Studio 风格 */
#sound_list:not(.card-view) .sample-item {
    position: relative;
    background: var(--card-surface-panel, transparent);
    border: 1px solid var(--sound-card-border, var(--card-surface-outline, rgba(0, 0, 0, 0.1)));
    border-radius: 10px;
    padding: 12px;
    transform: translateY(0);
    transition:
        transform var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1)),
        box-shadow var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1)),
        border-color var(--card-hover-duration, 0.22s) ease;
    box-shadow: var(--sound-card-shadow-rest);
}

/* 双列/列表悬停见下方 strip 布局；此处仅保留卡片视图整卡悬停 */
#sound_list.card-view .sample-item:hover {
    z-index: 1;
    background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04));
}

/* ==========================================
   三模块布局系统
   模块1: 信息 (头像+标题)
   模块2: 播放器 (按钮+波形图)
   模块3: 功能按钮
========================================== */

/* 模块1: 信息模块 */

.module-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* 声音列表：电脑端统一 40×40，断点 768px→45px，480px→40px */
.info-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.info-avatar a {
    display: block;
    width: 100%;
    height: 100%;
}

.info-avatar a:hover {
    /* 无悬停效果 */
}

.info-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    box-shadow: var(--sound-card-avatar-shadow, 0 1px 3px rgba(15, 23, 42, 0.07));
}


.sample-avatar {
    width: 100%;
    height: 100%;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f3f4f6; /* ✅ 已与老师卡片统一 */
    border: none;
    box-shadow: var(--sound-card-avatar-shadow, 0 1px 3px rgba(15, 23, 42, 0.07));
    transition: transform 0.2s ease;
}

/* 样音库页：头像悬停不缩放（避免位移感） */
#sound_list .sample-item:hover .sample-avatar {
    transform: none;
}


.info-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* 样音标题 - 与首页 .index-sample-title 一致；!important 防止 Master 全局 div 字重与别处规则干扰 */
.sample-title,
.sample-item .sample-title,
#sound_list .sample-title {
    font-family: var(--font-sans);
    font-variation-settings: normal;
    font-size: 13px;
    font-weight: 600 !important;
    font-synthesis: none;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.45;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

.sample-title:hover,
.sample-title-link:hover .sample-title {
    color: #818cf8;
}

/* 样音风格 - Bunny Studio 风格 */
.sample-style {
    font-size: 11px;
    color: #52525b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.style-tags {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #71717a;
}

.sample-play-count {
    flex: 0 0 auto; /* 不扩展不收缩，固定宽度 */
    display: inline-flex; /* 改为inline-flex让它更紧凑 */
    align-items: center;
    gap: 3px; /* 图标和数字之间的间距 */
    white-space: nowrap;
}

/* ==========================================
   📦 模块2: 播放器模块 - 统一样式（所有视图共享）
   ⭐ 修改这里会同时影响：两列视图、列表视图、卡片视图
========================================== */

/* 基础布局 */
.module-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-player .controls {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
}

.module-player .waveform {
    flex: 1;
    min-width: 0;
}

/* ✅ unified_player 组件适配 - 样音列表页 */
.module-player .unified-player-wrapper {
    width: 100%;
    margin: 0;
     
}

.module-player .unified-player-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.module-player .unified-player-button {
    flex-shrink: 0;
}

.module-player .unified-player-container .waveform {
    flex: 1;
    min-width: 0;
}

/* ⭐⭐⭐ 统一的视觉样式 - 修改这里会同时影响所有三种视图 ⭐⭐⭐ */
/* 包括：背景色、边框、圆角、内边距、悬停效果 */
.module-player-styled {
    border-radius: 10px;              /* 圆角 */
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

 

 

 

/* ==========================================
   卡片视图：固定3行垂直布局，响应式列数
========================================== */
#sound_list.card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    
}
/* 响应式列数：根据屏幕宽度自动调整 */
@media (min-width: 600px) { #sound_list.card-view { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { #sound_list.card-view { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { #sound_list.card-view { grid-template-columns: repeat(4, 1fr); } }

/* 全站宽屏：样音卡片视图每档多一列（与 site-layout-preference 联动） */
@media (min-width: 600px) {
  body.site-layout-wide #sound_list.card-view { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  body.site-layout-wide #sound_list.card-view { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  body.site-layout-wide #sound_list.card-view { grid-template-columns: repeat(5, 1fr); }
}

/* ========================================
   卡片视图 - 极简扁平设计
   ======================================== */

/* 卡片视图 - Bunny Studio 风格 */
div#sound_list.card-view .sample-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--sound-card-border, var(--card-surface-outline, rgba(0, 0, 0, 0.1)));
    border-radius: 10px;
    background: var(--card-surface-panel, transparent);
    transform: translateY(0);
    transition:
        transform var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1)),
        box-shadow var(--card-hover-duration, 0.22s) var(--card-hover-easing, cubic-bezier(0.25, 0.72, 0.38, 1)),
        border-color var(--card-hover-duration, 0.22s) ease;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    box-shadow: var(--sound-card-shadow-rest);
}

/* 确保每个模块独占一行 */
div#sound_list.card-view .sample-item > * {
    width: 100%;
    flex-shrink: 0;
}

div#sound_list.card-view .sample-item:hover {
    z-index: 1;
    background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04));
    box-shadow: none !important;
}

/* 第1行：信息模块（头像 + 标题 + 风格 + 播放次数） */
div#sound_list.card-view .sample-item .module-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow: visible; /* 改为visible，不遮挡弹出菜单 */
}
 

 

div#sound_list.card-view .sample-item .module-info .info-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

div#sound_list.card-view .sample-item .sample-title,
div#sound_list.card-view .sample-item .sample-style {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div#sound_list.card-view .sample-item .style-tags {
    flex: 0 1 auto; /* 宽度自适应内容，让播放次数紧挨着 */
    min-width: 0;
}

/* 第2行：播放器模块（独占一行） */
div#sound_list.card-view .sample-item .module-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    /* ⭐ 视觉样式由 .module-player-styled 统一提供 */
}

/* 第3行：功能按钮模块（独占一行） */
div#sound_list.card-view .sample-item .module-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: visible;
    width: 100%;
}

div#sound_list.card-view .sample-item .module-actions .sample-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ==========================================
   列表视图（1列）：自适应横向布局
   空间充足：1行显示全部
   空间不足：2行布局（第1行：头像+标题+风格+播放次数，第2行：播放器+功能键左右排列）
========================================== */

/* 一列模式容器：行间仅用底部分割线，不用 gap（避免悬停区与分割线间距不均） */
#sound_list.list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ========================================
   列表视图 - 极简扁平设计
   ======================================== */

/* 列表视图：分割线贴行底；悬停灰底在 ::before 内，与上下分割线等距 */
    #sound_list.list-view .sample-item {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        min-height: 64px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible;
        box-shadow: none !important;
        transform: none;
        transition: none;
        isolation: isolate;
    }

    #sound_list.list-view .sample-item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--sound-list-divider-width, 1px);
        background: var(--sound-list-divider-color);
        pointer-events: none;
        z-index: 2;
    }

    #sound_list.list-view .sample-item:last-child::after {
        display: none;
    }

    #sound_list.list-view .sample-item::before {
        content: '';
        position: absolute;
        left: var(--sound-list-row-inset-x, 8px);
        right: var(--sound-list-row-inset-x, 8px);
        top: var(--sound-list-row-inset, 6px);
        bottom: var(--sound-list-row-inset, 6px);
        border-radius: 6px;
        background: transparent;
        pointer-events: none;
        z-index: 0;
        transition: background 0.15s ease;
    }

    #sound_list.list-view .sample-item > * {
        position: relative;
        z-index: 1;
    }

    #sound_list.list-view .sample-item:hover {
        z-index: 1;
        background: transparent !important;
        box-shadow: none !important;
    }

    #sound_list.list-view .sample-item:hover::before {
        background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04));
    }

/* ==========================================
   双列视图：与列表相同的底部分割线 + 等距悬停灰底
========================================== */
#sound_list:not(.list-view):not(.card-view) .sample-item {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
}

#sound_list:not(.list-view):not(.card-view) .sample-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sound-list-divider-width, 1px);
    background: var(--sound-list-divider-color);
    pointer-events: none;
    z-index: 2;
}

/* 最后一行：去掉底部分割线（双列末行可能 1～2 个卡片） */
#sound_list:not(.list-view):not(.card-view) .sample-item:last-child::after {
    display: none;
}

#sound_list:not(.list-view):not(.card-view) .sample-item:nth-last-child(2):nth-child(odd)::after {
    display: none;
}

#sound_list:not(.list-view):not(.card-view) .sample-item::before {
    content: '';
    position: absolute;
    left: var(--sound-list-row-inset-x, 8px);
    right: var(--sound-list-row-inset-x, 8px);
    top: var(--sound-list-row-inset, 6px);
    bottom: var(--sound-list-row-inset, 6px);
    border-radius: 6px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
    transition: background 0.15s ease;
}

#sound_list:not(.list-view):not(.card-view) .sample-item > * {
    position: relative;
    z-index: 1;
}

#sound_list:not(.list-view):not(.card-view) .sample-item:hover {
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
}

#sound_list:not(.list-view):not(.card-view) .sample-item:hover::before {
    background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04));
}
    
/* 信息模块 - 灵活宽度，名字充分展示 */
    #sound_list.list-view .module-info {
    flex: 0 1 auto; /* 可收缩可扩展，自适应内容 */
    min-width: 280px; /* 保证最小宽度 */
    max-width: 450px; /* 限制最大宽度，不要太宽 */
    }
    
/* 播放器 - 占据剩余空间到边缘 */
    #sound_list.list-view .module-player {
    flex: 1 1 auto;
    min-width: 0; /* 允许收缩 */
    /* ⭐ 视觉样式由 .module-player-styled 统一提供 */
    }

/* 功能键 - 固定宽度 */
#sound_list.list-view .module-actions {
    flex: 0 0 auto;
    }
    
/* 注释：列表模式在大部分屏幕上保持1行布局，只在小屏幕才切换到2行 */
/* 一列布局的变局断点：678px（与两列模式保持一致） */

/* 移动端布局 - 极简扁平 */
@media (max-width: 678px) {
    #sound_list.list-view .sample-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible;
        box-shadow: none !important;
    }
    
    /* 第1行：信息模块（占满整行，强制换行） */
    #sound_list.list-view .module-info {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    
    /* 第2行：播放器（左侧） */
    #sound_list.list-view .module-player {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        /* ⭐ 视觉样式由 .module-player-styled 统一提供 */
    }
    
    /* 第2行：功能键（右侧） */
    #sound_list.list-view .module-actions {
        flex: 0 0 auto;
    }
}

/* ==========================================
   两列视图(默认)：自适应横向布局，固定显示2列
   空间充足：1行显示全部
   空间不足：2行布局（第1行：头像+标题+风格+播放次数，第2行：播放器+功能键左右排列）
========================================== */

/* ========================================
   两列视图(默认) - 极简扁平设计
   ======================================== */

@media (min-width: 1401px) {
    #sound_list:not(.list-view):not(.card-view) .sample-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        min-height: 72px;
        overflow: visible;
    }
    
    /* 信息模块 - 固定较宽的宽度，让名字更清晰 */
    #sound_list:not(.list-view):not(.card-view) .module-info {
        flex: 0 0 auto;
        width: 220px;
        min-width: 200px;
    }
    
    /* 播放器：宽屏下占满信息区与功能键之间的剩余宽度（自适应） */
    #sound_list:not(.list-view):not(.card-view) .module-player {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        /* ⭐ 视觉样式由 .module-player-styled 统一提供 */
    }

    /* 功能键 - 固定宽度 */
    #sound_list:not(.list-view):not(.card-view) .module-actions {
        flex: 0 0 auto;
    }
}

/* 中小屏幕 - 保持两列，但每个卡片内部变成垂直2行布局 */
/* 只在 679px 到 1400px 之间生效 */
@media (min-width: 679px) and (max-width: 1400px) {
    /* 外层保持2列布局 */
    #sound_list:not(.list-view):not(.card-view) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        row-gap: 0;
    }
    
    /* 每个卡片内部使用 flex-wrap，形成2行 */
    #sound_list:not(.list-view):not(.card-view) .sample-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 10px;
        padding: 12px 12px 16px;
        overflow: visible;
    }
    
    /* 第1行：信息模块（占满整行，强制后面的元素换行） */
    #sound_list:not(.list-view):not(.card-view) .module-info {
        flex: 1 1 100%; /* 占满100%宽度，强制换行 */
        width: 100%;
        min-width: 100%;
        margin-bottom: 13px;
    }
    
    /* 第2行：播放器（左侧，自动扩展） */
    #sound_list:not(.list-view):not(.card-view) .module-player {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        /* 高度由后台配置控制 */
        /* ⭐ 视觉样式由 .module-player-styled 统一提供 */
    }
    
    /* 第2行：功能键（右侧，固定宽度） */
    #sound_list:not(.list-view):not(.card-view) .module-actions {
        flex: 0 0 auto;
        display: flex;
    }
}

/* 极小屏幕 - 两列布局改为单列 */
@media (max-width: 678px) {
    #sound_list:not(.list-view):not(.card-view) {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 0;
        width: 100%;
    }
    
    #sound_list:not(.list-view):not(.card-view) .sample-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 8px 10px;
        padding: 12px 12px 16px;
        overflow: visible;
    }
    
    /* 保持2行布局 */
    #sound_list:not(.list-view):not(.card-view) .module-info {
        flex: 1 1 100%;
        width: 100%;
    }
    
    #sound_list:not(.list-view):not(.card-view) .module-player {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    #sound_list:not(.list-view):not(.card-view) .module-actions {
        flex: 0 0 auto;
        DISPLAY: flex;
    }
    
    /* 小于678px时：隐藏两列视图按钮 */
    .layout-btn[data-layout="grid"] {
        display: none;
    }
}

/* ==========================================
   通用样式
========================================== */

/* 通用样音卡片 - Bunny Studio 风格 */
.sample-item {
    /* 简洁设计 */
}

#sound_list.card-view .sample-item:hover {
    z-index: 1;
    transform: none !important;
    background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04)) !important;
    box-shadow: none !important;
}

/* 样音列表专用播放器样式 - 高优先级覆盖 */
#sound_list .sample-item .controls,
.Sound_list .sample-item .controls,
div[id="sound_list"] .sample-item .controls,
.sample-item .controls {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0; /* 移除auto，让flexbox控制对齐 */
    flex-shrink: 0;
}

.sample-item .controls .btn-primary {
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
    max-width: 27px;
    max-height: 27px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #000000;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

.sample-item .controls .btn-primary:hover {
    /* 无悬停效果 */
}

/* 默认播放图标（深色三角形） */
.sample-item .controls .glyphicon-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #000000;
    background: none;
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    filter: none;
    border-radius: 0;
    transition: none;
    margin-left: 1px;
    margin-top: 0;
    display: inline-block;
}

.sample-item .controls .btn-primary:hover .glyphicon-play {
    /* 无悬停效果 */
}

/* 播放状态：白色暂停竖条 */
.sample-item .controls .glyphicon-play.glyphicon-pause {
    width: 8px;
    height: 10px;
    border: none;
    background: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    display: inline-block;
}

/* 暂停图标的两个白色竖条 */
.sample-item .controls .glyphicon-play.glyphicon-pause::before,
.sample-item .controls .glyphicon-play.glyphicon-pause::after {
    content: '';
    position: absolute;
    width: 2.5px;
    height: 10px;
    background: #ffffff;
    border-radius: 0.5px;
    top: 0;
}

.sample-item .controls .glyphicon-play.glyphicon-pause::before {
    left: 0;
}

.sample-item .controls .glyphicon-play.glyphicon-pause::after {
    right: 0;
}

/* 播放时按钮变为实心橙色 */
.sample-item .controls .glyphicon-play.glyphicon-pause {
    border: none;
}

.sample-item .controls .btn-primary:has(.glyphicon-pause),
.sample-item .controls .btn-primary .glyphicon-pause {
    background: #ff9800;
    border-color: #ff9800;
}

.sample-item .controls .btn-primary:has(.glyphicon-pause):hover {
    background: #ff9800;
    border-color: #ff9800;
}

/* 播放状态的容器样式 */
.sample-item .controls.playing .btn-primary {
    background: #ff9800;
    border-color: #ff9800;
}

.sample-item .controls.playing .btn-primary:hover {
    background: #ff9800;
    border-color: #ff9800;
}

/* ===== 样音标题和风格 ===== */
.sample-info-container {
    display: none;
}

/* 样音标题链接 - 只限文字区域可点击 */
.sample-title-link {
    text-decoration: none;
    display: inline;  /* 改为 inline，让点击区域只限于文字 */
}

.sample-title-link:hover .sample-title {
    /* 无悬停效果 */
}

/* 🎯 优化：合并到上方的 .sample-title 定义，这里移除重复样式 */
.sample-item .sample-title {
    margin: 0;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
}

/* 🎯 优化：简化 sample-style 样式，移除重复定义 */
.sample-item .sample-style {
    width: 100%;
    max-width: 100%;
}

/* 风格标签文本溢出处理 */
.sample-item .sample-style .style-tags {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1; /* 允许收缩 */
    min-width: 0; /* 允许收缩到0 */
    max-width: 100%; /* 不超出父容器 */
}

/* 播放次数样式 - Bunny Studio 风格（与老师卡弱文案色阶一致） */
.sample-play-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #71717a;
    margin-left: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.sample-play-count svg {
    flex-shrink: 0;
    color: #71717a;
}

.play-count-number {
    font-weight: 400;
    color: #71717a;
    white-space: nowrap;
    width: 100%;
}

.teacher-link {
    font-size: 13px;
}

.teacher-code {
    color: #938e96;
    text-decoration: none;
}

/* ===== 波形图容器（旧样式） ===== */
/* 已被 .module-player 替代，保留此注释以便识别 */

/* 样音列表页专用 - 时间显示 */
.sample-item .current-time-on-pointer {
    position: absolute;
    margin-top: 10px;
    margin-left: -42px;
    background-color: var(--player-time-bg-color, #223e48);
    color: var(--player-time-text-color, white);
    padding: 2px 4px;
    /* border-radius: 3px; */
    font-size: 12px;
    display: none;
    z-index: 20;
}

/* ===== 操作按钮 ===== */
/* 按钮样式已统一在 /css/web/components/card_actions.css 中控制 */
.sample-actions {
    display: flex;
    gap: 12px;
}

/* ===== 加载更多按钮样式已移至组件 ===== */
/* 样式现在由 /css/web/components/load_more_button.css 统一管理 */

/* ===== 提示框 ===== */
.float-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    z-index: 9999;
    display: none;
}

.Result {
    padding: 100px 0;
    line-height: 64px;
    color: #666;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 确保在grid布局中占满整行 */
    grid-column: 1 / -1;
    width: 100%;
}
.Result img,
.Result span {
    display: inline-block;
    margin-right: 15px;
    font-size: 16px;
}
.Result svg {
    display: block;
    margin: 0 auto 15px auto;
}
.Result span {
    margin-right: 0;
    font-size: 15px;
    color: #666;
}




/* ===== 响应式布局 ===== */

/* ========================================
   平板电脑尺寸 (769px-1200px)
   包含：通用样式、两列Grid视图、列表视图、卡片视图
   ======================================== */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    
    /* ===== 通用样式（所有布局模式共用）===== */
    body {
        padding: 0 20px;
    }
    
    /* ===== 两列Grid视图（默认视图）===== */
    /* 只针对两列视图设置padding，避免影响列表视图和卡片视图 */
    #sound_list:not(.card-view):not(.list-view) .sample-item {
        padding: 12px 12px 16px 12px; /* 底部增加内边距 */
    }
    /* 注释：旧的HTML结构已废弃，两列布局样式由上方统一的媒体查询控制 */
    
    /* ===== 列表视图 ===== */
    #sound_list.list-view .sample-item {
        width: 100%;
    }
    
    /* ===== 卡片视图 ===== */
    #sound_list.card-view {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    /* 保持grid结构：头像列 40px */
    #sound_list.card-view .sample-item {
        padding: 14px;
        grid-template-columns: 40px 1fr;
         
        --player-box-width: 100%;
    }
    
    #sound_list.card-view .sample-controls-row > .sample-avatar-container {
        grid-column: 1 / 2;
        width: 40px;
        height: 40px;
    }
    
    #sound_list.card-view .sample-controls-row > .sample-info-container2 {
        grid-column: 2 / 3;
    }
    
    #sound_list.card-view .sample-item .sample-avatar {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 1024px) {
    #sound_list {
        width: 100%;
        padding: 0;
    }
    
    .sample-info-container {
        min-width: 299px;
    }
    
    /* 列表视图在1024px以下设备全宽 */
    #sound_list.list-view .sample-item {
        width: 100%;
    }
    
    /* 卡片视图在1024px以下调整网格列数 - 保持头像在左 */
    #sound_list.card-view {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 15px;
    }
    
    /* 保持grid结构：头像列 40px */
    #sound_list.card-view .sample-item {
        padding: 14px;
        grid-template-columns: 40px 1fr;
        row-gap: 12px;
        column-gap: 8px;
        --player-box-width: 100%;
    }
    
    #sound_list.card-view .sample-controls-row > .sample-avatar-container {
        grid-column: 1 / 2;
        width: 40px;
        height: 40px;
    }
    
    #sound_list.card-view .sample-controls-row > .sample-info-container2 {
        grid-column: 2 / 3;
    }
    
    #sound_list.card-view .sample-item .sample-avatar {
        width: 40px;
        height: 40px;
    }
}

/* ========================================
   移动端尺寸 (≤768px)
   包含：通用样式、两列Grid视图、列表视图、卡片视图
   ======================================== */
@media (max-width: 768px) {
    
    /* ===== 通用样式（所有布局模式共用）===== */
    /* Banner 样式 */
    .Content .static-banner {
        height: 80px;
        margin: 0;
    }
    
    .typewriter-text {
        font-size: 24px;
    }
    
    /* 移动端：视图切换按钮已隐藏（由组件CSS控制） */
    
    /* 📱 移动端搜索框：已由 filter_horizontal.css 统一管理 */
    
    .sample-info-container {
        display: none;
    }
    
    /* 🎯 移除全局限制，由各视图模式单独控制 */
    /* .sample-info-container2 {
        min-width: 160px;
        max-width: 240px;
    } */
    
    /* 卡片视图在移动端（768px以下）- 保持3行垂直布局 */
    /* 容器列数已在主样式中定义（600px→2列），这里只调整间距和细节 */
    #sound_list.card-view {
        gap: 12px;
        
    }
    
    /* 卡片项保持垂直布局，只调整间距和字体 */
    #sound_list.card-view .sample-item {
        padding: 16px;
        gap: 12px;
    }
    
    /* 平板端 45×45 */
    #sound_list.card-view .module-info .info-avatar {
        width: 45px;
        height: 45px;
    }
    
    #sound_list.card-view .module-info .sample-avatar {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
    }
    
    /* 调整字体大小 */
    #sound_list.card-view .sample-item .sample-title {
        font-size: 13px;
    }
    
    #sound_list.card-view .sample-item .sample-meta {
        font-size: 11px;
    }
    
    /* 功能按钮样式 */
    #sound_list.card-view .module-actions .sample-actions {
        gap: 10px;
    }
    
    #sound_list.card-view .sample-item .action-icon {
        width: 30px;
        height: 30px;
    }
    
    #sound_list.card-view .sample-item .action-icon svg {
        width: 16px;
        height: 16px;
    }
    
    /* ===== 列表视图在768px以下的样式调整 ===== */
    /* 注释：列表视图的响应式布局已在主样式块中定义（850px和600px断点） */
    /* 这里只做768px特有的细节调整 */
    
    #sound_list.list-view .sample-item {
        padding: 10px 8px;
    }
    
    /* 调整头像大小 */
    #sound_list.list-view .module-info .info-avatar {
        width: 45px;
        height: 45px;
    }
    
    #sound_list.list-view .module-info .sample-avatar {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
    }
    
    /* 调整字体大小 */
    #sound_list.list-view .sample-title {
        font-size: 13px;
    }
    
    #sound_list.list-view .sample-meta {
        font-size: 12px;
    }
    
    /* 调整功能按钮大小 */
    #sound_list.list-view .action-icon {
        width: 32px;
        height: 32px;
    }
    
    #sound_list.list-view .action-icon svg {
        width: 17px;
        height: 17px;
    }
    
    /* 播放次数样式 */
    .sample-play-count {
        font-size: 11px;
        gap: 3px;
    }
    
    .sample-play-count svg {
        width: 12px;
        height: 12px;
    }
    
    /* ===== 两列Grid视图（默认视图）在768px以下的样式调整 ===== */
    /* 注释：两列视图的响应式布局已在主样式块中定义（1100px和600px断点） */
    /* 这里只做768px特有的细节调整 */
    
    #sound_list:not(.card-view):not(.list-view) .sample-item {
        padding: 12px 12px 16px 12px; /* 底部增加内边距 */
    }
    
    /* 两列Grid视图（768px 下）头像 45px */
    #sound_list:not(.card-view):not(.list-view) .module-info .info-avatar {
        width: 45px;
        height: 45px;
    }
    
    #sound_list:not(.card-view):not(.list-view) .module-info .sample-avatar {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
    }
    
    /* 调整字体大小 */
    #sound_list:not(.card-view):not(.list-view) .sample-title {
        font-size: 13px;
    }
    
    #sound_list:not(.card-view):not(.list-view) .sample-meta {
        font-size: 12px;
    }
    
    /* 调整功能按钮大小 */
    #sound_list:not(.card-view):not(.list-view) .action-icon {
        width: 32px;
        height: 32px;
    }
    
    #sound_list:not(.card-view):not(.list-view) .action-icon svg {
        width: 17px;
        height: 17px;
    }
}

/* ========================================
   超小屏幕尺寸 (≤480px)
   包含：通用样式、两列Grid视图、卡片视图
   ======================================== */
@media (max-width: 480px) {
    
    /* ===== 通用样式（所有布局模式共用）===== */
    /* Banner 样式 */
    .Content .static-banner {
        height: 70px;
        margin: 0;
    }
    
    .typewriter-text {
        font-size: 18px;
    }
    
    /* 📱 移动端搜索框：已由 filter_horizontal.css 统一管理 */
    
    /* ===== 两列Grid视图（默认视图）===== */
    #sound_list:not(.card-view):not(.list-view) .sample-item {
        max-width: 500px;
        padding: 12px 12px 16px 12px; /* 底部增加内边距 */
    }
    
    #sound_list:not(.card-view):not(.list-view) .sample-controls-row > .waveform-container {
        min-width: 120px;
    }
    
    /* 卡片视图在小屏幕（480px以下）- 保持3行垂直布局 */
    /* 容器列数已在主样式中定义（<600px→1列），这里只调整间距和细节 */
    #sound_list.card-view {
        gap: 12px;
        
    }
    
    /* 卡片项保持垂直布局，只调整间距和字体 */
    #sound_list.card-view .sample-item {
        max-width: 100%;
        padding: 14px;
        gap: 12px;
    }
    
    /* 手机端 40×40 */
    #sound_list.card-view .module-info .info-avatar,
    #sound_list.card-view .module-info .sample-avatar,
    #sound_list.list-view .module-info .info-avatar,
    #sound_list.list-view .module-info .sample-avatar,
    #sound_list:not(.card-view):not(.list-view) .module-info .info-avatar,
    #sound_list:not(.card-view):not(.list-view) .module-info .sample-avatar {
        width: 40px;
        height: 40px;
    }
    
    #sound_list.card-view .module-info .sample-avatar,
    #sound_list.list-view .module-info .sample-avatar,
    #sound_list:not(.card-view):not(.list-view) .module-info .sample-avatar {
        min-width: 40px;
        min-height: 40px;
    }
    
    /* 调整字体大小 */
    #sound_list.card-view .sample-item .sample-title {
        font-size: 14px;
    }
    
    #sound_list.card-view .sample-item .sample-meta {
        font-size: 12px;
    }
    
    /* 功能按钮样式 */
    #sound_list.card-view .module-actions .sample-actions {
        gap: 12px;
    }
    
    #sound_list.card-view .sample-item .action-icon {
        width: 34px;
        height: 34px;
    }
    
    #sound_list.card-view .sample-item .action-icon svg {
        width: 18px;
        height: 18px;
    }
    
    /* 播放次数样式 */
    .sample-play-count {
        font-size: 10px;
    }
}

/* ========================================
   双列视图响应式布局（统一管理）
   ======================================== */

/* 中屏幕 (769px - 1200px) 已合并到上面的媒体查询中 */

/* 小屏幕 (≤768px) 已合并到上面的媒体查询中 */

/* 超小屏幕 (≤480px) 已合并到上面的媒体查询中 */

/* ========================================
   其他视图模式的响应式布局
   ======================================== */

/* 注释：列表视图和卡片视图的响应式布局已在各自的主样式块中定义 */
/* 卡片视图：始终保持3行垂直布局，通过grid列数响应式控制（600px→2列，900px→3列，1200px→4列） */
/* 列表视图和两列视图：通过flex-wrap自适应1行或2行布局 */
/* 暗黑模式：dark-mode-unified.css（sound_list 迁入） */





/* ===== 暗黑模式：列表/双列 strip（与浅色模式一致：等距悬停 + 底部分割线）===== */
body.dark-mode #sound_list {
    --sound-list-hover-bg: rgba(255, 255, 255, 0.06);
}

body.dark-mode #sound_list.list-view .sample-item,
body.dark-mode #sound_list:not(.list-view):not(.card-view) .sample-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.dark-mode #sound_list.list-view .sample-item::after,
body.dark-mode #sound_list:not(.list-view):not(.card-view) .sample-item::after {
    background: var(--sound-list-divider-color) !important;
    height: var(--sound-list-divider-width, 1px) !important;
    opacity: 1 !important;
}

body.dark-mode #sound_list.list-view .sample-item::before,
body.dark-mode #sound_list:not(.list-view):not(.card-view) .sample-item::before {
    background: transparent;
}

body.dark-mode #sound_list.card-view .sample-item:hover {
    background: var(--sound-list-hover-bg, rgba(255, 255, 255, 0.06)) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.dark-mode #sound_list.list-view .sample-item:hover,
body.dark-mode #sound_list:not(.list-view):not(.card-view) .sample-item:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode #sound_list.list-view .sample-item:hover::before,
body.dark-mode #sound_list:not(.list-view):not(.card-view) .sample-item:hover::before {
    background: var(--sound-list-hover-bg, rgba(255, 255, 255, 0.06)) !important;
}

/* ========================================
   动画偏好
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    #sound_list .sample-item,
    #sound_list .sample-item:hover {
        transition: none !important;
    }
}

/* 骨架屏样式统一由 Master.css 全局提供，此处无需重复定义 */