/* ==========================================================================
   NOCTURNE AUDIO · 无损音乐站样式表
   设计基调：深色商务 / 香槟金点缀 / 大留白 / 细腻层次
   ========================================================================== */

:root {
    /* 底色 */
    --bg: #08090b;
    --bg-2: #0c0e11;
    --surface: #111419;
    --surface-2: #161a20;
    --surface-3: #1c212a;

    /* 描边 */
    --line: rgba(255, 255, 255, .08);
    --line-soft: rgba(255, 255, 255, .055);
    --line-strong: rgba(255, 255, 255, .16);

    /* 文字 */
    --ink: #f5f2ec;
    --ink-2: #d5d1c8;
    --muted: #8b9099;
    --muted-2: #5f646d;

    /* 主色 */
    --gold: #c8a96a;
    --gold-hi: #e9d6ac;
    --gold-deep: #a5874c;
    --gold-tint: rgba(200, 169, 106, .12);
    --ok: #5ec08d;
    --danger: #e2604f;

    /* 音质色 */
    --q-std: #9aa2ad;
    --q-lossless: #e4cb96;
    --q-hires: #9ec5f2;

    --radius: 10px;
    --radius-lg: 16px;
    --maxw: 1180px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
    --font-serif: "Optima", "Palatino Linotype", "Times New Roman", Georgia,
        "Songti SC", "Source Han Serif SC", serif;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 620px at 82% -12%, rgba(200, 169, 106, .10), transparent 62%),
        radial-gradient(900px 520px at 6% -6%, rgba(78, 104, 140, .10), transparent 62%);
    background-repeat: no-repeat;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.65;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

em, i { font-style: normal; }

img { max-width: 100%; }

::selection {
    background: rgba(200, 169, 106, .28);
    color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0b0d; }
::-webkit-scrollbar-thumb {
    background: #262b33;
    border-radius: 6px;
    border: 2px solid #0a0b0d;
}
::-webkit-scrollbar-thumb:hover { background: #3a414c; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
}

.page {
    flex: 1 0 auto;
    padding: 0 0 96px;
}

/* ==========================================================================
   通用排版元件
   ========================================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 22px;
}

.sec-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.sec-title small {
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.sec-more {
    font-size: 12.5px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .18s ease;
}

.sec-more:hover { color: var(--gold); }

.divider {
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
    border: 0;
    margin: 0;
}

/* ==========================================================================
   顶部导航
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(8, 9, 11, .74);
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    border-bottom: 1px solid var(--line-soft);
}

.topbar .inner {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 72px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    color: var(--ink);
}

.logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(150deg, #23272e, #12151a);
    border: 1px solid rgba(200, 169, 106, .28);
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.5px;
    padding: 8px 6px;
    position: relative;
    overflow: hidden;
}

.logo-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(200, 169, 106, .28), transparent 70%);
}

.logo-mark i {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
    height: 40%;
    position: relative;
    z-index: 1;
}

.logo-mark i:nth-child(1) { height: 34%; }
.logo-mark i:nth-child(2) { height: 78%; }
.logo-mark i:nth-child(3) { height: 52%; }
.logo-mark i:nth-child(4) { height: 100%; }

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.logo-text b {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
}

.logo-text span {
    font-family: var(--font-serif);
    font-size: 9px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-top: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
}

.nav-links a {
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 13px;
    border-radius: 8px;
    letter-spacing: .2px;
    transition: color .18s ease, background .18s ease;
}

.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .045); }
.nav-links a.on { color: var(--gold-hi); }

.topbar form[role="search"] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    width: 262px;
    height: 38px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 4px 0 12px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.topbar form[role="search"]:focus-within {
    border-color: rgba(200, 169, 106, .42);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(200, 169, 106, .08);
}

.topbar form[role="search"] input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

.topbar form[role="search"] input::placeholder { color: var(--muted-2); }

.topbar form[role="search"] button {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.topbar form[role="search"] button:hover {
    color: var(--gold-hi);
    background: rgba(200, 169, 106, .1);
}

/* 用户区 */

.userbox {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ulink {
    font-size: 13px;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.ulink:hover { color: var(--ink); }

.ulink.primary {
    color: #17140e;
    font-weight: 700;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 6px 18px -10px rgba(200, 169, 106, .9);
}

.ulink.primary:hover {
    background: linear-gradient(140deg, #f2e2be, var(--gold-hi));
    color: #17140e;
}

.ubtn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    transition: border-color .18s ease, background .18s ease;
}

.ubtn:hover {
    border-color: rgba(200, 169, 106, .34);
    background: rgba(255, 255, 255, .06);
}

.uavatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a2f38, #191d23);
    border: 1px solid rgba(200, 169, 106, .34);
    color: var(--gold-hi);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.uname {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    max-width: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ulv {
    font-size: 10px;
    padding: 2.5px 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .2px;
}

.ulv-vip1 { background: rgba(200, 169, 106, .14); color: #dcc28a; }
.ulv-vip2 { background: rgba(126, 178, 240, .13); color: #a7c8ee; }
.ulv-vip3 {
    background: linear-gradient(120deg, rgba(200, 169, 106, .3), rgba(233, 214, 172, .16));
    color: #f0dcb2;
    border: 1px solid rgba(200, 169, 106, .3);
}

/* ==========================================================================
   首页 · Hero
   ========================================================================== */

.hero {
    position: relative;
    padding: 92px 0 76px;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -220px;
    width: 900px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(200, 169, 106, .13), transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 60px;
    align-items: center;
}

.hero-title {
    margin: 0 0 20px;
    font-size: 52px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -1.4px;
    color: var(--ink);
}

.hero-title .shine {
    background: linear-gradient(100deg, #f4e6c6 0%, var(--gold) 46%, #8f7440 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    margin: 0 0 34px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 540px;
}

.hero-sub b { color: var(--ink-2); font-weight: 600; }

/* 右侧装饰：唱片 */

.hero-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disc {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .045) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 34% 28%, #2b3038 0%, #14171c 44%, #08090b 78%);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .8), 0 40px 90px -50px rgba(0, 0, 0, 1);
    animation: spin 26s linear infinite;
}

.disc::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 210deg, transparent 0deg, rgba(200, 169, 106, .22) 40deg, transparent 90deg, transparent 250deg, rgba(255, 255, 255, .08) 300deg, transparent 340deg);
    mix-blend-mode: screen;
}

.disc::after {
    content: "";
    position: absolute;
    inset: 41%;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--gold-hi), var(--gold-deep));
    box-shadow: 0 0 0 10px rgba(8, 9, 11, .92), 0 0 30px rgba(200, 169, 106, .3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 搜索框 */

.searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    border: 1px solid var(--line);
    border-radius: 14px;
    max-width: 620px;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.searchbar:focus-within {
    border-color: rgba(200, 169, 106, .5);
    box-shadow: 0 0 0 4px rgba(200, 169, 106, .07), 0 24px 48px -32px rgba(200, 169, 106, .5);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}

.searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-family: inherit;
    letter-spacing: .2px;
}

.searchbar input::placeholder { color: var(--muted-2); }

.btn-search {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 30px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
    color: #14110b;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 10px 26px -14px rgba(200, 169, 106, .9);
}

.btn-search:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.btn-search:active { transform: translateY(0); }

/* 热搜词 */

.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
}

.chip-label {
    font-family: var(--font-serif);
    font-size: 10.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-right: 4px;
}

.chip {
    font-size: 12.5px;
    color: var(--muted);
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .022);
    transition: all .18s ease;
}

.chip:hover {
    color: var(--gold-hi);
    border-color: rgba(200, 169, 106, .4);
    background: rgba(200, 169, 106, .08);
    transform: translateY(-1px);
}

/* ==========================================================================
   首页 · 数据条
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 78px;
}

.stat {
    padding: 30px 26px 30px 0;
    border-right: 1px solid var(--line-soft);
}

.stat:last-child { border-right: 0; }

.stat .k {
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1;
    color: var(--gold-hi);
    letter-spacing: -.5px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.stat .k small {
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--gold-deep);
    font-family: var(--font-sans);
}

.stat .v {
    margin-top: 11px;
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: .3px;
}

/* ==========================================================================
   榜单
   ========================================================================== */

.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-bottom: 78px;
}

.rank-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.rank-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .5), transparent);
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background .16s ease;
}

.rank-item:hover { background: rgba(255, 255, 255, .045); }

.rank-item .num {
    flex: 0 0 auto;
    width: 24px;
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--muted-2);
    text-align: right;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}

.rank-item .num.n1,
.rank-item .num.n2,
.rank-item .num.n3 {
    color: var(--gold);
    font-weight: 600;
    font-size: 17px;
}

.rank-item .txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .16s ease;
}

.rank-item:hover .txt { color: var(--gold-hi); }

.rank-item .meta {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--muted-2);
    max-width: 42%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-empty {
    padding: 46px 20px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted-2);
}

/* ==========================================================================
   首页 · 特性
   ========================================================================== */

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature {
    padding: 30px 28px 32px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 70%);
    transition: border-color .22s ease, transform .22s ease, background .22s ease;
}

.feature:hover {
    border-color: rgba(200, 169, 106, .26);
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(200, 169, 106, .06), transparent 72%);
}

.feature .fi {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(200, 169, 106, .24);
    background: rgba(200, 169, 106, .08);
    color: var(--gold-hi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 18px;
}

.feature h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

.feature p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--muted);
}

/* ==========================================================================
   搜索结果
   ========================================================================== */

.result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    padding: 44px 0 26px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 28px;
}

.result-head b {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--ink);
    line-height: 1.25;
}

.result-head span {
    font-size: 12.5px;
    color: var(--muted);
}

.result-head .badge { color: var(--muted); }

.src-note {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-soft);
    color: var(--muted);
    letter-spacing: .3px;
    white-space: nowrap;
}

.src-errors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.src-errors .badge {
    color: #c9a58a;
    border-color: rgba(226, 96, 79, .22);
    background: rgba(226, 96, 79, .07);
}

.mgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 900px) {
    .mgrid { grid-template-columns: 1fr 1fr; }
}

.mcard {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012));
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    position: relative;
}

.mcard:hover {
    border-color: rgba(200, 169, 106, .24);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
    box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .9);
    transform: translateY(-1px);
}

.mc-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(150deg, #232830, #12151a);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 169, 106, .55);
    font-size: 19px;
    position: relative;
}

.mc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mc-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.mc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: .1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-alb {
    font-size: 11.5px;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-artist {
    font-size: 12.5px;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .2px;
}

.mc-side {
    flex: 0 0 auto;
    width: 196px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.mc-qlabel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.mc-play {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 106, .34);
    background: rgba(200, 169, 106, .1);
    color: var(--gold-hi);
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-left: 2px;
    transition: all .18s ease;
    line-height: 1;
}

.mc-play:hover {
    background: var(--gold);
    color: #14110b;
    border-color: var(--gold);
    transform: scale(1.06);
}

.mc-play.playing {
    background: rgba(255, 255, 255, .1);
    border-color: var(--line-strong);
    color: var(--ink);
}

.mc-quals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* 音质胶囊 */

.pill {
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .045);
    font-size: 11.5px;
    line-height: 1;
    max-width: 100%;
    transition: border-color .18s ease, background .18s ease;
}

.pill:hover { border-color: var(--line-strong); }

.pill-play {
    display: inline-flex;
    align-items: center;
    padding: 7px 8px 7px 10px;
    color: var(--ink-2);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: .2px;
    transition: color .16s ease;
}

.pill-play:hover { color: #fff; }

.pill-dl {
    display: inline-flex;
    align-items: center;
    padding: 7px 9px 7px 5px;
    color: var(--muted-2);
    border-left: 1px solid var(--line-soft);
    font-size: 11px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.pill-dl:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .05); }

.pg-standard {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line);
}

.pg-standard .pill-play { color: #b9bfc8; }

.pg-lossless {
    background: rgba(200, 169, 106, .1);
    border-color: rgba(200, 169, 106, .28);
}

.pg-lossless .pill-play { color: var(--q-lossless); }

.pg-hires {
    background: rgba(126, 178, 240, .1);
    border-color: rgba(126, 178, 240, .26);
}

.pg-hires .pill-play { color: var(--q-hires); }

.pill.locked {
    opacity: .5;
    filter: saturate(.35);
}

/* 空状态 */

.empty {
    text-align: center;
    padding: 110px 20px 120px;
}

.empty .big {
    font-size: 34px;
    color: var(--gold);
    opacity: .5;
    margin-bottom: 18px;
    font-family: var(--font-serif);
    letter-spacing: 2px;
}

.empty p {
    margin: 0 0 6px;
    font-size: 13.5px;
    color: var(--muted);
}

.empty p[style] { color: var(--muted-2) !important; }

/* 分页 */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 40px;
}

.pager a,
.pager span {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--muted);
    transition: all .16s ease;
}

.pager a:hover {
    color: var(--gold-hi);
    border-color: rgba(200, 169, 106, .36);
    background: rgba(200, 169, 106, .07);
}

.pager .cur {
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    border-color: transparent;
    color: #14110b;
    font-weight: 700;
}

.pager .dis { color: var(--muted-2); opacity: .5; }

/* ==========================================================================
   页脚
   ========================================================================== */

.footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--line-soft);
    padding: 56px 0 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .014));
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 42px;
}

.f-brand .logo { margin-bottom: 14px; }

.f-brand p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--muted-2);
    max-width: 300px;
}

.f-col h4 {
    margin: 2px 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.f-col a,
.f-col span {
    display: block;
    font-size: 12.5px;
    color: var(--muted-2);
    padding: 5px 0;
    transition: color .16s ease;
}

.f-col a:hover { color: var(--gold-hi); }

.footer-bottom {
    border-top: 1px solid var(--line-soft);
    padding: 18px 0 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.copy {
    font-size: 11.5px;
    color: var(--muted-2);
    letter-spacing: .2px;
}

.copy a { color: var(--muted-2); }
.copy a:hover { color: var(--gold); }

.footer .disclaimer {
    font-size: 11.5px;
    color: var(--muted-2);
    max-width: 560px;
    line-height: 1.8;
    text-align: right;
}

/* ==========================================================================
   播放器
   ========================================================================== */

.player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    background: rgba(12, 14, 17, .92);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -22px 60px -40px rgba(0, 0, 0, 1);
}

.player[hidden] { display: none; }

.pl-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.pl-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
    transition: width .16s linear;
}

.pl-cover {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: linear-gradient(150deg, #232830, #12151a);
    border: 1px solid rgba(200, 169, 106, .24);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 17px;
    overflow: hidden;
}

.pl-cover img { width: 100%; height: 100%; object-fit: cover; }

.pl-info { flex: 1 1 auto; min-width: 0; }

.pl-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-sub {
    font-size: 11.5px;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.pl-ctrl {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    color: #14110b;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    padding-left: 2px;
    transition: filter .16s ease, transform .16s ease;
    box-shadow: 0 8px 22px -12px rgba(200, 169, 106, .9);
}

.pl-ctrl:hover { filter: brightness(1.08); transform: scale(1.04); }

.pl-q {
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(200, 169, 106, .26);
    background: rgba(200, 169, 106, .08);
    border-radius: 20px;
    padding: 5px 11px;
    white-space: nowrap;
}

.pl-dl {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    padding: 8px 16px;
    white-space: nowrap;
    transition: all .16s ease;
}

.pl-dl:hover {
    border-color: rgba(200, 169, 106, .5);
    color: var(--gold-hi);
    background: rgba(200, 169, 106, .07);
}

.pl-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-2);
    font-size: 18px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.pl-close:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }

/* ==========================================================================
   Toast / 弹窗
   ========================================================================== */

.toast {
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    background: rgba(20, 23, 28, .96);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: 13px;
    padding: 11px 20px;
    border-radius: 10px;
    box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 1);
    max-width: 88vw;
    backdrop-filter: blur(12px);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(4, 5, 6, .72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[hidden] { display: none; }

.modal-box {
    background: linear-gradient(180deg, #16191f, #0f1216);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 32px 28px 26px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 40px 100px -40px #000;
}

.modal-box h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
}

.modal-box p {
    margin: 0 0 22px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.85;
}

.modal-box .mbtns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ==========================================================================
   按钮 / 面板 / 提示条
   ========================================================================== */

.btn-dl,
.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold) 62%, var(--gold-deep));
    color: #14110b;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .4px;
    box-shadow: 0 12px 30px -18px rgba(200, 169, 106, .95);
    transition: filter .18s ease, transform .18s ease;
}

.btn-dl:hover,
.btn-main:hover { filter: brightness(1.07); transform: translateY(-1px); }

.btn-main { width: 100%; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 22px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all .18s ease;
}

.btn-ghost:hover {
    border-color: rgba(200, 169, 106, .4);
    color: var(--gold-hi);
}

.panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012));
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}

.panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
}

.note {
    font-size: 12px;
    line-height: 1.85;
    color: var(--muted);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--gold);
    border-radius: 4px 10px 10px 4px;
    padding: 12px 16px;
}

.note.err {
    color: #e3a99e;
    border-left-color: var(--danger);
    background: rgba(226, 96, 79, .07);
    border-color: rgba(226, 96, 79, .18);
    border-left-color: var(--danger);
}

/* 歌曲头（下载页） */

.song-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 40px 0 28px;
}

.song-hero .cover {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(150deg, #232830, #12151a);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 26px;
}

.song-hero .info { min-width: 0; }

.song-hero h1 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--ink);
}

.song-hero .line {
    font-size: 12.5px;
    color: var(--ink-2);
    margin-top: 4px;
}

.song-hero .line span {
    display: inline-block;
    min-width: 46px;
    color: var(--muted-2);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-right: 8px;
}

/* 通用歌曲行（旧样式兼容） */

.song-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .02);
    transition: all .18s ease;
    margin-bottom: 8px;
}

.song-row:hover {
    border-color: rgba(200, 169, 106, .24);
    background: rgba(255, 255, 255, .045);
}

.song-row .cover {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
}

.song-row .cover.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #232830, #12151a);
    color: var(--gold);
    font-size: 16px;
}

.song-row .main { flex: 1 1 auto; min-width: 0; }

.song-row .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-row .sub {
    font-size: 12px;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.song-row .side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.badge.hires,
.badge.lossless {
    color: var(--gold-hi);
    border-color: rgba(200, 169, 106, .3);
    background: rgba(200, 169, 106, .1);
}

.badge.standard {
    color: var(--muted);
}

.hl {
    color: var(--gold-hi);
    font-weight: 700;
}

/* ==========================================================================
   登录 / 注册
   ========================================================================== */

.auth-wrap {
    min-height: 74vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.auth-box {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 38px 34px 32px;
    box-shadow: 0 50px 100px -60px #000;
    position: relative;
}

.auth-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    right: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .55), transparent);
}

.auth-box h1 {
    font-size: 23px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.4px;
}

.auth-box .sub {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 26px;
}

.auth-field { margin-bottom: 16px; }

.auth-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}

.auth-field input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.auth-field input::placeholder { color: var(--muted-2); }

.auth-field input:focus {
    border-color: rgba(200, 169, 106, .48);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 3px rgba(200, 169, 106, .07);
}

.auth-alt {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--muted-2);
    text-align: center;
}

.auth-alt a { color: var(--gold); font-weight: 600; }
.auth-alt a:hover { color: var(--gold-hi); }

/* ==========================================================================
   会员中心
   ========================================================================== */

.member-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.member-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(200, 169, 106, .13), transparent);
    pointer-events: none;
}

.member-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.member-head .uavatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
    border-radius: 14px;
}

.member-head .mu-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.member-head .mu-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.quota-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    position: relative;
}

.quota-item {
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px 18px;
}

.quota-item .qk {
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.quota-item .qv {
    margin-top: 8px;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--gold-hi);
    letter-spacing: -.5px;
    line-height: 1.1;
}

.quota-item .qv small {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-2);
    letter-spacing: 0;
}

.vip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.vip-table th,
.vip-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    white-space: nowrap;
}

.vip-table th {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    font-weight: 600;
    border-bottom-color: var(--line);
}

.vip-table td { color: var(--ink-2); }
.vip-table tr:last-child td { border-bottom: 0; }

.vip-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .2px;
}

.vip-tag.l1 { background: rgba(200, 169, 106, .14); color: #ddc48d; }
.vip-tag.l2 { background: rgba(126, 178, 240, .14); color: #a8c9ef; }
.vip-tag.l3 {
    background: linear-gradient(120deg, rgba(200, 169, 106, .34), rgba(233, 214, 172, .14));
    color: #f1ddb5;
    border: 1px solid rgba(200, 169, 106, .3);
}

.vip-tag.cur { box-shadow: 0 0 0 1px rgba(200, 169, 106, .55); }

/* 会员等级卡片（定价式） */

.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.plan {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 24px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
    position: relative;
    transition: border-color .22s ease, transform .22s ease;
}

.plan:hover {
    border-color: rgba(200, 169, 106, .3);
    transform: translateY(-2px);
}

.plan .p-name {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.plan .p-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 6px;
}

.plan .p-desc {
    font-size: 12px;
    color: var(--muted-2);
    min-height: 36px;
    line-height: 1.7;
}

.plan ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line-soft);
}

.plan li {
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 5px 0 5px 18px;
    position: relative;
}

.plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 106, .6);
    background: rgba(200, 169, 106, .2);
}

.plan.hot {
    border-color: rgba(200, 169, 106, .38);
    background: linear-gradient(180deg, rgba(200, 169, 106, .1), rgba(255, 255, 255, .012));
    box-shadow: 0 30px 70px -50px rgba(200, 169, 106, .8);
}

.plan.hot::after {
    content: "推荐";
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    letter-spacing: .1em;
    color: #14110b;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    border-radius: 20px;
    padding: 3px 9px;
    font-weight: 700;
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 0; }
    .hero-art { display: none; }
    .hero-title { font-size: 44px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .features { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .wrap { padding: 0 22px; }
    .nav-links { display: none; }
    .topbar form[role="search"] { width: auto; flex: 1 1 auto; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2) { border-right: 0; }
    .stat { padding: 24px 18px 24px 0; }
    .cols { grid-template-columns: 1fr; gap: 18px; }
    .plans { grid-template-columns: 1fr; }
    .hero { padding: 56px 0 48px; }
    .hero-title { font-size: 36px; letter-spacing: -1px; }
    .hero-sub { font-size: 13.5px; margin-bottom: 26px; }
    .stats { margin-bottom: 48px; }
    .cols { margin-bottom: 48px; }
}

@media (max-width: 720px) {
    .mcard { flex-wrap: wrap; gap: 12px; padding: 14px; }
    .mc-side {
        width: 100%;
        align-items: flex-start;
        border-top: 1px solid var(--line-soft);
        padding-top: 11px;
        gap: 7px;
    }
    .mc-quals { justify-content: flex-start; }
    .mc-qlabel { font-size: 10px; }
    .result-head { padding: 30px 0 20px; }
    .result-head b { font-size: 23px; }
    .src-note { margin-left: 0; width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer .disclaimer { text-align: left; }
    .member-head .uavatar { width: 44px; height: 44px; font-size: 17px; }
    .quota-grid { grid-template-columns: 1fr; }
    .vip-table { font-size: 11.5px; }
    .vip-table th, .vip-table td { padding: 9px 6px; }
    .player { padding: 10px 14px; gap: 10px; }
    .pl-q { display: none; }
    .pl-cover { width: 38px; height: 38px; }
    .auth-box { padding: 30px 22px 26px; }
    .searchbar { padding-left: 14px; }
    .searchbar input { height: 42px; font-size: 14px; }
    .btn-search { height: 42px; padding: 0 20px; }
    .uname { display: none; }
    .song-hero .cover { width: 66px; height: 66px; }
    .song-hero h1 { font-size: 19px; }
}

@media (max-width: 480px) {
    .logo-text span { display: none; }
    .topbar .inner { gap: 12px; height: 64px; }
    .hero-title { font-size: 31px; }
    .stat .k { font-size: 25px; }
    .member-card { padding: 20px; }
    .pill-play { padding: 6px 7px 6px 9px; font-size: 11px; }
}

/* ==========================================================================
   页面标题 / 额度进度条（补充）
   ========================================================================== */

.page-head {
    padding: 52px 0 26px;
}

.page-head h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.9px;
    color: var(--ink);
}

.page-head p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.page-head .eyebrow { margin-bottom: 14px; }

.qbar {
    margin-top: 12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.qbar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
}

.plan.cur { border-color: rgba(200, 169, 106, .5); }

@media (max-width: 720px) {
    .page-head { padding: 34px 0 20px; }
    .page-head h1 { font-size: 24px; }
}

/* 顶栏移动端收紧 */
@media (max-width: 720px) {
    .topbar .inner { gap: 14px; }
    .topbar form[role="search"] { min-width: 0; height: 36px; }
    .topbar form[role="search"] input { font-size: 12.5px; }
    .ulink { padding: 7px 10px; font-size: 12.5px; }
    .ulink.primary { padding: 7px 12px; }
    .ubtn { padding: 3px 9px 3px 3px; }
    .uavatar { width: 26px; height: 26px; font-size: 11px; }
}

/* 修复：grid/flex 子项默认 min-width:auto 导致列被内容撑宽 */
.mgrid > .mcard { min-width: 0; }
.mcard .mc-main,
.mcard .mc-side { min-width: 0; }

/* ==========================================================================
   v11 主题升级 · 视觉重制
   目标：封面放大、卡片层次更清晰、首页更有质感（深色 + 香槟金）
   ========================================================================== */

:root {
    --gold-soft: rgba(200, 169, 106, .16);
    --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .048), rgba(255, 255, 255, .014) 62%, rgba(255, 255, 255, .006));
    --card-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022) 62%, rgba(255, 255, 255, .008));
    --shadow-card: 0 30px 60px -46px rgba(0, 0, 0, 1);
    --shadow-hover: 0 40px 80px -50px rgba(0, 0, 0, 1);
}

body {
    background-image:
        radial-gradient(1200px 680px at 84% -14%, rgba(200, 169, 106, .13), transparent 60%),
        radial-gradient(1000px 560px at 4% -8%, rgba(76, 108, 148, .13), transparent 62%),
        radial-gradient(800px 500px at 50% 108%, rgba(200, 169, 106, .05), transparent 70%);
    background-attachment: fixed;
}

/* 顶栏：更薄的描边 + 金色高光 */
.topbar {
    background: rgba(7, 8, 10, .78);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 1px 0 rgba(233, 214, 172, .05), 0 18px 40px -34px #000;
}

.topbar .inner { height: 74px; }

.nav-links a {
    position: relative;
    font-size: 13.5px;
    padding: 8px 14px;
}

.nav-links a.on::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ==========================================================================
   首页 Hero
   ========================================================================== */

.hero {
    position: relative;
    padding: 104px 0 84px;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -320px;
    width: 1180px;
    height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(200, 169, 106, .16), transparent 76%);
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(760px 420px at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(760px 420px at 50% 0%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 70px;
    align-items: center;
}

.hero-title {
    margin: 0 0 22px;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--ink);
    text-wrap: balance;
}

.hero-title .shine {
    background: linear-gradient(100deg, #fdf3dd 0%, #e9d6ac 34%, var(--gold) 62%, #8a6f3c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    margin: 0 0 34px;
    font-size: 14.5px;
    line-height: 1.95;
    color: #9aa0a9;
    max-width: 560px;
}

.hero-sub b { color: #e6e1d6; font-weight: 600; }

/* 唱片装饰 */
.hero-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vinyl {
    position: relative;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 .5px, transparent .5px 4.5px),
        radial-gradient(circle at 50% 50%, #1b1f26 0 32%, #101319 33%, #0a0c10 74%, #06070a 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .9), 0 50px 100px -60px #000;
    animation: spin 30s linear infinite;
}

.vinyl::after {
    content: "";
    position: absolute;
    inset: 33%;
    border-radius: 50%;
    background: conic-gradient(from 210deg, rgba(233, 214, 172, .9), rgba(200, 169, 106, .35), rgba(20, 23, 28, .9), rgba(233, 214, 172, .75));
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .6);
}

.vinyl::before {
    content: "";
    position: absolute;
    inset: 45.5%;
    border-radius: 50%;
    background: #08090b;
    border: 2px solid rgba(255, 255, 255, .1);
    z-index: 2;
}

.vinyl-ring {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 106, .16);
}

.vinyl-ring::after {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    border: 1px dashed rgba(200, 169, 106, .1);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 搜索框 */
.searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 8px 0 20px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: border-color .2s ease, box-shadow .2s ease;
    max-width: 620px;
}

.searchbar:focus-within {
    border-color: rgba(200, 169, 106, .55);
    box-shadow: 0 0 0 4px rgba(200, 169, 106, .1), 0 30px 70px -40px rgba(200, 169, 106, .45);
}

.searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-family: inherit;
    letter-spacing: .2px;
}

.searchbar input::placeholder { color: #63686f; }

.btn-search {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(140deg, #f3e3c0, var(--gold) 60%, #b08f4e);
    color: #16130c;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease;
    box-shadow: 0 14px 30px -18px rgba(200, 169, 106, .9);
}

.btn-search:hover { filter: brightness(1.06); transform: translateY(-1px); }

.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.chip-label {
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #565b63;
    margin-right: 4px;
}

.chip {
    font-size: 12.5px;
    color: #b6b1a6;
    padding: 7px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
    transition: all .18s ease;
}

.chip:hover {
    color: #17140e;
    border-color: transparent;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
}

/* ==========================================================================
   首页数据条
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 76px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.stat {
    padding: 26px 24px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    position: relative;
}

.stat:last-child { border-right: 0; }

.stat .k {
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.5px;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.stat .k small {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: .24em;
    color: var(--gold);
    text-transform: uppercase;
}

.stat .v {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.7;
    color: #8b9099;
}

/* ==========================================================================
   榜单
   ========================================================================== */

.sec-title { letter-spacing: -.3px; }

.rank-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
    overflow: hidden;
}

.rank-item {
    padding: 11px 16px;
    gap: 12px;
}

.rank-item .num {
    font-family: var(--font-serif);
    font-size: 13px;
    width: 30px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #7c818a;
}

.rank-item .num.n1,
.rank-item .num.n2,
.rank-item .num.n3 {
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    border-color: transparent;
    color: #17140e;
    font-weight: 700;
    box-shadow: 0 8px 18px -12px rgba(200, 169, 106, .9);
}

.rank-item .txt {
    font-size: 13.5px;
    font-weight: 500;
}

/* ==========================================================================
   特性
   ========================================================================== */

.feature {
    border-radius: 18px;
    padding: 32px 30px 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .006) 70%);
    border: 1px solid rgba(255, 255, 255, .07);
}

.feature .fi {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 19px;
    background: linear-gradient(150deg, rgba(200, 169, 106, .18), rgba(200, 169, 106, .04));
    border: 1px solid rgba(200, 169, 106, .3);
    color: var(--gold-hi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.feature h3 { font-size: 15.5px; margin-bottom: 10px; }
.feature p { font-size: 12.8px; color: #8f949c; }

/* ==========================================================================
   搜索结果页头
   ========================================================================== */

.result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 52px 0 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.rh-kw {
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.result-head h1,
.result-head > b {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.2;
    color: var(--ink);
    display: block;
}

.rh-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #8b9099;
}

.rh-meta .dot { color: #3d4249; }

.rh-srcs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.src-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .035);
    color: #a9aeb7;
    cursor: pointer;
    transition: all .16s ease;
    user-select: none;
}

.src-chip:hover { color: #fff; border-color: rgba(200, 169, 106, .4); }

.src-chip.on {
    color: #17140e;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    border-color: transparent;
    font-weight: 600;
}

.src-chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

/* ==========================================================================
   聚合卡片（重制：封面 104px + 全宽音质区）
   ========================================================================== */

.mgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 980px) {
    .mgrid { grid-template-columns: 1fr 1fr; }
}

.mcard {
    display: flex;
    gap: 16px;
    padding: 16px;
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .075);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    overflow: hidden;
    min-width: 0;
}

.mcard::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 214, 172, .5), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}

.mcard:hover {
    border-color: rgba(200, 169, 106, .3);
    background: var(--card-bg-hover);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.mcard:hover::before { opacity: 1; }

.mc-cover {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(150deg, #262b33, #0e1116);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 20px 34px -22px #000;
}

.mc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.mcard:hover .mc-cover img { transform: scale(1.07); }

.mc-cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgba(200, 169, 106, .55);
    font-family: var(--font-serif);
}

.mc-playbtn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: radial-gradient(circle at 50% 50%, rgba(8, 9, 11, .42), rgba(8, 9, 11, .74));
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-indent: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.mc-playbtn::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .68);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .07);
}

.mcard:hover .mc-playbtn { opacity: 1; }
.mc-playbtn:hover { background: radial-gradient(circle at 50% 50%, rgba(200, 169, 106, .5), rgba(8, 9, 11, .7)); }

.mc-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 0;
}

.mc-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}

.mc-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mc-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: #8d8577;
    border: 1px solid rgba(200, 169, 106, .22);
    background: rgba(200, 169, 106, .07);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

.mc-artist {
    margin-top: 5px;
    font-size: 12.5px;
    color: #d8bd88;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-alb {
    margin-top: 3px;
    font-size: 11.5px;
    color: #6d727b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-quals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

/* 音质胶囊 */
.pill {
    display: inline-flex;
    align-items: stretch;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    font-size: 11.5px;
    line-height: 1;
    max-width: 100%;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pill:hover {
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-1px);
}

.pill-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    color: var(--ink-2);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: .2px;
    transition: color .16s ease;
}

.pp-src {
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .55;
    font-weight: 700;
}

.pp-size {
    font-size: 10.5px;
    color: #7b818a;
    font-weight: 400;
}

.pp-lock { font-size: 10px; opacity: .8; }

.pill-play:hover { color: #fff; }

.pill-dl {
    display: inline-flex;
    align-items: center;
    padding: 8px 9px;
    color: #6f747c;
    border-left: 1px solid rgba(255, 255, 255, .07);
    font-size: 10.5px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.pill-dl:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .07); }

.pg-standard {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .1);
}

.pg-standard .pill-play { color: #bcc2cb; }

.pg-lossless {
    background: rgba(200, 169, 106, .11);
    border-color: rgba(200, 169, 106, .3);
}

.pg-lossless .pill-play { color: #e8d3a4; }

.pg-hires {
    background: rgba(126, 178, 240, .11);
    border-color: rgba(126, 178, 240, .3);
}

.pg-hires .pill-play { color: #a8cbf3; }

.pill.locked { opacity: .52; filter: saturate(.4); }

/* 播放中的胶囊 */
.pill-play.playing,
.mc-playbtn.playing {
    color: var(--gold-hi);
}

.pill:has(.pill-play.playing) {
    border-color: rgba(200, 169, 106, .55);
    background: rgba(200, 169, 106, .16);
    box-shadow: 0 0 0 1px rgba(200, 169, 106, .12);
}

/* 加载中 */
.pill-dl.loading { color: var(--gold); pointer-events: none; }
.pill-dl.loading::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: 4px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 169, 106, .35);
    border-top-color: var(--gold);
    animation: spin .7s linear infinite;
    display: inline-block;
}

.pill-play.loading { opacity: .6; pointer-events: none; }

/* 空状态 / 分页微调 */
.empty { padding: 96px 20px 104px; }
.empty .big { font-size: 30px; letter-spacing: 3px; }

.pager a, .pager span { border-radius: 10px; height: 36px; min-width: 36px; }

/* ==========================================================================
   底部播放器
   ========================================================================== */

.player {
    padding: 12px 24px;
    background: rgba(9, 10, 13, .93);
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 -30px 70px -44px #000;
}

.pl-cover {
    width: 50px;
    height: 50px;
    border-radius: 11px;
    box-shadow: 0 12px 24px -16px #000;
}

.pl-name { font-size: 14px; }
.pl-q { letter-spacing: .08em; }

.pl-progress { height: 3px; }
.pl-progress:hover i { background: var(--gold-hi); }

/* 提示条 */
.toast {
    top: 92px;
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 30px 70px -30px #000;
}

.toast-err {
    border-color: rgba(226, 96, 79, .42);
    color: #f3c9c2;
}

/* ==========================================================================
   移动端
   ========================================================================== */

@media (max-width: 980px) {
    .hero { padding: 66px 0 56px; }
    .hero-grid { grid-template-columns: 1fr; gap: 0; }
    .hero-art { display: none; }
    .stats { grid-template-columns: 1fr 1fr; margin-bottom: 54px; }
    .stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-last-child(-n+2) { border-bottom: 0; }
    .mgrid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .mcard { padding: 14px; gap: 13px; }
    .mc-cover { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 12px; }
    .mc-name { font-size: 14.5px; }
    .mc-count { font-size: 9.5px; padding: 3px 7px; }
    .mc-quals { margin-top: 10px; gap: 5px; }
    .pill { font-size: 11px; }
    .pill-play { padding: 7px 7px 7px 9px; gap: 5px; }
    .pp-size { display: none; }
    .result-head { padding: 34px 0 18px; }
    .rh-meta { font-size: 11.5px; }
    .searchbar { height: 54px; padding-left: 16px; }
    .btn-search { height: 40px; padding: 0 18px; }
    .stat { padding: 20px 16px; }
    .stat .k { font-size: 26px; }
    .stats { margin-bottom: 42px; }
    .hero::before { display: none; }
}

@media (max-width: 480px) {
    .mc-cover { flex: 0 0 72px; width: 72px; height: 72px; }
    .mc-head { gap: 6px; }
    .hero-title { letter-spacing: -1px; }
    .topbar .inner { height: 64px; }
}

/* 封面加载失败时的占位 */
.mc-cover.ph::before {
    content: "\266A";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(200, 169, 106, .5);
    font-family: var(--font-serif);
}

/* 触屏设备：播放按钮常显（右下角小圆钮） */
@media (hover: none) {
    .mc-playbtn {
        opacity: 1;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 7px;
        font-size: 0;
        text-indent: 0;
    }
    .mc-playbtn::after { display: none; }
    .mc-playbtn::before {
        content: "\25B6";
        font-size: 10px;
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .45);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(8, 9, 11, .55);
        text-indent: 2px;
        box-shadow: 0 6px 14px -8px #000;
    }
}

/* ==========================================================================
   v11.1 卡片结构：上方信息区 + 下方按平台分行的音质区
   ========================================================================== */

.mcard {
    display: block;
    padding: 16px 18px 15px;
}

.mc-top {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mc-cover {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 13px;
}

.mc-main {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-count {
    align-self: flex-start;
    margin-top: 2px;
}

.mc-name {
    font-size: 16.5px;
    line-height: 1.35;
}

.mc-artist { margin-top: 6px; font-size: 13px; }

.mc-quals {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px dashed rgba(255, 255, 255, .075);
}

.qrow {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
}

.qsrc {
    padding-top: 7px;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d7466;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qpills {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pill {
    border-radius: 8px;
    font-size: 11.5px;
}

.pill-play {
    gap: 5px;
    padding: 7px 8px 7px 9px;
}

.pp-size {
    font-size: 10px;
    color: #767b83;
    font-weight: 400;
}

.pill-dl {
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1;
}

@media (max-width: 720px) {
    .mcard { padding: 14px; }
    .mc-cover { flex: 0 0 78px; width: 78px; height: 78px; }
    .mc-top { gap: 12px; }
    .qsrc { flex: 0 0 34px; font-size: 9px; padding-top: 6px; }
    .mc-name { font-size: 14.5px; }
    .mc-quals { margin-top: 11px; padding-top: 9px; gap: 4px; }
    .pill-play { padding: 6px 7px; }
    .pill-dl { padding: 6px 7px; }
}

@media (max-width: 480px) {
    .mc-cover { flex: 0 0 68px; width: 68px; height: 68px; }
    .mc-count { font-size: 9px; padding: 3px 6px; }
}

/* ==========================================================================
   v12 · 首页重制（科幻 HUD / 大气版式）
   设计语言：深空黑底 + 香槟金主色 + 冰蓝辅助色 + 透视网格地面 + 扫描光
   ========================================================================== */

:root {
    --acc2: #79d2ff;
    --acc2-soft: rgba(121, 210, 255, .16);
    --hx-pad: clamp(56px, 7vw, 92px);
}

/* ---------- Hero 外壳 ---------- */

.hx-hero {
    position: relative;
    overflow: hidden;
    padding: var(--hx-pad) 0 96px;
    isolation: isolate;
}

.hx-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 极光色块 */
.hx-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .5;
    will-change: transform;
}

.hx-aurora.a1 {
    width: 620px; height: 460px;
    left: 50%; top: -260px;
    margin-left: -520px;
    background: radial-gradient(closest-side, rgba(200, 169, 106, .46), transparent 72%);
    animation: hxFloat1 22s ease-in-out infinite alternate;
}

.hx-aurora.a2 {
    width: 700px; height: 520px;
    right: -220px; top: -180px;
    background: radial-gradient(closest-side, rgba(88, 132, 190, .42), transparent 72%);
    animation: hxFloat2 26s ease-in-out infinite alternate;
}

.hx-aurora.a3 {
    width: 900px; height: 420px;
    left: 50%; bottom: -300px;
    margin-left: -450px;
    background: radial-gradient(closest-side, rgba(121, 210, 255, .16), transparent 74%);
}

@keyframes hxFloat1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(60px, 30px, 0) scale(1.12); }
}

@keyframes hxFloat2 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-70px, 40px, 0) scale(1.08); }
}

/* 轨道环 */
.hx-orbit {
    position: absolute;
    left: 50%;
    top: -140px;
    width: 1180px;
    height: 1180px;
    margin-left: -590px;
    opacity: .5;
}

.hx-orbit i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .045);
}

.hx-orbit i:nth-child(2) { inset: 15%; border-style: dashed; border-color: rgba(200, 169, 106, .1); }
.hx-orbit i:nth-child(3) { inset: 30%; border-color: rgba(121, 210, 255, .08); }

/* 雷达扫描光 */
.hx-sweep {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 900px;
    margin: -620px 0 0 -450px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(200, 169, 106, .1) 32deg, transparent 90deg);
    animation: hxSweep 18s linear infinite;
    opacity: .6;
}

@keyframes hxSweep { to { transform: rotate(360deg); } }

/* 透视网格地面 */
.hx-floor {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 560px;
    background-image:
        linear-gradient(rgba(121, 210, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(121, 210, 255, .42) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(700px) rotateX(66deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 46%, transparent 86%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 46%, transparent 86%);
    opacity: .72;
}

/* 地平线光带 */
.hx-bg::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 246px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 106, .5) 26%, rgba(121, 210, 255, .75) 50%, rgba(200, 169, 106, .5) 74%, transparent);
    box-shadow: 0 0 60px 8px rgba(121, 210, 255, .16), 0 0 24px 2px rgba(200, 169, 106, .22);
    opacity: .75;
}

/* 扫描线 */
.hx-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 180px;
    top: -180px;
    background: linear-gradient(to bottom, transparent, rgba(200, 169, 106, .07) 60%, rgba(233, 214, 172, .14));
    animation: hxScan 9s linear infinite;
    opacity: .7;
}

@keyframes hxScan {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: .7; }
    88%  { opacity: .5; }
    100% { transform: translateY(860px); opacity: 0; }
}

/* ---------- Hero 内容 ---------- */

.hx-wrap {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.hx-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding: 0 14px;
    margin: 0 auto 30px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .028);
    backdrop-filter: blur(10px);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: .16em;
    color: #8d9299;
    text-transform: uppercase;
}

.hx-tag .hx-sep { color: #4a4f57; }

.hx-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold-hi);
}

.hx-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 0 0 rgba(110, 231, 168, .6);
    animation: hxPulse 2s infinite;
}

@keyframes hxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(110, 231, 168, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(110, 231, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0); }
}

.hx-title {
    margin: 0 0 26px;
    font-size: clamp(50px, 8.2vw, 104px);
    line-height: .96;
    font-weight: 800;
    letter-spacing: -.045em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hx-title .hx-l1 {
    color: #f7f4ee;
    text-shadow: 0 30px 70px rgba(0, 0, 0, .8);
}

.hx-title .hx-l2 {
    margin-top: .06em;
    padding-bottom: .06em;
    background: linear-gradient(96deg, #fff6e2 0%, #efdcae 28%, var(--gold) 58%, #8a6f3c 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 18px 44px rgba(200, 169, 106, .28));
}

.hx-desc {
    margin: 0 auto 40px;
    max-width: 730px;
    font-size: 15px;
    line-height: 2;
    color: #9aa0a9;
}

.hx-desc b {
    color: #ece7dc;
    font-weight: 600;
}

/* ---------- 搜索台 ---------- */

.hx-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 74px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 9px 0 22px;
    text-align: left;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022));
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 40px 100px -60px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    transition: box-shadow .3s ease, transform .3s ease;
}

.hx-search::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    padding: 1px;
    background: linear-gradient(115deg, rgba(121, 210, 255, .55), rgba(200, 169, 106, .75) 46%, rgba(121, 210, 255, .2) 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .4;
    transition: opacity .3s ease;
    pointer-events: none;
}

.hx-search:focus-within::before { opacity: 1; }

.hx-search:focus-within {
    box-shadow: 0 0 0 5px rgba(200, 169, 106, .08), 0 40px 110px -50px rgba(200, 169, 106, .5);
}

.hx-search-ico {
    flex: 0 0 auto;
    display: flex;
    color: #7d838c;
    transition: color .25s ease;
}

.hx-search:focus-within .hx-search-ico { color: var(--gold-hi); }

.hx-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 15.5px;
    letter-spacing: .2px;
}

.hx-search input::placeholder { color: #62676e; }

.hx-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(140deg, #f7e9c6, var(--gold) 56%, #ab8a49);
    color: #17130b;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 18px 40px -22px rgba(200, 169, 106, .95), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hx-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 24px 50px -22px rgba(200, 169, 106, 1), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.hx-btn:active { transform: translateY(0); }

.hx-btn svg { transition: transform .18s ease; }
.hx-btn:hover svg { transform: translateX(3px); }

/* ---------- 热门词 + 音源状态 ---------- */

.hx-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.hx-chips-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .26em;
    color: #4f545c;
    margin-right: 6px;
}

.hx-chips .chip {
    font-size: 12.5px;
    padding: 7px 15px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    color: #a9a59b;
    transition: all .2s ease;
}

.hx-chips .chip:hover {
    color: #17140e;
    border-color: transparent;
    background: linear-gradient(140deg, var(--gold-hi), var(--gold));
    transform: translateY(-1px);
}

.hx-srcs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
    margin: 46px auto 0;
    max-width: 720px;
}

.hx-src {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .06em;
    color: #7c818a;
    transition: color .2s ease;
}

.hx-src i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5ec08d;
    box-shadow: 0 0 8px rgba(94, 192, 141, .8);
}

.hx-src:hover { color: var(--gold-hi); }

/* ---------- 底部频谱 ---------- */

.hx-eq {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 0 clamp(32px, 8vw, 150px);
    z-index: 1;
    opacity: .18;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    pointer-events: none;
}

.hx-eq i {
    flex: 1 1 0;
    height: calc(var(--h, 50) * 1%);
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, rgba(200, 169, 106, .95), rgba(200, 169, 106, .04));
    transform-origin: 50% 100%;
    animation: hxEq 1.9s ease-in-out infinite alternate;
    animation-delay: var(--d, 0ms);
}

@keyframes hxEq {
    from { transform: scaleY(.28); opacity: .45; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* ---------- 滚动字条 ---------- */

.hx-ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .055);
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: rgba(255, 255, 255, .012);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hx-ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    padding: 13px 0;
    animation: hxTicker 46s linear infinite;
}

.hx-ticker-track span {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: .28em;
    color: #5b6067;
    padding: 0 16px;
    white-space: nowrap;
}

.hx-ticker-track em {
    font-style: normal;
    font-size: 7px;
    color: rgba(200, 169, 106, .45);
}

@keyframes hxTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- 数据面板 ---------- */

.hx-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 76px 0 92px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008)),
        radial-gradient(600px 200px at 50% 0%, rgba(200, 169, 106, .07), transparent 70%);
    overflow: hidden;
    position: relative;
}

.hx-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 214, 172, .4), transparent);
}

.hx-cell {
    padding: 30px 26px 28px;
    border-right: 1px solid rgba(255, 255, 255, .055);
    position: relative;
    transition: background .25s ease;
}

.hx-cell:last-child { border-right: 0; }

.hx-cell:hover { background: rgba(255, 255, 255, .022); }

.hx-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.hx-num b {
    font-family: var(--font-serif);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(160deg, #fdf5e4, var(--gold) 70%, #8f7440);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 400;
}

.hx-num small {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px;
    letter-spacing: .22em;
    color: #565b63;
    text-transform: uppercase;
}

.hx-clab {
    font-size: 13px;
    color: #cfcac0;
    font-weight: 600;
    margin-bottom: 8px;
}

.hx-cell p {
    margin: 0;
    font-size: 12px;
    line-height: 1.85;
    color: #6f747c;
}

/* ---------- 区块标题 ---------- */

.hx-sec-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.hx-sec-head--mod { margin-top: 92px; }

.hx-sec-idx {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--gold);
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid rgba(200, 169, 106, .26);
    background: rgba(200, 169, 106, .08);
}

.hx-sec-head h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hx-sec-head h2 small {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .22em;
    color: #565b63;
    text-transform: uppercase;
    font-weight: 400;
}

.hx-sec-tag {
    margin-left: auto;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .18em;
    color: #4e535a;
}

/* ---------- 榜单 ---------- */

.hx-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.hx-chart-grid .sec-head {
    margin: 0 0 12px;
    padding: 0 14px;
    align-items: center;
}

.hx-chart-grid .sec-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.1px;
    gap: 8px;
}

.hx-chart-grid .sec-title small {
    font-size: 9.5px;
    letter-spacing: .2em;
    color: #565b63;
}

.hx-chart-grid .sec-more {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .16em;
    color: #4e535a;
}

.hx-chart-grid .rank-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .065);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
    padding: 10px 8px;
    flex: 1 1 auto;
}

.hx-chart-grid .rank-block { display: flex; flex-direction: column; }

.hx-chart-grid .rank-item {
    border-radius: 10px;
    padding: 11px 12px;
    transition: background .18s ease;
}

.hx-chart-grid .rank-item:hover { background: rgba(255, 255, 255, .035); }

/* ---------- 能力模块 ---------- */

.hx-mods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hx-mod {
    position: relative;
    overflow: hidden;
    padding: 32px 28px 30px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .065);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .007));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.hx-mod:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 106, .28);
    box-shadow: 0 40px 80px -56px rgba(200, 169, 106, .6);
}

.hx-mod-n {
    display: inline-block;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom: 22px;
}

.hx-mod h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.2px;
}

.hx-mod p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.95;
    color: #7d828a;
}

.hx-mod-glow {
    position: absolute;
    left: 50%;
    top: 0;
    width: 56px;
    height: 1px;
    margin-left: -28px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .7;
    transition: width .4s ease, margin-left .4s ease, opacity .4s ease;
}

.hx-mod:hover .hx-mod-glow {
    width: 78%;
    margin-left: -39%;
    opacity: 1;
}

/* ---------- 收尾 CTA ---------- */

.hx-cta {
    margin: 92px 0 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(700px 220px at 20% 0%, rgba(200, 169, 106, .14), transparent 70%),
        radial-gradient(600px 260px at 90% 100%, rgba(121, 210, 255, .1), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008));
    overflow: hidden;
    position: relative;
}

.hx-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 46px 44px;
}

.hx-cta-copy h2 {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--ink);
}

.hx-cta-copy p {
    margin: 0;
    font-size: 13px;
    color: #7c818a;
}

.hx-cta-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 26px;
    border-radius: 12px;
    color: #17130b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    background: linear-gradient(140deg, #f7e9c6, var(--gold) 56%, #ab8a49);
    box-shadow: 0 20px 44px -26px rgba(200, 169, 106, .95);
    transition: filter .18s ease, transform .18s ease;
}

.hx-cta-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* ---------- 入场动画 ---------- */

/* 仅在有 JS 时隐藏，保证无脚本 / 爬虫仍能看到全部内容 */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, .7, .3, 1), transform .7s cubic-bezier(.22, .7, .3, 1);
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

/* ---------- 首页响应式 ---------- */

@media (max-width: 1080px) {
    .hx-panel { grid-template-columns: repeat(2, 1fr); }
    .hx-cell:nth-child(2) { border-right: 0; }
    .hx-cell:nth-child(1),
    .hx-cell:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .055); }
    .hx-mods { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .hx-chart-grid { grid-template-columns: 1fr; }
    .hx-title { letter-spacing: -.03em; }
    .hx-desc { font-size: 14px; }
    .hx-search { height: 66px; padding-left: 18px; }
    .hx-btn { height: 50px; padding: 0 22px; font-size: 13.5px; }
    .hx-cta-inner { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
    .hx-sec-tag { display: none; }
}

@media (max-width: 640px) {
    .hx-hero { padding: 44px 0 72px; }
    .hx-title { font-size: clamp(40px, 12vw, 56px); }
    .hx-tag { font-size: 9px; letter-spacing: .12em; gap: 8px; padding: 0 11px; }
    .hx-search {
        height: 58px;
        flex-wrap: nowrap;
        padding: 0 7px 0 15px;
        gap: 9px;
    }
    .hx-search input { font-size: 14px; }
    .hx-btn { height: 44px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
    .hx-btn span { display: none; }
    .hx-btn::after { content: "检索"; }
    .hx-srcs { gap: 8px 14px; }
    .hx-panel { grid-template-columns: 1fr; margin: 48px 0 60px; }
    .hx-cell { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .055); }
    .hx-cell:last-child { border-bottom: 0; }
    .hx-sec-head { margin-bottom: 18px; gap: 10px; }
    .hx-sec-head h2 { font-size: 20px; }
    .hx-sec-head--mod { margin-top: 62px; }
    .hx-cta { margin-top: 62px; }
    .hx-eq { height: 62px; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-sweep, .hx-scanline, .hx-eq i, .hx-ticker-track,
    .hx-aurora, .hx-live i { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   v12 · 搜索等待遮罩（多源并发检索时的进度反馈）
   ========================================================================== */

.sload {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 6, 8, .82);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    animation: sloadIn .22s ease both;
}

.sload[hidden] { display: none; }

@keyframes sloadIn { from { opacity: 0; } to { opacity: 1; } }

.sload-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 40px 34px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .09);
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(200, 169, 106, .12), transparent 72%),
        linear-gradient(180deg, rgba(22, 25, 31, .96), rgba(12, 14, 18, .98));
    box-shadow: 0 60px 120px -50px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
    animation: sloadBox .34s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes sloadBox {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* 环形扫描 */
.sload-ring {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
}

.sload-ring span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
}

.sload-ring span:nth-child(2) {
    inset: 9px;
    border-color: rgba(200, 169, 106, .28);
    border-top-color: #f4e3bf;
    border-right-color: var(--gold);
    animation: sloadSpin 1.1s linear infinite;
}

.sload-ring span:nth-child(3) {
    inset: 19px;
    border-style: dashed;
    border-color: rgba(121, 210, 255, .38);
    animation: sloadSpin 2.4s linear infinite reverse;
}

.sload-ring .core {
    position: absolute;
    inset: 31px;
    border-radius: 50%;
    background: radial-gradient(circle, #f7ecd2, var(--gold) 60%, rgba(200, 169, 106, .1));
    box-shadow: 0 0 24px rgba(200, 169, 106, .75);
    animation: sloadCore 1.6s ease-in-out infinite;
}

@keyframes sloadSpin { to { transform: rotate(360deg); } }

@keyframes sloadCore {
    0%, 100% { transform: scale(1); opacity: .85; }
    50%      { transform: scale(1.14); opacity: 1; }
}

.sload-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.2px;
    margin-bottom: 8px;
}

.sload-step {
    min-height: 20px;
    font-size: 12.5px;
    color: var(--gold-hi);
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: .04em;
    margin-bottom: 20px;
}

.sload-bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.sload-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi), var(--acc2));
    box-shadow: 0 0 14px rgba(200, 169, 106, .7);
    transition: width .3s linear;
}

.sload-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: .12em;
    color: #6a7077;
}

.sload-hint {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 11.5px;
    line-height: 1.8;
    color: #6a7077;
}

.sload-hint b { color: #a8a49a; font-weight: 600; }

@media (max-width: 480px) {
    .sload-box { padding: 32px 22px 24px; }
    .sload-ring { width: 64px; height: 64px; margin-bottom: 20px; }
    .sload-ring .core { inset: 26px; }
    .sload-title { font-size: 15.5px; }
    .sload-step { font-size: 11.5px; }
}


/* ==========================================================================
   v12.1 · 播放器时间显示
   ========================================================================== */

.pl-time {
    flex: 0 0 auto;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .04em;
    color: #8b9099;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 78px;
    text-align: center;
}

.pl-time::first-line { color: #8b9099; }

@media (max-width: 900px) {
    .pl-time { display: none; }
}

/* ==========================================================================
   v13.1 · 会员购买（易支付）
   ========================================================================== */

.buyrows {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, .1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buyrow {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
    transition: background .2s ease, border-color .2s ease;
}

.buyrow:hover {
    background: rgba(200, 169, 106, .07);
    border-color: rgba(200, 169, 106, .25);
}

.buyrow .bc {
    font-size: 12px;
    color: #9a958a;
    letter-spacing: .06em;
}

.buyrow .bp b {
    font-family: var(--font-serif, serif);
    font-size: 17px;
    color: var(--gold-hi, #efdcae);
    font-weight: 600;
}

.buyrow .bbuy {
    height: 30px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(140deg, #f7e9c6, var(--gold, #c8a96a) 60%, #ab8a49);
    color: #17130b;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .06em;
    transition: filter .18s ease, transform .18s ease;
}

.buyrow .bbuy:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}