:root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --accent-color: #4a90e2;
    --btn-bg: #1e1e1e;
    --btn-active: #2a2a2a;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* 重点：移除之前的 justify-content 整体居中 */
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* 保持 body 锁定，防止整个网页像橡皮筋一样被拉动 */
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    height: 100%; /* 占满整个屏幕高度 */
    margin: 0 auto;
    padding: 60px 20px 40px; /* 顶部、左右、底部的安全距离 */
}

/* 列表容器样式：独立竖向滚动 */
.track-selector {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 320px;
    flex: 1; /* 重点1：占据页面所有的剩余高度 */
    overflow-y: auto; /* 重点2：内容过多时，允许内部上下滚动 */
    padding: 20px 0;
    
    /* 隐藏滚动条让界面更干净 */
    scrollbar-width: none; 
    
    /* 重点3：高级UI细节 - 列表顶部和底部会有视觉渐隐遮罩，音乐多的时候滑动更好看 */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}
.track-selector::-webkit-scrollbar {
    display: none;
}

/* 轨道卡片：采用 Flex 布局让文字在左，红心在右 */
.track-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 24px; /* 微调内边距，给图标留空间 */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(30, 30, 30, 0.8);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.track-btn.active {
    background: rgba(74, 144, 226, 0.15);
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.15);
}

/* --- 收藏按钮样式 --- */
.fav-btn {
    background: transparent;
    border: none;
    color: inherit;
    width: 32px;
    height: 32px;
    padding: 4px;
    cursor: pointer;
    opacity: 0.3; /* 未收藏时很低调，不抢主标题视觉 */
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.fav-btn svg {
    width: 100%;
    height: 100%;
}

/* 悬停或处于激活卡片内时，图标稍微亮一点 */
.track-btn:hover .fav-btn,
.track-btn.active .fav-btn {
    opacity: 0.6;
}

/* 点击时的缩放动效 */
.fav-btn:active {
    transform: scale(0.8);
}

/* 已收藏状态：完全不透明且变为强调色 */
.fav-btn.is-fav {
    opacity: 1 !important;
    color: #ff6b81; /* 柔和的珊瑚粉色，适合深色模式的红心 */
}

/* --- 下方为播放按钮区，添加 flex-shrink 防止被列表挤没 --- */
.play-btn {
    flex-shrink: 0; /* 重点：就算列表再长，也绝不能压缩/隐藏播放按钮 */
    margin-top: 20px; /* 强制与滚动的列表拉开距离 */
    
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    background: var(--btn-bg);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.5s ease;
    outline: none;
}


.play-btn svg { width: 40px; height: 40px; }
.play-btn:active { transform: scale(0.95); }

.is-playing .play-btn {
    animation: breathe 4s infinite alternate ease-in-out;
}

@keyframes breathe {
    0% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.2); }
    100% { box-shadow: 0 0 50px rgba(74, 144, 226, 0.6); }
}

.status-text {
    flex-shrink: 0; /* 重点：防止文字被压缩 */
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 2px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.is-playing .status-text { opacity: 0.2; }