/* ====== 优雅音乐变量 ====== */
:root{
    --bg-main: #0f0f11;                        /* 主背景：极夜黑 */
    --bg-card: #1e1e26;                        /* 卡片：深靛灰 */
    --accent: #ff3e6c;                         /* 主霓虹：玫瑰粉 */
    --accent-soft: rgba(255,62,108,.15);       /* 柔光 */
    --text: #f2f2f2;                           /* 主文字 */
    --text-soft: #b5b5b5;                      /* 次级文字 */
    --glass-bg: rgba(255,255,255,.08);
    --glass-border: rgba(255,255,255,.12);
    --glass-blur: 20px;
    --radius: 8px;
}

/* ====== 全局氛围 ====== */
body{
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100vh;
    background: radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, var(--bg-main) 70%);
    overflow-x:hidden;
}
body::before{                                /* 旋转光斑 */
    content:'';
    position:fixed;
    inset:-50%;
    background:conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255,255,255,.05) 20deg,
        transparent 40deg,
        rgba(255,255,255,.03) 60deg,
        transparent 80deg
    );
    animation:spin 25s linear infinite;
    z-index:-1;
}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* ====== 播放器卡片 ====== */
#playlist{
    text-align:center;
    background:var(--bg-card);
    padding:20px;
    border-radius:var(--radius);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    width:300px;
    margin-bottom:20px;
}

/* ====== 按钮 ====== */
#playlist button{
    padding:5px 10px;
    margin:5px;
    cursor:pointer;
    border:none;
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--accent),#ff6392);
    color:#fff;
    font-size:15px;
    transition:transform .25s,box-shadow .25s;
}
#playlist button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,62,108,.45);
}

/* ====== 歌曲列表 ====== */
#songList{
    list-style:none;
    padding:0;
}
#songList li{
    padding:9px;
    margin:5px 0;
    background:rgba(255,255,255,.06);
    border-radius:var(--radius);
    cursor:pointer;
    transition:background .25s;
}
#songList li:hover,
#songList li.active{
    background:var(--accent-soft);
    color:var(--accent);
}

/* ====== 下拉选 & 输入框 ====== */
select,
#songUrl{
    padding:5px;
    margin:5px;
    border-radius:var(--radius);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,.05);
    color:var(--text);
    outline:none;
    transition:border .25s;
}
select:focus,
#songUrl:focus{
    border-color:var(--accent);
}

/* ====== 播放器本体 ====== */
audio{
    width:100%;
    max-width:300px;
    margin-bottom:20px;
    border-radius:var(--radius);
    filter:invert(.8) hue-rotate(300deg);
}

/* ====== 顶部玻璃栏 ====== */
.techbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 24px;
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
            backdrop-filter:blur(var(--glass-blur)) saturate(180%);
    border-bottom:1px solid var(--glass-border);
    transition:background .3s;
}
.techbar .logo{
    font-weight:700;
    font-size:20px;
    color:#fff;
    text-decoration:none;
}
.nav-links{
    display:flex;
    gap:28px;
}
.nav-links a{
    color:var(--text-soft);
    text-decoration:none;
    font-size:15px;
    transition:color .25s;
}
.nav-links a:hover{
    color:var(--accent);
}
.right{
    display:flex;
    align-items:center;
    gap:16px;
}
.theme-toggle,
.back{
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:transform .25s,background .25s;
}
.theme-toggle:hover,
.back:hover{
    transform:scale(1.1);
    background:rgba(255,255,255,.14);
}

/* 霓虹描边动画 */
.techbar::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(90deg,var(--accent),#ff00ff);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.7;
    animation:neonShift 6s linear infinite;
}
@keyframes neonShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
/* 8 首以内不滚动，大于 8 首自动出现滚动条 */
#songList{
    max-height: 300px;   /* 8×(272li高度34px≈9+5×2) */
    overflow-y: auto;
}
/* ====== 移动端适配（保持原） ====== */
@media (max-width:600px){
    .nav-links{display:none;}
    .techbar{padding:5px 16px;}
}

/*====================================*/
/* ===== 2. 当前播放歌曲脉冲 ===== */
@keyframes pulse{
    0%   {box-shadow:0 0 0 0 rgba(255,62,108,.6);}
    60%  {box-shadow:0 0 0 8px rgba(255,62,108,0);}
    100% {box-shadow:0 0 0 0 rgba(255,62,108,0);}
}
#songList li.active{
    animation:pulse 1.6s ease-out infinite;
}

/* ===== 3. 滚动条音乐律动 ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--accent),#ff00ff);
    border-radius:3px;
}
::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}

/* ===== 4. 按钮点击波纹 ===== */
#playlist button{
    position:relative;
    overflow:hidden;
}
#playlist button::after{
    content:'';
    position:absolute;
    left:50%;top:50%;
    width:0;height:0;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    transform:translate(-50%,-50%);
    transition:width .4s,height .4s;
}
#playlist button:active::after{
    width:120px;
    height:120px;
}