/* 暗黑模式规则已迁入 dark-mode-unified.css（原 TeacherHome.css） */
@charset "utf-8";
/* 作者：peiyinkuai02 */
/* 时间：2015-10-22 */
/*-- 老师主页 --*/

/* 页面背景色 - 与首页保持一致 */
body {
    /* background-color 由 Master.css 统一控制 */
}

/* 纵向滚动条占位见 header.html 内联 #page-flicker-fix（html { scrollbar-gutter: stable }） */

/* 消除移动端点击延迟（勿用全局 *，否则会牵连导航等首屏已绘元素，TeacherHome.css 晚加载时产生整页重算） */
.TeacherHome,
.TeacherHome * {
    touch-action: manipulation;
}

/*
 * WaveSurfer：全局 * { touch-action: manipulation } 会让浏览器优先处理平移/滚动，
 * 手机端横向拖拽 seek 或点击波形易失灵；波形区域改为由脚本接管触控。
 * 仅作用于老师主页，避免影响全站其它页面。
 */
.TeacherHome .waveform,
.TeacherHome .waveform canvas,
.TeacherHome .waveform wave {
    touch-action: none;
    -ms-touch-action: none;
}

/* 基础样式：字体栈与字号阶梯参考 TVCBOOK 用户主页（如 u/Staff_Picks：系统 UI + 苹方/雅黑，标题偏 600） */
.TeacherHome {
    padding: 8px 0px 0px 0px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-family: "Alimama FangYuanTi VF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-variation-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 对标 TVCBOOK 用户页 u/18078810020：主色、灰阶、数据条、次按钮（与参考稿一致） */
    --tvcbook-primary: #818cf8;
    --tvcbook-primary-hover: #3f46e8;
    --tvcbook-text: #333333;
    --tvcbook-text-secondary: #52525b;
    --tvcbook-text-muted: #71717a;
    --tvcbook-secondary-bg: #f4f4f5;
    /* 资料卡内横条底色（略深于面板底，便于辨认） */
    --th-panel-tint-bg: rgba(15, 23, 42, 0.07);
    /* 左侧主卡 / 资料卡：无边框实色浅底 + 轻阴影（与页面白底区分） */
    --th-panel-surface-bg: #e9eef4;
    --th-panel-surface-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 4px 14px rgba(15, 23, 42, 0.04);
    --tvcbook-stats-bar-bg: var(--th-panel-tint-bg);
    /* 分类标签芯片 */
    --tag-chip-bg: #fafafa;
    --tag-chip-border: #ebebeb;
    --tag-chip-text: #525252;
    --tag-chip-radius: 6px;
    /* 对标 TVCBOOK 个人页：展示名 / 副标题 / 数据 / 资料区 */
    --tvc-display-size: 24px;
    --tvc-display-weight: 600;
    --tvc-subtitle-size: 13px;
    --tvc-subtitle-weight: 400;
    --tvc-meta-line-size: 13px;
    --tvc-meta-line-weight: 400;
    /* 数据条：数字与标签同 13px，仅数字加粗；标签为常规字重、灰色 */
    --tvc-stat-num-size: 13px;
    --tvc-stat-num-weight: 700;
    --tvc-stat-label-weight: 400;
    --tvc-section-title-size: 16px;
    --tvc-section-title-weight: 600;
    --tvc-profile-label-size: 15px;
    --tvc-profile-label-weight: 600;
    --tvc-profile-value-size: 14px;
    --tvc-caption-size: 12px;
    /* 主头像：与姓名/数据区比例协调（原 100px 偏大；统一由变量控制） */
    --teacher-avatar-size: 72px;
    /* 左侧主信息卡：与参考站 personalPage 白卡一致（0 2px 10px / 10% 黑） */
    --teacher-banner-left-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    /* 头像投影与主信息卡同一套，避免「卡片飘、头像闷」两种阴影 */
    --teacher-avatar-shadow: var(--teacher-banner-left-shadow);
    --teacher-avatar-shadow-hover: 0 2px 14px 0 rgba(0, 0, 0, 0.14);
    /* 页面内卡片/分隔线（统一灰阶，减少「各写各的」） */
    --th-card-border: rgba(0, 0, 0, 0.05);
    --th-divider: #f1f5f9;
    /* 主卡 / 数据条 / 资料卡 / 按钮 / 标签 chip（与简介播放器灰条统一） */
    --th-radius-card: 12px;
    --th-radius-stats: 4px;
    --th-radius-panel: 12px;
    --th-radius-btn: 6px;
    --th-radius-inner: 10px; /* 资料卡内价格灰底块 */
    --tag-chip-radius: 6px;
}

.TeacherHome .Content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 小屏逐级缩小展示名，与 TVCBOOK 移动端个人页比例接近 */
@media screen and (max-width: 768px) {
    .TeacherHome {
        --tvc-display-size: 20px;
        --tvc-meta-line-size: 13px;
        --tvc-stat-num-size: 13px;
    }
}
@media screen and (max-width: 480px) {
    .TeacherHome {
        --tvc-display-size: 18px;
    }
}
@media screen and (max-width: 380px) {
    .TeacherHome {
        --tvc-display-size: 17px;
    }
}

/* 外层仅作布局容器；白底+投影在 .TeacherBanner-left（与联系/关注同一卡） */
.TeacherBanner {
    height: 100%;
    position: relative;
    border-radius: 0;
    background: transparent;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    padding: 0;
    flex-direction: column;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
}

.TeacherBanner:hover {
    box-shadow: none;
}

/* 头像和图片样式 */
img.HeadImg {
    position: absolute;
    width: 51px;
    height: 51px;

    top: 7px;
    left: 8px;
    border-radius: 16%;
    background-size: cover!important;
}

.mingzi {
    margin: 0px 0 0 59px;
    min-width: 123px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 第一竖列：头像+数据+播放器+联系/关注 同一张透明卡 */
.TeacherBanner-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 28px 28px;
    box-sizing: border-box;
    background: var(--th-panel-surface-bg, #e9eef4);
    border-radius: var(--th-radius-card, 12px);
    border: none;
    box-shadow: var(--th-panel-surface-shadow, 0 1px 3px rgba(15, 23, 42, 0.07));
    overflow: visible;
    transition: background-color 0.2s ease;
}

/* 视口 <768px：主信息卡去掉外框（浅色/暗黑均覆盖，与暗黑 mobile 规则对称） */
@media screen and (max-width: 767.98px) {
  .TeacherHome .TeacherBanner-left,
  .TeacherHome .teacher-profile-card,
  .TeacherHome .teacher-stats-grid {
    border: none;
  }

  .TeacherBanner-left {
    box-shadow: none;
  }
  body.dark-mode .TeacherBanner-left {
    box-shadow: none !important;
  }
}

/* 头像和名字行容器 */
.teacher-header-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 12px;
}

/* 🎨 分享按钮：圆形图标钮（与 TVCBOOK 顶区一致） */
.teacher-share-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    color: #71717a;
    border: 1px solid #e7e5e4;
    box-shadow: none;
}

.teacher-share-btn:hover {
    background: #f4f4f5;
    color: #52525b;
    border-color: #d6d3d1;
}

.teacher-share-btn:focus-visible {
    outline: 2px solid var(--tvcbook-primary, #818cf8);
    outline-offset: 2px;
}

.teacher-share-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* ========================================
   移动端/平板滚动顶栏（对标 TVCBOOK .scoll-header + fixed-top + d-xl-none）
   仅 max-width:1199.98px；贴顶 top:0，z-index 高于 .nav、低于全屏菜单（10000）
   ======================================== */
.teacher-scroll-header {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1010;
    height: 60px;
    min-height: 60px;
    padding: 0 12px 0 14px;
    box-sizing: border-box;
    align-items: center;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
    border-radius: 0 0 12px 12px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.2s ease, visibility 0.2s;
}

@media (max-width: 1199.98px) {
    .teacher-scroll-header {
        display: flex;
    }
}

.teacher-scroll-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.teacher-scroll-header-inner {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.teacher-scroll-header .tsh-left {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 38%;
}

.teacher-scroll-header .tsh-user-block {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 16%;
    overflow: hidden;
    background: #e7e5e4;
}

.teacher-scroll-header .tsh-user-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-scroll-header .tsh-user-name {
    margin: 0;
    font-size: 13px;
    line-height: 15px;
    font-weight: 600;
    color: #292a2c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-scroll-header .tsh-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    flex-wrap: nowrap;
}

/* 顶栏内关注/联系 */
.teacher-scroll-header .tsh-contact.Btn01-inline,
.teacher-scroll-header .tsh-btn-follow.Btn02-inline,
.teacher-scroll-header .cancel_collection.Btn02-inline {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 5px 10px !important;
    min-height: 30px !important;
    font-size: 12px !important;
    border-radius: var(--th-radius-btn, 6px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: none !important;
    box-shadow: none !important;
}

.teacher-scroll-header .tsh-btn-follow.Btn02-inline:not(.cancel_collection) {
    color: #fff !important;
    background: var(--tvcbook-primary, #818cf8) !important;
}

.teacher-scroll-header .tsh-contact.Btn01-inline {
    color: var(--tvcbook-text, #333333) !important;
    background: var(--tvcbook-secondary-bg, #f4f4f5) !important;
}

.teacher-scroll-header .cancel_collection.Btn02-inline {
    color: #52525b !important;
    background: #f4f4f5 !important;
}

.teacher-scroll-header .tsh-share {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fafaf9;
    color: #71717a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.teacher-scroll-header .tsh-share:hover {
    background: #e7e5e4;
    color: #292524;
}

.teacher-scroll-header .tsh-share:active {
    background: #d6d3d1;
}

.teacher-scroll-header .tsh-share svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* ========================================
   🎨 粉丝/播放/作品数：浅灰横条（--th-panel-tint-bg，略深于样音悬停）
   ======================================== */
.teacher-stats-grid {
  display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 10px 0 10px 0;
    background: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06));
    border-radius: var(--th-radius-stats, 4px);
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.teacher-stats-grid .stat-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 6px 6px;
    position: relative;
    
}

.teacher-stats-grid .stat-number {
    font-size: var(--tvc-stat-num-size, 13px);
    font-weight: var(--tvc-stat-num-weight, 700);
    color: var(--tvcbook-text, #333333);
    line-height: 1.2;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.teacher-stats-grid .stat-label {
    font-size: var(--tvc-stat-num-size, 13px);
    font-weight: var(--tvc-stat-label-weight, 400);
    color: var(--tvcbook-text-secondary, #888888);
    letter-spacing: 0.02em;
}





/* ===== 🎨 与声音列表页统一的标签区域（细横线分隔，对标 TVCBOOK） ===== */
.teacher-tags-card {
    width: 100%;
    margin-top: 14px;
    padding: 12px 0 0 0;
    background: transparent;
    border-top: 1px solid var(--th-divider, #f0f0f0);
}

.teacher-tags-card .tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
    line-height: 1.5;
    gap: 8px;
}

.teacher-tags-card .tag-row:last-of-type {
    margin-bottom: 8px;
}

.teacher-tags-card .tag-item {
    display: inline-block;
    padding: 5px 12px;
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tag-chip-text, #757575);
    background: var(--tag-chip-bg, #fafaf9);
    border: 1px solid var(--tag-chip-border, #e8e8e8);
    border-radius: var(--tag-chip-radius, 6px);
    box-shadow: none;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.teacher-tags-card .tag-label {
    color: var(--tvcbook-text, #333333);
    font-size: 13px;
    font-weight: 600;
    margin-right: 2px;
    flex-shrink: 0;
}

/* 芯片之间用 gap，竖线不再参与排版 */
.teacher-tags-card .tag-separator {
    display: none;
}

.teacher-tags-card .see-more-container {
    margin-top: 8px;
    margin-bottom: 0;
    text-align: left;
}

/* 🎨 与声音列表页统一的链接按钮 */
.teacher-tags-card .see-more-btn {
    color: #9ca3af;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
}

.teacher-tags-card .see-more-btn:hover {
    color: var(--tvcbook-primary, #818cf8);
}

.teacher-tags-card .teacher-intro-content {
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.teacher-tags-card .teacher-intro-content p {
    color: var(--tvcbook-text-secondary, #666666);
    line-height: 1.65;
    margin: 0;
    font-size: 13px;
}

/* ========================================
   🎨 老师资料卡片（独立卡片样式 - 参考TVCBOOK）
   ======================================== */
.teacher-profile-card {
    background: var(--th-panel-surface-bg, #e9eef4);
    border-radius: var(--th-radius-panel, 12px);
    padding: 18px 16px;
    margin-top: 14px;
    border: none;
    box-shadow: var(--th-panel-surface-shadow, 0 1px 3px rgba(15, 23, 42, 0.07));
}

.teacher-profile-card .profile-card-title {
    font-size: var(--tvc-section-title-size, 16px);
    font-weight: var(--tvc-section-title-weight, 600);
    color: var(--tvcbook-text, #333333);
    margin: 0 0 14px 0;
    padding-bottom: 0;
    border-bottom: none;
    letter-spacing: -0.02em;
}

 

/* 资料折叠按钮（仅移动端显示，放在资料盒子外，只显示“展开更多资料/关闭更多资料”） */
.teacher-profile-card-wrap .profile-card-toggle-btn {
    display: none;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #71717a;
    background: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.teacher-profile-card-wrap .profile-card-toggle-btn:hover {
    color: #3f3f46;
}
.teacher-profile-card-wrap .profile-card-toggle-btn:active {
    background: transparent;
}
.profile-card-toggle-btn .toggle-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.teacher-profile-card-wrap .profile-card-toggle-btn[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

/* 资料卡片展开动画容器 */
.teacher-profile-card-wrap .profile-card-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}
.teacher-profile-card-wrap .profile-card-collapse.is-expanded {
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s;
}

/* 桌面端：资料区始终可见（折叠动画与「展开更多资料」仅用于 ≤768px） */
@media screen and (min-width: 769px) {
    .teacher-profile-card-wrap .profile-card-collapse {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

/* 价格信息区域（资料卡片顶部，细横线；与 TVCBOOK 一致不用粗描边块） */
.teacher-profile-card .profile-price-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--th-divider, #f0f0f0);
}

.teacher-profile-card .profile-price-section .Volume {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    background: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06)) !important;
    border: none !important;
    border-radius: var(--th-radius-inner, 10px) !important;
    padding: 12px 6px !important;
    line-height: 1.4 !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.teacher-profile-card .profile-price-section .Volume li.PriceRow {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    line-height: 1.4 !important;
    list-style: none !important;
}

.teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceLabel {
    display: block !important;
    color: #292a2c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

.teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .LineThrough {
    display: block !important;
    text-decoration: line-through !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
}

.teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .Number {
    display: block !important;
    color: #111827 !important;
    
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* 分隔线 - 隐藏原有的div分隔符 */
.teacher-profile-card .profile-price-section .Volume .fenjiexian {
    display: none !important;
}

/* 用伪元素创建分隔线 */
.teacher-profile-card .profile-price-section .Volume li.PriceRow {
    position: relative;
}

/* 对标 TVCBOOK：价格三列无竖线，仅靠浅灰底与留白 */
.teacher-profile-card .profile-price-section .Volume li.PriceRow:not(:last-child)::after {
    display: none;
    content: none;
}

/* 分隔线 */
.teacher-profile-card .profile-price-section .fenjiexian {
    width: 1px;
    height: auto;
    min-height: 50px;
    background: #e5e7eb;
    margin: 0;
    flex-shrink: 0;
}







/* 资料列表 */
.teacher-profile-card .profile-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 每一行资料（细底边分隔，对标 TVCBOOK「资料」列表） */
.teacher-profile-card .profile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 0;
    border-bottom: 1px solid #f0f0f0;
}

.teacher-profile-card .profile-info-list > .profile-info-row:last-child {
    border-bottom: none;
}

/* 斑马纹效果（参考TVCBOOK） */
 

.teacher-profile-card .profile-info-row:nth-child(even) {
    background: transparent;
}

.teacher-profile-card .profile-info-row:last-child {
    margin-bottom: 0;
}

/* 标签行（配音风格、擅长题材）需要特殊处理 */
.teacher-profile-card .profile-tags-row {
    align-items: flex-start;
    padding: 6px 12px;
}

/* 标签名称（对标 TVCBOOK：左列 15px semibold） */
.teacher-profile-card .profile-label {
    font-size: var(--tvc-profile-label-size, 15px);
    font-weight: var(--tvc-profile-label-weight, 600);
    color: #111111;
    flex-shrink: 0;
}

/* 标签值（对标 TVCBOOK：右列 14px 常规灰） */
.teacher-profile-card .profile-value {
    font-size: var(--tvc-profile-value-size, 14px);
    font-weight: 400;
    color: #888888;
    text-align: right;
}

/* 标签容器 */
.teacher-profile-card .profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 65%;
}

/* 单个标签：浅灰底 + 细边框 + 灰字（chip 圆角） */
.teacher-profile-card .profile-tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--tag-chip-bg, #fafaf9);
    color: var(--tag-chip-text, #757575);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--tag-chip-radius, 6px);
    border: 1px solid var(--tag-chip-border, #e8e8e8);
    white-space: nowrap;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.teacher-profile-card .profile-tag:hover {
    background: #f0f0f0;
    border-color: #dcdcdc;
}

/* +N更多标签提示样式 */
.teacher-profile-card .profile-tag-more {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--tag-chip-radius, 6px);
    background: var(--tag-chip-bg, #fafaf9);
    color: var(--tag-chip-text, #757575);
    border: 1px solid var(--tag-chip-border, #e8e8e8);
    box-shadow: none;
    cursor: default;
}

.teacher-profile-card .profile-tag-more:hover {
    background: #f0f0f0;
    border-color: #dcdcdc;
}


/* 简介行（特殊处理，允许换行） */
.teacher-profile-card .profile-intro-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.teacher-profile-card .profile-intro-row .profile-label {
    margin-bottom: 2px;
}

.teacher-profile-card .profile-intro-text {
    text-align: left;
    line-height: 1.5;
    color: #888888;
    font-size: 14px;
    font-weight: 400;
    word-break: break-word;
    /* 默认显示3行，超出截断 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 展开状态 */
.teacher-profile-card .profile-intro-text.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* 展开/收起按钮 */
.teacher-profile-card .intro-toggle-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.teacher-profile-card .intro-toggle-btn:hover {
    color: #2563eb;
    text-decoration: underline;
}













/* 移动端适配 */
@media screen and (max-width: 768px) {
    .teacher-tags-card .tag-item,
    .teacher-tags-card .tag-label,
    .teacher-tags-card .tag-separator {
        font-size: 12px;
    }
    
    .teacher-tags-card .see-more-btn {
        font-size: 12px;
    }
    
    .teacher-tags-card .teacher-intro-content p {
        font-size: 12px;
    }
    
    /* 名字下方元数据行（竖线分隔，略小于桌面） */
    .teacher-info-line-header {
        font-size: 13px;
        margin-top: 4px;
    }
    
    /* 标签卡片内作品数/粉丝数（新布局） */
    .teacher-tags-card .teacher-stats-line {
        font-size: 12px;
        gap: 6px;
    }
    
    /* 资料卡片移动端适配：关闭时整个资料盒子不显示，仅显示“展开更多资料”按钮 */
    .teacher-profile-card-wrap .profile-card-toggle-btn {
        display: block;
    }
    .teacher-profile-card-wrap .teacher-profile-card {
        margin-top: 0;
    }
    .teacher-profile-card {
        padding: 18px;
        margin-top: 12px;
        border-radius: 10px;
    }
    
    .teacher-profile-card .profile-card-title {
        margin-bottom: 16px;
    }
    
    /* 价格区域 768px 适配 */
    .teacher-profile-card .profile-price-section {
        margin-bottom: 16px;
        padding-bottom: 14px;
    }
    
    .teacher-profile-card .profile-price-section .Volume {
        padding: 14px 6px !important;
        border-radius: 10px !important;
    }
    
    .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceLabel {
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }
    
    .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .LineThrough {
        font-size: 11px !important;
    }
    
    .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .Number {
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .teacher-profile-card .profile-label {
        font-size: 15px;
        font-weight: 600;
        color: #111111;
    }

    .teacher-profile-card .profile-value {
        font-size: 14px;
        font-weight: 400;
        color: #888888;
    }
    
    .teacher-profile-card .profile-tags {
        max-width: 60%;
        gap: 6px;
    }
    
    .teacher-profile-card .profile-tag {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .teacher-profile-card .teacher-intro-content p {
        font-size: 13px;
    }
    
    /* 三列数据统计移动端适配 */
    .teacher-stats-grid {
        margin: 8px 0 10px 0;
        border-radius: var(--th-radius-stats, 4px);
    }
    
    .teacher-stats-grid .stat-column {
        padding: 10px 6px;
    }

    .teacher-stats-grid .stat-number {
        font-size: var(--tvc-stat-num-size, 13px);
        font-weight: var(--tvc-stat-num-weight, 700);
        color: var(--tvcbook-text, #333333);
    }

    .teacher-stats-grid .stat-label {
        font-size: var(--tvc-stat-num-size, 13px);
        font-weight: var(--tvc-stat-label-weight, 400);
        color: var(--tvcbook-text-secondary, #888888);
    }
}

/* 老师名字信息容器 */
.teacher-name-info {
    flex: none;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-right: 45px; /* 为分享按钮留出空间 */
}

/* 第二竖列 - 老师信息 */
.TeacherBanner-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
    margin: 27px 0 22px 0px;
}

/* 第三竖列 - 价格和按钮 */
.TeacherBanner-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0px;
}

/* 头像调整 */
.TeacherBanner .HeadImgs {
    position: static;
    width: auto;
    text-align: left;
    margin-right: 0;
    background: none;
    flex-shrink: 0;
}

/* teacher-header-row 内的头像容器：顶对齐分享按钮（分享钮 top:0 为基准） */
.teacher-header-row .HeadImgs {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
    display: block;
    line-height: 0;
}

.teacher-header-row .HeadImg {
    position: static;
    top: auto;
    left: auto;
    display: block;
    vertical-align: top;
}

/* 🎨 主头像：阴影与 .TeacherBanner-left 白卡一致（0 2px 10px / 10% 黑） */
.TeacherBanner .HeadImg {
  position: static;
  width: var(--teacher-avatar-size, 72px);
  height: var(--teacher-avatar-size, 72px);
  min-width: var(--teacher-avatar-size, 72px);
  min-height: var(--teacher-avatar-size, 72px);
  background-color: #f3f4f6;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: var(--teacher-avatar-shadow, var(--teacher-banner-left-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  object-fit: cover;
}

.TeacherBanner .HeadImg:hover {
  transform: scale(1.03);
  box-shadow: var(--teacher-avatar-shadow-hover, 0 2px 14px 0 rgba(0, 0, 0, 0.14));
}

/* 音频播放器容器 - 防止闪烁 */
.ReadMe,
.TeacherBanner .ReadMe {
    position: relative;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* 播放器容器样式 - 固定尺寸防止闪烁 */
/* 单列 + stretch：避免 row + center 下单个子元素在 WaveSurfer 重绘时出现横向微移 */
div#waveformx {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    overflow: visible;
    background: transparent;
    border-radius: var(--th-radius-stats, 4px);
    box-sizing: border-box;
    border: none !important;
}

 

/* waveformy - 波形容器（包含controls和waveform）*/
#waveformy,
.TeacherBanner #waveformx #waveformy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    position: relative;
}

/* 确保播放按钮在波形图左侧 */
#waveformy > #waveform-jieshao.controls {
    order: 1 !important;
    flex-shrink: 0;
}

#waveformy > #waveform.waveform {
    order: 2 !important;
    flex: 1;
}

/* ===== 老师详情页专用播放按钮样式 ===== */
/* 播放控制按钮容器 - 在waveformy容器内左侧 */
#waveformx #waveform-jieshao.controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important; /* 防止被压缩 */
    border-radius: 50% !important;
    background: #ffffff !important;
    position: static !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    order: 1 !important; /* 确保在左侧 */
    
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

#waveformx #waveform-jieshao.controls:hover {
    /* 简洁设计，无悬停效果 */
}

/* 播放按钮内的链接 */
#waveformx #waveform-jieshao.controls .btn-primary {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

/* 确保链接内容不会溢出 */
#waveformx #waveform-jieshao.controls .btn-primary i {
    display: block !important;
}

/* 播放图标 - 深色三角形（Bunny Studio 风格）*/
#waveformx #waveform-jieshao.controls .glyphicon-play {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 10px 0 10px 16px !important;
    border-color: transparent transparent transparent #4a4a4a !important;
    background: none !important;
    background-image: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-35%, -50%) !important;
    margin: 0 !important;
    filter: none !important;
}

/* 暂停图标 - 深色双竖条（Bunny Studio 风格）*/
#waveformx #waveform-jieshao.controls .glyphicon-pause {
    display: block !important;
    width: 16px !important;
    height: 20px !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    filter: none !important;
}

#waveformx #waveform-jieshao.controls .glyphicon-pause::before,
#waveformx #waveform-jieshao.controls .glyphicon-pause::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 20px !important;
    background: #4a4a4a !important;
    position: absolute !important;
    border-radius: 1px;
    top: 0 !important;
}

#waveformx #waveform-jieshao.controls .glyphicon-pause::before {
    left: 2px !important;
}

#waveformx #waveform-jieshao.controls .glyphicon-pause::after {
    right: 2px !important;
}

/* 老师简介页面的波形图自适应宽度 */
div#waveformy .waveform {
    flex: 1 !important; /* 使用flex而不是width */
    order: 2 !important; /* 确保在右侧 */
    min-width: 0 !important; /* 允许收缩 */
    max-width: 100% !important; /* 防止超出 */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    overflow: visible !important; /* 允许时间指针显示 */
     
}

/* 波形图 canvas 样式 - Bunny Studio 风格 */
div#waveformy .waveform wave {
    background: transparent !important;
}

div#waveformy .waveform canvas {
    background: transparent !important;
}

/* 控制WaveSurfer内部元素，消除左侧空白 */
div#waveformy .waveform wave,
div#waveformy .waveform wave > div,
div#waveformy .waveform wave > div > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    left: 0 !important;
    transform: translateX(0) !important;
    box-sizing: border-box !important;
}

div#waveformy .waveform wave {
    position: relative !important;
    left: 0 !important;
    display: block !important;
}

/* 确保WaveSurfer的canvas填充满容器 */
div#waveformy .waveform canvas {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================
 * 🎨 自我介绍播放器组件样式适配
 * 让 unified_player 组件匹配原有的 #waveformy 样式
 * ======================================== */

/* 适配容器布局 - 匹配 #waveformx */
#waveformx .intro-player-style {
  width: 100%;
  margin: 0;
}

/* 适配播放器容器 - 匹配 #waveformy（浅灰圆角条，与数据条一致） */
#waveformx .intro-player-style .unified-player-container,
.intro-player-style .unified-player-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background-color: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06)) !important;
  border-radius: var(--th-radius-stats, 4px) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 适配按钮容器 - 由后台配置控制 */
.intro-player-style .unified-player-button {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 适配按钮样式 - 由后台配置控制尺寸和颜色 */
.intro-player-style .unified-player-button .btn {
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 适配波形容器 - 匹配 #waveform.waveform */
.intro-player-style .waveform {
  flex: 1 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  overflow: visible !important;
}

/* 适配波形元素 */
.intro-player-style .waveform wave {
  height: 32px !important;
  border-radius: 4px !important;
}

.intro-player-style .waveform canvas {
  border-radius: 4px !important;
}

/* 适配时间指针样式 - 匹配 .current-time-on-pointer-home */
.intro-player-style #current-timeintro {
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* ======================================== 
 * 🎨 老师介绍播放器样式（无边框版本）
 * ======================================== */
#waveformx .teacher-intro-player {
  width: 100%;
   
  margin: 0;
}

/* 与 .intro-player-style 同款浅灰条 + gap:10，覆盖 injectCSSVariables 的全局 .unified-player-container 边框/背景（类名是 teacher-intro-player 时原先未命中 intro-player-style） */
#waveformx .teacher-intro-player .unified-player-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background-color: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06)) !important;
  border-radius: var(--th-radius-stats, 4px) !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* 移除边框 - 背景由 .intro-player-style .unified-player-container 提供浅灰条（对标 TVCBOOK） */
#waveformx .teacher-intro-player,
#waveformx .teacher-intro-player .unified-player-wrapper,
.teacher-intro-player,
.teacher-intro-player .unified-player-wrapper {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 避免 JS 应用按钮尺寸时触发 transition:all 产生横向位移动画 */
#waveformx .teacher-intro-player .unified-player-button .btn,
.teacher-intro-player .unified-player-button .btn {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 播放器波形图高度由后台 waveform_height 配置控制 */

/* 老师信息调整 */
.Name {
    position: static;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

/* 在 teacher-name-info 内的 Name 样式 */
.teacher-name-info .Name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.teacher-name-info .Name h2 {
    margin-bottom: 0;
}

/* 🎨 老师名（TVCBOOK 个人页：大号粗黑标题） */
.TeacherHome .Name h2 {
    height: auto;
    font-size: var(--tvc-display-size, 24px);
    color: var(--tvcbook-text, #333333);
    text-align: left;
    margin-bottom: 0;
    text-shadow: none;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.Name h3 {
    font-size: var(--tvc-subtitle-size, 13px);
    color: #666666;
    text-align: left;
    text-shadow: none;
    font-weight: var(--tvc-subtitle-weight, 400);
    letter-spacing: 0.01em;
}

.Ability {
    position: static;
    width: 100%;
    margin-bottom: 15px;
}

.Ability h2 {
    height: auto;
    line-height: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-shadow: none;
    font-weight: 500;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.Ability h2 span {
   display: inline-block;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: .75rem;
   padding-right: .75rem;
   background: transparent;
   border: 1px solid #626466 !important;
   border-radius: .375rem;
   color: #555555;
   font-weight: 400;
   font-size: .75rem;
   line-height: 1rem;
}

.fenjiexian {
    border-left: 1px solid var(--card-border, #d4d4d8);  /* 与列表页边框一致 */
    height: 51px;
}

.Intro {
    position: static;
    width: 100%;
    height: auto;
    overflow: hidden;
    color: #555555;
    line-height: 28px;
    margin-top: -15px;
    text-shadow: none;
    font-weight: 400;
}

/* 价格区域调整 */
.TeacherData {
  margin-bottom: 13px;
    float: right;
    width: 100%;
}

/* 按钮调整：双钮随文字宽度，不拉满整卡（对标 TVCBOOK 个人页左栏） */
.TeacherBanner .BtnBar {
    position: static;
    width: 100%;
    gap: 8px;
    row-gap: 8px;
    height: auto;
    margin-top: 16px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

/* 按钮统一基础样式：内容宽度 + padding，禁止 flex 撑满一行 */
.TeacherBanner .BtnBar a.Btn01,
.TeacherBanner .BtnBar a.Btn02,
.TeacherBanner .BtnBar a.Btn02.collection_teacher,
.TeacherBanner .BtnBar a.Btn02.cancel_collection,
.TeacherBanner .BtnBar a.Btn02.Favorites,
.TeacherBanner .BtnBar a.Btn01-inline,
.TeacherBanner .BtnBar a.Btn02-inline {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    min-height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    border-radius: var(--th-radius-btn, 6px) !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.TeacherBanner .BtnBar a.Btn01-inline:focus-visible,
.TeacherBanner .BtnBar a.Btn02-inline:focus-visible {
    outline: 2px solid var(--tvcbook-primary, #818cf8);
    outline-offset: 2px;
}

/* 关注按钮 - TVCBOOK 主色 #818cf8 */
.TeacherBanner .BtnBar a.Btn02,
.TeacherBanner .BtnBar a.Btn02.collection_teacher,
.TeacherBanner .BtnBar a.Btn02.Favorites,
.TeacherBanner .BtnBar a.Btn02-inline {
    color: #fff !important;
    background-color: var(--tvcbook-primary, #818cf8) !important;
}

.TeacherBanner .BtnBar a.Btn02:hover:not(.cancel_collection),
.TeacherBanner .BtnBar a.Btn02.collection_teacher:hover,
.TeacherBanner .BtnBar a.Btn02.Favorites:hover,
.TeacherBanner .BtnBar a.Btn02-inline:hover:not(.cancel_collection) {
    background-color: var(--tvcbook-primary-hover, #3f46e8) !important;
}

/* 联系按钮 - #eeeeee 底 + #333 字（TVCBOOK 次按钮） */
.TeacherBanner .BtnBar a.Btn01,
.TeacherBanner .BtnBar a.Btn01-inline {
    color: var(--tvcbook-text, #333333) !important;
    background: var(--tvcbook-secondary-bg, #eeeeee) !important;
}

.TeacherBanner .BtnBar a.Btn01:hover,
.TeacherBanner .BtnBar a.Btn01-inline:hover {
    background: #e8e8e8 !important;
}

/* 明亮模式：数据条 / 自介播放器 / 资料价格 — rgba(0,0,0,0.06) */
html:not(.dark-mode) .TeacherHome .TeacherBanner-left .teacher-stats-grid {
    background: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06));
    border: none;
}

html:not(.dark-mode) .TeacherHome .TeacherBanner-left #waveformx .intro-player-style .unified-player-container,
html:not(.dark-mode) .TeacherHome .TeacherBanner-left #waveformx .teacher-intro-player .unified-player-container {
    background-color: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06)) !important;
    border: none !important;
}

html:not(.dark-mode) .TeacherHome .teacher-profile-card .profile-price-section .Volume {
    background: var(--tvcbook-stats-bar-bg, rgba(0, 0, 0, 0.06)) !important;
    border: none !important;
}

html:not(.dark-mode) .TeacherHome .TeacherBanner .BtnBar a.Btn01,
html:not(.dark-mode) .TeacherHome .TeacherBanner .BtnBar a.Btn01-inline {
    background: var(--color-bg-gray, #f1f5f9) !important;
}

html:not(.dark-mode) .TeacherHome .TeacherBanner .BtnBar a.Btn01:hover,
html:not(.dark-mode) .TeacherHome .TeacherBanner .BtnBar a.Btn01-inline:hover {
    background: #e2e8f0 !important;
}

 

/* 第一个按钮无左边距 */
.TeacherBanner .BtnBar a.Btn01 {
    margin: 0 !important;
}

/* 按钮间距由gap控制，不需要margin */
.TeacherBanner .BtnBar a.Btn02,
.TeacherBanner .BtnBar a.Btn02.collection_teacher,
.TeacherBanner .BtnBar a.Btn02.cancel_collection,
.TeacherBanner .BtnBar a.Btn02.Favorites {
    margin: 0 !important;
}

.TeacherBanner .BtnBar span.Btn02 {
    display: none; /* 隐藏"已经收藏"的状态 */
}
 
/* 老师主页价格仅出现在资料卡片 .profile-price-section .Volume，通用 .Volume 已移除避免重复 */

/* 交易数据展示样式 - 在名字下面 */
.teacher-trade-stats {
  display: flex;
  align-items: center;
  gap: 8px;
   
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.trade-stat-item {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.trade-stat-label {
  color: #888;
  font-weight: 400;
  font-size: 12px;
}

.trade-stat-value {
  color: #0a0a0a;
  font-weight: 600;
  font-size: 13px;
}

.trade-stat-divider {
  color: #ccc;
  margin: 0 3px;
  font-weight: 300;
}

/* 🎨 与声音列表页统一的统计信息样式 */
.teacher-name-info .teacher-stats-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 2px;
}

.teacher-name-info .teacher-stats-line .stat-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.teacher-name-info .teacher-stats-line .stat-num {
  color: var(--tvcbook-text, #333333);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.teacher-name-info .teacher-stats-line .stat-label {
  color: #666666;
  font-weight: 400;
}

.teacher-name-info .teacher-stats-line .stat-divider {
  color: #d1d5db;
  font-weight: 400;
}

/* 🎨 名字下方元数据：普通话 | 性别 | … ——黑色、常规字重 */
.teacher-info-line-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 4px;
  font-size: var(--tvc-meta-line-size, 13px);
  line-height: 1.5;
  margin-top: 8px;
  font-weight: 400;
  color: #292a2c;
  letter-spacing: 0.01em;
}

.teacher-info-line-header .tag-item {
  display: inline;
  padding: 0;
  margin: 0;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  font-weight: 400;
  font-size: inherit;
  box-shadow: none;
}

.teacher-info-line-header .tag-separator {
  display: inline;
  color: #9ca3af;
  font-weight: 400;
  margin: 0 8px;
  padding: 0;
  user-select: none;
}



/* 🎨 标签卡片内的作品数/粉丝数（新布局：移到播放器下方） */
.teacher-tags-card .teacher-stats-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.teacher-tags-card .teacher-stats-line .stat-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.teacher-tags-card .teacher-stats-line .stat-num {
  color: var(--tvcbook-text, #333333);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.teacher-tags-card .teacher-stats-line .stat-label {
  color: #666666;
  font-weight: 400;
}

.teacher-tags-card .teacher-stats-line .stat-divider {
  color: var(--tvcbook-text-muted, #999999);
  font-weight: 300;
}



/* 交易数据样式 - 在价格表上方 */
.teacher-trade-stats.price-stats {
  justify-content: center;
  padding: 10px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.Volume li {
	margin: 16px 5px;
    text-align: center;
    line-height: 26px;
	}

.Volume .VolumeL { 
    float: left;
    padding-right: 4px;
	}

.Volume .VolumeR {
   float: left;
	}
	 
/* 🎨 与声音列表页统一的价格数值 */
.Volume span.Number {
    font-size: 14px;
    color: #111827;
    font-weight: 600;
    text-shadow: none;
    letter-spacing: 0;
}

.Volume span.LineThrough {
    text-decoration: line-through; 
    color: #9ca3af;
    font-size: 12px;
    font-weight: 400;
}

.Volume .Seckill {
	position: absolute;
    top: -3px;
    right: -3px;
    width: 40px;
}

.Column_Show {
	float: left;
    width: 100%;
}

/* 波形播放器和控制 */
.waveform {
    min-width: 200px;
    width: 36%;
    height: 40px;
    min-height: 40px;  /* 占位：固定最小高度 */
    background-color: #f0f0f0;  /* 占位：灰色背景 */
    border-radius: 4px;
    position: relative;
    margin-left: auto;
}

/* 老师简介音频播放器样式 */
#Sound .controls .glyphicon-play {
    width: 23px;
    height: 23px;
    background: url(/img/play.svg);
    content: '';
    position: absolute;
    top: 2%;
    left: 2%;
    background-repeat: no-repeat;
    border-radius: 999px;
    background-size: cover;
    cursor: pointer;
    filter: brightness(5.5);
}

#Sound .controls .glyphicon-play:hover {
    /* 简洁设计，无悬停效果 */
}

#Sound .controls .glyphicon-pause {
    width: 23px;
    height: 23px;
    background: url(/img/stop.svg);
    content: '';
    position: absolute;
    top: 2%;
    left: 2%;
    background-repeat: no-repeat;
    border-radius: 999px;
    background-size: cover;  
    cursor: pointer;
}

/* 老师简介音频波形容器定位 - 样式已移至上方（第165行） */

/* 波形播放器时间显示相关样式 */
.current-time-on-pointer {
    position: absolute;
    margin-top: 10px!important;
    margin-left: -41px!important;
    background-color: var(--player-time-bg-color, #0f0c0c);
    color: var(--player-time-text-color, white);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 12px;
    display: none;
    z-index: 20; /* 🔧 降低层级，播放器时间提示不应该覆盖客服 */
}

.current-time-on-pointer-home {
    position: absolute;
    top: 10px;
    margin-left: -41px;
    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: 9999;
}
        
/* 隐藏总时间 */
.total-time {
    display: none;
}

/* 样音标签样式 */
#Sound {
    margin-bottom: 10px;
    background: rgb(255, 255, 255);
}

.Sound_tit {
    position: relative;
    width: 100%;
    max-width: 1190px;
    padding: 0px 0;
    margin: 0 auto;
    display: flex;
    background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.Sound_tit ul { 
    display: flex;
    flex-wrap: nowrap;
    gap: 13px;
    padding: 10px;
    margin: 0 auto;
    list-style-type: none;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

.Sound_tit ul::-webkit-scrollbar {
    display: none;
}

.Sound_tit ul::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    pointer-events: none;
}

.Sound_tit ul li {
   display: inline-block;
    padding: 12px 12px;
    margin-right: 0;
    cursor: pointer;
    color: #1D2126;
    font-weight: 600;
    border: none;
    white-space: nowrap;
    border-radius: 8px;
    background-color: #f5f5f7;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.Sound_tit ul li:hover {
    transform: translateY(-3px);
    background-color: #efefef;
    color: #000;
}

.Sound_tit ul li.hover {
   color: #ffffff;
    background: #333740;
    font-weight: 700;
}

/* Add a pulsing dot for the active tab */
.Sound_tit ul li.hover::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* 样音样式 */
#Sound dl {
        float: left;
    width: 99%;
    height: 68px;
    border: 1px solid #e7e5e4;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: none; /* 简洁设计 */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

#Sound dl:hover {
    background: #fafaf9;
}
    
#Sound .BoxClose, .Video .BoxClose {
    display: none;
   }

#Sound .BoxClose, #Sound .expanded { 
    width: 100%;
}

#Sound dd {
   height: 23px;
    overflow: initial;
    line-height: 17px;
    font-size: 13px;
}

#Sound dd p {
    height: 33px;
    padding-top: 7px;
}

a.addBtn5.small {
   background: url(../../images/web/iconfont-download.png) no-repeat;
    background-position: 1px 1px;
    background-size: contain;
    padding: 2px 5px 2px 19px;
    margin: 0 0 0 0px;
}
 
a.addBtn4.small {
    background: url(../../images/web/peiyin.svg) no-repeat;
    background-position: 5px center;
    background-size: 23px 23px;
    padding: 6px 10px 6px 28px;
    margin: 0 0 0 3px;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: #333;
    font-weight: 500;
}

a.addBtn4.small:hover {
    color: #FFF;
}

#Sound dt a {
    border-radius: 3px;
    color: #191918;
}

.Dotted {
    height: 4px;
    overflow: hidden;
    border-bottom: 1px dotted #ddd;
    margin: 10px 0;
}

/* 双栏 flex：左栏滚动吸附用 CSS sticky，不再用 JS fixed+占位，避免首屏/resize 抖动 */
.TeacherHome-flex-container {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    max-width: 100% !important;
    gap: 30px;
    position: relative;
    box-sizing: border-box;
}

/* 桌面端双栏：顶部对齐；左栏 sticky 贴导航下方 */
@media (min-width: 769px) {
  .TeacherHome-flex-container {
    align-items: flex-start;
  }
  .TeacherHome-left-column {
    position: sticky;
    /* 与原先 JS 固定侧栏 top≈80px 对齐：导航高度 + 与顶栏间距 */
    top: calc(var(--nav-height, 66px) + 14px);
    align-self: flex-start;
  }
}

.TeacherHome-flex-container > div:first-child {
    flex-shrink: 0;
}

/* Left column for teacher info */
.TeacherHome-left-column {
    width: 26%;
    min-width: 320px;
    z-index: 10;
    flex-shrink: 0;
    /* 使用 border-box 确保宽度计算一致 */
    box-sizing: border-box;
    /* 仅阴影过渡；勿对 transform 做动画，避免与 flex 拉伸/重算叠加重绘抖动 */
    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Right column for sound samples */
.TeacherHome-right-column {
    flex: 1;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}


/* 筛选样式已全部移至组件: /css/web/components/filter_horizontal.css */

/* ===== 老师主页筛选区域特殊适配 =====
   由于左右结构，右侧约占版心 ~74%（左栏 26% + gap），估算示例：
   整屏 1200px 时右侧约 888px；整屏 1000px 时右侧约 740px（未扣 padding，仅量级）
===== */

/* ===== 老师主页筛选区域特殊适配 =====
   老师主页HTML结构已与 sound_list/teacher_list 完全统一：
   .filter-horizontal > (.filter-left-box + .filter-center-box + .filter-right-box)
===== */

/* 电脑端宽屏（> 878px）：一行布局，与声音列表保持一致 */
.TeacherHome-right-column .filter-horizontal {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding:  0;
}

.TeacherHome-right-column .filter-horizontal > .filter-left-box {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  order: 1;
}

.TeacherHome-right-column .filter-horizontal > .filter-center-box {
  flex: 0 0 auto;
  order: 2;
  margin-left: auto; /* 推到右边 */
}

.TeacherHome-right-column .filter-horizontal > .filter-right-box {
  flex: 0 0 auto;
  order: 3;
}

/* 桌面端不显示搜索关闭按钮，仅移动端展开时显示 */
.TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn {
  display: none !important;
}

/* 窄屏（≤ 878px）：两行布局 */
@media screen and (max-width: 878px) {
  .TeacherHome-right-column .filter-horizontal {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 12px 10px !important;
  }
  
  /* 搜索框：第一行左侧 */
  .TeacherHome-right-column .filter-horizontal > .filter-center-box {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: unset !important;
    width: 100% !important;
  }
  
  /* 视图切换：第一行右侧 */
  .TeacherHome-right-column .filter-horizontal > .filter-right-box {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: unset !important;
  }
  
  /* 筛选按钮区域：第二行占满宽度 */
  .TeacherHome-right-column .filter-horizontal > .filter-left-box {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: unset !important;
    width: 100% !important;
    overflow: visible !important;
  }
  
  .TeacherHome-right-column .filter-horizontal .search-area form {
    display: flex !important;
    width: 100% !important;
  }
  
  .TeacherHome-right-column .filter-horizontal .search-area .search-input-wrapper {
    width: 100% !important;
  }
  
  .TeacherHome-right-column .filter-horizontal .search-area input[type="text"] {
    width: 100% !important;
    min-width: unset !important;
  }
  /* 878px 及以下：老师详情页搜索框默认只显示图标，点击后 .expanded 展开 */
  /* 参考订单列表：单一边框，无多层阴影；收起时为正圆（宽高一致 + border-radius: 50%） */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-input-wrapper {
    --th-search-w: 40px;
    width: var(--th-search-w) !important;
    min-width: var(--th-search-w) !important;
    max-width: var(--th-search-w) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden;
    border: 1px solid var(--card-border, #d4d4d8);
    box-shadow: none;
    /* 优化动画：更快更流畅 */
    will-change: width, border-radius;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease-out, border-color 0.15s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), gap 0.2s ease;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .search-input-wrapper {
    --th-search-w: 220px;
    width: var(--th-search-w) !important;
    min-width: var(--th-search-w) !important;
    max-width: var(--th-search-w) !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    border-radius: 20px !important;
    gap: 4px;
    padding: 0 4px 0 2px;
    border-color: #667eea;
    box-shadow: none;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn {
    display: none;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .teacher-search-close-btn {
    display: flex !important;
    opacity: 1;
    transform: scale(1);
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .teacher-search-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-input {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s ease, flex 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .teacher-search-input {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 6px !important;
    flex: 1 1 0 !important;
    font-size: 14px;
  }
  /* 878px 下也覆盖组件：input 无边框无 focus 阴影，只保留外层一圈 */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-area input[type="text"],
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-area input[type="text"]:focus,
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-icon-btn {
    position: static !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* 窄屏（≤878px）：与 ≤768 相同单行布局。769–878 原先只走「两行 grid」，在老师页右栏变窄时易挤压/错位，故与手机共用 flex */
@media screen and (max-width: 878px) {
  .TeacherHome-right-column .filter-horizontal .layout-toggle-wrapper,
  .TeacherHome-right-column .filter-horizontal > .filter-right-box {
    display: none !important;
  }
  .TeacherHome-right-column .filter-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .TeacherHome-right-column .filter-horizontal > .filter-left-box {
    flex: 1 !important;
    min-width: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: unset !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .TeacherHome-right-column .filter-horizontal > .filter-center-box {
    flex-shrink: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: unset !important;
    width: auto !important;
  }
  /* 老师详情页搜索框：图标 + 展开输入，统一视觉 */
  .TeacherHome-right-column .teacher-search-box {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box form {
    width: auto !important;
  }
  /* 覆盖 filter_horizontal 组件：只保留一层边框；收起时为正圆（36×36 + 50%），展开时为胶囊 */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-input-wrapper {
    display: flex !important;
    align-items: center;
    gap: 2px;
    height: 36px;
    padding: 0 2px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--card-border, #d4d4d8);
    box-shadow: none !important;
    /* 优化动画：更快更流畅 */
    will-change: width, border-radius;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease-out, border-color 0.15s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), gap 0.2s ease;
    overflow: hidden;
  }
  /* 768px 收起时：固定 36×36 正圆 */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box:not(.expanded) .search-input-wrapper {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .search-input-wrapper {
    width: var(--th-search-w) !important;
    min-width: var(--th-search-w) !important;
    max-width: var(--th-search-w) !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 20px !important;
    border-color: #667eea;
    box-shadow: none !important;
    gap: 4px;
    padding: 0 4px 0 2px;
  }
  /* 覆盖组件 .search-area input 的 border 和 :focus box-shadow，避免多层边框 */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-area input[type="text"],
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-input {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px;
    color: #111827;
    background: transparent !important;
    transition: width 0.42s cubic-bezier(0.34, 1.2, 0.64, 1), padding 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-area input[type="text"]:focus,
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  /* 覆盖组件 .search-icon-btn 的绝对定位和任何边框/阴影，避免内层“小框” */
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .search-icon-btn,
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-btn {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .teacher-search-close-btn {
    opacity: 1;
    transform: scale(1);
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn:hover,
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-close-btn svg {
    width: 16px;
    height: 16px;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box.expanded .teacher-search-input {
    padding: 0 6px !important;
  }

  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-btn:active {
    background: rgba(102, 126, 234, 0.12) !important;
  }
  .TeacherHome-right-column .filter-horizontal .teacher-search-box .teacher-search-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* 加载指示器样式 */
.loading-indicator {
    text-align: center;
    padding: 30px;
    font-size: 14px;
    color: #666;
    background: url('/images/web/loading.gif') no-repeat center top;
    background-size: 40px;
    padding-top: 50px;
}

/* 加载更多按钮 */
.LoadBar {
    text-align: center;
    padding: 15px;
    background: #fafaf9;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 20px;
}

.LoadBar:hover {
    background: #e7e5e4;
}

/* ==========================================
   模块化样音卡片结构 - 与 sound_list 统一
========================================== */

/* 模块1: 信息模块（头像+标题） */
.module-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.info-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

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

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

/* 头像图片内边框 */
.info-avatar img {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); /* 内边框，不增加尺寸 */
}


.sample-avatar {
     
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6; /* 🎯 与老师卡片统一 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 🎯 外阴影，与老师卡片统一 */
    transition: transform 0.2s ease; /* 🎯 添加过渡效果 */
}

/* 🎯 悬停效果，与老师卡片统一 */
.sample-item:hover .sample-avatar {
    transform: scale(1.06);
}


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

/* 🎨 与声音列表页统一的样音标题样式 */
.sample-title {
    /* 🔧 使用无版权纠纷的系统字体 */
    font-family: "Alimama FangYuanTi VF", "Microsoft YaHei", "微软雅黑", "PingFang SC", Arial, sans-serif !important;
    font-variation-settings: normal;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 🎨 与声音列表页统一的样音风格样式 */
.sample-style {
    font-size: 11px !important;
    color: #6b7280 !important;
    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 !important;
    color: #9ca3af !important;
}

/* 🎨 与声音列表页统一的播放次数样式 */
.sample-play-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 12px !important;
    color: #9ca3af !important;
}

/* 模块2: 播放器模块 */
.module-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-player .controls {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

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

/* ==========================================
   播放按钮样式（统一样式）
========================================== */

/* 播放按钮容器 */
.sample-item .controls {
    width: 27px !important;
    height: 27px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 播放按钮本身 */
.sample-item .controls .btn-primary {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid #000000 !important;
    padding: 0 !important;
    display: block !important;
    cursor: pointer !important;
    transition: none !important;
    box-shadow: none !important;
    position: relative;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.sample-item .controls .btn-primary:hover {
    /* 简洁设计，无悬停效果 */
}

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

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

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

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

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

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

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

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

.sample-item .controls .btn-primary:has(.glyphicon-pause):hover {
    /* 简洁设计，无悬停效果 */
}

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

.sample-item .controls.playing .btn-primary:hover {
    /* 简洁设计，无悬停效果 */
}

/* 模块3: 功能按钮模块 */
.module-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.module-actions .sample-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 样音列表布局 - 和sound_list一致 */
.samples-grid {
    text-align: left;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0px auto;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#samples-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font-sans);
    --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-card-config-css（后台配置）写入，此处不硬编码 */
    --sound-list-row-inset: 6px;
    --sound-list-row-inset-x: 8px;
}

/* ==========================================
   列表视图（1列）：与 sound_list.css strip 布局一致
========================================== */

#samples-container.list-view,
.samples-grid.list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
}

#samples-container.list-view > .sample-item,
#samples-container.list-view .sample-item,
.samples-grid.list-view > .sample-item,
.samples-grid.list-view .sample-item {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    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;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

#samples-container.list-view .sample-item::after,
.samples-grid.list-view .sample-item::after {
    /* 分割线样式见 sound_sample_strip.css（与样音库共用） */
    content: '';
}

#samples-container.list-view .sample-item:last-child::after,
.samples-grid.list-view .sample-item:last-child::after {
    display: none;
}

#samples-container.list-view .sample-item::before,
.samples-grid.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;
}

#samples-container.list-view .sample-item > *,
.samples-grid.list-view .sample-item > * {
    position: relative;
    z-index: 1;
}

#samples-container.list-view .sample-item:hover,
.samples-grid.list-view .sample-item:hover {
    z-index: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

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

/* 信息模块 - 可伸缩宽度，优先保持320px */
#samples-container.list-view .sample-item .module-info,
.samples-grid.list-view .sample-item .module-info {
    flex: 0 1 320px; /* 可收缩，理想宽度320px */
    min-width: 239px; /* 最小180px */
    max-width: 320px; /* 最大320px */
}

/* 播放器 - 占据剩余空间 */
#samples-container.list-view .sample-item .module-player,
.samples-grid.list-view .sample-item .module-player {
    flex: 1 1 auto;
    min-width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* 功能键 - 固定宽度 */
#samples-container.list-view .sample-item .module-actions,
.samples-grid.list-view .sample-item .module-actions {
    flex: 0 0 auto;
}


/* 注释：列表模式在大部分屏幕上保持1行布局，只在小屏幕才切换到2行 */
/* 一列布局的变局断点：精确在978px时切换 */

/* 一列布局 - 小于978px时变成2行布局 */
@media (max-width: 977px) {
    #samples-container.list-view .sample-item,
    .samples-grid.list-view .sample-item {
        /* 只改变布局方式，不改变基本显示样式 */
        flex-wrap: wrap; /* 强制允许换行，变成2行布局 */
        /* background, border-radius等基本样式继承基础定义，保持统一 */
    }
    
    /* 第1行：信息模块（占满整行，强制换行） */
    #samples-container.list-view .sample-item .module-info,
    .samples-grid.list-view .sample-item .module-info {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
    
    /* 第2行：播放器（占据左侧剩余空间，保持最小宽度） */
    #samples-container.list-view .sample-item .module-player,
    .samples-grid.list-view .sample-item .module-player {
        flex: 1 1 auto;
        min-width: 100px; /* 双行布局时也保持最小100px */
        /* padding, background, border-radius等继承基础定义，保持统一显示 */
    }
    
    /* 第2行：功能键（固定宽度，靠右） */
    #samples-container.list-view .sample-item .module-actions,
    .samples-grid.list-view .sample-item .module-actions {
        flex: 0 0 auto;
    }
}

/* ==========================================
   卡片视图：固定3行垂直布局（老师主页专用，考虑左侧栏）
   列数：repeat(auto-fill, minmax(240px, 1fr)) — 每列至少 240px，与 ≤760px 断点一致；
   不再用固定 repeat(N,1fr)，避免右栏变窄时单卡被压到 240px 以下。
   版心 1300/1560 变宽时，同一视口下会自动多出一列，无需再单独写 body.site-layout-wide。
========================================== */
.samples-grid.card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 16px;
}

/* 卡片项：固定3行垂直堆叠 - 🎯 样式与列表视图统一 */
.samples-grid.card-view .sample-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--card-surface-outline, rgba(0, 0, 0, 0.1));
    border-radius: 12px; /* 🎯 与列表视图统一 */
    background: var(--card-surface-panel, transparent);
    box-shadow: var(--card-shadow-rest, none);
    width: 100%;
    min-width: 0;
    min-height: 180px;  /* 占位：固定最小高度，防止布局跳动 */
    box-sizing: border-box;
    overflow: visible; /* 让弹出菜单可以显示 */
    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;
}

/* 确保每个模块独占一行 */
.samples-grid.card-view .sample-item > * {
    width: 100%;
    flex-shrink: 0; /* 不允许收缩 */
}

/* 卡片视图悬停：与样音库一致（灰底，无上浮） */
#samples-container.card-view .sample-item:hover,
.samples-grid.card-view .sample-item:hover {
    z-index: 1;
    background: var(--sound-list-hover-bg, rgba(0, 0, 0, 0.04)) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 第1行：信息模块（头像 + 标题 + 风格 + 播放次数） */
.samples-grid.card-view .sample-item .module-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

 
 

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

.samples-grid.card-view .sample-item .sample-title,
.samples-grid.card-view .sample-item .sample-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* 第2行：播放器模块（独占一行） */
.samples-grid.card-view .sample-item .module-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    /* 高度由后台配置控制 */
    border-radius: 10px;
    
    box-sizing: border-box;
    overflow: visible; /* 允许时间指针显示 */
}

.samples-grid.card-view .sample-item:hover .module-player {
    /* 无悬停效果，避免多余背景 */
}

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

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

.samples-grid.card-view .sample-item .sample-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    color: #222 !important;
    margin-bottom: 4px !important;
}

.samples-grid.card-view .sample-item .sample-style {
    font-size: 11px !important;
    text-align: left !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.samples-grid.card-view .sample-item .sample-play-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-left: 4px !important;
}

/* 卡片布局 - 操作按钮样式（与声音卡片组件一致） */
.samples-grid.card-view .sample-item .sample-actions {
    justify-content: center !important;
    gap: 12px !important;
   /*  border-top: 1px solid #efefef !important; */
    /* padding-top: 14px !important; */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 按钮基础和悬停样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 收藏图标样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 收藏按钮已收藏状态样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 收藏图标悬停样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 卡片布局 - 波形图样式 */
.samples-grid.card-view .waveform {
    width: 100% !important;
     
    border-radius: 8px !important;
     
    box-sizing: border-box !important;
}

/* 卡片布局 - 播放按钮样式 */
.samples-grid.card-view .sample-item .controls .btn-primary {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid #909290 !important;
    padding: 0 !important;
    display: block !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    position: relative;
    line-height: 36px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.samples-grid.card-view .sample-item .controls .btn-primary:hover {
  /* 简洁设计，无悬停效果 */
}

/* 卡片布局 - 播放图标 */
.samples-grid.card-view .sample-item .controls .glyphicon-play {
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 7px 0 7px 11px !important;
    border-color: transparent transparent transparent #010101 !important;
    background: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-35%, -50%) !important;
    margin: 0 !important;
    display: inline-block !important;
}

.samples-grid.card-view .sample-item .controls .btn-primary:hover .glyphicon-play {
    /* 简洁设计，无悬停效果 */
}

/* 卡片布局 - 暂停图标 */
.samples-grid.card-view .sample-item .controls .glyphicon-play.glyphicon-pause {
    width: 10px !important;
    height: 12px !important;
    border: none !important;
    background: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: inline-block !important;
}

.samples-grid.card-view .sample-item .controls .glyphicon-play.glyphicon-pause::before,
.samples-grid.card-view .sample-item .controls .glyphicon-play.glyphicon-pause::after {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-radius: 0.5px !important;
    top: 0 !important;
}

.samples-grid.card-view .sample-item .controls .glyphicon-play.glyphicon-pause::before {
    left: 0 !important;
}

.samples-grid.card-view .sample-item .controls .glyphicon-play.glyphicon-pause::after {
    right: 0 !important;
}

/* 卡片布局 - 播放状态 */
.samples-grid.card-view .sample-item .controls.playing .btn-primary {
  background: #fe8c18 !important;
  border-color: #fe8c18 !important;
}

.samples-grid.card-view .sample-item .controls.playing .btn-primary:hover {
  /* 简洁设计，无悬停效果 */
}


/* 样音标题 */
/* ⚠️ .sample-title样式已在行1568定义，此处删除重复定义 */

/* 样音风格信息 */
.sample-style {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sample-play-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999;
    margin-left: 4px;
}

.sample-play-count svg {
    flex-shrink: 0;
    color: #9ca3af !important;
}

.play-count-number {
    font-weight: 400 !important;
    color: #9ca3af !important;
}

/* ⚠️ 旧的waveform-container样式已删除，新结构使用module-player */

/* 操作按钮区域 */
.sample-actions {
    display: flex;
    align-items: center;
    margin-left: 0px;
    gap: 12px; /* 按钮之间的间距 */
}

/* 功能按钮样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 收藏图标样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 按钮样式优化 */
.action-button {
    padding: 6px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.order-btn {
    background-color: #1c1b1b00;
    color: #000000;
    border: 1px solid;
}

.order-btn:hover {
    background-color: #FF5252;
    color: white;
}

.download-btn {
    background-color: #000000;
    color: white;
}

.download-btn:hover {
    background-color: #43A047;
    color: white;
}

/* 图标按钮样式 */
.addBtn1, .addBtn2 {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.addBtn1 {
    background-image: url(/images/web/addBtn1.png);
}

.addBtn2 {
    background-image: url(/images/web/addBtn2.png);
}

/* ⚠️ 旧的抽屉式筛选样式已删除，使用新的水平筛选组件 filter_horizontal.css */
/* ⚠️ 旧的列表视图代码（sample-info-container2）已删除，使用新的module-info结构 */
/* module-info 始终保持横向布局（flex-direction: row），样式在第1525行和第1824行定义 */

/* 整合所有媒体查询 */
/* 大屏幕到中屏 (1210px-1100px) */
@media screen and (min-width: 1100px) and (max-width: 1210px) {
    .Content {
        width: 100%!important;
        max-width: 100% !important;
        overflow: hidden;
        margin: 0 auto !important;
        /* margin-top 由 global-nav-spacing.css 统一管理 */
        padding-top: 8px !important; /* 统一间距8px */
    }
    /* 老师主页左栏 position:sticky 需祖先非 overflow:hidden，否则吸附异常/抖动 */
    .Content:has(.TeacherHome) {
        overflow: visible !important;
    }
}

/* 中小屏幕 (977px以下) */
/* ⚠️ 977px的筛选条件样式已合并到行1861的@media (max-width: 977px)块中 */

/* 中小屏幕 (960px-769px) */
@media screen and (max-width: 960px) and (min-width: 769px) {
.TeacherData {
    float: right!important;
    width: 100%!important;
    padding-top: 3px!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}
 
 .Sound_tit ul {
    margin: 6px;
    padding: 1px 0px;
    list-style-type: none;
    text-align: left;
    width: 100%!important;
   gap: 3px;
}
    
div#wrapper {
    white-space: nowrap;
	overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* 隐藏滚动条 */
            -ms-overflow-style: none;
            scrollbar-width: none;
}
    
#wrapper::-webkit-scrollbar {
            display: none;
        }
 
    .Sound_tit ul li {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
    color: #1D2126;
    font-weight: 600;
}
    
#Sound .BoxClose, #Sound .expanded {
    width: 100%;
    margin: 0px 0 0 0;
}
    
#Sound dd {
   height: 50px;
    overflow: inherit;
    line-height: 21px;
    border-bottom: 1px solid #c9c9c9;
}

#Sound dl {
    width: 100%;
}
}
 
/* 平板电脑/移动端 (<=768px) - 改为上下布局 */
@media screen and (max-width: 768px) {
.TeacherHome {
   
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1px 0px 0px 0px; /* 统一间距8px */
}

.Content {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.TeacherHome-flex-container {
  display: flex;
        flex-direction: column;
    }
    
.TeacherHome-left-column {
        width: 100% !important;
        position: static !important;
        
    }
    
.TeacherHome-right-column {
        width: 100%;
}

.TeacherBanner {
        flex-wrap: wrap;
        padding: 0;
        border-radius: 0;
}

.TeacherBanner-left,
.TeacherBanner-center,
.TeacherBanner-right {
  width: 100%;
    }

  .TeacherBanner-left {
    padding: 18px 18px 20px;
    border-radius: var(--th-radius-card, 12px);
  }

  /* ===== 移动端头部信息区域优化 ===== */
  
  /* 主头像：与 --teacher-avatar-size 一致（避免被其它规则盖掉） */
  .TeacherBanner .HeadImg {
    width: var(--teacher-avatar-size, 72px) !important;
    height: var(--teacher-avatar-size, 72px) !important;
    min-width: var(--teacher-avatar-size, 72px) !important;
    min-height: var(--teacher-avatar-size, 72px) !important;
    border-radius: 50%;
    border: none;
    box-shadow: var(--teacher-avatar-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)) !important;
  }
  
  /* 头像和名字行布局：手机端上下排列、整体居中 */
  .teacher-header-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .teacher-header-row .HeadImgs {
    margin-right: 0;
  }

  /* 老师名字信息容器 */
  .teacher-name-info {
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .teacher-name-info .Name {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* 老师名字：字号由 .TeacherHome 上 --tvc-display-size 控制 */
  .teacher-name-info .Name h2 {
    text-align: center;
  }

  .TeacherHome .Name h2 {
    text-align: center;
  }

  /* 星级样式调整 */
  .teacher-name-info .Name .TeacherLevel {
    transform: scale(0.85);
    transform-origin: center center;
  }

  /* 普通话 | 男性 | 青年 */
  .teacher-info-line-header {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  
  /* 作品数和粉丝数 */
  .teacher-name-info .teacher-stats-line {
    font-size: 12px;
    gap: 6px;
  }
  
  .teacher-name-info .teacher-stats-line .stat-item {
    font-size: 12px;
  }
  
  /* 分享按钮 - 仍在卡片右上角，左右 padding 已留给顶栏留白 */
  .teacher-share-btn {
    width: 32px;
    height: 32px;
    top: 0;
    right: 0;
  }
  
  .teacher-share-btn svg {
    width: 16px;
    height: 16px;
  }
  
  /* 标签卡片区域 */
  .teacher-tags-card {
    margin-top: 12px;
  }
  
  .teacher-tags-card .tag-row {
    margin-bottom: 5px;
    line-height: 1.6;
  }
  
  .teacher-tags-card .tag-item,
  .teacher-tags-card .tag-label,
  .teacher-tags-card .tag-separator {
    font-size: 12px;
  }
  
  .teacher-tags-card .see-more-btn {
    font-size: 12px;
    padding: 4px 0;
  }
  
  .teacher-tags-card .teacher-intro-content p {
    font-size: 12px;
    line-height: 1.5;
  }
  
  /* 价格区域 */
  .TeacherData {
    margin-bottom: 8px;
  }
  
  .Volume {
    padding: 10px 8px;
  }
  
  .Volume li {
    margin: 10px 4px;
  }
  
  .Volume span.Number {
    font-size: 14px;
  }
  
  .Volume .PriceLabel {
    font-size: 12px;
  }
  
  /* 交易数据 */
  .teacher-trade-stats {
    font-size: 11px;
    gap: 6px;
    padding: 8px 0;
  }
  
  .trade-stat-label {
    font-size: 11px;
  }
  
  .trade-stat-value {
    font-size: 12px;
  }

  /* 🎨 自我介绍播放器组件移动端适配 - 尺寸由后台配置控制 */

  .intro-player-style .waveform {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
  }

  /* 播放器高度和内边距由后台配置控制 */
}

/* 平板/手机  760px */
@media screen and (max-width: 760px) {
  .TeacherHome-flex-container {
    flex-direction: column;
    gap: 20px;
  }
 a.action-button.download-btn {
    display: none;
}

  /* 与 768px 一致：纵向居中（勿再强制横向） */
  .teacher-header-row {
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }

  .teacher-header-row .HeadImgs {
    width: auto;
  }
  
  .teacher-header-row .HeadImg {
    width: var(--teacher-avatar-size, 72px) !important;
    height: var(--teacher-avatar-size, 72px) !important;
    box-shadow: var(--teacher-avatar-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)) !important;
  }
  
  /* 老师名：沿用 .TeacherHome 上 --tvc-display-size（≤768 已为 20px） */

  /* 老师简介音频波形容器定位 - 移动端保持横向布局 */
  div#waveform-jieshao {
    position: static;
    margin: 0;
    display: flex !important;
    transform: none;
    order: 1 !important; /* 确保在左侧 */
  }
  
  /* 移动端播放按钮稍小 */
  #waveformx #waveform-jieshao.controls {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    order: 1 !important; /* 确保在左侧 */
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-play {
    border-width: 8px 0 8px 13px !important;
    transform: translate(-40%, -50%) !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause {
    width: 14px !important;
    height: 16px !important;
    transform: translate(-50%, -50%) !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause::before,
  #waveformx #waveform-jieshao.controls .glyphicon-pause::after {
    width: 4px !important;
    height: 16px !important;
  }
  
  div#waveformx {
    gap: 0;
  }
  
  div#waveformy {
    gap: 8px !important;
  }
  
  .TeacherHome-left-column,
  .TeacherHome-right-column {
    width: 100%;
    min-width: auto;
}

  /* 样音列表移动端适配 - 仅对列表视图生效 */
  .samples-grid:not(.card-view) {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  /* ⚠️ 列表视图样式继承基础定义（行1801-1820），保持统一显示 */
  /* 768px断点只改变布局方式，不改变gap、padding、background、border等基本样式 */
  /* 布局已在977px断点定义，此处无需重复规则 */
  
  /* ⚠️ 旧的列表视图代码（sample-info-container2、sample-avatar-container、waveform-container等）已全部删除 */
  /* 使用新的模块化结构：module-info、module-player、module-actions */
  
  .samples-grid:not(.card-view) .sample-item .sample-style {
    text-align: left !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .TeacherBanner .HeadImg {
    position: static;
    width: var(--teacher-avatar-size, 72px);
    height: var(--teacher-avatar-size, 72px);
    min-width: var(--teacher-avatar-size, 72px);
    min-height: var(--teacher-avatar-size, 72px);
    border: none;
    border-radius: 50%;
    box-shadow: var(--teacher-avatar-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)) !important;
}
  
  .TeacherBanner {
    padding: 0;
  }
  
  #Sound dl {
    width: 100%;
    justify-content: center;
    padding: 10px 15px;
    box-sizing: border-box;
    max-width: 99%;
  }
  
  .waveform {
    min-width: 120px;
    width: 98%;
    height: 40px;
    margin: 0 auto;
  }
  
  .mingzi {
    margin: 0px 0 0 42px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  #Sound dt {
    display: flex;
    justify-content: center;
    width: 8%;
    height: 20px;
  }
  
  .HeadImg2 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  
  /* Ensure controls are properly positioned - only for sample audio in list */
  #Sound .controls {
   position: absolute;
    margin: 0 auto;
    display: block;
    left: 32px;
  }
  
  /* Center the entire sound box */
  #Sound .BoxClose, 
  #Sound .expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
    
    .sample-item {
        flex-wrap: wrap;
    }
    
    .Sound_tit {
        padding: 0px 0px;
        margin-bottom: -3px;
  display: flex;
        justify-content: center;
    }
    
    .Sound_tit ul {
        padding: 5px;
    }
    
    .Sound_tit ul li {
        padding: 10px 18px;
        font-size: 14px;
    }
    
  /* ⚠️ 旧的sound-waveform-container和sound-actions已删除 */
    
  a.addBtn5.small {
    background: url(../../images/web/iconfont-download.png) no-repeat;
    background-position: 1px 1px;
    background-size: contain;
    padding: 2px 5px 2px 19px;
    margin: 0 0 0 0px;
    display: none;
}

  /* 卡片网格列宽与桌面统一为 minmax(240px)；此处仅保留移动端需要的 !important 覆盖 */
  .samples-grid.card-view {
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  .samples-grid.card-view .sample-item {
    display: grid !important;
    padding: 12px !important;
    grid-template-columns: 46px 1fr !important;
    row-gap: 10px !important;
    column-gap: 7px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  /* 卡片视图：使用模块化结构，样式继承自上方 */
  .samples-grid.card-view .sample-item .module-info .sample-avatar {
    width: 46px !important;
    height: 46px !important;
  }
  
  .samples-grid.card-view .sample-item .module-info .info-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  /* 760px 移动端：宽度随文字 */
  .TeacherBanner .BtnBar a.Btn01,
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites,
  .TeacherBanner .BtnBar a.Btn01-inline,
  .TeacherBanner .BtnBar a.Btn02-inline {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 9px 15px !important;
    min-height: auto !important;
    font-size: 14px !important;
    margin: 0 !important;
    border-radius: var(--th-radius-btn, 6px) !important;
  }
}

 

/* 触摸设备优化 */
@media (pointer: coarse) {
    .action-button {
        width: 27px;
    }
}

/* 暗色模式支持 - 旧筛选样式已移至组件 */
@media (prefers-color-scheme: dark) {
    .sample-item {
       background: #fff;
    border: solid 1px #C9D0D9;
    border-radius: 8px;
    box-shadow: 0 2px 15px #0000000d, 0 2px 5px #19222b1a;
    }
    
    .sample-style {
        color: #aaa;
    }
}

/* 微信波形加载占位符样式 */
.waveform-placeholder {
  background: #f0f0f0;  /* 静态背景，不再闪烁 */
  border-radius: 4px;
  opacity: 1;  /* 固定不透明度，消除脉动感 */
}

/* 只在点击时显示高亮（绿色闪烁，表示正在加载） */
.waveform-placeholder.clicked {
  animation: placeholder-highlight 0.8s ease-in-out 3;  /* 只闪烁3次，不是无限 */
}

/* 移除脉动动画，避免"一直在加载"的感觉 */
/* @keyframes placeholder-pulse 已删除 */

@keyframes placeholder-highlight {
  0% { background-color: #f0f0f0; }
  50% { background-color: #c8e6c9; }  /* 浅绿色，表示正在加载 */
  100% { background-color: #f0f0f0; }
}

/* ===== Filter Horizontal Menu Styles ===== */
/* 筛选样式已移至组件: /css/web/components/filter_horizontal.css */

/* Theme categories 已迁移至组件: /css/web/components/filter_horizontal.css */

/* 搜索框和侧边栏筛选样式已移至组件: /css/web/components/filter_horizontal.css */

/* 筛选响应式样式已移至组件: /css/web/components/filter_horizontal.css */

/* === 样音列表响应式样式 (867px以下) === */
@media (max-width: 867px) {
  /* === 样音列表响应式样式 === */
  /* 非卡片视图使用flex布局 */
  .samples-grid:not(.card-view) {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  
  /* 卡片视图在867px以下做细节调整（列数由 auto-fill + minmax(240px) 决定） */
  .samples-grid.card-view {
    gap: 12px !important;
    
  }
  
  /* 卡片项保持垂直3行布局 */
  .samples-grid.card-view .sample-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
    /* 🎯 边框颜色继承基础样式，保持与列表视图统一 */
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  /* 信息模块（头像+标题）横向排列 */
  .samples-grid.card-view .sample-item .module-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .samples-grid.card-view .sample-item .module-info .info-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0 !important;
  }
  
  .samples-grid.card-view .sample-item .module-info .sample-avatar {
    width: 46px !important;
    height: 46px !important;
  }
  
  /* 播放器模块 */
  .samples-grid.card-view .sample-item .module-player {
    width: 100% !important;
  }
  
  /* 功能按钮模块 */
  .samples-grid.card-view .sample-item .module-actions {
    display: flex !important;
    justify-content: center !important;
  }
}

/* 中等屏幕 (768px-968px) - 列表视图使用网格布局 */
@media (min-width: 768px) and (max-width: 968px) {
  /* 列表视图：模块化结构继承基础样式，这里只做微调 */
  .samples-grid.list-view .sample-item .module-info .sample-avatar,
  .samples-grid.list-view .sample-item .module-info .info-avatar {
    width: 45px !important;
    height: 45px !important;
  }
  
  .samples-grid.list-view .sample-item .sample-title {
    font-size: 13px !important;
  }
  
  .samples-grid.list-view .sample-item .sample-meta {
    font-size: 12px !important;
  }
  
  /* 卡片视图：模块化结构继承基础样式 */
  .samples-grid.card-view .sample-item .module-info .sample-avatar,
  .samples-grid.card-view .sample-item .module-info .info-avatar {
    width: 45px !important;
    height: 45px !important;
  }
  
}

/* 筛选样式已移至组件 - 768px */
@media (max-width: 768px) {
  /* 768px移动端按钮：宽度随文字 */
  .TeacherBanner .BtnBar a.Btn01,
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: normal !important;
    font-size: 14px !important;
  }
  
  .TeacherBanner .BtnBar a.Btn01 {
    margin: 0 !important;
  }
  
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites {
    margin: 0 !important;
  }
}

/* 筛选样式已移至组件 - 480px */
@media (max-width: 480px) {
  .sample-item .sample-title {
    font-size: 13px !important;
  }
  .module-actions .sample-actions {
    display: flex;
    gap: 0px!important;
    align-items: center;
  }
  .sample-actions .action-icon, .teacher-actions .action-icon, .sample-actions .index-action-icon, .teacher-actions .index-action-icon {
    width: var(--card-btn-size);
    height: var(--card-btn-size);
    border-radius: var(--card-icon-radius, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    border: none!important;
    background: var(--card-bg-white);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none!important;
    flex-shrink: 0;
}
  .sample-item .sample-style {
    font-size: 11px !important;
  }
  
  .TeacherHome .sample-item,
  #samples-container .sample-item,
  .samples-grid .sample-item {
    width: calc(100% - 0px) !important;
  }
  
  /* ===== 小屏幕头部信息进一步优化 ===== */
  
  /* 外层无内边距；白卡在 .TeacherBanner-left */
  .TeacherBanner {
    padding: 0;
    border-radius: 0;
  }

  .TeacherBanner-left {
    padding: 16px 16px 18px;
    border-radius: var(--th-radius-card, 12px);
  }
  
  /* 主头像：与 --teacher-avatar-size 一致 */
  .TeacherBanner .HeadImg {
    width: var(--teacher-avatar-size, 72px) !important;
    height: var(--teacher-avatar-size, 72px) !important;
    min-width: var(--teacher-avatar-size, 72px) !important;
    min-height: var(--teacher-avatar-size, 72px) !important;
    box-shadow: var(--teacher-avatar-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)) !important;
  }
  
  /* 头像和名字间距 */
  .teacher-header-row {
    gap: 10px;
    margin-bottom: 10px;
  }
  
  /* 老师名字：--tvc-display-size 在 max-width:480px 已为 18px */

  /* 星级样式 */
  .teacher-name-info .Name .TeacherLevel {
    transform: scale(0.8);
  }

  /* 名字下方元数据行 */
  .teacher-info-line-header {
    margin-top: 4px;
  }

  .teacher-info-line-header .tag-separator {
    margin: 0 6px;
  }
  
  /* 标签卡片内作品数/粉丝数（新布局） */
  .teacher-tags-card .teacher-stats-line {
    font-size: 11px;
    gap: 5px;
    margin-bottom: 6px;
  }
  
  .teacher-tags-card .teacher-stats-line .stat-item {
    font-size: 11px;
  }
  
  /* 分享按钮更小（与居中头部区对齐，贴右上角） */
  .teacher-share-btn {
    width: 28px;
    height: 28px;
    top: 0;
    right: 0;
  }
  
  .teacher-share-btn svg {
    width: 14px;
    height: 14px;
  }
  
  /* 标签卡片 */
  .teacher-tags-card {
    margin-top: 10px;
  }
  
  .teacher-tags-card .tag-row {
    margin-bottom: 4px;
    line-height: 1.5;
  }
  
  .teacher-tags-card .tag-item,
  .teacher-tags-card .tag-label,
  .teacher-tags-card .tag-separator {
    font-size: 11px;
  }
  
  .teacher-tags-card .see-more-btn {
    font-size: 11px;
  }
  
  .teacher-tags-card .teacher-intro-content p {
    font-size: 11px;
    line-height: 1.5;
  }
  
  /* 资料卡片 480px 适配 */
  .teacher-profile-card {
    padding: 16px;
    margin-top: 10px;
    border-radius: var(--th-radius-panel, 12px);
  }
  
  .teacher-profile-card .profile-card-title {
    font-size: 17px;
    margin-bottom: 14px;
  }

  /* 价格区域 480px 适配 */
  .teacher-profile-card .profile-price-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  
  .teacher-profile-card .profile-price-section .Volume {
    padding: 12px 4px !important;
    border-radius: var(--th-radius-inner, 10px) !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow {
    padding: 0 4px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceLabel {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .LineThrough {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .Number {
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  .teacher-profile-card .profile-info-row {
    border-radius: 0;
  }
  
  .teacher-profile-card .profile-label {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
  }

  .teacher-profile-card .profile-value {
    font-size: 13px;
    font-weight: 400;
    color: #888888;
  }

  .teacher-profile-card .profile-tags {
    max-width: 55%;
    gap: 5px;
  }

  .teacher-profile-card .profile-tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--tag-chip-radius, 6px);
  }
  
  .teacher-profile-card .see-more-btn {
    font-size: 11px;
  }
  
  .teacher-profile-card .teacher-intro-content p {
    font-size: 12px;
    line-height: 1.6;
  }
  
  /* 三列数据统计 480px 适配 */
  .teacher-stats-grid {
    margin: 8px 0 8px 0;
  }
  
  .teacher-stats-grid .stat-column {
    padding: 8px 4px;
  }

  .teacher-stats-grid .stat-number {
    font-size: 13px;
    font-weight: 700;
  }

  .teacher-stats-grid .stat-label {
    font-size: 13px;
    font-weight: 400;
    color: #999999;
  }

  /* 价格区域更紧凑 */
  .TeacherData {
    margin-bottom: 6px;
  }
  
  .Volume {
    padding: 1px 6px;
    border-radius: 10px;
  }
  
  .Volume li {
    margin: 8px 3px;
    line-height: 22px;
  }
  
  .Volume span.Number {
    font-size: 13px;
  }
  
  .Volume .PriceLabel {
    font-size: 11px;
  }
  
  .fenjiexian {
    height: 40px;
  }
  
  /* 交易数据 */
  .teacher-trade-stats {
    font-size: 10px;
    gap: 5px;
    padding: 6px 0;
  }
  
  .teacher-trade-stats.price-stats {
    margin-bottom: 6px;
  }
  
  .trade-stat-label {
    font-size: 10px;
  }
  
  .trade-stat-value {
    font-size: 11px;
  }
  
  /* 播放器区域 */
  .ReadMe {
    margin-top: 10px;
  }
  
  div#waveformx {
    min-height: 42px;
  }
  
  /* 播放按钮 */
  #waveformx #waveform-jieshao.controls {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-play {
    border-width: 7px 0 7px 11px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause {
    width: 12px !important;
    height: 14px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause::before,
  #waveformx #waveform-jieshao.controls .glyphicon-pause::after {
    width: 3.5px !important;
    height: 14px !important;
  }
  
  /* 480px小屏按钮统一样式 */
  .TeacherBanner .BtnBar a.Btn01,
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites,
  .TeacherBanner .BtnBar a.Btn01-inline,
  .TeacherBanner .BtnBar a.Btn02-inline {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 9px 15px !important;
    min-height: auto !important;
    font-size: 13px !important;
    border-radius: var(--th-radius-btn, 6px) !important;
  }
  
  .TeacherBanner .BtnBar {
    gap: 8px !important;
    
  }
  
  .TeacherBanner .BtnBar a.Btn01 {
    margin: 0 !important;
  }
  
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites {
    margin: 0 !important;
  }
}

/* ===== 超小屏幕优化 (<=375px) ===== */
@media (max-width: 375px) {
  /* 外层无内边距 */
  .TeacherBanner {
    padding: 0;
    border-radius: 0;
  }

  .TeacherBanner-left {
    padding: 14px 12px 16px;
    border-radius: var(--th-radius-card, 12px);
  }
  
  /* 主头像：与 --teacher-avatar-size 一致 */
  .TeacherBanner .HeadImg {
    width: var(--teacher-avatar-size, 72px) !important;
    height: var(--teacher-avatar-size, 72px) !important;
    min-width: var(--teacher-avatar-size, 72px) !important;
    min-height: var(--teacher-avatar-size, 72px) !important;
    box-shadow: var(--teacher-avatar-shadow, 0 2px 10px 0 rgba(0, 0, 0, 0.1)) !important;
  }
  
  .teacher-header-row {
    gap: 8px;
    margin-bottom: 8px;
    padding-left: 36px;
    padding-right: 36px;
  }

  .teacher-name-info {
    padding-right: 0;
  }
  
  /* 极窄屏：--tvc-display-size 在 max-width:380px 已为 17px */

  .teacher-name-info .Name .TeacherLevel {
    transform: scale(0.75);
  }

  /* 名字下方元数据行 */
  .teacher-info-line-header {
    font-size: 13px;
    margin-top: 2px;
  }

  .teacher-info-line-header .tag-separator {
    margin: 0 5px;
  }
  
  /* 标签卡片内作品数/粉丝数（新布局） */
  .teacher-tags-card .teacher-stats-line {
    font-size: 10px;
    gap: 4px;
    margin-bottom: 5px;
  }
  
  .teacher-tags-card .teacher-stats-line .stat-item {
    font-size: 10px;
  }
  
  /* 分享按钮 */
  .teacher-share-btn {
    width: 26px;
    height: 26px;
    top: -4px;
    right: 0;
  }
  
  .teacher-share-btn svg {
    width: 13px;
    height: 13px;
  }
  
  /* 标签 */
  .teacher-tags-card .tag-item,
  .teacher-tags-card .tag-label,
  .teacher-tags-card .tag-separator {
    font-size: 10px;
  }
  
  .teacher-tags-card .see-more-btn {
    font-size: 10px;
  }
  
  .teacher-tags-card .teacher-intro-content p {
    font-size: 10px;
  }
  
  /* 资料卡片 375px 适配 */
  .teacher-profile-card {
    padding: 14px;
    margin-top: 8px;
    border-radius: var(--th-radius-panel, 12px);
  }
  
  .teacher-profile-card .profile-card-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* 价格区域 375px 适配 */
  .teacher-profile-card .profile-price-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  
  .teacher-profile-card .profile-price-section .Volume {
    padding: 10px 2px !important;
    border-radius: var(--th-radius-inner, 10px) !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow {
    padding: 0 2px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceLabel {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .LineThrough {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  
  .teacher-profile-card .profile-price-section .Volume li.PriceRow .PriceValue .Number {
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  .teacher-profile-card .profile-info-row {
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 0;
  }
  
  .teacher-profile-card .profile-label {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
  }

  .teacher-profile-card .profile-value {
    font-size: 12px;
    font-weight: 400;
    color: #888888;
  }

  .teacher-profile-card .profile-tags {
    max-width: 50%;
    gap: 4px;
  }

  .teacher-profile-card .profile-tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--tag-chip-radius, 6px);
  }
  
  .teacher-profile-card .see-more-btn {
    font-size: 10px;
  }
  
  .teacher-profile-card .teacher-intro-content p {
    font-size: 11px;
  }
  
  /* 三列数据统计 375px 适配 */
  .teacher-stats-grid {
    margin: 6px 0 6px 0;
  }
  
  .teacher-stats-grid .stat-column {
    padding: 6px 4px;
  }

  .teacher-stats-grid .stat-number {
    font-size: 13px;
    font-weight: 700;
  }

  .teacher-stats-grid .stat-label {
    font-size: 13px;
    font-weight: 400;
    color: #999999;
  }

  /* 价格 */
  .Volume span.Number {
    font-size: 12px;
  }
  
  .Volume .PriceLabel {
    font-size: 10px;
  }
  
  .fenjiexian {
    height: 35px;
  }
  
  /* 交易数据 */
  .trade-stat-label {
    font-size: 9px;
  }
  
  .trade-stat-value {
    font-size: 10px;
  }
  
  /* 播放按钮 */
  #waveformx #waveform-jieshao.controls {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-play {
    border-width: 6px 0 6px 10px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause {
    width: 10px !important;
    height: 12px !important;
  }
  
  #waveformx #waveform-jieshao.controls .glyphicon-pause::before,
  #waveformx #waveform-jieshao.controls .glyphicon-pause::after {
    width: 3px !important;
    height: 12px !important;
  }
  
  /* 按钮 */
  .TeacherBanner .BtnBar a.Btn01,
  .TeacherBanner .BtnBar a.Btn02,
  .TeacherBanner .BtnBar a.Btn02.collection_teacher,
  .TeacherBanner .BtnBar a.Btn02.cancel_collection,
  .TeacherBanner .BtnBar a.Btn02.Favorites,
  .TeacherBanner .BtnBar a.Btn01-inline,
  .TeacherBanner .BtnBar a.Btn02-inline {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 9px 15px !important;
    min-height: auto !important;
    font-size: 12px !important;
    border-radius: var(--th-radius-btn, 6px) !important;
  }
  
  .TeacherBanner .BtnBar {
    gap: 6px !important;
  }
}

/* 深色模式：dark-mode-unified.css（TeacherHome 迁入） */

/* ========================================
   分享弹窗样式已移至组件CSS
   css/web/components/card_actions.css
   包含: 分享弹窗、移动端提示、深色模式、响应式适配
   ======================================== */

/* ==============================================
   按钮样式 - 胶囊按钮
   ============================================== */

/* 按钮容器布局 */
.BtnBar {
  display: flex;
  gap: 12px;
  justify-content: center;  /* 居中对齐 */
  align-items: center;
  margin-top: 20px;
  width: 100%;
}

/* 胶囊按钮样式 */
/* 去配音按钮 - 主要按钮样式 */
.Btn01-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 24px;
  background: rgb(254 140 24);
  border: 1px solid #0a0a0a;
  border-radius: 25px;
  color: #0a0909;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none; /* 简洁设计 */
  min-height: 40px;
  flex: 1;
}

.Btn01-inline:hover {
  background: #FB8C00 !important;
  border-color: #FB8C00 !important;
}

.Btn01-inline:active {
  /* 简洁设计 */
}

/* 关注按钮 - 次要按钮样式 */
.Btn02-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 24px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none; /* 简洁设计 */
  min-height: 40px;
  flex: 1;
}

.Btn02-inline:hover {
  background: #FB8C00 !important;
  border-color: #FB8C00 !important;
}

.Btn02-inline:active {
  /* 简洁设计 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .TeacherBanner .BtnBar,
  .BtnBar {
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  
  /* 移动端：交易数据样式调整 */
  .teacher-trade-stats {
    font-size: 11px;
    gap: 6px;
  }
  
  .trade-stat-label {
    font-size: 11px;
  }
  
  .trade-stat-value {
    font-size: 12px;
  }
  
  /* 移动端：作品数和粉丝数 */
  .teacher-name-info .teacher-stats-line {
    font-size: 12px;
    gap: 6px;
  }
  
  /* 移动端：交易数据在价格表上方 */
  .teacher-trade-stats.price-stats {
    padding: 8px 0;
  }
  
  /* 移动端：分享按钮调整 */
  .teacher-share-btn {
    width: 32px;
    height: 32px;
    top: -2px;
    right: -2px;
  }
  
  .teacher-share-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* 移动端：播放次数调整 */
  .sample-play-count {
    font-size: 11px;
  }
  
  .sample-play-count svg {
    width: 12px;
    height: 12px;
  }
  
  .sample-style {
    gap: 6px;
  }
  
  .TeacherBanner .BtnBar .Btn01-inline,
  .TeacherBanner .BtnBar .Btn02-inline {
    padding: 9px 15px !important;
    font-size: 14px;
    border-radius: var(--th-radius-btn, 6px) !important;
  }
}

@media (max-width: 480px) {
  .TeacherBanner .BtnBar,
  .BtnBar {
    justify-content: center !important;
    gap: 8px !important;
  }

  .TeacherBanner .BtnBar .Btn01-inline,
  .TeacherBanner .BtnBar .Btn02-inline {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px 15px !important;
    font-size: 14px;
    border-radius: var(--th-radius-btn, 6px) !important;
  }
}

/* ⚠️ 867px的样音列表样式已合并到行4100的@media (max-width: 867px)块中 */

/* ===== 1024px以下屏幕样式 ===== */
@media (max-width: 1024px) {
    .samples-grid {
        width: 98%;
        padding: 0;
    }
    
     
    
    /* 列表视图在1024px以下设备全宽 */
    .samples-grid.list-view .sample-item {
        width: 100% !important;
    }
    
    /* ⚠️ 卡片视图在1177px以下才变2列（已在第1916行定义） */
    /* 1024px时已经是2列了，无需额外样式 */
}

/* ===== 布局切换移动端响应式样式 ===== */
@media (max-width: 768px) {
    /* ⚠️ 卡片视图在867px以下已经是2列（已在第5563行定义） */
    /* 768px时无需额外样式，继续使用867px的2列布局 */
    
    .samples-grid.card-view .sample-item .sample-title {
        font-size: 14px !important;
    }
    
    .samples-grid.card-view .sample-item .sample-style {
        font-size: 12px !important;
    }
    
    .samples-grid.card-view .sample-item {
        --player-box-width: 100%;
    }
    
    .samples-grid.card-view .sample-item .sample-actions {
        gap: 12px !important;
        
    }
    
    .samples-grid.card-view .sample-item .action-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .samples-grid.card-view .sample-item .action-icon svg {
        width: 19px !important;
        height: 19px !important;
    }
    
    /* ⚠️ 列表视图在977px以下已经是双行布局（已在第1861行定义） */
    /* 768px时继续使用977px的双行布局，无需额外样式 */
    
    /* 旧的列表视图代码（sample-info-container2、sample-avatar-container、waveform-container等）已全部删除 */
}

@media (max-width: 600px) {
    /* 卡片视图在小屏幕（600px以下）单列布局（已在第1917行定义） */
    /* 480px时继续使用600px的单列布局，无需额外样式 */
    
    /* ⚠️ 所有旧结构代码（sample-controls-row、sample-info-container2、sample-avatar-container、waveform-container等）已全部删除 */
    /* 600px以下继续使用977px断点的新模块化布局，无需额外样式 */
}









/* ⚠️ 按钮样式已在行652-712定义，此处删除重复定义 */
/* ⚠️ 768px的BtnBar样式已合并到行5303的@media (max-width: 768px)块中 */
/* ⚠️ 480px的BtnBar样式已合并到行5360的@media (max-width: 480px)块中 */

/* ========================================
   ✅ 统一播放器组件适配（老师主页）
   ======================================== */

/* 样音列表播放器适配 - 只在老师主页生效 */
.TeacherHome .sample-item .module-player {
  /* display 和 flex 属性已在列表/卡片视图样式中定义，此处不重复 */
}

.TeacherHome .sample-item .module-player .unified-player-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.TeacherHome .sample-item .module-player .unified-player-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 确保播放按钮和波形正确排列 */
.TeacherHome .sample-item .module-player .unified-player-button {
  flex-shrink: 0;
}

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

/* 卡片悬停上浮：尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  #samples-container.list-view .sample-item:hover,
  .samples-grid.list-view .sample-item:hover,
  #samples-container.card-view .sample-item:hover,
  .samples-grid.card-view .sample-item:hover {
    transform: none !important;
  }
}

/* ===== 暗黑模式：列表 strip 布局（边框/隔断条颜色由 sound-card-config-css 控制）===== */
body.dark-mode #samples-container {
    --sound-list-hover-bg: rgba(255, 255, 255, 0.06);
}

body.dark-mode #samples-container.list-view .sample-item,
body.dark-mode .samples-grid.list-view .sample-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.dark-mode #samples-container.list-view .sample-item:hover,
body.dark-mode .samples-grid.list-view .sample-item:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.dark-mode #samples-container.list-view .sample-item:hover::before,
body.dark-mode .samples-grid.list-view .sample-item:hover::before {
    background: var(--sound-list-hover-bg, rgba(255, 255, 255, 0.06));
}

/* ========================================
   老师主页：资料卡 / 头像叠在 Hero 渐变背景上
   头像一半露出白卡上沿（--teacher-avatar-overhang = 头像高度 / 2）
   ======================================== */
body.teacher-home-page .TeacherHome {
  --teacher-avatar-overhang: calc(var(--teacher-avatar-size, 72px) / 2);
  /* 白卡顶内边距：容纳头像下半 + 与姓名区间距 */
  --teacher-home-card-header-pad: calc(var(--teacher-avatar-overhang) + 10px);
  --teacher-home-overlap: calc(var(--teacher-avatar-overhang) + 34px);
  padding-top: 0;
  position: relative;
}

body.teacher-home-page .teacher-scroll-header {
  z-index: 1010;
}

body.teacher-home-page .TeacherHome-left-column {
  z-index: 2;
}

/* ⚡ sticky 需祖先 overflow 可见，避免个别断点 Content 被 hidden 导致左栏随页滚动 */
body.teacher-home-page .Whole,
body.teacher-home-page .Content:has(.TeacherHome) {
  overflow: visible !important;
}

@media (min-width: 769px) {
  /* 桌面端：左栏与右侧 filter-horizontal 顶对齐，不再上浮叠 Hero */
  body.teacher-home-page .TeacherHome-left-column {
    margin-top: 0 !important;
  }

  body.teacher-home-page .TeacherHome-flex-container {
    align-items: flex-start;
  }

  /* 桌面端左栏由 teacher_home.js 固定（CSS sticky 在 hero/overflow 祖先下不可靠） */
  body.teacher-home-page.teacher-sidebar-js-active .TeacherHome-left-column.teacher-sidebar-pinned {
    position: fixed !important;
    z-index: 10;
    align-self: flex-start;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.teacher-home-page.teacher-sidebar-js-active .TeacherHome-left-column-placeholder {
    flex-shrink: 0;
    width: 26%;
    min-width: 320px;
    box-sizing: border-box;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    /* min-height 由 JS 同步侧栏内容高度，避免右侧样音少时 flex 过矮 */
  }

  /* 桌面端：头像留在白卡内，仅卡片整体上移叠 Hero */
  body.teacher-home-page .TeacherBanner-left {
    padding-top: 12px;
  }

  body.teacher-home-page .teacher-header-row .HeadImgs {
    margin-top: 0;
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 768px) {
  body.teacher-home-page .TeacherHome {
    --teacher-home-overlap: calc(var(--teacher-avatar-overhang) + 28px);
    --teacher-home-card-header-pad: calc(var(--teacher-avatar-overhang) + 8px);
  }

  body.teacher-home-page .TeacherHome-left-column {
    margin-top: calc(-1 * var(--teacher-home-overlap));
  }

  body.teacher-home-page .TeacherBanner-left {
    padding-top: var(--teacher-home-card-header-pad);
  }

  body.teacher-home-page .teacher-header-row .HeadImgs {
    margin-top: calc(-1 * var(--teacher-avatar-overhang) - var(--teacher-home-card-header-pad));
    position: relative;
    z-index: 3;
  }

  body.teacher-home-page .teacher-header-row {
    margin-bottom: 8px;
  }

  /* 叠在 Hero 上的头像：白边切轮廓 + 轻阴影增层次（二者配合，单用其一效果偏弱） */
  body.teacher-home-page .TeacherBanner .HeadImg {
    border: 3px solid #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12) !important;
  }
}

@media (max-width: 480px) {
  body.teacher-home-page .TeacherHome {
    --teacher-home-overlap: calc(var(--teacher-avatar-overhang) + 18px);
    --teacher-home-card-header-pad: calc(var(--teacher-avatar-overhang) + 6px);
  }
}

/* 老师详情页：内容与固定页脚间距（侧栏 sticky / 加载更多不与底部版权重叠） */
body.teacher-home-page > .Whole,
body.teacher-home-page .Whole {
  padding-bottom: calc(var(--content-footer-gap, 20px) + 32px) !important;
}

body.teacher-home-page .TeacherHome-flex-container {
  padding-bottom: 36px;
}

body.teacher-home-page .TeacherHome-right-column .load-more-container {
  margin-bottom: calc(var(--content-footer-gap, 20px) + 12px);
}

@media (max-width: 768px) {
  body.teacher-home-page > .Whole,
  body.teacher-home-page .Whole {
    padding-bottom: calc(var(--content-footer-gap, 20px) + 28px) !important;
  }

  body.teacher-home-page .TeacherHome-flex-container {
    padding-bottom: 28px;
  }
}

/* 🎯 覆盖 design-system 全站卡片描边（须 !important；TeacherHome.css 在 design-system 之后加载） */
html:not(.dark-mode) body.teacher-home-page .TeacherHome .TeacherBanner-left,
html:not(.dark-mode) body.teacher-home-page .TeacherHome .teacher-profile-card {
  background: var(--th-panel-surface-bg, #e9eef4) !important;
  border: none !important;
  box-shadow: var(--th-panel-surface-shadow, 0 1px 3px rgba(15, 23, 42, 0.07), 0 4px 14px rgba(15, 23, 42, 0.04)) !important;
}

body.dark-mode.teacher-home-page .TeacherHome .TeacherBanner-left,
body.dark-mode.teacher-home-page .TeacherHome .teacher-profile-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}