/* ==========================================================================
   NOCTURNE · 2026 改版
   设计语言：纸 / 墨 / 黄铜。
   浅米纸底 + 墨绿主色 + 衬线标题 + 极细分隔线，去掉一切发光与玻璃。
   本文件在 app.css 之后加载，用 .theme-paper 提升优先级，整站覆盖。
   ========================================================================== */

.theme-paper {
    /* 黑金配色（参考 aihifi）：近黑底 + 香槟金 */
    --paper: #0a0b0e;
    --paper-2: #11141a;
    --paper-3: #161a21;
    --paper-4: #1c212a;

    --ink: #f2efe7;
    --ink-2: #c9c4b8;
    --ink-3: #95958d;
    --ink-4: #6f6f68;

    --line: #24272d;
    --line-2: #343940;

    --green: #d4af37;
    --green-2: #e2c56a;
    --green-3: #a8862a;
    --brass: #c8aa6e;
    --brass-2: #f0dda8;
    --clay: #e2604f;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -22px rgba(0, 0, 0, .9);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 48px -28px rgba(0, 0, 0, .85);

    /* 兼容旧变量名，避免遗漏的地方变成浅底 */
    --bg: #0a0b0e;
    --bg-2: #0d0f13;
    --surface: #11141a;
    --surface-2: #161a21;
    --surface-3: #1c212a;
    --line-soft: #1e2126;
    --line-strong: #3a4048;
    --muted: #95958d;
    --muted-2: #73736d;
    --gold: #d4af37;
    --gold-hi: #f0dda8;
    --gold-deep: #a8862a;
    --gold-tint: rgba(212, 175, 55, .12);
    --ok: #4fc08d;
    --danger: #e2604f;
    --q-std: #8f959d;
    --q-lossless: #e4cb96;
    --q-hires: #9ec5f2;
}

/* ---------- 基础 ---------- */

.theme-paper,
body.theme-paper {
    background-color: var(--paper);
    background-image:
        radial-gradient(760px 420px at 88% -8%, rgba(200,170,110, .10), transparent 64%),
        radial-gradient(620px 380px at 2% 0%, rgba(212,175,55, .07), transparent 60%);
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

.theme-paper ::selection {
    background: rgba(212,175,55, .16);
    color: var(--ink);
}

.theme-paper ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-paper ::-webkit-scrollbar-track { background: #171510; }
.theme-paper ::-webkit-scrollbar-thumb {
    background: #28251f;
    border-radius: 6px;
    border: 3px solid #171510;
}
.theme-paper ::-webkit-scrollbar-thumb:hover { background: #343129; }

.theme-paper .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 26px; }

.theme-paper .page { flex: 1 0 auto; }

.theme-paper a { color: inherit; }

/* ---------- 顶栏 ---------- */

.theme-paper .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(14, 16, 20, .92);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.theme-paper .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55, .18), transparent);
}

.theme-paper .topbar .inner {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 68px;
    min-height: 68px;
    border: 0;
    background: none;
    box-shadow: none;
}

/* logo */
.theme-paper .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.theme-paper .logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--green);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.5px;
    padding: 0 0 8px;
    box-shadow: inset 0 -6px 10px -8px rgba(0, 0, 0, .6);
}

.theme-paper .logo-mark i {
    width: 2.5px;
    background: #17140e;
    border-radius: 2px;
    display: block;
    transform-origin: bottom;
    animation: pbars 1.4s ease-in-out infinite;
}

.theme-paper .logo-mark i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.theme-paper .logo-mark i:nth-child(2) { height: 14px; animation-delay: .18s; }
.theme-paper .logo-mark i:nth-child(3) { height: 10px; animation-delay: .36s; }
.theme-paper .logo-mark i:nth-child(4) { height: 17px; animation-delay: .54s; }

@keyframes pbars {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.42); }
}

.theme-paper .logo-text b {
    display: block;
    font-family: "Songti SC", "Source Han Serif SC", Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    line-height: 1.2;
}

.theme-paper .logo-text span {
    display: block;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-top: 1px;
}

/* 导航 */
.theme-paper .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.theme-paper .nav-links a {
    position: relative;
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--ink-2);
    border-radius: 7px;
    transition: color .15s ease, background .15s ease;
}

.theme-paper .nav-links a:hover { color: var(--ink); background: rgba(212,175,55, .055); }

.theme-paper .nav-links a.on {
    color: var(--green);
    font-weight: 600;
}

.theme-paper .nav-links a.on::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
}

/* 搜索 */
.theme-paper .topbar form { flex: 1 1 auto; display: flex; justify-content: flex-end; }

.theme-paper .topbar form input[type=text] {
    width: 100%;
    max-width: 300px;
    height: 36px;
    padding: 0 40px 0 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-3);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: all .18s ease;
}

.theme-paper .topbar form input[type=text]::placeholder { color: var(--ink-4); }

.theme-paper .topbar form input[type=text]:focus {
    background: var(--paper-2);
    border-color: var(--line-2);
    box-shadow: 0 0 0 3px rgba(212,175,55, .07);
}

.theme-paper .topbar form { position: relative; }

.theme-paper .topbar form button[type=submit] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #f7f4ea;
    font-size: 0;
    cursor: pointer;
    transition: background .15s ease;
}

.theme-paper .topbar form button[type=submit]::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    border: 1.8px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.theme-paper .topbar form button[type=submit]::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 5px;
    height: 1.8px;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
}

.theme-paper .topbar form button[type=submit]:hover { background: var(--green-3); }

/* 用户区 */
.theme-paper .userbox { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.theme-paper .ubtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-2);
    transition: all .16s ease;
}

.theme-paper .ubtn:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }

.theme-paper .uavatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--green);
    color: #f4efe2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
}

.theme-paper .uavatar img { width: 100%; height: 100%; object-fit: cover; }

.theme-paper .uname { font-size: 13px; color: var(--ink); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.theme-paper .ulv {
    font-size: 9.5px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(200,170,110, .12);
    color: #c8aa6e;
    border: 1px solid rgba(200,170,110, .2);
    letter-spacing: .04em;
    white-space: nowrap;
}

.theme-paper .ulink {
    height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-2);
    border: 1px solid transparent;
    transition: all .16s ease;
}

.theme-paper .ulink:hover { color: var(--ink); background: rgba(212,175,55, .06); }

.theme-paper .ulink.primary {
    background: var(--green);
    color: #f7f4ea;
    border-color: var(--green);
    font-weight: 500;
}

.theme-paper .ulink.primary:hover { background: var(--green-3); }

@media (max-width: 860px) {
    .theme-paper .topbar .inner { gap: 14px; height: 60px; min-height: 60px; }
    .theme-paper .nav-links { display: none; }
    .theme-paper .logo-text span { display: none; }
    .theme-paper .topbar form input[type=text] { max-width: 160px; }
    .theme-paper .uname, .theme-paper .ulv { display: none; }
    .theme-paper .ubtn { padding: 3px; border: 0; background: none; }
}

/* ---------- 通用按钮 ---------- */

.theme-paper .btn-main,
.theme-paper .hx-btn,
.theme-paper .btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 20px;
    border-radius: 9px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #f8f4e9;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(212, 175, 55, .18);
}

.theme-paper .btn-main:hover,
.theme-paper .hx-btn:hover,
.theme-paper .btn-search:hover {
    background: var(--green-3);
    border-color: var(--green-3);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(212, 175, 55, .35);
}

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

.theme-paper .btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); background: #0f0c05; }

.theme-paper .btn-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: var(--paper-2);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .16s ease;
}

.theme-paper .btn-dl:hover { border-color: var(--brass); color: #a8862a; background: rgba(200,170,110, .07); }

.theme-paper .btn-dl.loading { opacity: .6; pointer-events: none; }

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

.theme-paper .sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.theme-paper .sec-title {
    font-family: "Songti SC", "Source Han Serif SC", Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
    margin: 0;
}

.theme-paper .sec-more { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.theme-paper .sec-more:hover { color: var(--green); }

/* ---------- 搜索卡片 ---------- */

.theme-paper .mcard {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sh-1);
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-paper .mcard:hover {
    border-color: var(--line-2);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}

.theme-paper .mc-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px 12px; }

.theme-paper .mc-cover {
    position: relative;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(150deg, #1c1a15, #25221c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-paper .mc-cover img { width: 100%; height: 100%; object-fit: cover; }
.theme-paper .mc-cover-ph { color: #393630; font-size: 22px; }

.theme-paper .mc-playbtn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(23, 22, 19, .72);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding-left: 2px;
    cursor: pointer;
    opacity: 0;
    transform: scale(.86);
    transition: all .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-paper .mc-cover:hover .mc-playbtn { opacity: 1; transform: scale(1); }
.theme-paper .mc-playbtn.loading { opacity: 1; transform: scale(1); animation: pPulse 1s ease-in-out infinite; }

@keyframes pPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

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

.theme-paper .mc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-paper .mc-artist { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.theme-paper .mc-alb { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme-paper .mc-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--ink-3);
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.theme-paper .mc-quals { border-top: 1px solid var(--line-soft); padding: 4px 8px 6px; }

.theme-paper .qrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background .14s ease;
}

.theme-paper .qrow:hover { background: var(--paper-3); }

.theme-paper .qsrc {
    flex: 0 0 74px;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.theme-paper .qpills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }

.theme-paper .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 3px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    font-size: 11.5px;
    color: var(--ink-2);
    white-space: nowrap;
}

.theme-paper .pill-play {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.theme-paper .pill-play:hover { color: var(--green); }

.theme-paper .pill-dl {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(212,175,55, .08);
    color: var(--green);
    font-size: 0;
    cursor: pointer;
    text-decoration: none;
}

.theme-paper .pill-dl::before {
    content: "\2193";
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.theme-paper .pill-dl:hover { background: var(--green); color: #fff; }

.theme-paper .pp-size, .theme-paper .pp-src { font-size: 10.5px; color: var(--ink-4); }

.theme-paper .pg-standard { color: #4f4d49; }
.theme-paper .pg-lossless { color: #c8aa6e; border-color: rgba(200,170,110, .3); }
.theme-paper .pg-hires { color: #9ec5f2; border-color: rgba(47, 95, 140, .26); }

.theme-paper .mc-qlabel { font-size: 11px; color: var(--ink-3); padding: 0 10px 8px; }

/* 收藏 / 分享小工具条 */
.theme-paper .mc-tools { display: flex; gap: 8px; padding: 0 16px 12px; }

.theme-paper .mc-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-3);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all .16s ease;
}

.theme-paper .mc-tool:hover { color: var(--green); border-color: rgba(212,175,55, .3); background: rgba(212,175,55, .05); }
.theme-paper .mc-tool.on { color: var(--green); border-color: rgba(212,175,55, .38); background: rgba(212,175,55, .08); }

/* ---------- 搜索结果头 ---------- */

.theme-paper .result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 26px 0 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.theme-paper .rh-kw {
    font-family: "Songti SC", "Source Han Serif SC", Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .01em;
}

.theme-paper .rh-kw em { color: var(--green); }

.theme-paper .rh-meta { font-size: 12.5px; color: var(--ink-3); }
.theme-paper .rh-meta b { color: var(--ink); font-weight: 600; }
.theme-paper .rh-srcs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.theme-paper .src-chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-3);
    letter-spacing: .04em;
}

/* 搜索页大搜索框 */
.theme-paper .searchbar {
    display: flex;
    gap: 10px;
    padding: 22px 0 8px;
}

.theme-paper .searchbar input {
    flex: 1 1 auto;
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: var(--sh-1);
}

.theme-paper .searchbar input:focus { border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(212,175,55, .08); }

.theme-paper .searchbar .btn-search { border-radius: 999px; height: 46px; padding: 0 26px; }

/* ---------- 播放器 ---------- */

.theme-paper .player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 76px;
    padding: 0 max(24px, calc((100vw - 1200px) / 2 + 26px));
    background: rgba(14, 16, 20, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 34px -30px rgba(30, 26, 16, .8);
}

.theme-paper .player[hidden] { display: none; }

.theme-paper .pl-progress {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: rgba(212,175,55, .1);
    cursor: pointer;
}

.theme-paper .pl-progress i { display: block; height: 100%; width: 0; background: var(--green); }
.theme-paper .pl-progress:hover i { background: var(--brass); }

.theme-paper .pl-cover {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg, #1c1a15, #27241e);
    color: #a79e8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

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

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

.theme-paper .pl-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme-paper .pl-time { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.theme-paper .pl-ctrl {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--green);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-paper .pl-ctrl:hover { background: var(--green-3); }

.theme-paper .pl-dl, .theme-paper .pl-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-3);
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-paper .pl-dl:hover, .theme-paper .pl-close:hover { color: var(--green); border-color: var(--line-2); }

.theme-paper .pl-q {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--paper-3);
    color: var(--ink-3);
    border: 1px solid var(--line);
}

@media (max-width: 720px) {
    .theme-paper .player { height: 66px; padding: 0 14px; gap: 10px; }
    .theme-paper .pl-time, .theme-paper .pl-q { display: none; }
    .theme-paper .pl-cover { flex: 0 0 40px; width: 40px; height: 40px; }
}

/* ---------- toast / modal ---------- */

.theme-paper .toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(8px);
    z-index: 120;
    max-width: min(90vw, 460px);
    padding: 11px 18px;
    border-radius: 9px;
    background: #12151a;
    color: #f3efe3;
    font-size: 13px;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.theme-paper .toast[hidden] { display: block; opacity: 0; }

.theme-paper .toast:not([hidden]) { opacity: 1; transform: translateX(-50%) translateY(0); }
.theme-paper .toast-err { background: #a83b2b; }

.theme-paper .modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(24, 22, 16, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.theme-paper .modal[hidden] { display: none; }

.theme-paper .modal-box {
    width: 100%;
    max-width: 380px;
    background: var(--paper-2);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--sh-3);
    border: 1px solid var(--line);
}

/* ---------- 页脚 ---------- */

.theme-paper .footer {
    margin-top: 56px;
    background: #101216;
    color: rgba(244, 240, 230, .62);
    border-top: 0;
}

.theme-paper .footer .wrap { padding-top: 44px; padding-bottom: 26px; }

.theme-paper .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.theme-paper .f-brand .logo-text b { color: #15130d; }
.theme-paper .f-brand .logo-text span { color: rgba(246, 242, 231, .38); }
.theme-paper .f-brand .logo-mark { background: #e2c56a; }

.theme-paper .f-brand p {
    font-size: 12.5px;
    line-height: 1.85;
    margin: 14px 0 0;
    color: rgba(244, 240, 230, .5);
    max-width: 300px;
}

.theme-paper .f-col h4 {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(246, 242, 231, .42);
    font-weight: 600;
    margin: 0 0 12px;
}

.theme-paper .f-col a, .theme-paper .f-col span {
    display: block;
    font-size: 12.5px;
    line-height: 2;
    color: rgba(244, 240, 230, .68);
}

.theme-paper .f-col a:hover { color: var(--brass-2); }

.theme-paper .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 18px;
    font-size: 11.5px;
    color: rgba(244, 240, 230, .42);
}

.theme-paper .footer-bottom a { color: rgba(244, 240, 230, .6); }

@media (max-width: 860px) {
    .theme-paper .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- 登录 / 注册 ---------- */

.theme-paper .auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px 72px;
}

.theme-paper .auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px 30px 28px;
    box-shadow: var(--sh-2);
}

.theme-paper .auth-box h1 {
    font-family: "Songti SC", "Source Han Serif SC", Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
    margin: 0 0 6px;
}

.theme-paper .auth-box .auth-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 24px; }

.theme-paper .auth-field { margin-bottom: 15px; }

.theme-paper .auth-field label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 7px;
}

.theme-paper .auth-field input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all .16s ease;
}

.theme-paper .auth-field input:focus {
    background: var(--paper-2);
    border-color: var(--green-2);
    box-shadow: 0 0 0 3px rgba(212,175,55, .08);
}

.theme-paper .auth-box .btn-main { width: 100%; height: 44px; margin-top: 6px; }

.theme-paper .auth-alt { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 18px; }
.theme-paper .auth-alt a { color: var(--green); font-weight: 600; }

/* 注册邮箱验证：查收邮件提示 */
.theme-paper .verify-tip {
    margin: 4px 0 18px;
    padding: 12px 14px;
    border: 1px dashed rgba(232, 147, 74, .4);
    border-radius: 10px;
    background: rgba(240, 201, 106, .06);
    font-size: 12.5px;
    line-height: 1.8;
    color: #bfb49a;
}
.theme-paper .verify-tip b { color: #f5d488; }
.theme-paper .resend-btn { width: 100%; height: 42px; cursor: pointer; }
.theme-paper .resend-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 会员中心 / 面板 ---------- */

.theme-paper .page-head {
    padding: 34px 0 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}

.theme-paper .page-head h1 {
    font-family: "Songti SC", "Source Han Serif SC", Georgia, serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 0;
}

.theme-paper .page-head p { font-size: 13px; color: var(--ink-3); margin: 7px 0 0; }

.theme-paper .panel {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--sh-1);
}

.theme-paper .panel-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink);
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
}

.theme-paper .member-card {
    background:
        radial-gradient(600px 240px at 88% -30%, rgba(200,170,110, .16), transparent 66%),
        linear-gradient(160deg, #d4af37, #a8862a);
    border: 0;
    border-radius: 18px;
    color: #f2eee0;
    box-shadow: 0 20px 44px -34px rgba(20, 35, 28, .9);
    padding: 26px 28px;
}

.theme-paper .member-card .panel-title {
    color: rgba(246, 242, 231, .52);
    border-bottom-color: rgba(255, 255, 255, .1);
}

.theme-paper .member-head .mh-name { color: #14120c; }

.theme-paper .vip-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.theme-paper .vip-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.theme-paper .vip-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.theme-paper .vip-table tr:last-child td { border-bottom: 0; }

.theme-paper .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.theme-paper .stat {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px 16px;
}

.theme-paper .stat b {
    display: block;
    font-family: "Songti SC", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.theme-paper .stat span { font-size: 11.5px; color: var(--ink-3); }

.theme-paper .quota-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.theme-paper .quota-item {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 15px;
}

.theme-paper .chips { display: flex; gap: 8px; flex-wrap: wrap; }

.theme-paper .chip {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    font-size: 12px;
    color: var(--ink-3);
}

.theme-paper .chip.on { background: var(--green); border-color: var(--green); color: #13120c; }

.theme-paper .pager { display: flex; gap: 6px; justify-content: center; margin: 26px 0; }

.theme-paper .pager a, .theme-paper .pager span {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.theme-paper .pager .on { background: var(--green); border-color: var(--green); color: #13120c; }

.theme-paper .empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.theme-paper .empty .big { font-size: 34px; color: var(--line-2); margin-bottom: 10px; }

.theme-paper .flash {
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 12.5px;
    margin: 16px 0;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2);
}

.theme-paper .flash.ok { border-color: rgba(47, 115, 85, .3); background: rgba(47, 115, 85, .07); color: #4a8f6d; }
.theme-paper .flash.err { border-color: rgba(176, 74, 47, .28); background: rgba(176, 74, 47, .06); color: #b8412f; }

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

.theme-paper .rank-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 18px 10px;
    box-shadow: var(--sh-1);
}

.theme-paper .rank-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}

.theme-paper .rank-item:last-child { border-bottom: 0; }

.theme-paper .rank-num {
    flex: 0 0 20px;
    font-family: "Songti SC", Georgia, serif;
    font-size: 13px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.theme-paper .rank-item:nth-child(-n+3) .rank-num { color: var(--brass); font-weight: 700; }

/* ---------- 歌曲详情 ---------- */

.theme-paper .song-hero {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--line);
}

.theme-paper .vinyl {
    flex: 0 0 148px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, #23211d 0 2px, #1a1916 2px 4px);
    position: relative;
    box-shadow: 0 18px 40px -24px rgba(30, 26, 16, .8);
}

.theme-paper .vinyl::after {
    content: "";
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: radial-gradient(circle, #f0dda8 0 34%, #c8aa6e 34% 100%);
}

.theme-paper .song-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- 加载动效 ---------- */

.theme-paper .sload {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 16, 20, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.theme-paper .sload[hidden] { display: none; }

.theme-paper .sload-box { text-align: center; color: var(--ink-2); }

.theme-paper .sload-title {
    font-family: "Songti SC", Georgia, serif;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 14px;
}

.theme-paper .sload-bar { width: 200px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 0 auto; }
.theme-paper .sload-bar i { display: block; height: 100%; background: var(--green); transition: width .3s ease; }
.theme-paper .sload-step, .theme-paper .sload-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }

/* ---------- 通用小工具 ---------- */

.theme-paper .badge {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(200,170,110, .12);
    color: #c8aa6e;
    border: 1px solid rgba(200,170,110, .22);
    letter-spacing: .04em;
}

.theme-paper .divider { height: 1px; background: var(--line); margin: 22px 0; }
.theme-paper .eyebrow {
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 600;
}

.theme-paper .note { font-size: 12px; color: var(--ink-3); }
.theme-paper .note.err {
    padding: 10px 14px;
    border: 1px solid rgba(176, 74, 47, .3);
    border-radius: 10px;
    background: rgba(176, 74, 47, .08);
    color: #d4826b;
}
.theme-paper .note.ok {
    padding: 10px 14px;
    border: 1px solid rgba(47, 115, 85, .3);
    border-radius: 10px;
    background: rgba(47, 115, 85, .08);
    color: #6db892;
}

@media (max-width: 720px) {
    .theme-paper .wrap { padding: 0 16px; }
    .theme-paper .stats { grid-template-columns: 1fr 1fr; }
    .theme-paper .quota-grid { grid-template-columns: 1fr; }
    .theme-paper .song-hero { flex-direction: column; gap: 16px; }
    .theme-paper .vinyl { flex: 0 0 104px; width: 104px; height: 104px; }
    .theme-paper .page-head h1 { font-size: 22px; }
    .theme-paper .rh-kw { font-size: 20px; }
}

@media (max-width: 640px) {
    .theme-paper .topbar .inner { gap: 8px; height: 54px; min-height: 54px; padding: 0 14px; }
    .theme-paper .topbar form { display: none; }
    .theme-paper .ulink { display: none; }
    .theme-paper .ulink.primary { display: inline-flex; height: 32px; padding: 0 12px; font-size: 12.5px; }
    .theme-paper .userbox { margin-left: auto; }
}

/* ---------- 顶部公告条（后台站点设置可配） ---------- */

.theme-paper .announce-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 26px;
    height: 40px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(212, 175, 55, .10), rgba(212, 175, 55, .03) 55%, transparent);
}

.theme-paper .announce-bar .an-ico { font-size: 14px; flex: 0 0 auto; }

.theme-paper .announce-bar .an-clip {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.theme-paper .announce-bar .an-text {
    display: inline-block;
    font-size: 12.5px;
    color: #e2c56a;
    letter-spacing: .02em;
    padding-left: 100%;
    animation: an-scroll 26s linear infinite;
}

/* v24：从右边缘出发，匀速走到左侧消失 */
@keyframes an-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 640px) {
    .theme-paper .announce-bar { padding: 0 16px; height: 36px; }
}

/* ==========================================================================
   v20：渐变主色 + 会员徽章 + 自定义背景 + 热榜新行
   ========================================================================== */

.theme-paper {
    --grad: linear-gradient(135deg, #f0c96a, #e8934a 55%, #e2604f);
    --grad-soft: linear-gradient(135deg, rgba(240, 201, 106, .16), rgba(232, 147, 74, .10) 55%, rgba(226, 96, 79, .08));
    --grad-line: linear-gradient(135deg, rgba(240, 201, 106, .55), rgba(232, 147, 74, .45) 55%, rgba(226, 96, 79, .40));
}

/* ---------- 全站自定义背景图（后台站点设置上传/填 URL） ---------- */

body.theme-paper.has-bg {
    background-color: rgba(10, 11, 14, calc(var(--bg-dim, 45%) * 1%));
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

/* ---------- 顶部公告条：金→橙→红渐变 ---------- */

.theme-paper .announce-bar {
    width: 100%;
    max-width: 100%;
    height: 44px;
    border-bottom: 0;
    background: linear-gradient(90deg, #f0c96a, #e8934a 55%, #e2604f);
    box-shadow: 0 6px 18px -10px rgba(232, 147, 74, .55);
}

.theme-paper .announce-bar .an-ico { color: #2a170a; }

.theme-paper .announce-bar .an-text {
    color: #2a170a;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: none;
    padding-left: 100%;
    animation: an-scroll 26s linear infinite;
}

/* ---------- 会员徽章（导航 / 用户中心 / 后台预览） ---------- */

.theme-paper .mbadge,
.mbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 9px 2.5px 7px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    background: #1a1e24;
    color: #95958d;
    border: 1px solid #2a3138;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}

.mbadge .mb-ico {
    width: 14px;
    height: 14px;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mbadge .mb-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

.mbadge-vip1,
.mbadge-vip2,
.mbadge-vip3 {
    background: linear-gradient(135deg, rgba(240, 201, 106, .22), rgba(232, 147, 74, .16) 55%, rgba(226, 96, 79, .14));
    border-color: rgba(232, 147, 74, .55);
    color: #f5d488;
    box-shadow: 0 2px 10px -4px rgba(232, 147, 74, .5);
}

/* ---------- 热榜行：封面 + 播放 + 点赞 ---------- */

.theme-paper .rank-item { gap: 10px; }

.theme-paper .rank-item .num {
    flex: 0 0 30px;
    width: 30px;
    text-align: center;
}

.theme-paper .rcover {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    overflow: hidden;
    background: #161a21;
    border: 1px solid #262a32;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5c5a4e;
    font-style: normal;
}

.theme-paper .rcover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.theme-paper .rmain { flex: 1 1 auto; min-width: 0; }

.theme-paper .rmain .txt {
    display: block;
    flex: initial;
    max-width: 100%;
}

.theme-paper .rmain .meta {
    flex: initial;
    max-width: 100%;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-paper .racts {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    opacity: .8;
}

.theme-paper .rank-item:hover .racts { opacity: 1; }

.theme-paper .ract {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #2a3138;
    background: #141820;
    color: #a9a396;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.theme-paper .ract-play:hover {
    background: var(--grad);
    color: #16130a;
    border-color: transparent;
}

.theme-paper .ract-like:hover { color: #f5d488; border-color: rgba(240, 201, 106, .4); }

.theme-paper .ract-like.on {
    color: #e2604f;
    border-color: rgba(226, 96, 79, .45);
    background: rgba(226, 96, 79, .1);
}

/* ---------- 渐变点缀：标题 / 序号 / 主按钮 ---------- */

.theme-paper .hm-sec-head h2,
.theme-paper .pp-bhead h2 {
    background: linear-gradient(120deg, #f5d488 10%, #e8934a 55%, #e2604f 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-paper .hm-idx {
    background: var(--grad);
    color: #16130a;
    border-color: transparent;
}

.theme-paper .pp-play,
.theme-paper .hmp-btn {
    background: var(--grad);
    color: #16130a;
    box-shadow: 0 10px 24px -10px rgba(232, 147, 74, .7);
}

.theme-paper .btn-dl,
.theme-paper .btn-main {
    background: var(--grad);
    color: #16130a;
    box-shadow: 0 12px 30px -16px rgba(232, 147, 74, .9);
}

.theme-paper .hm-search button {
    background: var(--grad);
    color: #16130a;
}

/* 导航与 logo 渐变 */
.theme-paper .logo-text b {
    background: linear-gradient(120deg, #f5d488 15%, #e8934a 60%, #e2604f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-paper .nav-links a.on {
    color: #f5d488;
    background: var(--grad-soft);
}

/* 播放页点赞按钮态 */
.theme-paper .pp-ghost.is-liked {
    color: #e2604f;
    border-color: rgba(226, 96, 79, .5);
    background: rgba(226, 96, 79, .1);
}

/* 播放器卡渐变描边 */
.theme-paper .hm-player,
.theme-paper .hm-playrow-chart {
    border-color: rgba(232, 147, 74, .28);
    background:
        linear-gradient(135deg, rgba(240, 201, 106, .10), rgba(232, 147, 74, .05) 45%, rgba(226, 96, 79, .04)),
        #11141a;
}

/* ==========================================================================
   v24：靓号系统 —— 全站号牌 / 会员闪烁特效 / 靓号商城
   ========================================================================== */

/* ---------- 通用号牌（用户名后跟的 No.xxx） ---------- */

.vipnum {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    color: #a8862e;
    background: rgba(212, 175, 55, .10);
    border: 1px solid rgba(212, 175, 55, .28);
    line-height: 1.5;
    white-space: nowrap;
}

/* 靓号用户（后台分配 / 商城购买 / 会员）：金色渐变 + 流光 + 闪烁 */
.vipnum.fancy {
    color: #2a170a;
    background: linear-gradient(120deg, #f5d488, #e8934a 60%, #e2604f);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(232, 147, 74, .35), 0 2px 8px -2px rgba(232, 147, 74, .5);
    position: relative;
    overflow: hidden;
    animation: vipnum-blink 2.6s ease-in-out infinite;
}

.vipnum.fancy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: vipnum-shine 3.2s ease-in-out infinite;
}

.vipnum.big {
    font-size: 12.5px;
    padding: 3px 12px;
}

@keyframes vipnum-shine {
    0%, 55%  { transform: translateX(-120%); }
    85%, 100% { transform: translateX(120%); }
}

@keyframes vipnum-blink {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25); }
}

/* ---------- 空间头部：会员/靓号大号牌 ---------- */

.sp-uid {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #8b8e81;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.sp-uid b {
    font-size: inherit;
}

.sp-uid.vip {
    font-size: 24px;
    padding: 6px 18px 7px;
    border-radius: 14px;
    color: #2a170a;
    background: linear-gradient(120deg, #f5d488, #e8934a 58%, #e2604f);
    box-shadow: 0 4px 16px -4px rgba(232, 147, 74, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
    position: relative;
    overflow: hidden;
    animation: vipnum-blink 2.6s ease-in-out infinite;
}

.sp-uid.vip b {
    font-size: 27px;
    letter-spacing: 2px;
}

.sp-uid.vip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: vipnum-shine 3.2s ease-in-out infinite;
}

/* ---------- 靓号商城（会员中心） ---------- */

.uid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 6px;
}

.uid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px 14px;
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 14px;
    background:
        radial-gradient(80% 120% at 50% -20%, rgba(212, 175, 55, .10), transparent 60%),
        rgba(212, 175, 55, .03);
    text-align: center;
}

.uid-num {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #f5d488, #e8934a 60%, #e2604f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.uid-tag {
    font-size: 10px;
    font-weight: 700;
    color: #a8862e;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 99px;
    padding: 1px 8px;
    letter-spacing: 1px;
}

.uid-price {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.uid-item .btn-main,
.uid-item .btn-ghost {
    width: 100%;
}

.btn-main.off {
    filter: grayscale(.7) brightness(.75);
    cursor: not-allowed;
}

.uid-rules {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 2;
    color: var(--muted);
}

@media (max-width: 640px) {
    .uid-grid { grid-template-columns: 1fr 1fr; }
    .sp-uid.vip { font-size: 20px; padding: 5px 14px 6px; }
    .sp-uid.vip b { font-size: 22px; }
    .vipnum { font-size: 10px; }
}

/* v24：靓号商城在金色会员卡内的适配（深色对比） */

.theme-paper .member-card .uid-item {
    background:
        radial-gradient(80% 120% at 50% -20%, rgba(0, 0, 0, .18), transparent 60%),
        rgba(30, 18, 6, .30);
    border-color: rgba(255, 255, 255, .22);
}

.theme-paper .member-card .uid-num {
    background: linear-gradient(120deg, #fff3d0, #ffd27a 60%, #ffb45e);
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-paper .member-card .uid-price {
    color: rgba(246, 242, 231, .82);
}

.theme-paper .member-card .uid-tag {
    color: #fff3d0;
    border-color: rgba(255, 255, 255, .38);
}

.theme-paper .member-card .uid-rules {
    color: rgba(246, 242, 231, .85);
}

.theme-paper .member-card .uid-rules b {
    color: #fff3d0;
}

.theme-paper .member-card > div[style*="align-items:center"] span,
.theme-paper .member-card .mu-sub { color: rgba(246, 242, 231, .8); }