/* ================= 全局 ================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif;
    color: #f1f5f9;
    min-height: 100vh;
    overflow-x: hidden;
    background: #0b1023;
}

/* ================= 动态极光背景 ================= */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(160deg, #0b1023 0%, #101b3c 45%, #1a1040 100%); }
.aurora {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .55;
    animation: drift 18s ease-in-out infinite alternate;
}
.a1 { width: 55vw; height: 55vw; left: -15vw; top: -18vw;
      background: radial-gradient(circle, #6366f1 0%, transparent 65%); }
.a2 { width: 48vw; height: 48vw; right: -12vw; top: 8vh;
      background: radial-gradient(circle, #8b5cf6 0%, transparent 65%);
      animation-delay: -6s; }
.a3 { width: 42vw; height: 42vw; left: 28vw; bottom: -16vw;
      background: radial-gradient(circle, #06b6d4 0%, transparent 65%);
      animation-delay: -12s; }
@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(4vw, 3vh) scale(1.12); }
    100% { transform: translate(-3vw, -4vh) scale(.94); }
}
.spark {
    position: absolute; border-radius: 50%; background: #fff;
    animation: floaty 9s ease-in-out infinite;
    box-shadow: 0 0 12px 2px rgba(255,255,255,.6);
}
.s1 { width: 6px; height: 6px; left: 8%; top: 22%; }
.s2 { width: 4px; height: 4px; left: 22%; top: 66%;  animation-delay: -2s; }
.s3 { width: 5px; height: 5px; left: 72%; top: 18%;  animation-delay: -4s; }
.s4 { width: 7px; height: 7px; left: 86%; top: 60%;  animation-delay: -1s; }
.s5 { width: 4px; height: 4px; left: 46%; top: 8%;   animation-delay: -5.5s; }
.s6 { width: 5px; height: 5px; left: 60%; top: 84%;  animation-delay: -3s; }
@keyframes floaty {
    0%, 100% { transform: translateY(0) translateX(0); opacity: .25; }
    50%      { transform: translateY(-26px) translateX(14px); opacity: .9; }
}

/* ================= 顶栏 ================= */
.top {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    max-width: 1080px; margin: 0 auto; padding: 22px 18px 6px;
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: .5px;
        background: linear-gradient(90deg, #a5b4fc, #67e8f9);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        white-space: nowrap; }
.search { position: relative; flex: 1; max-width: 340px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .7; }
.search input {
    width: 100%; padding: 10px 14px 10px 34px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
    color: #fff; font-size: 14px; outline: none; backdrop-filter: blur(8px);
    transition: border-color .2s;
}
.search input:focus { border-color: #818cf8; }
.search input::placeholder { color: #8b9bb8; }

/* ================= 播放器卡片 ================= */
main { max-width: 1080px; margin: 0 auto; padding: 18px 18px 90px; }
.player-card {
    margin: 16px auto 30px; max-width: 560px; padding: 26px 24px 20px;
    border-radius: 22px; text-align: center;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.disc-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.disc {
    width: 100%; height: 100%; border-radius: 50%;
    background: conic-gradient(#1e293b, #334155, #1e293b, #334155, #1e293b);
    display: flex; align-items: center; justify-content: center;
    border: 6px solid #0f172a;
    box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.5);
    transition: transform .5s ease; will-change: transform;
}
.disc img { width: 60%; height: 60%; border-radius: 50%; object-fit: cover; background: #667; }
.disc.playing { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.buffering { position: absolute; inset: -8px; display: none; align-items: center; justify-content: center; gap: 5px; }
.buffering span {
    width: 7px; height: 7px; border-radius: 50%; background: #a5b4fc;
    animation: bounce 1s ease-in-out infinite;
}
.buffering span:nth-child(2) { animation-delay: .15s; background: #67e8f9; }
.buffering span:nth-child(3) { animation-delay: .3s; background: #f0abfc; }
.buffering.show { display: flex; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); opacity: .4; }
    50%      { transform: translateY(-10px); opacity: 1; }
}

.p-info h2 { font-size: 19px; font-weight: 700; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-info p  { font-size: 13px; color: #93a4bd; }

.progress { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.progress .time { font-size: 11px; color: #93a4bd; font-variant-numeric: tabular-nums; width: 36px; }
.progress .bar {
    flex: 1; height: 5px; border-radius: 99px; cursor: pointer;
    background: rgba(255,255,255,.15); position: relative; touch-action: none;
}
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px;
             background: linear-gradient(90deg, #818cf8, #c084fc, #67e8f9); }
.bar .thumb {
    position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4);
    transform: translate(-50%, -50%) scale(0); transition: transform .15s;
    left: 0;
}
.bar:hover .thumb, .bar.active .thumb { transform: translate(-50%, -50%) scale(1); }

.controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ctl {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08); color: #e2e8f0; font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, background .2s;
    padding: 0; line-height: 1;
}
.ctl:hover { background: rgba(255,255,255,.18); transform: scale(1.06); }
.ctl:active { transform: scale(.94); }
.ctl.on { color: #a5b4fc; border-color: #818cf8; }
.play-btn { width: 58px; height: 58px; font-size: 22px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none; box-shadow: 0 8px 24px rgba(99,102,241,.45); color: #fff; }
.vol { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.vol input { width: 74px; accent-color: #818cf8; cursor: pointer; }

/* ================= 歌曲网格 ================= */
.grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.card {
    position: relative; border-radius: 16px; overflow: hidden; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px); transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.card .thumb-wrap { position: relative; aspect-ratio: 1; background: rgba(255,255,255,.05); }
.card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .play-mask {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.45); opacity: 0; transition: opacity .2s;
}
.card:hover .play-mask { opacity: 1; }
.card .play-mask span {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(99,102,241,.92); color: #fff; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.card.active { border-color: #a5b4fc; box-shadow: 0 0 0 1px #818cf8, 0 10px 28px rgba(99,102,241,.35); }
.card .meta { padding: 10px 12px 12px; }
.card .meta h3 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta p  { font-size: 12px; color: #8b9bb8; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty { text-align: center; color: #8b9bb8; padding: 50px 0; font-size: 14px; }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px);
    background: rgba(15,23,42,.92); border: 1px solid rgba(255,255,255,.2);
    padding: 11px 20px; border-radius: 999px; font-size: 13px; z-index: 99;
    opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none;
    max-width: 86vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ================= 移动端适配 ================= */
@media (max-width: 720px) {
    .top { flex-direction: column; align-items: stretch; padding-top: 18px; }
    .logo { text-align: center; }
    .search { max-width: none; }
    .grid {
        /* 手机：每行两个卡片 */
        grid-template-columns: repeat(2, 1fr); gap: 10px;
    }
    .player-card { padding: 20px 16px 16px; margin-top: 12px; }
    .disc-wrap { width: 122px; height: 122px; }
    .vol input { width: 56px; }
    main { padding-bottom: 30px; }
}
@media (max-width: 380px) {
    .vol { display: none; }
}

/* 禁用动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .aurora, .spark, .disc.playing { animation: none !important; }
}