/**
 * DJ 音乐站 — 紫色扁平主题（无渐变）Bootstrap 5.3
 */
:root,
[data-theme="light"] {
    --dj-primary: #7c3aed;
    --dj-primary-hover: #6d28d9;
    --dj-primary-active: #5b21b6;
    --dj-primary-soft: #ede9fe;
    --dj-primary-muted: #a78bfa;
    --dj-bg: #f6f5fa;
    --dj-surface: #ffffff;
    --dj-surface-2: #efedf5;
    --dj-surface-3: #e8e4f3;
    --dj-border: #ddd6f3;
    --dj-text: #1a1625;
    --dj-text-muted: #6b6578;
    --dj-header-bg: #ffffff;
    --dj-footer-bg: #efedf5;
    --dj-footer-text: #6b6578;
    --dj-footer-link: #6d28d9;
    --dj-shadow: 0 1px 3px rgba(26, 22, 37, 0.08);
    --dj-radius: 10px;
    --dj-radius-lg: 14px;
    --dj-nav-h: 64px;
    --dj-nav-tags-h: 26px;
    --dj-subnav-h: 0px;
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --primary-color: #7c3aed;
    --background-dark: #f6f5fa;
    --dj-player-bg: var(--dj-surface-3);
    --dj-player-border: var(--dj-border);
    --dj-player-text: var(--dj-text);
    --dj-player-muted: var(--dj-text-muted);
    --dj-player-accent: var(--dj-primary);
    --dj-player-accent-hover: var(--dj-primary-hover);
    --dj-player-accent-glow: var(--dj-primary-soft);
    --dj-player-track: var(--dj-border);
    --dj-player-ctrl-bg: var(--dj-surface-2);
    --dj-player-ctrl-color: var(--dj-text);
    --dj-player-play-fg: #ffffff;
    --dj-player-blur-scrim: rgba(255, 255, 255, 0.8);
    --dj-player-blur-border: rgba(124, 58, 237, 0.16);
    --dj-player-on-blur-track: rgba(26, 22, 37, 0.14);
    --dj-player-on-blur-ctrl-bg: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] {
    --dj-primary-soft: #2d2640;
    --dj-primary-muted: #a78bfa;
    --dj-bg: #12101a;
    --dj-surface: #1c1926;
    --dj-surface-2: #252131;
    --dj-surface-3: #2f2a3d;
    --dj-border: #3d3654;
    --dj-text: #eeebf5;
    --dj-text-muted: #a39aad;
    --dj-header-bg: #1c1926;
    --dj-footer-bg: #0e0c14;
    --dj-footer-text: #8a8299;
    --dj-footer-link: #d4cce8;
    --dj-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --primary-color: #a78bfa;
    --background-dark: #12101a;
    --dj-player-bg: var(--dj-surface-3);
    --dj-player-border: var(--dj-border);
    --dj-player-text: var(--dj-text);
    --dj-player-muted: var(--dj-text-muted);
    --dj-player-accent: var(--dj-primary-muted);
    --dj-player-accent-hover: var(--dj-primary);
    --dj-player-accent-glow: var(--dj-primary-soft);
    --dj-player-track: var(--dj-border);
    --dj-player-ctrl-bg: var(--dj-surface-2);
    --dj-player-ctrl-color: var(--dj-text);
    --dj-player-play-fg: #ffffff;
    --dj-player-blur-scrim: rgba(14, 12, 20, 0.78);
    --dj-player-blur-border: rgba(255, 255, 255, 0.12);
    --dj-player-on-blur-track: rgba(255, 255, 255, 0.22);
    --dj-player-on-blur-ctrl-bg: rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dj-primary-soft: #2d2640;
        --dj-primary-muted: #a78bfa;
        --dj-bg: #12101a;
        --dj-surface: #1c1926;
        --dj-surface-2: #252131;
        --dj-surface-3: #2f2a3d;
        --dj-border: #3d3654;
        --dj-text: #eeebf5;
        --dj-text-muted: #a39aad;
        --dj-header-bg: #1c1926;
        --dj-footer-bg: #0e0c14;
        --dj-footer-text: #8a8299;
        --dj-footer-link: #d4cce8;
        --primary-color: #a78bfa;
        --background-dark: #12101a;
        --dj-player-bg: var(--dj-surface-3);
        --dj-player-border: var(--dj-border);
        --dj-player-text: var(--dj-text);
        --dj-player-muted: var(--dj-text-muted);
        --dj-player-accent: var(--dj-primary-muted);
        --dj-player-accent-hover: var(--dj-primary);
        --dj-player-accent-glow: var(--dj-primary-soft);
        --dj-player-track: var(--dj-border);
        --dj-player-ctrl-bg: var(--dj-surface-2);
        --dj-player-ctrl-color: var(--dj-text);
        --dj-player-play-fg: #ffffff;
        --dj-player-blur-scrim: rgba(14, 12, 20, 0.78);
        --dj-player-blur-border: rgba(255, 255, 255, 0.12);
        --dj-player-on-blur-track: rgba(255, 255, 255, 0.22);
        --dj-player-on-blur-ctrl-bg: rgba(0, 0, 0, 0.38);
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --dj-bg: #f6f5fa;
        --dj-surface: #ffffff;
        --dj-surface-2: #efedf5;
        --dj-border: #ddd6f3;
        --dj-text: #1a1625;
        --dj-text-muted: #6b6578;
        --dj-header-bg: #ffffff;
        --dj-footer-bg: #efedf5;
        --dj-footer-text: #6b6578;
        --dj-footer-link: #6d28d9;
        --primary-color: #7c3aed;
        --background-dark: #f6f5fa;
        --dj-player-bg: var(--dj-surface-3);
        --dj-player-border: var(--dj-border);
        --dj-player-text: var(--dj-text);
        --dj-player-muted: var(--dj-text-muted);
        --dj-player-accent: var(--dj-primary);
        --dj-player-accent-hover: var(--dj-primary-hover);
        --dj-player-accent-glow: var(--dj-primary-soft);
        --dj-player-track: var(--dj-border);
        --dj-player-ctrl-bg: var(--dj-surface-2);
        --dj-player-ctrl-color: var(--dj-text);
        --dj-player-play-fg: #ffffff;
        --dj-player-blur-scrim: rgba(255, 255, 255, 0.8);
        --dj-player-blur-border: rgba(124, 58, 237, 0.16);
        --dj-player-on-blur-track: rgba(26, 22, 37, 0.14);
        --dj-player-on-blur-ctrl-bg: rgba(255, 255, 255, 0.72);
    }
}

@media (max-width: 991.98px) {
    :root {
        --dj-nav-tags-h: 0px;
        --dj-nav-h: 56px;
    }
}

@media (min-width: 992px) {
    :root {
        --dj-nav-h: 60px;
        --dj-subnav-h: 58px;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.dj-site {
    margin: 0;
    padding: 0;
    padding-top: calc(var(--dj-nav-h) + var(--dj-nav-tags-h) + var(--dj-subnav-h));
    background: var(--dj-bg) !important;
    color: var(--dj-text) !important;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.dj-site a {
    color: var(--dj-primary);
    text-decoration: none;
}

body.dj-site a:hover {
    color: var(--dj-primary-hover);
}

/* ========== 顶栏 ========== */
.dj-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--dj-header-bg);
    border-bottom: 1px solid var(--dj-border);
    box-shadow: none;
    overflow: visible;
}

.dj-header .navbar {
    min-height: var(--dj-nav-h);
    padding: 0 1rem;
}

.dj-header .navbar-brand img,
.dj-site-logo {
    height: 38px;
    width: auto;
    max-height: 40px;
}

.dj-member-nav .dj-site-logo {
    max-height: 40px;
}

/* 浅色 logo_m.png / 深色 logo.png（随 data-bs-theme 切换） */
.dj-logo-dark {
    display: none;
}

.dj-logo-light {
    display: inline-block;
}

[data-bs-theme="dark"] .dj-logo-light,
[data-theme="dark"] .dj-logo-light {
    display: none !important;
}

[data-bs-theme="dark"] .dj-logo-dark,
[data-theme="dark"] .dj-logo-dark {
    display: inline-block !important;
}

/* ---------- 搜索框 ---------- */
.dj-search-wrap {
    max-width: 560px;
}

.dj-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 42px;
    padding: 0 0.35rem 0 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dj-border);
    border-radius: 0;
    transition: border-color 0.15s, background 0.15s;
}

.dj-search-bar:focus-within {
    background: transparent;
    border-bottom-color: var(--dj-primary);
    box-shadow: none;
}

.dj-search-bar__icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--dj-text-muted);
    opacity: 0.65;
}

.dj-search-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dj-text);
    font-size: 13px;
    line-height: 1.35;
}

.dj-search-input::placeholder {
    color: var(--dj-text-muted);
    opacity: 0.85;
}

.dj-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--dj-primary);
    cursor: pointer;
    transition: color 0.15s;
}

.dj-search-btn:hover {
    background: transparent;
    color: var(--dj-primary-hover);
}

.dj-search-btn i {
    font-size: 0.85rem;
    line-height: 1;
}

.dj-ser-result,
#ser_result {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 0.35rem 0;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 0;
    box-shadow: none;
    z-index: 1055;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    font-size: 13px;
    list-style: none;
}

.dj-ser-result a,
#ser_result a {
    display: block;
    padding: 0.45rem 0.85rem;
    color: var(--dj-text);
    text-decoration: none;
}

.dj-ser-result a:hover,
#ser_result a:hover {
    background: var(--dj-primary-soft);
    color: var(--dj-primary);
}

.dj-hot-tags {
    display: none;
}

@media (min-width: 992px) {
    .dj-hot-tags {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.2rem;
        min-height: var(--dj-nav-tags-h);
        font-size: 11px;
        overflow: hidden;
    }

    .dj-hot-tags__label {
        color: var(--dj-text-muted);
        font-size: 10px;
        flex-shrink: 0;
    }

    .dj-hot-tags a {
        color: var(--dj-primary);
        padding: 1px 8px;
        border-radius: 999px;
        background: transparent;
        border: none;
        text-decoration: none;
        line-height: 1.4;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .dj-hot-tags a:hover {
        background: var(--dj-primary-soft);
    }
}

.dj-theme-switch {
    display: none !important;
}

.dj-navbar-actions .dj-theme-switch,
.dj-offcanvas .dj-theme-switch {
    display: none !important;
}

.dj-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.dj-navbar-top {
    padding: 0;
}

@media (min-width: 992px) {
    .dj-navbar-top .navbar-collapse.dj-navbar-actions {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: calc(var(--dj-nav-h) + var(--dj-nav-tags-h));
    }

    .dj-navbar-top .dj-nav-inner {
        align-items: center;
        padding-top: 0.45rem;
        padding-bottom: 0.3rem;
    }
}

.dj-navbar-top .navbar-brand {
    margin-right: 1rem;
    padding: 0;
}

.dj-navbar-top .navbar-brand img {
    height: 40px;
    width: auto;
}

.dj-header .navbar-brand img {
    height: 40px;
}

.dj-navbar-actions {
    align-items: center;
    min-height: var(--dj-nav-h);
}

.dj-navbar-actions .nav-link {
    font-size: 13px;
    padding: 0.35rem 0.55rem !important;
}

.dj-navbar-actions .dj-theme-switch .btn {
    font-size: 11px;
    padding: 0.15rem 0.4rem;
}

.dj-navbar-actions .btn-dj.btn-sm {
    font-size: 12px;
    padding: 0.25rem 0.65rem;
}

/* 顶栏登录用户 */
.dj-nav-user-toggle {
    max-width: 160px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
}

.dj-nav-user-toggle:hover,
.dj-nav-user-toggle.show {
    border-bottom-color: var(--dj-border);
}

.dj-nav-user-toggle::after {
    margin-left: 0.25rem;
}

.dj-nav-avatar {
    object-fit: cover;
    border: 2px solid var(--dj-primary-muted);
    flex-shrink: 0;
}

.dj-nav-username {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--dj-text);
}

.dj-nav-vip {
    color: #f59e0b;
    font-size: 12px;
    line-height: 1;
}

.dj-user-menu {
    min-width: 220px;
    border: 1px solid var(--dj-border);
    border-radius: 0;
    box-shadow: none;
}

.dj-user-menu__head {
    white-space: normal;
}

.dj-user-menu .dropdown-item {
    font-size: 13px;
    padding: 0.45rem 1rem;
}

.dj-user-menu .dropdown-item i {
    opacity: 0.75;
}

.dj-offcanvas-user {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dj-border);
    border-radius: 0;
}

.dj-subnav {
    display: none;
    background: var(--dj-header-bg);
    border-bottom: 1px solid var(--dj-border);
    box-shadow: none;
    overflow: visible;
}

@media (min-width: 992px) {
    .dj-subnav {
        display: block;
        position: fixed;
        top: calc(var(--dj-nav-h) + var(--dj-nav-tags-h));
        left: 0;
        right: 0;
        z-index: 1025;
        min-height: var(--dj-subnav-h);
    }
}

.dj-subnav-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.dj-subnav-list {
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: var(--dj-subnav-h);
    align-items: stretch;
    gap: 0.15rem;
    padding: 0 0.25rem;
    margin: 0;
}

.dj-subnav-list > .nav-item {
    position: static;
    flex-shrink: 0;
}

.dj-subnav .nav-link {
    color: var(--dj-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0 1.25rem;
    min-height: var(--dj-subnav-h);
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.dj-subnav .nav-link:hover,
.dj-subnav .nav-link.active,
.dj-subnav .dj-nav-dropdown.show > .nav-link {
    color: var(--dj-primary);
    background: transparent;
    border-bottom-color: var(--dj-primary);
}

.dj-subnav .dropdown-toggle::after {
    margin-left: 0.4rem;
    vertical-align: 0.12em;
    opacity: 0.55;
}

.dj-subnav .dj-nav-dropdown--empty .dropdown-toggle::after {
    display: none;
}

.dj-subnav .dropdown-menu {
    display: none !important;
    position: fixed;
    min-width: 200px;
    margin: 0;
    padding: 0.5rem 0;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 0;
    box-shadow: none;
    z-index: 1060;
}

.dj-subnav .dropdown-menu.show {
    display: block !important;
}

.dj-subnav .dropdown-item {
    color: var(--dj-text);
    font-size: 14px;
    padding: 0.55rem 1.15rem;
    line-height: 1.35;
}

.dj-subnav .dropdown-item:hover,
.dj-subnav .dropdown-item:focus {
    background: var(--dj-primary-soft);
    color: var(--dj-primary);
}

.dj-subnav .dropdown-divider {
    border-color: var(--dj-border);
    margin: 0.35rem 0;
}

.dj-header-dropdown {
    position: static;
}

.dj-header .dropdown-menu {
    display: none !important;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 0;
    box-shadow: none;
    padding: 0.4rem 0;
    z-index: 1065;
}

.dj-header .dropdown-menu.shadow,
.dj-header .dropdown-menu.shadow-sm,
.dj-subnav .dropdown-menu.shadow-sm {
    box-shadow: none !important;
}

.dj-offcanvas {
    border-left: 1px solid var(--dj-border);
    box-shadow: none;
}

.dj-header .dropdown-menu.show {
    display: block !important;
}

.dj-header .dropdown-item {
    color: var(--dj-text);
    font-size: 14px;
    padding: 0.5rem 1rem;
}

.dj-header .dropdown-item:hover {
    background: var(--dj-primary-soft);
    color: var(--dj-primary);
}

.dj-cd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.35em;
    margin-left: 0.2rem;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    background: var(--dj-primary) !important;
    color: #fff !important;
}

#cd_mneu > #cdquantity {
    display: none !important;
}

/* 顶栏右侧 — 用户 / 播放记录 / 歌曲刻录 / 发布 */
.dj-navbar-actions > .navbar-nav {
    gap: 0.2rem 0.4rem;
}

.dj-navbar-actions .nav-item {
    display: flex;
    align-items: center;
}

.dj-navbar-actions .nav-link,
.dj-navbar-actions .dj-nav-user-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem !important;
    border-radius: var(--dj-radius, 8px);
    color: var(--dj-text) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.dj-navbar-actions .nav-link:hover,
.dj-navbar-actions .nav-link:focus,
.dj-navbar-actions .nav-link.show,
.dj-navbar-actions .dj-nav-user-toggle:hover,
.dj-navbar-actions .dj-nav-user-toggle.show,
.dj-navbar-actions .dj-nav-user-toggle:focus {
    color: var(--dj-primary) !important;
    background: var(--dj-primary-soft);
    border-bottom-color: transparent !important;
}

.dj-navbar-actions .nav-link.dropdown-toggle::after,
.dj-navbar-actions .dj-nav-user-toggle::after {
    margin-left: 0.1rem;
    vertical-align: middle;
    opacity: 0.55;
    border-top-color: currentColor;
}

.dj-navbar-actions .dj-nav-user-toggle {
    max-width: 168px;
    border: 1px solid transparent;
}

.dj-navbar-actions .dj-nav-username {
    color: inherit;
    font-weight: 600;
}

.dj-navbar-actions .dj-nav-vip {
    display: inline-flex;
    align-items: center;
    margin-left: -0.1rem;
}

.dj-navbar-actions #login_menu .btn-dj,
.dj-navbar-actions #cdorder_menu .btn-dj {
    min-height: 2rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--dj-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.dj-navbar-actions #cdorder_menu {
    margin-left: 0.15rem;
}

.dj-navbar-actions #cdorder_menu .nav-link {
    color: var(--dj-text-muted) !important;
}

.dj-navbar-actions #cdorder_menu .nav-link:hover {
    color: var(--dj-primary) !important;
}

.dj-playlog-menu {
    min-width: 260px;
    max-width: 340px;
    padding: 0 !important;
}

.dj-playlog-menu > li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dj-playlog-menu__title {
    padding: 0.55rem 1rem 0.35rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--dj-text-muted);
    border-bottom: 1px solid var(--dj-border);
}

.dj-playlog-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.35rem 0.5rem;
    font-size: 13px;
}

.dj-playlog-list .mc_class .mc1 {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--dj-border);
}

.dj-playlog-list .mc_class .mc1:last-child {
    border-bottom: none;
}

.dj-playlog-list .mc_class .mc1 a {
    color: var(--dj-text);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-playlog-list .mc_class .mc1 a:hover {
    color: var(--dj-primary);
}

.dj-playlog-list .nolog {
    display: block;
    padding: 1rem;
    text-align: center;
    color: var(--dj-text-muted);
}

.dj-playlog-list .btn-hred {
    display: block;
    margin: 0.5rem auto !important;
    padding: 0.35rem 1rem !important;
    width: auto !important;
    max-width: 200px;
    text-align: center;
    background: var(--dj-primary) !important;
    color: #fff !important;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5 !important;
    height: auto !important;
    text-decoration: none;
}

.dj-navbar-actions {
    overflow: visible;
}

.dj-navbar-top .collapse,
.dj-navbar-top .container-fluid {
    overflow: visible;
}

.dj-offcanvas .accordion-button {
    font-size: 14px;
    padding: 0.65rem 0;
    background: transparent;
    color: var(--dj-text);
    box-shadow: none;
}

.dj-offcanvas .accordion-button:not(.collapsed) {
    color: var(--dj-primary);
    background: var(--dj-primary-soft);
}

.dj-mobile-nav .accordion-body a {
    color: var(--dj-text);
    text-decoration: none;
}

.dj-mobile-nav .accordion-body a:hover {
    color: var(--dj-primary);
}

body.dj-site:not(.dj-auth) #aw,
body.dj-site:not(.dj-auth) #top_content,
body.dj-site:not(.dj-auth) #top_banner,
body.dj-site:not(.dj-auth) #top_head,
body.dj-site:not(.dj-auth) .black_line,
body.dj-site:not(.dj-auth) #top_banner_bg {
    display: none !important;
}

/* ========== 主区域 ========== */
.dj-main {
    flex: 1 0 auto;
    min-height: calc(100vh - var(--dj-nav-h) - var(--dj-subnav-h) - 100px);
}

.dj-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0.75rem 2rem;
}

/* ========== 首页（扁平，无卡片） ========== */
.dj-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 0.75rem 2rem;
}

@media (min-width: 992px) {
    .dj-home {
        padding-top: 1.5rem;
    }
}

/* 首页容器 div.dj-home 不是 mdi 图标，避免 fonts.css 的 .dj-home:before 显示方块 */
div.dj-home::before,
div.dj-home::after {
    content: none !important;
    display: none !important;
}

.dj-home-poster {
    margin-bottom: 1.5rem;
}

.dj-home-poster .poster-module {
    max-width: none;
    margin: 0;
    padding: 0;
}

.dj-home .dj-section {
    margin-bottom: 2rem;
}

.dj-home .dj-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--dj-border);
}

.dj-home .dj-section-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dj-text);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dj-home .dj-section-more {
    font-size: 13px;
    color: var(--dj-primary);
    text-decoration: none;
    white-space: nowrap;
}

.dj-home .dj-section-more:hover {
    color: var(--dj-primary-hover);
    text-decoration: underline;
}

/* 独家推荐 — 双列行条（对齐截图布局） */
.dj-home .dj-sole-section {
    --dj-sole-item-h: 50px;
}

.dj-home .dj-sole-head {
    border-bottom-color: var(--dj-primary);
}

.dj-home .dj-sole-head h2 {
    color: var(--dj-primary);
}

.dj-home .dj-sole-head .dj-section-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dj-home .dj-sole-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 8px;
}

.dj-home .dj-sole-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--dj-sole-item-h);
    min-height: var(--dj-sole-item-h);
    padding: 0 14px;
    background: var(--dj-surface-2);
    border-radius: 8px;
    border: 1px solid transparent;
    min-width: 0;
    overflow: hidden;
    transition: border-color 0.15s;
}

.dj-home .dj-sole-item:hover {
    border-color: var(--dj-primary-muted);
}

.dj-home .dj-sole-rank {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--dj-surface-3);
    color: var(--dj-text-muted);
}

.dj-home .dj-sole-rank.is-top {
    background: var(--dj-primary);
    color: #fff;
}

.dj-home .dj-sole-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.dj-home .dj-sole-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--dj-text);
    text-decoration: none;
}

.dj-home .dj-sole-item:hover .dj-sole-title {
    color: var(--dj-primary);
}

.dj-home .dj-sole-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--dj-text-muted);
    white-space: nowrap;
}

.dj-home .dj-sole-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dj-home .dj-sole-actions a {
    color: var(--dj-text);
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

.dj-home .dj-sole-actions a:hover {
    color: var(--dj-primary);
}

.dj-home .dj-sole-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--dj-text-muted);
    padding: 24px;
}

@media (max-width: 991.98px) {
    .dj-home .dj-sole-grid {
        grid-template-columns: 1fr;
    }
}

/* 首页四宫格分类列表（扁平，无卡片） */
.dj-home .dj-genre-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

.dj-home .dj-genre-block {
    min-width: 0;
}

.dj-home .dj-genre-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 0.55rem;
    margin-bottom: 0.35rem;
    border-bottom: 2px solid var(--dj-border);
    background: transparent;
}

.dj-home .dj-genre-block__head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dj-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.dj-home .dj-genre-block__head h3 .bi {
    color: var(--dj-primary);
    flex-shrink: 0;
}

.dj-home .dj-genre-block__more {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--dj-text-muted);
    text-decoration: none;
}

.dj-home .dj-genre-block__more:hover {
    color: var(--dj-primary);
}

.dj-home .dj-genre-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dj-home .dj-genre-block__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.58rem 0;
    border-bottom: 1px solid var(--dj-border);
    min-width: 0;
}

.dj-home .dj-genre-block__list li:last-child {
    border-bottom: none;
}

.dj-home .dj-genre-block__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--dj-text);
    text-decoration: none;
}

.dj-home .dj-genre-block__title:hover {
    color: var(--dj-primary);
}

.dj-home .dj-genre-block__date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--dj-text-muted);
    white-space: nowrap;
}

.dj-home .dj-genre-block__empty {
    padding: 1rem 0;
    text-align: center;
    color: var(--dj-text-muted);
    font-size: 13px;
}

.dj-home .dj-genre-block__empty--full {
    grid-column: 1 / -1;
    padding: 1.5rem 0;
}

@media (max-width: 767.98px) {
    .dj-home .dj-genre-grid {
        grid-template-columns: 1fr;
    }
}

/* 扁平歌曲列表 */
.dj-home .dj-song-list--flat .list-group-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dj-border);
    border-radius: 0;
    color: var(--dj-text);
    padding-left: 0;
    padding-right: 0;
}

.dj-home .dj-song-list--flat .list-group-item:last-child {
    border-bottom: none;
}

.dj-home .dj-song-list--flat .list-group-item:hover,
.dj-home .dj-song-list--flat .list-group-item-action:hover {
    background: var(--dj-primary-soft);
}

.dj-home .dj-song-list-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.dj-home .dj-song-list-item--rank {
    flex-wrap: nowrap;
    gap: 0.65rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.dj-home .dj-song-list-item--rank .dj-song-list-title {
    font-size: 14px;
    line-height: 1.4;
}

.dj-home .dj-song-list-item--rank .dj-song-list-date {
    font-size: 12px;
}

.dj-home .dj-song-list-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dj-home .dj-song-list-item--link {
    color: var(--dj-text);
    text-decoration: none;
}

.dj-home .dj-song-list-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.dj-home a.dj-song-list-item--link:hover .dj-song-list-title,
.dj-home .dj-song-list-item--link:hover {
    color: var(--dj-primary);
}

.dj-home .dj-song-list-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--dj-text-muted);
    white-space: nowrap;
    min-width: 2.5rem;
    text-align: right;
}

.dj-home .dj-song-list-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.dj-home .dj-song-list-actions a {
    color: var(--dj-text-muted);
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
}

.dj-home .dj-song-list-actions a:hover {
    color: var(--dj-primary);
}

.dj-home .dj-rank-num {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--dj-surface-2);
    color: var(--dj-text-muted);
    flex-shrink: 0;
}

.dj-home .dj-rank-num.top1,
.dj-home .dj-rank-num.top2,
.dj-home .dj-rank-num.top3 {
    background: var(--dj-primary);
    color: #fff;
}

/* 首页：排行榜 + 歌单 — 2 行网格强制对齐 */
.dj-home-pair-row {
    margin-bottom: 2rem;
}

.dj-home-pair-row__rank-head .dj-home-rank-tabs {
    padding-top: 0.55rem;
}

@media (min-width: 992px) {
    .dj-home-pair-row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "rank-head playlist-head"
            "rank-body playlist-body";
        column-gap: 1.5rem;
        row-gap: 0.85rem;
        align-items: stretch;
    }

    .dj-home-pair-row__rank-head {
        grid-area: rank-head;
        align-self: stretch;
        min-width: 0;
    }

    .dj-home-pair-row__playlist-head {
        grid-area: playlist-head;
        align-self: stretch;
        min-width: 0;
    }

    .dj-home-pair-row__rank-body,
    .dj-home-pair-row__playlist-body {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-width: 0;
        min-height: 100%;
        margin-top: 0;
        padding-bottom: 0.85rem;
        border-bottom: 2px solid var(--dj-border);
        box-sizing: border-box;
    }

    .dj-home-pair-row__rank-body {
        grid-area: rank-body;
    }

    .dj-home-pair-row__playlist-body {
        grid-area: playlist-body;
    }

    .dj-home-pair-row__rank-body .tab-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .dj-home-pair-row__rank-body .tab-pane.show.active {
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: column;
        min-height: 0;
    }

    .dj-home-pair-row__rank-body .list-group {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0;
    }

    .dj-home-pair-row__rank-body .dj-song-list-item--rank {
        flex: 1 1 0;
        min-height: 0;
    }

    .dj-home-pair-row__playlist-body .dj-cover-grid--playlist {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-content: stretch;
        gap: 1rem;
        min-height: 0;
        height: 100%;
    }

    .dj-home-pair-row__playlist-body .dj-cover-item {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    .dj-home-pair-row__playlist-body .dj-cover-item__img {
        flex: 1 1 auto;
        aspect-ratio: 1;
        min-height: 0;
    }

    .dj-home-pair-row__playlist-body .dj-cover-item__title {
        flex-shrink: 0;
    }

    .dj-home-pair-row .dj-section-head {
        margin-bottom: 0;
    }
}

@media (max-width: 991.98px) {
    .dj-home-pair-row__playlist-head {
        margin-top: 2rem;
    }

    .dj-home-pair-row__rank-body,
    .dj-home-pair-row__playlist-body {
        margin-top: 0.85rem;
    }
}

.dj-home .dj-home-rank-tabs {
    margin-bottom: 0 !important;
}

.dj-home .dj-home-rank-tabs .nav-link {
    font-size: 14px;
    color: var(--dj-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.dj-home .dj-home-rank-tabs .nav-link.active {
    background: transparent;
    color: var(--dj-primary);
    border-bottom-color: var(--dj-primary);
}

/* 封面通用 */
.dj-home .dj-cover-item {
    display: block;
    color: var(--dj-text);
    text-decoration: none;
    min-width: 0;
}

.dj-home .dj-cover-item:hover {
    color: var(--dj-primary);
}

.dj-home .dj-cover-item__img {
    overflow: hidden;
    border-radius: var(--dj-radius);
    background: var(--dj-surface-2);
}

.dj-home .dj-cover-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.dj-home .dj-cover-item:hover .dj-cover-item__img img {
    transform: scale(1.04);
}

.dj-home .dj-cover-item__img--round {
    border-radius: 50%;
}

.dj-home .dj-cover-item__title {
    margin-top: 0.5rem;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 专辑横向滚动 — 大封面 */
.dj-home .dj-cover-scroll {
    display: flex;
    gap: 1.15rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.dj-home .dj-cover-scroll .dj-cover-item {
    flex: 0 0 128px;
}

.dj-home .dj-cover-scroll .dj-cover-item__img {
    aspect-ratio: 1;
}

@media (min-width: 768px) {
    .dj-home .dj-cover-scroll .dj-cover-item {
        flex-basis: 148px;
    }
}

/* 歌单网格 — 侧栏大封面 */
.dj-home .dj-cover-grid--playlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dj-home .dj-cover-grid--playlist .dj-cover-item__img {
    aspect-ratio: 1;
}

.dj-home .dj-cover-grid--playlist .dj-cover-item__title {
    font-size: 14px;
    line-height: 1.4;
}

/* 热门专辑 / 制作人 — 6×2 扁平网格 */
.dj-home .dj-album-section,
.dj-home .dj-producer-section {
    margin-bottom: 2rem;
}

.dj-home .dj-producer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--dj-border);
}

.dj-home .dj-producer-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dj-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dj-home .dj-producer-head h2 .bi {
    color: var(--dj-primary);
}

.dj-home .dj-producer-head .dj-section-more {
    flex-shrink: 0;
    font-size: 13px;
}

.dj-home .dj-producer-tools {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.dj-home .dj-producer-tab {
    font-size: 13px;
    color: var(--dj-text-muted);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.dj-home .dj-producer-tab.is-active {
    color: var(--dj-primary);
    border-bottom-color: var(--dj-primary);
    font-weight: 600;
}

.dj-home .dj-producer-tab:hover {
    color: var(--dj-primary);
}

.dj-home .dj-producer-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    border: none;
    background: transparent;
    color: var(--dj-text-muted);
    cursor: pointer;
}

.dj-home .dj-producer-refresh:hover {
    color: var(--dj-primary);
}

.dj-home .dj-producer-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 0.85rem;
}

.dj-home .dj-producer-cell {
    display: block;
    min-width: 0;
    text-decoration: none;
    color: var(--dj-text);
}

.dj-home .dj-producer-cell:hover {
    color: var(--dj-primary);
}

.dj-home .dj-producer-cell__cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--dj-radius);
    background: var(--dj-surface-2);
}

.dj-home .dj-producer-cell__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.dj-home .dj-producer-cell:hover .dj-producer-cell__cover img {
    transform: scale(1.03);
}

.dj-home .dj-producer-hot {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
    max-width: calc(100% - 12px);
    white-space: nowrap;
}

.dj-home .dj-producer-hot .bi-fire {
    color: #ff5a5f;
    flex-shrink: 0;
    font-size: 10px;
}

.dj-home .dj-producer-cell__name {
    margin-top: 0.45rem;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-home .poster-module {
    max-width: 1200px;
    margin: 0 auto 1.25rem;
    padding: 0;
}

@media (max-width: 767.98px) {
    .dj-home .dj-song-list-item:not(.dj-song-list-item--rank) {
        flex-wrap: wrap;
    }

    .dj-home .dj-song-list-item--rank {
        gap: 0.5rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .dj-home .dj-song-list-item--rank .dj-rank-num {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .dj-home .dj-song-list-item--rank .dj-song-list-body {
        gap: 0.4rem;
    }

    .dj-home .dj-song-list-item--rank .dj-song-list-title {
        font-size: 14px;
    }

    .dj-home .dj-song-list-item--rank .dj-song-list-date {
        font-size: 12px;
        min-width: 2.25rem;
    }

    .dj-home .dj-song-list-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .dj-home .dj-song-list-item:not(.dj-song-list-item--rank) .dj-song-list-date {
        margin-left: auto;
    }

    .dj-home .dj-cover-scroll .dj-cover-item {
        flex-basis: 112px;
    }

    .dj-home .dj-producer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dj-home .dj-producer-tools {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 479.98px) {
    .dj-home .dj-producer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========== 页脚 ========== */
.dj-footer {
    flex-shrink: 0;
    width: 100%;
    background: var(--dj-footer-bg);
    color: var(--dj-footer-text);
    border-top: 1px solid var(--dj-border);
    margin-top: 2rem;
}

.dj-footer .container {
    max-width: 1200px;
}

.dj-footer .list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.dj-footer .list-inline-item {
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .dj-footer .col-md-4,
    .dj-footer .col-lg-4 {
        text-align: center !important;
        margin-top: 0.5rem;
    }
}

.dj-footer a {
    color: var(--dj-footer-link, var(--dj-primary));
}

.dj-footer a:hover {
    color: var(--dj-primary);
}

.dj-footer .footerText,
.dj-footer .friends,
.dj-footer .footerText a,
.dj-footer .friends a {
    color: var(--dj-footer-text);
}

.dj-footer .footerText a:hover,
.dj-footer .friends a:hover {
    color: var(--dj-primary-muted);
}

body.member-layout .dj-footer {
    margin-top: 2rem;
}

#top_btn {
    display: none !important;
}

/* 右下角浮动工具栏 */
.dj-float-tools {
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
}

body.dj-has-player .dj-float-tools {
    bottom: 6.75rem;
}

.dj-float-tools__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dj-border);
    border-radius: 50%;
    background: var(--dj-surface);
    color: var(--dj-text);
    box-shadow: 0 2px 10px rgba(26, 22, 37, 0.1);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}

.dj-float-tools__btn:hover {
    color: var(--dj-primary);
    border-color: var(--dj-primary-muted);
}

.dj-float-tools__btn.is-disabled {
    opacity: 0.45;
}

.dj-float-tools__btn i {
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
}

.dj-float-tools__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

/* Bootstrap */
.btn-primary,
.btn-dj {
    background-color: var(--dj-primary) !important;
    border-color: var(--dj-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-dj:hover {
    background-color: var(--dj-primary-hover) !important;
    border-color: var(--dj-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--dj-primary) !important;
    border-color: var(--dj-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--dj-primary-soft) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--dj-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dj-primary);
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.2);
}

/* 会员布局（无全站顶栏，侧栏独立导航） */
body.member-layout {
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.member-layout .dj-header,
body.member-layout .dj-subnav,
body.member-layout .dj-offcanvas {
    display: none !important;
}

body.member-layout .dj-member-wrap {
    flex: 1 0 auto;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 0.75rem 1.5rem;
    overflow: visible;
    width: 100%;
}

@media (min-width: 992px) {
    body.member-layout .dj-member-wrap {
        padding: 1rem 0.75rem 1.5rem;
    }
}

/* 移动端顶栏：LOGO + 菜单按钮 */
.dj-member-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 1025;
    background: var(--dj-header-bg);
    border-bottom: 1px solid var(--dj-border);
    box-shadow: var(--dj-shadow);
}

.dj-member-mobile-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5rem 0.75rem;
}

.dj-member-mobile-bar__brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.dj-member-mobile-bar__brand .dj-site-logo {
    height: 36px;
    max-height: 36px;
}

.dj-member-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--dj-radius, 10px);
}

.dj-member-menu-btn .bi-list {
    font-size: 1.35rem;
    line-height: 1;
}

/* 侧栏：小屏 offcanvas，大屏常驻 */
.dj-member-offcanvas {
    --bs-offcanvas-width: min(300px, 88vw);
}

@media (max-width: 991.98px) {
    .dj-member-offcanvas .dj-member-sidebar {
        border: none;
        border-radius: 0;
        background: transparent;
    }
}

@media (min-width: 992px) {
    .dj-member-offcanvas.offcanvas-lg {
        position: static;
        transform: none;
        visibility: visible;
        display: block;
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
        width: 25%;
        max-width: 280px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .dj-member-offcanvas.offcanvas-lg .offcanvas-body {
        padding: 0;
        overflow: visible;
    }
}

.dj-member-main {
    position: relative;
    z-index: 1;
    overflow: visible;
    min-width: 0;
}

.dj-member-sidebar {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius-lg);
    overflow: visible;
}

@media (min-width: 992px) {
    .dj-member-sidebar {
        width: 100%;
    }
}

/* ========== 底部播放器（列表页试听） ========== */
body.dj-has-player {
    padding-bottom: 0;
}

body.dj-has-player .dj-footer {
    margin-bottom: 0;
    padding-bottom: 5.5rem;
}

.music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    transition: transform 0.25s ease;
}

.music-player .player-content {
    background: var(--dj-surface);
    color: var(--dj-text);
    border-top: 1px solid var(--dj-border);
    box-shadow: 0 -4px 24px rgba(26, 22, 37, 0.12);
}

.music-player .toggle-player {
    position: absolute;
    bottom: 100%;
    right: 16px;
    width: 36px;
    height: 28px;
    border: 1px solid var(--dj-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--dj-surface);
    color: var(--dj-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.music-player .toggle-player:hover {
    color: var(--dj-primary);
    background: var(--dj-primary-soft);
}

.music-player.collapsed .toggle-player i {
    transform: rotate(180deg);
}

.music-player.collapsed .player-content {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.music-player .player-content {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.music-player .progres-bar {
    height: 4px;
    background: var(--dj-border);
    cursor: pointer;
}

.music-player .progres {
    height: 100%;
    background: var(--dj-primary);
    width: 0;
}

.music-player .player-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.music-player .player-left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.music-player .album-cover {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--dj-border);
}

.music-player .album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-player .song-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-player .song-artist {
    font-size: 12px;
    color: var(--dj-text-muted);
}

.music-player .player-center {
    flex-shrink: 0;
}

.music-player .control-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.music-player .control-btn {
    border: none;
    background: transparent;
    color: var(--dj-text);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.music-player .control-btn:hover {
    color: var(--dj-primary);
}

.music-player .play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dj-primary);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-player .play-btn:hover {
    background: var(--dj-primary-hover);
    color: #fff !important;
}

.music-player .player-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    color: var(--dj-text-muted);
}

.music-player .volume-slider input {
    width: 88px;
    accent-color: var(--dj-primary);
}

.music-player .time-display {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.music-player .volume-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.music-player .volume-btn {
    border: none;
    background: transparent;
    color: var(--dj-text);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.music-player .volume-btn:hover {
    color: var(--dj-primary);
}

.music-player .song-info {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    body.dj-has-player .dj-footer {
        padding-bottom: 4.5rem;
    }

    .dj-float-tools {
        right: 0.75rem;
        bottom: 1rem;
        gap: 0.45rem;
    }

    body.dj-has-player .dj-float-tools {
        bottom: 5rem;
    }

    .dj-float-tools__btn {
        width: 40px;
        height: 40px;
    }

    .music-player .player-left {
        display: none;
    }

    .music-player .player-right .time-display,
    .music-player .volume-control {
        display: none;
    }

    .music-player .player-container {
        justify-content: center;
        padding: 0.5rem;
    }
}