/* 暗黑模式规则已迁入 dark-mode-unified.css（原 Master.css） */
@charset "utf-8";
/* 作者： Zhangming */
/* 时间：2014-10-28 */

/* ===== 字体定义 ===== */
/* 阿里妈妈方圆体 VF（商用见官方授权）；默认实例 Medium-Square：wght 500 + BEVL 1 */
@font-face {
    font-family: 'Alimama FangYuanTi VF';
    src: url('/fonts/AlimamaFangYuanTiVF.woff2') format('woff2'),
        url('/fonts/AlimamaFangYuanTiVF.ttf') format('truetype');
    font-weight: 200 700;
    font-style: normal;
    /* block + head 内联 @font-face 与 preload：优先等方圆体就绪再出字，减少「先回退再换成阿里妈妈」；极慢网可能在短阻塞后用回退 */
    font-display: block;
}

:root {
    --font-sans: "Alimama FangYuanTi VF", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
    /* 组件级可选用；勿在 body/全局正文上绑定，否则回退字体忽略 VF 轴、方圆体就绪后突然生效 → 全页字重/字形跳变 */
    --font-vf-medium-square: "wght" 500, "BEVL" 1;
}

/*-- 全局定义 --*/
/*--html {min-width:1200px;overflow-x:auto;}--*/
/* html 滚动条策略见 templates/china/header.html 内联 #page-flicker-fix，避免与 head 内联规则打架 */

/* 🎨 全局body样式 - 专业简约 */
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-page, #ffffff);
    position: relative;
    min-width: 360px !important;
    font-family: var(--font-sans);
    font-weight: 400;
    font-variation-settings: normal;
    font-synthesis: none;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-primary, #000000);
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

/* 🎨 全局元素重置 - 专业排版 */
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,a,span,form,img {
    margin: 0; 
    padding: 0;
    border: 0;
    font-size: 13px;
    font-family: var(--font-sans) !important;
    font-variation-settings: normal;
    font-weight: 400;
}

/* 标题字重和行高 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

div,a {
    color: var(--color-text-primary, #000000);
}

li {list-style-type:none;vertical-align:bottom;}
/* 表格元素 */
th,td {
    padding: 10px 14px;
    line-height: 1.5;
    color: var(--color-text-secondary, #404040);
    font-size: 13px;
}

th {
    font-weight: 600;
    color: var(--color-text-primary, #000000);
}


/* 图片 */
img {
    vertical-align: top;
    max-width: 100%;
}

/* 表单元素 - 专业样式 */
input,textarea,select {
    margin: 0;
    padding: 8px 12px;
    outline: none;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-sans) !important;
    font-variation-settings: normal;
    border: 1px solid var(--color-border, #e7e5e4);
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-text-primary, #000000);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary, #0f766e);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}


/* 链接 */
a {
    text-decoration: none;
    color: var(--color-text-primary, #000000);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-text-secondary, #404040);
}



.demand_order_Banner {
   height: 75px;
    margin: 0 auto;
}
.AdBar.M_B2 {
   margin: 69px 0 0 1px;
    padding-left: 0px;
    overflow: hidden;
    background: black;
    width: 100%;
    height: 168px;
    background: url(/images/web/Ad04.jpg);
   
}	
.HeadImgs.\-.beijing{
    position: absolute;
    width: 58px;
    height: 58px;
    border: 2px solid rgb(255, 255, 255);
    top: 11px;
    left: 14px;
    border-radius: 16%;
    background-size: cover!important;
    background-color: #15121242!important;
}	

.Whole {
    width: 100%;
    max-width: 100%;
}
.Content {
	max-width: 1300px;
    width: 100%;
    overflow: visible; /* 🔧 修复：改为 visible，确保筛选下拉菜单可以超出容器显示 */
    margin: 0px auto;
    /* margin-top 由 global-nav-spacing.css 统一管理；底部间距由 footer.css .Whole 统一 */
}
.Content1 {
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
    margin: 0px auto;
    height: 166px;
    padding-top: 20px;
    margin-top: 46px;
    border-radius: 0;
    background: white;
    display: none;
}

/* 屏幕小于1250px时，内容区域保持至少20px边距 */
@media screen and (max-width: 1350px) {
    .Content {
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .Content1 {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

@media screen and (max-width:960px){
	
	.AdBar.M_B3 {
    text-align: center;
    display: none!important;
}

.Content {
	width:  100%!important;
    overflow: visible !important; /* 🔧 修复：改为 visible，确保筛选下拉菜单可以超出容器显示 */
    margin: 0px auto;
    /* margin-top 由 global-nav-spacing.css 统一管理 */
    padding: 8px 20px 0 20px !important; /* 上边距8px，左右20px */
    box-sizing: border-box;
}

.SoundsList .Sound {
    float: left;
    width: 95%!important;
    padding: 36px 5px 0px 5px;
    background: #ffffff;
    margin: 22px 12px 8px 0px;
    box-shadow: hsl(0, 0%, 80%) 0 0 16px;
}
}

/* 手机端全局样式优化 - 充满屏幕 */
@media screen and (max-width: 768px){
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .Content {
        padding: 8px 20px 0 20px !important; /* 上边距8px，左右20px */
        margin: 0 auto !important;
        /* margin-top 由 global-nav-spacing.css 统一管理 */
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .Whole {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 480px){
    .Content {
        padding: 0 18px !important;
    }
    
    .Whole {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}



.BgFFF {background:#FFF;}

.Column_1-4 {width:290px;}
.Column_2-4 {width:590px;}
.Column_3-4 {width:900px;}
.Column_4-4 {width:1200px;}
.Column_1-3 {width:390px;}
.Column_2-3 {width:800px;}

.F_R {
	    float: right;
    margin: -5px auto;
    margin-right: 9px;
    /*background: url(/images/icon_phone.png) no-repeat 0 0;*/
    background-position: 84px 9px;
    position: relative;
}
.F_L {
	    float: left;
    margin: -5px auto;
    margin-left: 5px;
    color: #FFF;
    font-size: 12px;
}
.F_C {
    clear: both;
    float: none;
    
}

.M_L {margin-left:10px;}
.M_R {margin-right:10px;}
.M_T {margin-top:10px;}
.M_B {margin-bottom:10px;}

.Orange {color:#b45309;}
.Red {color:#b91c1c;}
.Blue {color:#1d4ed8;}
.Green {color: #0f766e;}
.gray {color:#8a8a8e;}
.Bold {font-weight:bold;}
.Size24 {font-size:24px;}

/* 旧版导航栏 - 隐藏不再使用的元素 */
.HeadAdBar,
.SubNavLine,
.SubNav,
.SubDivide {
    display: none !important;
}
/*-- BreadCrumb --*/
.BreadCrumb {clear:both;height:30px; padding-top:10px; margin-bottom:10px; line-height:30px;}
.BreadCrumb a {}
.TeacherLevel {
	width: 0px;
    height: 30px;
    background: url(../../images/web/Level.png) no-repeat center left;
    display: none;
}
.TeacherLevel.Level_1 {width:34px;}
.TeacherLevel.Level_2 {width:66px;}
.TeacherLevel.Level_3 {width:98px;}
.TeacherLevel.Level_4 {width:130px;}
.TeacherLevel.Level_5 {width:164px;}
/*-- BreadCrumb End --*/
/*-- Help Start --*/
.Help {
	/* background: url(../../images/web/Foot_Bg.gif) repeat; */
    /* padding-top: 100px; */
    /* background-position: 196px -307px; */
    margin-top: 15px;
    /* border-radius: 0; */
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.Help .HelpList {
	float: left;
    width: auto;
    height: 135px;
    border-right: 1px solid #D7D7D7;
    margin-top: 17px;
}
.Help .HelpList dl {
	float: left;
    width: 164px;
    height: 80px;
    margin-right: 30px;
    border-left: 0px solid #D7D7D7;
}
.Help .HelpList dt {
	padding-left: 13px;
    line-height: 30px;
}
.Help .HelpList dt a {
	font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #000000);
    margin-left: 7px;
    border-bottom: none;
}
.Help .HelpList dd {padding-left:20px; line-height:22px;}
.Help .HelpList dd li {
	float: left;
    width: 120px;
    line-height: 1.8;
}
.Help .HelpList dd a {
	font-size: 13px;
    color: #8a8a8e;
}
.Help .HelpList dd a:hover {text-decoration:underline;}
/*-- Help End --*/
/*-- QRCode Start --*/
.QRCod {
	    float: right;
    width: 280px;
    height: 50px;
    margin: 28px 0 0 0;
}
.QRCod dl {float:left; width:100px; height:150px; margin-left:35px;}
.QRCod dt {
	text-align: center;
    line-height: 22px;
    color: white;
}
.QRCod dd {}
/*-- QRCode End --*/

/*-- Foot Start --*/
.Foot {
    margin-top: 0px;
}
.Foot dt {
	height: 1px;
    background: #e5e5e7;
    line-height: 26px;
    text-align: center;
    color: #8a8a8e;
}
.Foot dt a {
	margin: 2px 5px;
    color: #8a8a8e;
}
.Foot dd {
	padding-top: 6px;
    line-height: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    background: #fafafa;
    color: #8a8a8e;
    border-top: 1px solid #f0f0f2;
}

.Foot dd a,
.Foot dd a.copyright-link {
    font-weight: 400;
    color: #8a8a8e;
    transition: color 0.2s ease;
}

.Foot dd a:hover,
.Foot dd a.copyright-link:hover {
    color: #0f766e;
}



/*-- Foot End --*/

/*-- RightMenu Start --*/
#RightSide {
	position: fixed;
    right: 0px;
    bottom: 0px;
    width: 2px;
    height: 100%;
    background: #666666;
    z-index: 99999;
    color: #FFF;
}
#RightSide .RightMenu {position: absolute; top:15%; right:0px;}
#RightSide .RightMenu h1 {position:absolute; right:0px; width:32px; height:110px; padding:2px;}
#RightSide .RightMenu dt {position:absolute; right:0px; width:32px; height:32px; padding:2px;}
#RightSide .RightMenu dt:hover {background:#E10F00;}
#RightSide .RightMenu dd {position:absolute;right:36px;display:none; padding-bottom:10px;border-radius:5px 0px 0px 5px;  border:1px solid #FFF; border-right:none; overflow:hidden; background:#0f766e ;}
#RightSide .RightMenu dd h2 {height:29px; margin:5px 10px 0px 10px; border-bottom:1px solid #FF693E; line-height:28px; font-size:16px;color:#FFF;}
#RightSide .RightMenu dd li {height:29px; margin:0px 10px; border-bottom:1px solid #FF693E; line-height:28px; color:#FFF;}
#RightSide .RightMenu dd li a {color:#FFF;}
#RightSide .RightMenu dd li a:hover {text-decoration:underline;}
#RightSide #gotop {position:absolute; bottom:0px; right:0px;width:32px; height:32px;padding:2px; background:#000;}
#RightSide #gotop:hover {background:#E10F00;}
/*-- RightMenu End --*/

/*-- 屏幕小于960px时执行以下样式 --*/
@media(max-width:960px){
.F_R {
    float: right;
    margin: -5px auto;
    margin-right: 9px;
    /* background: url(/images/icon_phone.png) no-repeat 0 0!important; */
    background-position: 84px 9px;
    position: relative;
}

}

/* 统一所有按钮和链接字体 */
button, .btn, input[type="button"], input[type="submit"], a {
    font-family: var(--font-sans) !important;
    font-variation-settings: normal;
}

/* 按钮基础样式提升 */
button, .btn, input[type="button"], input[type="submit"] {
    font-weight: 500;
    cursor: pointer;
}

/* ============================================
   全局占位符样式 - 防止布局跳动 (CLS)
   ============================================ */
 

/* 头像占位 - 固定尺寸 */
img.HeadImg,
.sample-avatar,
.teacher-avatar,
.info-avatar img,
.HeadImgs img {
    min-width: 40px;
    min-height: 40px;
    background-color: #f3f4f6; /* 🎯 统一头像背景色 */
    object-fit: cover;
}

/* 波形播放器占位 - 固定高度 */
.waveform,
[id^="waveform"] {
    min-height: 40px;
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* 样音卡片占位 - 最小高度 */
.sample-item,
.voice-card,
.sound-card {
    min-height: 80px;
}

/* 老师卡片占位 */
.teacher-card,
.TeacherBanner {
    min-height: 100px;
}

/* 按钮占位 - 固定尺寸 */
.action-btn,
.action-icon,
.btn-play,
.controls .btn-primary {
    min-width: 36px;
    min-height: 36px;
}

/* 筛选栏占位 */
.filter-bar,
.filter-container,
.horizontal-filter {
    min-height: 44px;
}

/* 内容区域最小高度 */
.Content,
.main-content {
    min-height: 200px;
}

/* ============================================
   全局骨架屏 (Skeleton Loading) - 筛选切换即时反馈
   ============================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* 所有骨架占位块的通用样式 */
.skeleton-block {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    flex-shrink: 0;
}


/* ---- 样音卡片骨架 (.sample-item-skeleton) ---- */
.sample-item-skeleton {
    background: var(--card-surface-panel, #ffffff);
    border: none;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    box-shadow: var(--card-shadow-rest,
        0 1px 2px rgba(28, 25, 23, 0.04),
        0 4px 12px rgba(28, 25, 23, 0.055));
}


.skeleton-module-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.skeleton-title  { height: 14px; width: 60%; }
.skeleton-subtitle { height: 12px; width: 40%; }
.skeleton-player { height: 48px; border-radius: 8px; margin-bottom: 10px; }
.skeleton-actions { height: 32px; width: 55%; border-radius: 6px; }

/* grid 布局下样音骨架卡片自动填充 */
#sound_list:not(.card-view):not(.list-view) .sample-item-skeleton {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 骨架屏替换为真实内容时的淡入效果 */
@keyframes skeleton-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.skeleton-content-ready {
    animation: skeleton-fade-in 0.2s ease-out forwards;
}

/* ---- 教师卡片骨架 (.teacher-item-skeleton) ---- */
.teacher-item-skeleton {
    background: #ffffff;
    border: 1px solid var(--card-border, #d4d4d8);
    border-radius: 12px;
    padding: 24px 20px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}


.skeleton-teacher-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-teacher-name   { height: 14px; width: 70px; }
.skeleton-teacher-info   { height: 12px; width: 110px; }
.skeleton-teacher-player { height: 44px; width: 100%; border-radius: 8px; }
.skeleton-teacher-actions { height: 30px; width: 80%; border-radius: 6px; }

/* ============================================
   全局入场动画系统
   ============================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes expandWidth {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(15, 118, 110, 0); }
}

/* 滚动入场 - 初始隐藏 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 交错延迟（用于列表/网格子元素） */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* 尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}