body{
    margin:0;
    font-family:Arial,sans-serif;
    color:rgb(238, 11, 11);
    min-height:100vh;
    overflow:hidden;
}

#bgVideo{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;
}

body::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,0.25);

    z-index:-1;
}

.background-overlay{
    padding:40px;
    height:calc(100vh - 120px);
    overflow-y:auto;
    padding-bottom:180px;
}

.header h1{
    font-size:50px;
    text-shadow:0 0 20px rgb(255, 0, 0);
}

.main-content{

    display:flex;

    gap:30px;

    align-items:flex-start;
}

.playlist{

    flex:1;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:15px;
}

.song{
    background:rgba(0, 0, 0, 0.418);

    padding:20px;

    border-radius:15px;

    border-left:5px solid rgb(175, 39, 39);

    cursor:pointer;

    transition:0.3s;

    min-height:40px;

    display:flex;

    align-items:center;

    font-weight:700;
}

.song:hover{
    transform:translateX(10px);
}

.song.active{
    border-left:5px solid rgb(255, 0, 0);
    background:rgb(0, 0, 0);
}

.player{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#000000;

    padding:15px;

    display:flex;

    align-items:center;

    gap:15px;

    box-sizing:border-box;
}

.controls button{

    background:#dd0d0d;

    border:none;

    color:rgb(0, 0, 0);

    font-size:18px;

    padding:10px 15px;

    cursor:pointer;

    border-radius:8px;
}

.controls button:hover{
    transform:scale(1.05);
}

.song-info{
    width:200px;
}

#progress{
    flex:1;
    accent-color:rgba(0, 0, 0, 0.842);
}

#volume{
    width:100px;
    accent-color:rgba(0, 0, 0, 0.842);
}

.now-playing{

    background:rgba(0,0,0,0.4);

    border-radius:20px;

    padding:20px;

    backdrop-filter:blur(8px);
}

.now-playing h2{

    margin-top:0;

    color:red;
}

#currentSongDisplay{

    font-size:30px;

    font-weight:700;

    margin-top:20px;

    word-break:break-word;
}

#playStatus{

    margin-top:15px;

    font-size:18px;

    color:rgb(255, 0, 0);
}

#visualizer{

    width:100%;

    height:150px;

    margin-top:20px;

    background:black;

    border-radius:10px;
}

.category-title{

    grid-column:1/-1;

    color:#ff0000;

    font-size:28px;

    margin-top:20px;

    margin-bottom:5px;

    text-shadow:
    0 0 10px red;
}

#lyrics{

    margin-top:20px;

    height: 500px;

    overflow-y:auto;

    background:rgba(0,0,0,0.5);

    border-radius:10px;

    padding:15px;

    color:white;

    line-height:1.5;

    white-space:pre-line;

    text-shadow:0 0 10px red;
}


.side-panel{

    width:350px;

    display:flex;

    flex-direction:column;

    gap:20px;
}

.lyrics-box{

    background:rgba(0,0,0,0.4);

    border-radius:20px;

    padding:20px;

    backdrop-filter:blur(8px);
}

.lyrics-box h2{

    margin-top:0;

    color:red;
}

#dateTime{

    margin-top:20px;

    text-align:center;
}

#dayName{

    font-size:22px;

    font-weight:bold;

    color:#ff0000;

    text-shadow:0 0 10px red;
}

#dateText{

    margin-top:5px;

    font-size:20px;

    font-weight:bold;

    color:rgb(255, 0, 0);

    text-shadow:0 0 10px red;
}

#clock{

    margin-top:10px;

    font-size:32px;

    font-weight:bold;

    color:#ff0000;

    text-shadow:
    0 0 10px red,
    0 0 20px red;
}

.time-box{

    background:rgba(0,0,0,0.4);

    border-radius:20px;

    padding:20px;

    backdrop-filter:blur(8px);

    text-align:center;
}

/* 手机适配 */

@media (max-width:768px){

    .background-overlay{
        padding:15px;
    }

    .header h1{
        font-size:32px;
        text-align:center;
    }

    .main-content{
        flex-direction:column;
    }

    .playlist{
        width:100%;
        grid-template-columns:1fr;
    }

    .side-panel{
        width:100%;
    }

    .song{
        padding:15px;
        font-size:16px;
    }

    #currentSongDisplay{
        font-size:22px;
    }

    #visualizer{
        height:100px;
    }

    #lyrics{
        height:250px;
    }

    .player{

        flex-wrap:wrap;

        justify-content:center;

        gap:10px;

        padding:10px;
    }

    .song-info{
        width:100%;
        text-align:center;
    }

    #progress{
        width:100%;
        flex:none;
    }

    #volume{
        width:100%;
    }

    #clock{
        font-size:24px;
    }

    #dayName{
        font-size:18px;
    }

    #dateText{
        font-size:16px;
    }
}

.song-info{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}