/* --- CSS 样式部分 --- */

        /* 1. 全局设置：去除默认边距，设置字体 , 通过这样的方式,可以实现网页的全局覆盖 */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden; /* 防止出现滚动条 */
        }

        /* 2. 全屏背景设置 */
        .background-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 提示：在这里替换你的图片 URL */
            background-image: url('./imgs/bg.png');
            background-size: cover; /* 确保图片覆盖整个屏幕 */
            background-position: center;
            z-index: -1; /* 放在最底层 */
            filter: brightness(0.7); /* 把背景稍微变暗，让文字更清晰 */
        }

        /* 3. 中间展示内容区域 */
        .content-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 1;
        }

        .content-area h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .content-area p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        /* 4. 底部音乐播放器样式 */
        .music-player {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: rgba(85, 79, 79, 0.6); /* 半透明黑色背景 */
            backdrop-filter: blur(10px); /* 毛玻璃效果 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            z-index: 10;
        }

        /* 播放器内的控件布局 */
        .player-controls {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 80%;
            max-width: 800px;
        }

        /* 按钮样式 */
        .btn-control {
            background: none;
            border: 2px solid white;
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .btn-control:hover {
            background: white;
            color: black;
        }

        /* 歌曲信息 */
        .song-info {
            font-size: 14px;
            min-width: 100px;
        }

        /* 进度条样式 */
        .progress-container {
            flex-grow: 1;
            height: 5px;
            background: rgba(255,255,255,0.3);
            border-radius: 5px;
            cursor: pointer;
            position: relative;
        }

        .progress-bar {
            width: 0%; /* 初始宽度 */
            height: 100%;
            background: #1db954; /* 类似 Spotify 的绿色 */
            border-radius: 5px;
            transition: width 0.1s linear;
        }


.lyrics-panel {
    /* --- 1. 定位核心 (左侧居中) --- */
    position: fixed;  /* 固定定位：钉在屏幕上 */
    top: 50%;         /* 顶部先走到屏幕中间 */
    left: 30px;       /* 距离左边屏幕 30px */
    /* 【关键魔法】因为 top:50% 是以窗口顶部为准的，所以要向上回退自身高度的一半，才能真正垂直居中 */
    transform: translateY(-50%); 
    z-index: 5;       /* 层级：比背景(-1)高，比底部播放器(10)低 */

    /* --- 2. 窗口大小与外观 --- */
    width: 260px;     /* 宽度 */
    height: 400px;    /* 固定高度 */
    /* 保持风格统一：半透明黑色 + 毛玻璃 */
    background: rgba(235, 229, 229, 0.2); /* 半透明白色 */
    backdrop-filter: blur(10px);
    border-radius: 15px; /* 圆角 */
    padding: 20px;       /* 内边距，别让字贴边 */
    color: #ffffff;      /* 白色文字 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 加点阴影更有立体感 */

    /* --- 3. 【重要】滚动条设置 --- */
    overflow-y: auto; /* 如果歌词太长，自动出现垂直滚动条 */
    /* 隐藏丑丑的默认滚动条 (Webkit内核浏览器有效) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}