/* 全局样式 */
html {
    /* 设置html高度为100%，为body的flex布局提供基础 */
    height: 100%;
}

body {
    font-family: 'Georgia', serif;
    /* 调整背景色为更柔和的浅灰色，增强与其他元素的协调性 */
    background-color: #f5f7fa;
    color: #495057;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="50" y="50" font-size="40" text-anchor="middle" dy=".3em" fill="%23e0e6ed" opacity="0.4">♪</text></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><path d="M0 20 L200 20 M0 40 L200 40 M0 60 L200 60 M0 80 L200 80" stroke="rgba(102,126,234,0.04)" stroke-width="1"/></svg>');
    background-repeat: repeat, repeat;
    background-size: 200px, 250px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* 设置body为flex容器，实现粘性footer */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* 导航栏样式 */
.navbar-custom {
    /* 支持自定义背景图片，用户可将图片命名为navbar_bg.jpg放入static/images文件夹 */
    background-image: url('../images/navbar_bg.jpg');
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    /* 增加背景色透明度，提高文字可读性 */
    background-color: rgba(255, 255, 255, 0.7);
    /* 保持叠加混合模式，但增加背景色影响，提高对比度 */
    background-blend-mode: overlay;
    /* 保持轻微模糊效果，柔和背景 */
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    border-bottom: 3px solid rgba(255, 255, 255, 0.5);
    padding: 1rem 0;
    transition: all 0.3s ease;
    /* 确保背景图片可以调整展示区域 */
    background-attachment: scroll;
}

.navbar-container {
    max-width: 100%;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 2rem;
    font-weight: bold;
    color: #495057 !important;
    padding: 0.5rem 0;
    position: relative;
    z-index: 1;
    /* 调整品牌位置，不那么靠左 */
    margin-left: 3rem;
    /* 移除浮动效果，保持原有样式 */
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    /* 移除flex布局，保持以前的效果 */
    display: inline-block;
    /* 添加文字轻微发光效果，温润的颜色 */
    text-shadow: 0 0 5px rgba(255, 200, 150, 0.6);
}

.navbar-brand::before {
    content: '𝄞'; /* 高音谱号符号 */
    position: absolute;
    left: -3rem; /* 增加与文字的距离，分开一点 */
    top: 50%;
    transform: translateY(-50%);
    color: #007bff;
    font-size: 2rem;
    opacity: 0.8;
}

.navbar-brand:hover {
    /* 移除hover效果，保持原有样式 */
    transform: none;
    box-shadow: none;
}

.navbar-nav {
    gap: 2rem;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link {
    color: #495057 !important;
    /* 稍微增大字体大小 */
    font-size: 1.3rem;
    padding: 0.8rem 1.5rem !important;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
    /* 移除椭圆背景，设置为透明 */
    background: transparent;
    /* 移除圆角，取消椭圆效果 */
    border-radius: 0;
    /* 移除阴影，让按钮更好地融入背景 */
    box-shadow: none;
    white-space: nowrap;
    /* 添加文字轻微发光效果，温润的颜色 */
    text-shadow: 0 0 5px rgba(255, 200, 150, 0.6);
}

/* 移除默认的navbar-light类样式冲突 */
.navbar-custom.navbar-light .navbar-brand,
.navbar-custom.navbar-light .nav-link {
    color: #495057 !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-link:hover, .nav-link.active {
    color: #007bff !important;
    /* 保留轻微的上移效果，增强交互感 */
    transform: translateY(-2px);
    /* 移除背景色变化，保持透明 */
    background: transparent;
    /* 移除阴影效果 */
    box-shadow: none;
}

/* 频率选择器 */
.frequency-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0.5rem 1rem;
    /* 更透明的背景，与风景图融合 */
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    /* 更柔和的边框 */
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.frequency-selector:hover {
    background-color: rgba(255,255,255,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* 简化背景装饰 */
body {
    /* 简化背景，只保留轻微的音符图案 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="50" y="50" font-size="40" text-anchor="middle" dy=".3em" fill="%23e9ecef" opacity="0.2">♪</text></svg>');
    background-repeat: repeat;
    background-size: 200px;
}

/* 简化hero-section装饰，让风景图背景完全展现 */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* 移除可能与风景图冲突的装饰元素 */
.hero-section::before,
.hero-section::after,
.hero-section .container::before,
.hero-section .container::after {
    display: none;
}

.slider {
    width: 200px;
    height: 8px;
    background: linear-gradient(to right, #007bff, #6610f2);
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 3px solid #007bff;
    transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #007bff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* 首页英雄区域 */
.hero-section {
    /* 调整padding，增加上下空间，展示更多图片内容 */
    padding: 120px 2rem 100px;
    /* 改为相对路径，用户可将图片命名为autumn_landscape.jpg放入static/images文件夹 */
    background-image: url('../images/autumn_landscape.jpg');
    /* 调整背景尺寸，宽度铺满，高度按比例自动调整，展示更多上下内容 */
    background-size: 100% auto;
    /* 居中显示图片，避免裁剪 */
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    /* 确保图片完全覆盖容器 */
    min-height: 600px;
    /* 添加渐变叠加层，增强文字可读性 */
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.3);
    /* 确保与导航栏紧密连接 */
    border-top: none;
    /* 确保与底部栏紧密连接 */
    margin-bottom: 0;
}

/* 确保main标签没有额外的margin或padding，并设置flex-grow实现粘性footer */
main {
    margin: 0;
    padding: 0;
    /* 让main标签自动扩展，将footer推到页面底部 */
    flex-grow: 1;
}

/* 确保section没有额外的margin或padding */
section {
    margin: 0;
    padding: 0;
}

/* 确保hero-section与footer之间没有任何空白 */
.hero-section {
    /* 确保背景图完全覆盖，没有任何间隙 */
    background-attachment: scroll;
    /* 确保容器内元素不会导致额外空白 */
}

/* 确保hero-section内的container不会导致额外空白 */
.hero-section .container {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 确保训练选项不会导致额外空白 */
.training-options {
    margin-bottom: 0;
    padding-bottom: 20px;
}

/* 乐器装饰 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 120px;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 C60 15, 70 25, 75 40 C80 55, 75 70, 65 80 C55 90, 45 90, 35 80 C25 70, 20 55, 25 40 C30 25, 40 15, 50 10 Z" fill="rgba(255,255,255,0.1)"/><path d="M50 20 C55 22, 60 28, 63 35 C66 42, 64 50, 58 55 C52 60, 48 60, 42 55 C36 50, 34 42, 37 35 C40 28, 45 22, 50 20 Z" fill="rgba(255,255,255,0.2)"/><path d="M50 30 C52 32, 55 36, 56 40 C57 44, 56 48, 53 50 C50 52, 47 52, 44 50 C41 48, 40 44, 41 40 C42 36, 45 32, 50 30 Z" fill="rgba(255,255,255,0.3)"/><circle cx="50" cy="40" r="5" fill="rgba(255,255,255,0.4)"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(-15deg);
    opacity: 0.6;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="30" y="20" width="40" height="60" rx="5" fill="rgba(255,255,255,0.15)"/><rect x="35" y="25" width="30" height="50" rx="3" fill="rgba(255,255,255,0.25)"/><path d="M40 30 L60 30 M40 40 L60 40 M40 50 L60 50 M40 60 L60 60 M40 70 L60 70" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><circle cx="25" cy="35" r="8" fill="rgba(255,255,255,0.3)"/><circle cx="25" cy="50" r="8" fill="rgba(255,255,255,0.3)"/><circle cx="25" cy="65" r="8" fill="rgba(255,255,255,0.3)"/><circle cx="75" cy="35" r="8" fill="rgba(255,255,255,0.3)"/><circle cx="75" cy="50" r="8" fill="rgba(255,255,255,0.3)"/><circle cx="75" cy="65" r="8" fill="rgba(255,255,255,0.3)"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(10deg);
    opacity: 0.5;
    z-index: 0;
}

.hero-section .container {
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 4rem;
    font-weight: bold;
    color: white;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* 口号轮播 */
.slogan-carousel {
    margin: 50px auto;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    /* 更透明的背景，与风景图融合 */
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(15px);
    border-radius: 50px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.slogan-carousel:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.slogan-item {
    font-size: 2rem;
    color: white;
    font-style: italic;
    font-weight: 600;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
    text-align: center;
    max-width: 90%;
    /* 更强的文字阴影，确保在风景图上可读 */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    transform: scale(0.9);
}

.slogan-item.active {
    opacity: 1;
    transform: scale(1);
}

/* 训练选项 */
.training-options {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 80px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    padding: 0 20px;
}

.training-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #343a40;
    /* 更透明的卡片背景，与风景图融合 */
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.75) 100%);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
    min-width: 250px;
    /* 更柔和的边框颜色 */
    border: 3px solid rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}

.training-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    /* 更柔和的渐变，与秋天主题匹配 */
    background: linear-gradient(90deg, rgba(231,76,60,0.8), rgba(243,156,18,0.8));
    transform: scaleX(1);
}

.training-option::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    /* 更透明的装饰图标，与风景图融合 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,0.3)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.training-option:nth-child(2)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,0.3)"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
}

.training-option:nth-child(3)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,0.3)"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
}

.training-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: #007bff;
    color: #007bff;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.9) 100%);
}

.music-symbol {
    font-size: 5rem;
    margin-bottom: 25px;
    opacity: 0.9;
    transition: all 0.3s ease;
    /* 添加音符颜色 */
    color: #007bff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.training-option:nth-child(2) .music-symbol {
    color: #6610f2;
}

.training-option:nth-child(3) .music-symbol {
    color: #28a745;
}

.training-option:hover .music-symbol {
    transform: scale(1.2) rotate(10deg);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}

.training-option h3 {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
    transition: all 0.3s ease;
    color: #495057;
}

.training-option:hover h3 {
    transform: translateY(-5px);
    color: #007bff;
}

/* 音阶练习页面 */
main {
    padding: 0;
    margin: 0;
}

section {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

section.container {
    padding: 3rem 2rem;
    background: rgba(255,255,255,0.95);
}

.scale-display {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.scale-notes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.note-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #007bff;
    background-color: #ffffff;
    color: #007bff;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.note-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,123,255,0.2), transparent);
    transition: left 0.5s ease;
}

.note-btn:hover::before {
    left: 100%;
}

.note-btn:hover {
    background-color: #007bff;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 8px 20px rgba(0,123,255,0.3);
}

/* 训练卡片 */
.training-content {
    max-width: 1200px;
    margin: 0 auto;
}

.training-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.training-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.training-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #28a745, #20c997);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.training-card:hover::before {
    transform: scaleX(1);
}

.training-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: #28a745;
    background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);
}

.training-card h4 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #495057;
    transition: color 0.3s ease;
}

.training-card:hover h4 {
    color: #28a745;
}

.training-card .btn {
    padding: 10px 30px;
    font-size: 1.1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.training-card:hover .btn {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40,167,69,0.3);
}

/* 自由训练 - 钢琴键盘 */
.free-training-content {
    max-width: 1200px;
    margin: 0 auto;
}

.piano-keyboard {
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    margin: 40px 0;
    overflow-x: auto;
    border: 3px solid #343a40;
}

.key {
    height: 250px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}

.key.white {
    width: 70px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    z-index: 1;
    color: #343a40;
    border: 1px solid #dee2e6;
}

.key.black {
    width: 45px;
    height: 150px;
    background: linear-gradient(180deg, #000000 0%, #333333 100%);
    margin: 0 -22.5px;
    z-index: 2;
    color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.key:hover, .key.active {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.key.white:hover, .key.white.active {
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
}

.key.black:hover, .key.black.active {
    background: linear-gradient(180deg, #333333 0%, #555555 100%);
}

.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.controls .btn {
    padding: 12px 35px;
    font-size: 1.1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: bold;
}

.controls .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,123,255,0.3);
}



/* 底部栏 */
.footer {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
    color: white;
    padding: 30px 0;
    /* 移除顶部margin，解决与背景图之间的空白 */
    margin-top: 0;
    border-top: 3px solid #e74c3c;
    width: 100%;
    position: relative;
    z-index: 1;
}

.footer .container {
    max-width: 100%;
    padding: 0 2rem;
}

/* 照片来源信息样式 */
.photo-credit {
    position: absolute;
    z-index: 2;
}

/* 首页背景图照片来源 - 右下角 */
.hero-photo-credit {
    bottom: 20px;
    right: 20px;
    /* 移除背景阴影色块，只显示文字 */
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-style: italic;
    /* 调整文字样式 */
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 导航栏照片来源 - 右上角 */
.navbar-photo-credit {
    top: 10px;
    right: 20px;
    /* 移除背景阴影 */
    background: transparent;
    padding: 0;
    border-radius: 0;
    /* 保持现在的文字大小，与导航栏标题文字颜色一致 */
    font-size: 0.7rem;
    color: #495057 !important;
    /* 移除文字阴影，保持与导航栏标题一致 */
    text-shadow: 0 0 5px rgba(255, 200, 150, 0.6);
}

.footer p {
    margin: 0;
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.6rem;
    }
}

@media (max-width: 992px) {
    .navbar-nav {
        gap: 1rem;
    }
    
    .frequency-selector {
        gap: 10px;
        padding: 0.3rem 0.8rem;
    }
    
    .slider {
        width: 180px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .slogan-item {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .navbar .container {
        padding: 0 1rem;
    }
    
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .frequency-selector {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
        order: 3;
    }
    
    .slider {
        width: 150px;
    }
    
    .hero-section {
        padding: 120px 1rem 100px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .slogan-carousel {
        margin: 40px auto;
        padding: 15px;
        height: 80px;
    }
    
    .slogan-item {
        font-size: 1.5rem;
    }
    
    .training-options {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-top: 60px;
    }
    
    .training-option {
        min-width: 280px;
    }
    
    section.container {
        padding: 2rem 1rem;
    }
    
    .scale-display {
        padding: 30px 20px;
    }
    
    .scale-notes {
        gap: 15px;
        margin: 30px 0;
    }
    
    .note-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .piano-keyboard {
        padding: 20px 10px;
    }
    
    .key {
        height: 200px;
    }
    
    .key.white {
        width: 60px;
    }
    
    .key.black {
        width: 35px;
        height: 120px;
        margin: 0 -17.5px;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.3rem;
    }
    
    .slider {
        width: 120px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .slogan-carousel {
        height: 70px;
    }
    
    .slogan-item {
        font-size: 1.3rem;
    }
    
    .training-option {
        min-width: 250px;
        padding: 30px 20px;
    }
    
    .music-symbol {
        font-size: 4rem;
    }
    
    .training-option h3 {
        font-size: 1.2rem;
    }
    
    .scale-notes {
        gap: 10px;
    }
    
    .note-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .key {
        height: 180px;
    }
    
    .key.white {
        width: 50px;
    }
    
    .key.black {
        width: 30px;
        height: 100px;
        margin: 0 -15px;
    }
}