/* =========================================================
   歌单宝 · 毛玻璃星空主题（覆盖层，挂在 app.css 之后）
   深空底图 + 极光 + 星点 + 玻璃拟态卡片
   ========================================================= */

:root {
    --brand:        #8b5cf6;
    --brand-600:    #7c3aed;
    --brand-400:    #a78bfa;
    --brand-grad:   linear-gradient(135deg, #a855f7 0%, #6366f1 45%, #22d3ee 100%);
    --brand-soft:   rgba(139, 92, 246, .18);
    --brand-ghost:  rgba(139, 92, 246, .10);
    --sky:          #22d3ee;

    --bg:           transparent;
    --bg-grad:      none;
    --card:         rgba(255, 255, 255, .06);
    --line:         rgba(255, 255, 255, .12);
    --line-soft:    rgba(255, 255, 255, .07);

    --text:         #f4f5fb;
    --text-2:       #c7c9d9;
    --muted:        #9aa0b5;
    --muted-2:      #6b7186;

    --danger:       #fb7185;
    --warn:         #fbbf24;
    --ok:           #34d399;
    --gold:         #fbbf24;

    --glass:        rgba(255, 255, 255, .06);
    --glass-strong: rgba(255, 255, 255, .10);
}

/* 深空星图背景（固定，不随内容滚动） */
body {
    background: #05060f;
    min-height: 100vh;
    color: var(--text);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 620px at 12% -10%, rgba(124, 58, 237, .38), transparent 60%),
        radial-gradient(1000px 520px at 100% 0%,   rgba(34, 211, 238, .22), transparent 55%),
        radial-gradient(900px 720px at 50% 120%,   rgba(168, 85, 247, .26), transparent 60%),
        radial-gradient(1.6px 1.6px at 20px 30px,  rgba(255,255,255,.90), transparent),
        radial-gradient(1px 1px at 80px 120px,      rgba(255,255,255,.60), transparent),
        radial-gradient(1.3px 1.3px at 160px 60px, rgba(255,255,255,.70), transparent),
        radial-gradient(1px 1px at 240px 180px,     rgba(255,255,255,.50), transparent),
        linear-gradient(180deg, #070815 0%, #05060f 60%, #04050c 100%);
    background-size: auto, auto, auto, 280px 280px, 280px 280px, 280px 280px, 280px 280px, auto;
}

/* 顶部导航玻璃 */
.nav {
    background: rgba(10, 12, 25, .55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand { color: var(--text); }

/* 卡片玻璃拟态 */
.card {
    background: var(--glass) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.card-hover:hover {
    border-color: rgba(168, 85, 247, .5) !important;
    box-shadow: 0 12px 40px rgba(124, 58, 237, .28) !important;
}
.card-title { color: var(--text); }

/* 底部 Tab 玻璃 */
.tabbar {
    background: rgba(10, 12, 25, .62);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.tabbar a { color: var(--muted); }
.tabbar a.active {
    color: #c4b5fd;
    text-shadow: 0 0 12px rgba(168, 85, 247, .6);
}

/* 播放器玻璃 */
.player {
    background: rgba(12, 14, 28, .72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.player-name { color: var(--text); }

/* 弹窗玻璃 */
.modal-box {
    background: rgba(18, 20, 38, .88);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.nav-menu {
    background: rgba(18, 20, 38, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .10);
}
.nav-menu a:hover { color: var(--brand-400); background: var(--brand-ghost); }

/* 按钮：极光渐变主按钮 */
.btn {
    background: var(--brand-grad);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(124, 58, 237, .45); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: rgba(255, 255, 255, .05); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--brand-400); border-color: var(--brand-400); background: var(--brand-ghost); }
.btn-soft { background: var(--brand-soft); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, .35); }
.btn-soft:hover { background: rgba(139, 92, 246, .26); border-color: var(--brand-400); }
.btn-danger { background: rgba(251, 113, 133, .12); color: var(--danger); border: 1px solid rgba(251, 113, 133, .4); }
.btn-danger:hover { background: rgba(251, 113, 133, .2); }

/* 输入玻璃 */
.input, .select, .textarea {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: var(--text);
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }

/* 首页搜索框 + 下拉提示 */
.home-search-box {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.home-search-input { background: transparent; color: var(--text); }
.home-search-input::placeholder { color: var(--muted-2); }
.home-search-btn { background: var(--brand-grad); color: #fff; }
.home-search-icon { color: var(--muted); }
.home-results, #searchResults {
    background: rgba(18, 20, 38, .94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    border-radius: var(--r-l);
    overflow: hidden;
}
.home-results .item, #searchResults .item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--text);
    cursor: pointer;
}
.home-results .item:hover, #searchResults .item:hover { background: var(--brand-ghost); }
.home-results .empty, #searchResults .empty { padding: 16px; color: var(--muted); text-align: center; }

/* 标签 / 徽章 */
.tag { background: rgba(255, 255, 255, .08); color: var(--text-2); border: 1px solid rgba(255, 255, 255, .10); }
.tag-on { background: var(--brand-soft); color: #d8b4fe; border-color: rgba(168, 85, 247, .4); }

/* 首页英雄区 */
.home-hero-head h1 { color: var(--text); text-shadow: 0 0 24px rgba(168, 85, 247, .45); }
.home-hero-logo {
    font-size: 56px;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, .6));
}
.muted { color: var(--muted); }

/* 版权声明卡片 */
.copyright-notice {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--muted);
}

/* 滚动条轻微美化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .35); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }