:root {
    --bg: #131518;
    --card: #0d0d0d;
    --bar: #0d0d0d;
    --line: #101218;
    --text: #fff;
    --name: #8f8f8f;
    --title: #ff2d55;
    --accent: #ff2d55;
    --red: #f44;
    --hot-red: #ff2d55;
    --hover-bg: #131518;
    --search-hover: rgb(255 255 255 / 3%);
    --shadow: 8px 8px 20px rgba(0,30,80,0.06);
    --radius: 12px;
    --songs-name: #f6f6f6;
    --font-family: honorSansBrand;
    --tool-btn: linear-gradient(180deg, #101218, #0d0d0d), linear-gradient(180deg, #0a57fc, #4991ff);
    --tool-border: 2px solid #131518;
    --hread: #000000b0;
}

:root.light {
    --bg: #f5f7fa;
    --card: #ffffff;
    --bar: #ffffff;
    --line: #f6f6f6;
    --text: #1d2129;
    --name: #383838;
    --songs-name: #dcdcdc;
    --title: #ff2d55;
    --accent: #ff2d55;
    --red: #f44;
    --hot-red: #ff2d55;
    --hover-bg: #eef2f7;
    --search-hover: rgba(0,0,0,0.04);
    --shadow: 8px 8px 20px rgba(55,99,170,.1);
    --radius: 12px;
    --font-family: honorSansBrand;
    --tool-btn: linear-gradient(180deg, #f3f5f8, #fff), linear-gradient(180deg, #0a57fc, #4991ff);
    --tool-border: 2px solid #fff;
    --hread: #ffffffb0;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-family)
}

.logo-dark,.logo-light {
    transition: opacity 0.3s
}

.logo-light {
    display: none !important
}

.logo-dark {
    display: block !important
}

html.light .logo-dark,#htmlRoot.light .logo-dark {
    display: none !important
}

html.light .logo-light,#htmlRoot.light .logo-light {
    display: block !important
}

@font-face {
    font-family: honorSansBrand;
    src: url('https://hshop.honorfile.com/font/HONORSansBrand-Regular.woff') format("woff")
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-family),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    line-height: 1.5
}

a {
    text-decoration: none;
    color: var(--name);
    transition: color .2s ease
}

a:hover {
    color: var(--title)
}

li {
    list-style: none
}

.wrap {
    width: var(--dj-layout-width, 100%);
    max-width: var(--dj-layout-max-width, 1350px);
    margin: 0 auto;
    box-sizing: border-box;
}

.hide {
    display: none
}

.djList.is-loading, .recList.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease
}

.mask.show {
    opacity: 1;
    pointer-events: auto
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: 320px;
    background: var(--card);
    border-right: 1px solid var(--line);
    z-index: 99;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
    padding: env(safe-area-inset-top, 0px) 14px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(calc(-100% - 12px));
    transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform
}

.sidebar.show {
    transform: translateX(0)
}

body.sidebar-open .mask {
    z-index: 10040
}

body.sidebar-open .sidebar {
    z-index: 10050
}

.sidebarLogo {
    height: 60px;
    min-height: 60px;
    text-align: center;
    padding: 0 14px;
    margin: 0 -14px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line)
}

.sidebarLogo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.sidebarLogo img {
    max-height: 40px;
    max-width: 170px;
    object-fit: contain
}

.sidebarNav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

.sidebar-link--main {
    height: 50px;
    min-height: 50px;
    font-size: 15px
}

.sidebar-linkIcon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--hover-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--name);
    transition: background .2s ease, color .2s ease
}

.sidebar-linkIcon i {
    font-size: 17px;
    line-height: 1
}

.sidebar-linkText {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-weight: 500
}

.sidebar-link--main:hover {
    background: var(--hover-bg);
    border-color: rgba(255, 255, 255, 0.04)
}

.sidebar-link--main:active {
    transform: scale(0.985)
}

.sidebar-link--main.active {
    background: color-mix(in srgb, var(--title) 14%, transparent);
    border-color: color-mix(in srgb, var(--title) 24%, transparent);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--title)
}

.sidebar-link--main.active .sidebar-linkIcon {
    background: color-mix(in srgb, var(--title) 20%, transparent);
    color: var(--title)
}

.sidebarGenreSection {
    padding-bottom: 8px
}

.sidebarSectionTitle {
    margin: 0 0 12px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--name);
    letter-spacing: 0.02em
}

.sidebarGenreGrid {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sidebarGenreCard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    min-height: 80px;
    padding: 0 16px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

.sidebarGenreCardBg {
    position: absolute;
    inset: -10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(6px);
    transform: scale(1.06);
    pointer-events: none
}

.sidebarGenreCardMask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    pointer-events: none;
    z-index: 1
}

.sidebarGenreCardText {
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55)
}

.sidebarGenreCard:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.2)
}

.sidebarGenreCard:active {
    transform: scale(0.98)
}

.sidebarGenreCard.active {
    border-color: var(--hot-red);
}

.sidebarGenreCard.active .sidebarGenreCardMask {
    background: rgba(0, 0, 0, 0.48)
}

:root.light .sidebar {
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12)
}

:root.light .sidebar-link--main:hover {
    border-color: rgba(0, 0, 0, 0.05)
}

@media (max-width: 768px) {
    .sidebar {
        width: min(88vw, 260px);
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px))
    }

    .sidebarGenreCard {
        height: 80px;
        min-height: 80px
    }
}

body.sidebar-open {
    overflow: hidden;
    touch-action: none
}

body.sidebar-open .gp-dock, body.sidebar-open .mobile-bottom-nav {
    z-index: 90
}

.header {
    height: auto;
    background: var(--bar);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 999
}

.headerIn {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 6px
}

.headerTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    gap: 20px
}

.headerTopNav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 0 10px
}

.headerTopNavItem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: calc(var(--radius) * 0.85);
    color: var(--name);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease
}

.headerTopNavItem i {
    font-size: 16px;
    line-height: 1
}

.headerTopNavItem:hover, .headerTopNavItem.active {
    color: var(--title);
    background: transparent
}

.headerSearchBtn {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--name);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.headerSearchBtn:hover {
    background: var(--hover-bg);
    color: var(--title)
}

.headerSearchBtn i {
    font-size: 16px;
    line-height: 1
}

.headerSearchExpand {
    display: none
}

.headerTools {
    display: none;
    align-items: center;
    gap: 18px;
    flex-shrink: 0
}

.header-tool-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--name);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: color .2s ease
}

.header-tool-item:hover {
    color: var(--title)
}

.header-tool-item i {
    font-size: 18px;
    line-height: 1
}

.header-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--name);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap
}

.header-login-btn:hover {
    color: var(--title)
}

body.layout-cols-3 .header {
    overflow: visible
}

body.layout-cols-3 .headerIn, body.layout-cols-3 .headerRight, body.layout-cols-3 .headerRight .user {
    overflow: visible
}

body.layout-cols-3 .headerTopNav, body.layout-cols-3 .headerSearchBtn, body.layout-cols-3 .headerTools {
    display: flex
}

body.layout-cols-3 .headerSearchBtn {
    width: var(--header-action-size);
    height: var(--header-action-size);
    flex-shrink: 0;
    border-radius: 0;
    background: transparent
}

body.layout-cols-3 .headerSearchBtn:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent) !important;
    color: var(--accent, var(--title));
    border-radius: 50px
}

body.layout-cols-3 .search--inline, body.layout-cols-3 .nav--classic {
    display: none !important
}

body.layout-cols-3 .headerRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: auto;
    gap: 14px;
    margin-left: auto;
    min-width: 0
}

body.layout-cols-3 .headerTop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    --header-top-height: 80px;
    --header-action-size: 40px;
    height: var(--header-top-height);
    min-height: var(--header-top-height);
    padding: 0;
    width: 100%
}

body.layout-cols-3 .logo {
    width: 220px;
    flex-shrink: 0;
    min-width: 0
}

body.layout-cols-3 .headerTopNav {
    flex: 1;
    justify-content: flex-start;
    padding: 0;
    min-width: 0;
    gap: 6px
}

body.layout-cols-3 .headerTopNavItem {
    flex-direction: row;
    width: auto;
    min-width: auto;
    height: var(--header-action-size);
    min-height: var(--header-action-size);
    padding: 0 14px;
    gap: 6px;
    justify-content: center;
    background: transparent !important;
    box-shadow: none !important
}

body.layout-cols-3 .headerTopNavItem:first-child {
    padding-left: 0
}

body.layout-cols-3 .headerTopNavText {
    display: block;
    font-size: 14px;
    line-height: 1;
    color: var(--name);
    font-weight: 500;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

body.layout-cols-3 .headerTopNavItem i {
    font-size: 16px;
    color: var(--name);
    transition: color .2s ease;
    flex-shrink: 0
}

body.layout-cols-3 .headerTopNavItem:hover, body.layout-cols-3 .headerTopNavItem.active {
    color: var(--title);
    background: transparent !important
}

body.layout-cols-3 .headerTopNavItem:hover i, body.layout-cols-3 .headerTopNavItem.active i, body.layout-cols-3 .headerTopNavItem:hover .headerTopNavText, body.layout-cols-3 .headerTopNavItem.active .headerTopNavText {
    color: var(--title)
}

body.layout-cols-3 .header-tool-text, body.layout-cols-3 .header-login-text {
    display: none !important
}

body.layout-cols-3 .headerTools {
    gap: 14px;
    align-items: center;
    flex-shrink: 0
}

body.layout-cols-3 .headerRight .user {
    flex-shrink: 0;
    gap: 0;
    display: flex;
    align-items: center
}

body.layout-cols-3 .user-login-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--header-action-size);
    min-height: var(--header-action-size);
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 4px 10px 4px 4px;
    max-width: none;
    white-space: nowrap;
    flex-shrink: 0
}

body.layout-cols-3 .user-login-info > .ri-arrow-down-s-line {
    flex-shrink: 0;
    font-size: 14px !important;
    line-height: 1
}

body.layout-cols-3 .user-login-info .user-dropdown {
    top: calc(100% + ((var(--header-top-height) - var(--header-action-size)) / 2));
    margin-top: 0
}

body.layout-cols-3 .user-name {
    flex-shrink: 0;
    min-width: 0;
    line-height: 1.15;
    gap: 1px
}

body.layout-cols-3 .user-name > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
    display: block;
    font-size: 12px;
    line-height: 1.15
}

body.layout-cols-3 .user-name .user-reg, body.layout-cols-3 .user-name .user-vip {
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.1
}

body.layout-cols-3 .user-avatar {
    width: 30px;
    height: 30px;
    border-width: 1.5px;
    flex-shrink: 0
}

body.layout-cols-3 .header-tool-item {
    width: auto;
    min-width: var(--header-action-size);
    height: var(--header-action-size);
    justify-content: center;
    gap: 0;
    border-radius: 0;
    background: transparent;
    padding: 0
}

body.layout-cols-3 .header-tool-item:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent) !important;
    color: var(--accent, var(--title));
    border-radius: 50px
}

body.layout-cols-3 .header-tool-item i {
    font-size: 16px;
}

body.layout-cols-3 .header-login-btn {
    width: auto;
    min-width: var(--header-action-size);
    height: var(--header-action-size);
    justify-content: center;
    gap: 0;
    border-radius: 0;
    background: transparent;
    padding: 0
}

body.layout-cols-3 .header-login-btn:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent) !important;
    color: var(--accent, var(--title));
    border-radius: 50px
}

body.layout-cols-3 .header-login-btn i {
    font-size: 20px
}

body.layout-cols-3 .header-tool-item .engraving-badge {
    top: -2px;
    right: -2px
}

body.layout-cols-3 .headerSearchExpand {
    display: none;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    height: var(--header-top-height);
    min-height: var(--header-top-height);
    position: relative
}

body.layout-cols-3.search-expand-open .headerSearchExpand {
    display: flex
}

body.layout-cols-3.search-expand-open .headerTopNav {
    display: none !important
}

body.layout-cols-3.search-expand-open .headerTools {
    display: none !important
}

body.layout-cols-3.search-expand-open .headerSearchBtn {
    display: none !important
}

.search--header-expand {
    width: 100%;
    height: 100%;
    min-height: var(--header-top-height);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 8px 0 0
}

.search--header-expand:hover, .search--header-expand:focus-within {
    background: transparent;
    border: 0;
    box-shadow: none
}

.search--header-expand .inputx {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    height: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0
}

.search--header-expand .inputx::placeholder {
    color: var(--name);
    opacity: 0.75
}

.search--header-expand .inputx:focus {
    outline: 0;
    border: 0;
    box-shadow: none
}

.header-search-clear {
    width: auto;
    height: auto;
    min-width: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--name);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.75;
    transition: color .2s ease, opacity .2s ease
}

.header-search-clear:hover {
    color: var(--text);
    background: transparent;
    opacity: 1
}

.search--header-expand #modal_ser_result, body.layout-cols-3 .headerSearchExpand #modal_ser_result {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 0;
    z-index: 10070;
    max-height: min(420px, 50vh);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: none;
    background: color-mix(in srgb, var(--bar) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28)
}

.search--header-expand #modal_ser_result::-webkit-scrollbar, body.layout-cols-3 .headerSearchExpand #modal_ser_result::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.search--header-expand #modal_ser_result ul, body.layout-cols-3 .headerSearchExpand #modal_ser_result ul {
    list-style: none;
    margin: 0;
    padding: 6px 0
}

.search--header-expand #modal_ser_result a, body.layout-cols-3 .headerSearchExpand #modal_ser_result a {
    display: block;
    padding: 11px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.search--header-expand #modal_ser_result a:hover, body.layout-cols-3 .headerSearchExpand #modal_ser_result a:hover {
    background: color-mix(in srgb, var(--title) 10%, transparent);
    color: var(--title)
}

.search-modal {
    display: none !important
}

.homeAsideIcon--home, .homeAsideIcon--song, .homeAsideIcon--rank {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

.homeAsideIcon--home i, .homeAsideIcon--song i, .homeAsideIcon--rank i {
    font-size: 14px;
    line-height: 1;
}

.homeAsideIcon--home {
    background: color-mix(in srgb, var(--title) 18%, transparent);
    color: var(--title);
}

.homeAsideIcon--song {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08));
    color: #10b981;
}

.homeAsideIcon--rank {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--title)) 16%, transparent), color-mix(in srgb, var(--accent, var(--title)) 8%, transparent));
    color: var(--title);
}

:root.light .homeAsideIcon--home {
    background: color-mix(in srgb, var(--title) 12%, #fff);
    color: var(--title);
}

:root.light .homeAsideIcon--song {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    color: #059669;
}

:root.light .homeAsideIcon--rank {
    background: linear-gradient(135deg, #ffe4ec, #fff1f2);
    color: var(--title);
}

.homeAsideItem.active .homeAsideIcon--home, .homeAsideItem.active .homeAsideIcon--song, .homeAsideItem.active .homeAsideIcon--rank {
    color: var(--title);
    background: transparent;
    box-shadow: none;
}

:root.light .homeAsideItem.active .homeAsideIcon--home, :root.light .homeAsideItem.active .homeAsideIcon--song, :root.light .homeAsideItem.active .homeAsideIcon--rank {
    color: var(--title);
    background: transparent;
    box-shadow: none;
}

.logo {
    height: 50px;
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.logo:hover {
    transform: scale(1.08) rotate(5deg);
}

.logo img {
    max-height: 100%;
    max-width: 160px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.nav-wrapper {
    width: 100%;
    max-width: var(--dj-layout-max-width, 1350px);
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}

.nav li {
    position: relative;
    margin: 0;
    padding: 0;
    transition: transform .3s cubic-bezier(0.2,0.9,0.4,1.1)
}

.nav li:hover {
    transform: translateY(-2px)
}

.nav li a {
    color: var(--name);
    line-height: 50px;
    position: relative;
    font-weight: 500;
    white-space: nowrap;
    display: block;
    padding: 0 4px;
    transition: color .3s cubic-bezier(0.2,0.9,0.4,1.1),transform .3s cubic-bezier(0.2,0.9,0.4,1.1),text-shadow .3s cubic-bezier(0.2,0.9,0.4,1.1);
    text-decoration: none;
    font-size: 15px;
    height: 50px;
    overflow: hidden
}

.nav li a:hover {
    transform: scale(1.05)
}

.nav li a.active,.nav li a:hover {
    color: var(--title,#ff2d55)
}

.nav li a.active {
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent, var(--title)) 30%, transparent)
}

.nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--title,#ff2d55);
    border-radius: 2px;
    transition: all .4s cubic-bezier(0.25,0.46,0.45,0.94);
    transform: translateX(-50%);
    opacity: 0
}

.nav li a:hover::after,.nav li a.active::after {
    width: 28px;
    opacity: 1
}

.nav li .subNav {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: max-content;
    min-width: 100%;
    background: var(--bar);
    padding: 8px 0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25),0 2px 4px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .25s cubic-bezier(0.2,0.9,0.4,1.1);
    z-index: 999;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08)
}

.nav li:hover .subNav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

.nav li .subNav a {
    display: block;
    color: var(--name);
    padding: 0 28px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    transition: all .2s cubic-bezier(0.2,0.9,0.4,1.1);
    letter-spacing: .3px;
    text-align: left;
    position: relative;
    height: 40px;
}

.nav li .subNav a::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 4px;
    height: 4px;
    background: var(--title,#ff2d55);
    border-radius: 50%;
    transition: transform .2s cubic-bezier(0.2,0.9,0.4,1.1)
}

.nav li .subNav a:hover {
    color: var(--accent, var(--title))!important
}

.nav li .subNav a:hover::before {
    transform: translateY(-50%) scale(1)
}

.nav li .subNav a:hover::after {
    display: none
}

@media(max-width: 1200px) {
    .nav-wrapper {
        padding:0 24px
    }
}

@media(max-width: 992px) {
    .nav-wrapper {
        padding:0 16px
    }

    .nav {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch
    }

    .nav::-webkit-scrollbar {
        height: 3px
    }

    .nav::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 3px
    }

    .nav::-webkit-scrollbar-thumb {
        background: var(--title,#ff2d55);
        border-radius: 3px
    }

    .nav li {
        margin-right: 20px;
        flex-shrink: 0;
    }

    .nav li:last-child {
        margin-right: 0;
    }
}

@media(max-width: 768px) {
    .nav-wrapper {
        padding:0 12px
    }

    .nav li {
        margin-right: 14px
    }

    .nav li a {
        font-size: 14px;
        padding: 0 2px
    }

    .nav li .subNav {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        transform: translateX(0) translateY(-10px);
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        border-radius: 12px
    }

    .nav li:hover .subNav {
        transform: translateX(0) translateY(0)
    }

    .nav li .subNav a {
        padding: 0 20px;
        text-align: center
    }

    .nav li .subNav a:hover {
        padding-left: 28px
    }
}

@media(hover: none) and (pointer:coarse) {
    .nav li .subNav {
        transition:none
    }

    .nav li a::before {
        display: none
    }
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative
}

.search {
    position: relative;
    width: 260px;
    height: 36px;
    background: var(--bg);
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid transparent;
    flex-shrink: 0
}

.search:hover {
    background: var(--search-hover,rgba(255,255,255,0.08))
}

.search:focus-within {
    border-color: var(--title,#ff2d55);
    background: var(--bg)
}

.search i {
    color: #999;
    font-size: 16px;
    margin-right: 8px;
    flex-shrink: 0
}

.search input {
    flex: 1;
    background: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 13px;
    height: 100%;
    padding: 0;
    min-width: 0
}

.search input::placeholder {
    color: #999
}

#ser_result {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--line,#101218);
    border-radius: 8px;
    margin-top: 8px;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3)
}

#ser_result ul {
    list-style: none;
    margin: 0;
    padding: 4px 0
}

#ser_result a {
    display: block;
    padding: 8px 12px;
    color: var(--text,#fff);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer
}

#ser_result a:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    color: var(--title,#ff2d55)
}

#ser_result::-webkit-scrollbar {
    width: 4px
}

#ser_result::-webkit-scrollbar-track {
    background: var(--line,#101218);
    border-radius: 4px
}

#ser_result::-webkit-scrollbar-thumb {
    background: var(--title,#ff2d55);
    border-radius: 4px
}

@media(max-width: 768px) {
    .search {
        width:200px
    }
}

@media(max-width: 480px) {
    .headerRight {
        gap:8px
    }

    .search {
        width: 160px;
        padding: 0 8px
    }

    .search i {
        margin-right: 4px;
        font-size: 14px
    }

    .search input {
        font-size: 12px
    }

    .user {
        width: 30px;
        height: 30px
    }

    #ser_result a {
        padding: 6px 10px;
        font-size: 12px
    }
}

.mobileSearchDown {
    top: -80px;
    left: 0;
    right: 0;
    background: var(--card,#0d0d0d);
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: top .3s ease;
    z-index: 9;
    border-bottom: 1px solid var(--line,#101218);
    box-sizing: border-box;
    position: fixed
}

.mobileSearchDown.show {
    top: 60px
}

.mobileSearchContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg,#1a1a1a);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line,#101218);
    width: 100%;
    box-sizing: border-box
}

.mobileSearchContainer i {
    color: #999;
    font-size: 18px;
    flex-shrink: 0
}

.mobileSearchContainer i.ri-close-line {
    cursor: pointer;
    flex-shrink: 0
}

.mobileSearchContainer input {
    flex: 1;
    min-width: 0;
    background: 0;
    border: 0;
    outline: 0;
    color: var(--text,#fff);
    font-size: 15px;
    padding: 0;
    width: 100%
}

.mobileSearchContainer input::placeholder {
    color: #999
}

#mobile_ser_result {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card,#0d0d0d);
    border-top: 1px solid var(--line,#101218);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-sizing: border-box
}

#mobile_ser_result ul {
    list-style: none;
    margin: 0;
    padding: 8px 0
}

#mobile_ser_result a {
    display: block;
    padding: 12px 16px;
    color: var(--text,#fff);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line,#101218);
    word-break: break-all;
    box-sizing: border-box
}

#mobile_ser_result a:active {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    color: var(--title,#ff2d55)
}

@media(max-width: 768px) {
    .mobileSearchDown.show {
        top:60px
    }

    .mobileSearchDown {
        padding: 10px 12px
    }

    .mobileSearchContainer {
        padding: 8px 10px;
        gap: 8px
    }

    .mobileSearchContainer i {
        font-size: 16px
    }

    .mobileSearchContainer input {
        font-size: 14px
    }

    #mobile_ser_result a {
        padding: 10px 12px;
        font-size: 13px
    }
}

.mobileLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px;
    font-weight: bold;
    color: var(--title);
    white-space: nowrap
}

.mobileLogo img {
    max-height: 100%;
    max-width: 140px;
    object-fit: contain
}

.user {
    display: flex;
    align-items: center;
    gap: 20px
}

.user-login-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
    border-radius: 40px;
    background: var(--hover-bg)
}

.user-login-info:hover {
    background: var(--search-hover)
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    transition: all .25s ease
}

.user-avatar:hover {
    border-color: var(--accent, var(--title))
}

.user-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3
}

.user-name span {
    font-size: 13px;
    font-weight: 500;
    color: var(--name)
}

.user-name .user-vip {
    font-size: 11px;
    color: var(--hot-red);
    display: flex;
    align-items: center;
    gap: 4px
}

.user-name .user-vip i {
    font-size: 12px
}

.user-name .user-reg {
    font-size: 11px;
    color: var(--text);
    opacity: 0.72;
    display: flex;
    align-items: center;
    gap: 4px
}

.user-name .user-reg i {
    font-size: 12px
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: var(--bar);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 160px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    z-index: 1000;
    display: none
}

.user-dropdown.show {
    display: block;
    animation: dropdownFadeIn .2s ease
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--name);
    font-size: 13px;
    text-decoration: none;
    transition: all .2s
}

.user-dropdown a:hover {
    color: var(--accent, var(--title))
}

.user-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 6px 0
}

.mobileHeader {
    background: var(--hread);
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 90;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow);
}

.mobileIn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box
}

.menuBtn {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--name);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-right: 5px
}

.mobileUser {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
    position: relative
}

.mobileUser a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--name);
    font-size: 18px;
    text-decoration: none;
    transition: all .2s;
    -webkit-tap-highlight-color: transparent
}

.mobileUser a:active {
    background: rgba(255,255,255,0.15)
}

.user-login-info-mobile {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center
}

.user-login-info-mobile .user-avatar {
    width: 32px;
    height: 32px;
    margin: 0;
    border: 2px solid color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    border-radius: 50%;
    object-fit: cover
}

.mobile-user-menu {
    position: absolute;
    top: 100%;
    right: -5px;
    margin-top: 8px;
    width: 180px;
    background: var(--card);
    border-radius: 10px;
    padding: 10px 0;
    z-index: 1000;
    display: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08)
}

.mobile-user-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--card);
    border-left: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
    transform: rotate(45deg);
    z-index: -1
}

.mobile-user-menu.show {
    display: block;
    animation: dropdownFadeIn .2s ease
}

.mobile-user-menu a {
    width: auto!important;
    height: auto!important;
    border-radius: 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: flex-start!important;
    gap: 10px!important;
    padding: 10px 14px!important;
    color: #a0a0b0!important;
    font-size: 13px!important;
    text-decoration: none!important;
    transition: all .2s;
    width: 100%!important;
    box-sizing: border-box!important;
    min-height: 40px!important;
    -webkit-tap-highlight-color: transparent;
    background: transparent!important
}

.mobile-user-menu a:active {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent)!important;
    color: var(--accent, var(--title))!important
}

.mobile-user-menu .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px
}

.mobile-user-menu .user-info img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover
}

.mobile-user-menu .user-info .user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--name);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mobile-user-menu .user-info .user-vip-badge {
    font-size: 10px;
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap
}

.mobile-user-menu .user-info .user-reg-badge {
    font-size: 10px;
    color: var(--text);
    opacity: 0.72;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap
}

.mobile-user-menu .dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 6px 0
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.banner {
    width: 100%;
    height: 395px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow);
}

.banner .item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.08);
    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    z-index: 1;
}

.banner .item.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    pointer-events: auto;
}

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

.banner .dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.banner .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner .dots span.active {
    background: #fff;
    width: 22px;
    border-radius: 10px;
}

.banner-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.banner:hover .banner-btn,
.banner-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.banner-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.08);
}

.banner-btn-prev {
    left: 20px;
}

.banner-btn-next {
    right: 20px;
}

@media (max-width: 768px) {
    .banner-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .banner-btn-prev {
        left: 10px;
    }

    .banner-btn-next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .banner-btn {
        opacity: 0.7;
        pointer-events: auto;
    }
}

.rightRec {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.rightRec:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.rightRec:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.recHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 16px 14px
}

.recTitle {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.recTab {
    display: flex;
    gap: 8px;
    font-size: 12px
}

.recTab span {
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg)
}

.recTab span:hover {
    background: var(--title);
    color: #fff
}

.recTab span.active {
    background: var(--title);
    color: #fff
}

.recList {
    padding: 0 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden
}

.recList.hide {
    display: none!important
}

.recList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    color: var(--name);
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: recFadeIn 0.4s ease backwards;
}

.recList li:nth-child(1) {
    animation-delay: 0.00s;
}

.recList li:nth-child(2) {
    animation-delay: 0.03s;
}

.recList li:nth-child(3) {
    animation-delay: 0.06s;
}

.recList li:nth-child(4) {
    animation-delay: 0.09s;
}

.recList li:nth-child(5) {
    animation-delay: 0.12s;
}

.recList li:nth-child(6) {
    animation-delay: 0.15s;
}

.recList li:nth-child(7) {
    animation-delay: 0.18s;
}

.recList li:nth-child(8) {
    animation-delay: 0.21s;
}

.recList li:hover {
    color: var(--title);
    transform: translateX(6px) scale(1.01);
}

.recList li:active {
    transform: translateX(2px) scale(0.98);
    transition-duration: 0.08s;
}

.recList li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--name);
    text-decoration: none;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.recList li:hover a {
    color: var(--title);
    letter-spacing: 0.3px;
}

.recList li span {
    color: #999;
    flex-shrink: 0;
    margin-left: 10px;
    width: 50px;
    text-align: right;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.recList li:hover span {
    color: var(--title);
    transform: scale(1.05);
}

.recList li:active span {
    transform: scale(0.95);
    transition-duration: 0.08s;
}

@keyframes recFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.main {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    position: relative
}

.mainLeft {
    width: 75%
}

.mainRight {
    width: 23.5%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
    align-self: flex-start
}

.main--home-3col .homeAside {
    width: 15%;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main--home-3col .mainLeft {
    width: auto;
    flex: 1;
    min-width: 0
}

.main--home-3col .mainRight {
    width: 22%;
    flex-shrink: 0
}

.homeAsideNav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 10px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: visible
}

.homeAsideItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    min-height: 50px;
    padding: 0 12px;
    border-radius: calc(var(--radius) * 0.85);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent
}

.homeAsideItem::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 999px;
    background: transparent;
    transition: background .2s ease, opacity .2s ease;
    opacity: 0;
    z-index: 1
}

.homeAsideItem:hover {
    background: color-mix(in srgb, var(--title) 6%, transparent);
    color: var(--text)
}

.homeAsideItem.active {
    background: color-mix(in srgb, var(--title) 12%, transparent);
    color: var(--title);
    font-weight: 600
}

.homeAsideItem.active::before {
    background: var(--title);
    opacity: 1
}

.homeAsideItem.active .homeAsideText {
    color: var(--title)
}

.homeAsideItem.active .homeAsideIcon, .homeAsideItem.active .homeAsideIcon i {
    color: var(--title)
}

.homeAsideItem.active .homeAsideIcon:has(img) {
    background: transparent;
    box-shadow: none
}

.homeAsideIcon {
    width: 36px;
    height: 36px;
    border-radius: calc(var(--radius) * 0.7);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg)
}

.homeAsideIcon img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    display: block
}

.homeAsideText {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.homeAside .rankBox.homeAsideRankBox {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06)
}

.homeAside .rankBox.homeAsideRankBox .titleBar {
    padding: 16px 12px
}

.homeAside .rankBox.homeAsideRankBox .titleBar h3 {
    font-size: 14px
}

:root.light .homeAside .rankBox.homeAsideRankBox {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08)
}

:root.light .homeAsideNav {
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08)
}

:root.light .homeAsideItem.active {
    background: color-mix(in srgb, var(--title) 12%, transparent);
    color: var(--title);
    box-shadow: none
}

:root.light .homeAsideIcon {
    background: #f3f6fb
}

@media (max-width: 1199px) {
    .homeAside {
        display: none !important
    }

    .main--home-3col .mainLeft, .main--home-3col .mainRight {
        width: 100% !important
    }
}

.titleBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 16px 14px;
    white-space: nowrap;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 10px;
}

.titleBar h3 {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    margin: 0;
}

.titleBar .breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titleBar .breadcrumb strong, .titleBar .breadcrumb .highlight {
    color: var(--title);
    font-weight: 600;
}

.titleBar a {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0
}

.titleBar a:hover {
    color: var(--title)
}

.titleBar .tabGroup {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.titleBar .tabBtn {
    padding: 4px 10px;
    background: var(--bg);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer
}

.titleBar .tabBtn.active {
    background: var(--title);
    color: #fff
}

.titleBar .tabBtn:focus {
    outline: none
}

.titleBar .tabBtn:focus:not(.active) {
    background: var(--bg);
    color: inherit
}

h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

[class^="h-icon-"] {
    font-size: 16px;
    transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: breath 3s ease-in-out infinite;
}

.h-icon-1 {
    background-image: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.h-icon-2 {
    background-image: linear-gradient(135deg, #ef4444, #fb7185);
}

.h-icon-3 {
    background-image: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.h-icon-4 {
    background-image: linear-gradient(135deg, #10b981, #34d399);
}

.h-icon-5 {
    background-image: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.h-icon-6 {
    background-image: linear-gradient(135deg, #db2777, #f472b6);
}

.h-icon-7 {
    background-image: linear-gradient(135deg, #0284c7, #38bdf8);
}

.h-icon-8 {
    background-image: linear-gradient(135deg, #65a30d, #a3e635);
}

.h-icon-9 {
    background-image: linear-gradient(135deg, #7c3aed, #c084fc);
}

.h-icon-10 {
    background-image: linear-gradient(135deg, #0891b2, #22d3ee);
}

@keyframes breath {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

h3:hover [class^="h-icon-"] {
    animation: none;
    transform: scale(1.18);
    filter: brightness(1.25) drop-shadow(0 0 6px rgba(255,255,255,0.2));
}

h3:active [class^="h-icon-"] {
    transform: scale(0.92);
    filter: brightness(0.85);
    transition-duration: 0.08s;
}

.box-wrap {
    display: flex;
    flex-direction: column;
}

.box {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.box:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.exclusive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 16px;
}

@media (max-width: 768px) {
    .exclusive {
        grid-template-columns: 1fr;
    }
}

.exItem {
    border-radius: var(--radius);
    min-width: 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--name);
    background: transparent;
    position: relative;
    overflow: visible;
    width: 100%;
    animation: exFadeIn 0.4s ease backwards;
}

.exItem:nth-child(odd) {
    justify-self: start;
}

.exItem:nth-child(even) {
    justify-self: end;
}

.exItem::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: var(--radius);
    pointer-events: none;
    z-index: -1;
}

.exItem:hover {
    background: var(--card);
    transform: scale(1.02);
}

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

.exItemRow {
    display: grid;
    grid-template-columns: 50px 1fr auto auto;
    align-items: center;
    line-height: 1;
    gap: 0;
    width: 100%;
}

.col-cover {
    width: 42px;
    height: 42px;
}

.col-cover .exCover {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

.exItem .col-cover {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.exItem .col-cover .play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.2s ease;
    z-index: 2;
    cursor: pointer;
}

.exItem:hover .col-cover .play-icon {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, 0.38);
}

.col-name {
    min-width: 0;
    overflow: hidden;
}

.song-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
    line-height: 1.3;
    transition: color 0.2s ease;
    color: var(--name);
    text-decoration: none;
}

.exItem:hover .song-title {
    color: var(--title);
}

.exTag {
    color: #94d500;
}

.exDate {
    transition: none;
}

.exItem:active {
    transform: scale(0.98);
    background: var(--hover-bg);
}

/* 三列布局首页 - 右侧榜单区块 */
.exItem:nth-child(1) {
    animation-delay: 0.00s;
}

.exItem:nth-child(2) {
    animation-delay: 0.03s;
}

.exItem:nth-child(3) {
    animation-delay: 0.06s;
}

.exItem:nth-child(4) {
    animation-delay: 0.09s;
}

.exItem:nth-child(5) {
    animation-delay: 0.12s;
}

.exItem:nth-child(6) {
    animation-delay: 0.15s;
}

.exItem:nth-child(7) {
    animation-delay: 0.18s;
}

.exItem:nth-child(8) {
    animation-delay: 0.21s;
}

.exItem:nth-child(9) {
    animation-delay: 0.24s;
}

.exItem:nth-child(10) {
    animation-delay: 0.27s;
}

.exItem:nth-child(11) {
    animation-delay: 0.30s;
}

.exItem:nth-child(12) {
    animation-delay: 0.33s;
}

.exItem:nth-child(13) {
    animation-delay: 0.36s;
}

.exItem:nth-child(14) {
    animation-delay: 0.39s;
}

.exItem:nth-child(15) {
    animation-delay: 0.42s;
}

.exItem:nth-child(16) {
    animation-delay: 0.45s;
}

.exItem:nth-child(17) {
    animation-delay: 0.48s;
}

.exItem:nth-child(18) {
    animation-delay: 0.51s;
}

.exItem:nth-child(19) {
    animation-delay: 0.54s;
}

.exItem:nth-child(20) {
    animation-delay: 0.57s;
}

.exItem:nth-child(-n+10) .exNum, .exItem:nth-child(n+11) .exNum {
    background: unset;
}

@keyframes exFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.singleList {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.singleList li {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--name);
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: singleFadeIn 0.4s ease backwards;
}

.singleList li:nth-child(1) {
    animation-delay: 0.00s;
}

.singleList li:nth-child(2) {
    animation-delay: 0.03s;
}

.singleList li:nth-child(3) {
    animation-delay: 0.06s;
}

.singleList li:nth-child(4) {
    animation-delay: 0.09s;
}

.singleList li:nth-child(5) {
    animation-delay: 0.12s;
}

.singleList li:nth-child(6) {
    animation-delay: 0.15s;
}

.singleList li:nth-child(7) {
    animation-delay: 0.18s;
}

.singleList li:nth-child(8) {
    animation-delay: 0.21s;
}

.singleList li:nth-child(9) {
    animation-delay: 0.24s;
}

.singleList li:nth-child(10) {
    animation-delay: 0.27s;
}

.singleList li:hover {
    color: var(--title);
    transform: translateX(3px);
}

.singleList li:active {
    transform: translateX(1px) scale(0.98);
    transition-duration: 0.08s;
}

.singleList li a {
    flex: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--name);
    text-decoration: none;
    transition: color 0.25s ease;
}

.singleList li:hover a {
    color: var(--title);
}

.singleList li span {
    color: #999;
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
    margin-left: 10px;
    transition: color 0.25s ease;
}

.singleList li:hover span {
    color: var(--title);
}

@keyframes singleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.double>* {
    margin-top: 15px!important;
}

.djBox {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-top: 20px
}

.djBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.djBox:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

@media (min-width: 993px) {
    .djList {
        --dj-producer-gap: 14px;
        --dj-producer-unit: calc((100% - 6 * var(--dj-producer-gap)) / 7);
        display: grid;
        grid-template-columns: calc(2 * var(--dj-producer-unit) + var(--dj-producer-gap)) repeat(5, var(--dj-producer-unit));
        grid-auto-rows: auto;
        gap: var(--dj-producer-gap);
        padding: 16px;
        box-sizing: border-box;
    }

    .djMainItem, .djList > a:has(.djBadge) {
        position: relative;
        grid-column: 1;
        grid-row: 1 / 3;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        align-self: start;
        justify-self: stretch;
        overflow: hidden;
        border-radius: 12px;
    }

    .djMainItem img, .djList > a:has(.djBadge) img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
        top: 0;
        left: 0
    }

    .djItem {
        display: block;
        transition: all .3s ease;
        cursor: pointer;
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .djItem:not(.djMainItem):not(:has(.djBadge)) {
        border-radius: 10px;
    }

    .djItem img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        transition: all .3s ease;
        box-shadow: 0 2px 8px rgba(0,20,60,0.1);
        top: 0;
        left: 0
    }

    .djList > a:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .djList > a:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .djList > a:nth-of-type(4) {
        grid-column: 4;
        grid-row: 1;
    }

    .djList > a:nth-of-type(5) {
        grid-column: 5;
        grid-row: 1;
    }

    .djList > a:nth-of-type(6) {
        grid-column: 6;
        grid-row: 1;
    }

    .djList > a:nth-of-type(7) {
        grid-column: 2;
        grid-row: 2;
    }

    .djList > a:nth-of-type(8) {
        grid-column: 3;
        grid-row: 2;
    }

    .djList > a:nth-of-type(9) {
        grid-column: 4;
        grid-row: 2;
    }

    .djList > a:nth-of-type(10) {
        grid-column: 5;
        grid-row: 2;
    }

    .djList > a:nth-of-type(11) {
        grid-column: 6;
        grid-row: 2;
    }
}

.djBadge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #2dce89;
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 20px;
    z-index: 2
}

.djTemp {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2
}

.djTemp i {
    color: #ff3b30
}

.djName {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    background: linear-gradient(transparent,rgba(0,0,0,0.7));
    border-radius: 0 0 10px 10px;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.djMainItem .djName, .djList > a:has(.djBadge) .djName {
    border-radius: 0 0 12px 12px
}

.djItem:hover {
    transform: scale(1.03)
}

.djItem:hover img {
    box-shadow: 0 6px 18px rgba(44,80,255,0.15)
}

@media(max-width: 992px) {
    .djBox {
        overflow:visible
    }

    .djList {
        display: flex;
        gap: 12px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 15px;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .djList::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0
    }

    .djItem,.djMainItem {
        flex-shrink: 0;
        width: 110px;
        height: auto;
        aspect-ratio: 1 / 1;
        scroll-snap-align: start;
        border-radius: 10px;
        overflow: hidden;
        position: relative
    }

    .djMainItem {
        width: 110px;
        height: auto;
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        justify-self: auto;
    }

    .djItem a,.djMainItem a {
        display: block;
        width: 100%;
        height: 100%
    }

    .djItem img,.djMainItem img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        border-radius: 10px
    }

    .djMainItem img {
        border-radius: 10px
    }

    .djName {
        font-size: 11px;
        padding: 10px 4px 6px;
        white-space: nowrap
    }

    .djMainItem .djName {
        font-size: 11px
    }

    .djBadge {
        top: 6px;
        left: 6px;
        font-size: 9px;
        padding: 3px 6px
    }

    .djTemp {
        top: 6px;
        right: 6px;
        font-size: 9px;
        padding: 2px 6px
    }

    .djTemp i {
        font-size: 9px
    }
}

@media(max-width: 768px) {
    .djList {
        gap:10px;
        padding: 15px 0
    }

    .djItem,.djMainItem {
        width: 100px
    }

    .djName {
        font-size: 10px;
        padding: 8px 3px 5px
    }
}

@media(max-width: 480px) {
    .djList {
        gap:12px
    }

    .djItem,.djMainItem {
        width: 90px
    }

    .djName {
        font-size: 9px;
        padding: 6px 2px 4px;
        white-space: normal;
        line-height: 1.2;
        word-break: break-word
    }

    .djMainItem .djName {
        font-size: 9px;
        padding: 6px 2px 4px
    }

    .djBadge {
        font-size: 7px;
        padding: 2px 4px;
        top: 4px;
        left: 4px
    }

    .djTemp {
        font-size: 7px;
        padding: 2px 4px;
        top: 4px;
        right: 4px
    }

    .djTemp i {
        font-size: 7px
    }
}

.rankBox {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.rankBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.rankBox:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.rankTab {
    display: flex;
    gap: 8px
}

.rankTab span {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: var(--bg)
}

.rankTab span:hover {
    background: var(--red);
    color: #fff
}

.rankTab span.active {
    background: var(--hot-red);
    color: #fff
}

#rank1,#rank2,.homeAsideRankBody {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px
}

.homeAsideRankBody {
    padding: 12px 10px 14px
}

.homeAsideRankBody .rankItem > .rankTxt {
    white-space: normal;
    overflow: visible
}

.homeAsideRankBody .rankTxt a {
    font-size: 13px
}

#rank1.hide,#rank2.hide {
    display: none!important
}

.rankItem {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--name);
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: rankFadeIn 0.4s ease backwards;
    line-height: unset;
    padding: 6px 0;
    text-decoration: none;
}

.rankItem:has(.rankCover) {
    align-items: flex-start;
}

.rankItem:nth-child(1) {
    animation-delay: 0.00s;
}

.rankItem:nth-child(2) {
    animation-delay: 0.03s;
}

.rankItem:nth-child(3) {
    animation-delay: 0.06s;
}

.rankItem:nth-child(4) {
    animation-delay: 0.09s;
}

.rankItem:nth-child(5) {
    animation-delay: 0.12s;
}

.rankItem:nth-child(6) {
    animation-delay: 0.15s;
}

.rankItem:nth-child(7) {
    animation-delay: 0.18s;
}

.rankItem:nth-child(8) {
    animation-delay: 0.21s;
}

.rankItem:nth-child(9) {
    animation-delay: 0.24s;
}

.rankItem:nth-child(10) {
    animation-delay: 0.27s;
}

.rankItem:nth-child(11) {
    animation-delay: 0.30s;
}

.rankItem:nth-child(12) {
    animation-delay: 0.33s;
}

.rankItem:nth-child(13) {
    animation-delay: 0.36s;
}

.rankItem:nth-child(14) {
    animation-delay: 0.39s;
}

.rankItem:nth-child(15) {
    animation-delay: 0.42s;
}

.rankItem:hover {
    transform: translateX(6px) scale(1.01);
}

.rankItem:active {
    transform: translateX(2px) scale(0.98);
    transition-duration: 0.08s;
}

.rankNum {
    width: 24px;
    font-weight: bold;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 30px;
    font-size: 16px;
}

.rankList .rankNum {
    width: 24px;
    font-size: 16px;
    display: block;
    margin-top: 0;
}

.rankItem:hover .rankNum {
    transform: scale(1.18) rotate(-3deg);
}

.rankItem:active .rankNum {
    transform: scale(0.9);
    transition-duration: 0.08s;
}

/* 三列布局 - 榜单封面 */
.rankCover {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* 三列布局 - 榜单封面 margin */
    margin-top: 2px;
}

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

.playIcon {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.playIcon i {
    color: #fff;
    font-size: 18px;
}

.rankItem:hover .playIcon {
    opacity: 1;
}

.rankTxt {
    flex: 1;
    min-width: 0;
    transition: all 0.25s ease;
    white-space: unset;
    overflow: visible;
    line-height: 30px;
    font-size: 14px;
}

.rankItem > .rankTxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankTxt a {
    color: var(--name);
    transition: color 0.25s ease, letter-spacing 0.25s ease;
    text-decoration: none;
    display: block;
    /* 三列布局 - 榜单项 padding */
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankTxt a:hover {
    color: var(--hot-red);
    letter-spacing: 0.3px;
}

    /* 三列布局 - 榜单序号 */
.rankTxt .song-info {
    font-size: 10px;
    color: #717171;
    display: flex;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
    line-height: 20px;
}

.rankItem:hover .rankTxt {
    transform: translateX(2px);
}

.rankItem:nth-child(1) .rankNum {
    color: #ffb700;
}

.rankItem:nth-child(2) .rankNum {
    color: #6c757d;
}

.rankItem:nth-child(3) .rankNum {
    color: #ff9500;
}

@keyframes rankFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rankList {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px
}

/* ========== 三列布局·榜单·广告 ========== */
.rankCover {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

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

.playIcon {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.playIcon i {
    color: #fff;
    font-size: 18px;
}

/* 桌面端悬停显示播放图标 */
.rankItem:hover .playIcon {
    opacity: 1;
}

.rankList {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px
}

.adBox {
    overflow: hidden
}

.adBox a {
    text-decoration: none;
    color: inherit;
    background: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    display: inline;
    outline: none
}

.adBox img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius)
}

.rightAlbumBox {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.rightAlbumBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.rightAlbumBox:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.rightAlbumList {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    padding: 16px
}

.rightAlbumItem {
    text-align: center;
    transition: .2s
}

.rightAlbumItem:hover {
    transform: scale(1.05)
}

.album-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,20,60,0.08)
}

.album-wrap img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #f5f5f5
}

.album-wrap:hover img {
    transform: scale(1.1)
}

.album-num {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 0 10px;
    border-radius: 8px 0;
    backdrop-filter: blur(2px);
    font-size: 10px;
}

.album-icon {
    position: absolute;
    left: 4px;
    top: 4px;
    font-size: 14px;
    color: var(--hot-red);
    opacity: 0;
    transition: .3s
}

.album-wrap:hover .album-icon {
    opacity: 1
}

.rightAlbumItem p {
    font-size: 12px;
    color: #777;
    margin-top: 8px
}

.linkBox {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.linkBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.linkBox:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.linkList {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.linkList a {
    padding: 6px 10px;
    background: var(--bg);
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap
}

.linkList a:hover {
    background: var(--title);
    color: #fff
}

.songListBox {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.songListBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.songListBox:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.songListGrid {
    display: flex;
    gap: 1.2rem;
    padding: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.songListGrid::-webkit-scrollbar {
    display: none;
}

.songListItem {
    flex: 0 0 calc((100% - 4 * 1.2rem) / 5);
    min-width: 160px;
}

@media (max-width: 1200px) {
    .songListGrid {
        gap: 1rem;
    }

    .songListItem {
        flex: 0 0 calc((100% - 4 * 1rem) / 5);
    }
}

@media (max-width: 992px) {
    .songListGrid {
        gap: 1rem;
    }

    .songListItem {
        flex: 0 0 calc((100% - 3 * 1rem) / 4);
    }
}

@media (max-width: 768px) {
    .songListGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9rem;
        padding: 0.9rem;
        overflow-x: visible;
    }

    .songListItem {
        flex: unset;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .songListGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.7rem;
        padding: 0.7rem;
    }
}

.songListItem {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    background: var(--hread);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.songListItem:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: color-mix(in srgb, var(--sg-accent, #0052d9) 40%, var(--line, #e8edf2));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.songListItem .song-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient( ellipse at 30% 20%, color-mix(in srgb, var(--sg-accent, #0052d9) 15%, transparent), transparent 60% );
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

.songListItem:hover .song-glow {
    opacity: 1;
}

.songListItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 9999px 9999px 0;
    background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 30%, var(--sg-accent, #0052d9) 50%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 70%, transparent 100% );
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 4;
}

.songListItem::after {
    content: "";
    position: absolute;
    right: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 9999px 0 0 9999px;
    background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 30%, var(--sg-accent, #0052d9) 50%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 70%, transparent 100% );
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 4;
}

.songListItem:hover::before, .songListItem:hover::after {
    opacity: 0.9;
    transform: scaleY(1);
}

.songListItem:nth-child(6n+1) {
    --sg-accent: #0052d9;
}

.songListItem:nth-child(6n+2) {
    --sg-accent: #2ba471;
}

.songListItem:nth-child(6n+3) {
    --sg-accent: #e37318;
}

.songListItem:nth-child(6n+4) {
    --sg-accent: #ef4444;
}

.songListItem:nth-child(6n+5) {
    --sg-accent: #8b5cf6;
}

.songListItem:nth-child(6n+6) {
    --sg-accent: #06b6d4;
}

.songCover {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,20,60,0.08);
    z-index: 1;
    flex-shrink: 0;
}

.songCover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.songListItem:hover .songCover img {
    transform: scale(1.1);
}

.songCover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 2;
    border-radius: 0 0 8px 8px;
    pointer-events: none;
}

.songTag {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 3;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.songIcon {
    position: absolute;
    right: 6px;
    top: 6px;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: .3s ease;
    z-index: 3;
}

.songListItem:hover .songIcon {
    opacity: 1;
}

.sgOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 4;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

.songListItem:hover .sgOverlay {
    opacity: 1;
}

.sgPlayBtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sg-accent, #0052d9) 90%, #fff);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8) rotate(-15deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 40px color-mix(in srgb, var(--sg-accent, #0052d9) 25%, transparent);
    cursor: pointer;
}

.songListItem:hover .sgPlayBtn {
    transform: scale(1) rotate(0deg);
}

.sgPlayBtn i {
    font-size: 1.8rem;
    color: #fff;
    margin-left: 4px;
}

.songInfo {
    padding: 16px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(var(--line-rgb),0.08);
}

.songInfo a {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    letter-spacing: 0.4px;
    transition: color 0.24s ease;
}

.songListItem:hover .songInfo a {
    color: var(--sg-accent);
}

.hotTag {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 3;
    font-size: 11px;
    color: #fff;
    background: color-mix(in srgb, var(--sg-accent) 40%, transparent);
    padding: 2px 6px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 3px;
}

.coverBottomText {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    z-index: 3;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.65));
    backdrop-filter: blur(1px);
    border-radius: 0 0 8px 8px;
    transition: opacity 0.3s ease;
}

.songListItem:hover .coverBottomText {
    opacity: 0;
}

.coverBottomText span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardFilter {
    border-bottom: 1px solid var(--line);
    padding: 20px
}

.filterRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px
}

.filterRow:last-child {
    margin-bottom: 0
}

.filterLabel {
    font-size: 14px;
    color: var(--name);
    min-width: 56px;
}

.filterTag {
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--bg);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    will-change: transform;
    animation: filterFadeIn 0.4s ease backwards;
}

.filterTag:nth-child(1) {
    animation-delay: 0.00s;
}

.filterTag:nth-child(2) {
    animation-delay: 0.03s;
}

.filterTag:nth-child(3) {
    animation-delay: 0.06s;
}

.filterTag:nth-child(4) {
    animation-delay: 0.09s;
}

.filterTag:nth-child(5) {
    animation-delay: 0.12s;
}

.filterTag:nth-child(6) {
    animation-delay: 0.15s;
}

.filterTag:nth-child(7) {
    animation-delay: 0.18s;
}

.filterTag:nth-child(8) {
    animation-delay: 0.21s;
}

.filterTag:nth-child(9) {
    animation-delay: 0.24s;
}

.filterTag:nth-child(10) {
    animation-delay: 0.27s;
}

.filterTag:nth-child(11) {
    animation-delay: 0.30s;
}

.filterTag:nth-child(12) {
    animation-delay: 0.33s;
}

.filterTag:nth-child(13) {
    animation-delay: 0.36s;
}

.filterTag a {
    color: var(--name);
    display: block;
}

.filterTag.active {
    background: var(--title);
}

.filterTag.active a {
    color: #fff !important;
}

.filterTag:hover {
    background: var(--line);
    transform: translateY(-2px);
}

.filterTag:hover a {
    color: var(--hot-red);
}

.filterTag:active {
    transform: translateY(0);
}

@keyframes filterFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sortTabBox {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

.sortTabList {
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 10px!important;
    justify-content: flex-start!important
}

.sortTabList .sortItem {
    flex: 1!important;
    min-width: 90px!important;
    text-align: center!important;
    padding: 10px 15px;
    border-radius: 6px;
    background: var(--bg);
    color: var(--name);
    font-size: 13px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    user-select: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: fadeInUp 0.3s ease-out backwards
}

.sortTabList .sortItem:hover {
    background: var(--line);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.sortTabList .sortItem:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.sortItem.active {
    background: var(--hot-red);
    color: #fff;
    position: relative;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--title) 35%, transparent)
}

.sortItem.active:hover {
    background: var(--hot-red);
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--title) 40%, transparent)
}

.sortTabList .sortItem::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transform: translate(-50%,-50%);
    transition: width 0.4s ease-out,height 0.4s ease-out, opacity 0.3s;
    pointer-events: none;
    opacity: 0;
}

.sortTabList .sortItem:active::after {
    width: 200px;
    height: 200px;
    opacity: 0;
    transition: width 0.2s ease-out,height 0.2s ease-out,opacity 0.3s
}

@keyframes slideIn {
    from {
        width: 0%;
        opacity: 0
    }

    to {
        width: 30%;
        opacity: 1
    }
}

.sortTabList .sortItem:nth-child(1) {
    animation-delay: 0.02s
}

.sortTabList .sortItem:nth-child(2) {
    animation-delay: 0.04s
}

.sortTabList .sortItem:nth-child(3) {
    animation-delay: 0.06s
}

.sortTabList .sortItem:nth-child(4) {
    animation-delay: 0.08s
}

.sortTabList .sortItem:nth-child(5) {
    animation-delay: 0.10s
}

.sortTabList .sortItem:nth-child(6) {
    animation-delay: 0.12s
}

.sortTabList .sortItem:nth-child(7) {
    animation-delay: 0.14s
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.sortTabList .sortItem:focus-visible {
    outline: 2px solid var(--hot-red);
    outline-offset: 2px;
    transform: scale(1.02)
}

.sortTabList .sortItem {
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

@media (max-width: 768px) {
    .sortTabList {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }

    .sortTabList .sortItem {
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 8px 4px;
        font-size: 11px;
    }

    .sortItem.active::before {
        width: 40%;
        height: 2px
    }
}

.listHeader {
    display: flex;
    align-items: center;
    padding: 12px var(--list-row-pad-x, 16px);
    border-bottom: 1px solid var(--line);
    color: #aaa;
    font-weight: bold;
    width: 100%
}

.col-check {
    width: var(--list-col-check, 40px);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
}

.listHeader .col-name {
    padding-left: calc(var(--list-col-cover, 40px) + var(--list-col-name-gap, 10px))
}

.col-cover {
    width: 50px;
    flex-shrink: 0
}

.col-name {
    flex: 1;
    min-width: 0
}

.col-bg {
    padding: 2px 10px;
    border-radius: 5px;
    margin-left: 10px
}

.col-hot {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
    color: var(--name)
}

.col-time {
    width: 140px;
    flex-shrink: 0;
    text-align: center;
    color: var(--name)
}

.col-op {
    width: 100px;
    flex-shrink: 0;
    text-align: center
}

.songList {
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.mainLeft > .box {
    --list-row-pad-x: 16px;
    --list-col-check: 40px;
    --list-col-cover: 40px;
    --list-col-name-gap: 10px;
}

.mainLeft > .box {
    --list-row-pad-x: 16px;
    --list-col-check: 40px;
    --list-col-cover: 40px;
    --list-col-name-gap: 10px;
}

.mainLeft > .box:not(:first-child) {
    margin-top: 20px;
}

.songItem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px var(--list-row-pad-x, 16px);
    border-bottom: 1px solid var(--line);
    width: 100%;
    position: relative;
    isolation: isolate;
    animation: songFadeIn 0.4s ease backwards;
}

.songItem:nth-child(1) {
    animation-delay: 0.00s;
}

.songItem:nth-child(2) {
    animation-delay: 0.03s;
}

.songItem:nth-child(3) {
    animation-delay: 0.06s;
}

.songItem:nth-child(4) {
    animation-delay: 0.09s;
}

.songItem:nth-child(5) {
    animation-delay: 0.12s;
}

.songItem:nth-child(6) {
    animation-delay: 0.15s;
}

.songItem:nth-child(7) {
    animation-delay: 0.18s;
}

.songItem:nth-child(8) {
    animation-delay: 0.21s;
}

.songItem:nth-child(9) {
    animation-delay: 0.24s;
}

.songItem:nth-child(10) {
    animation-delay: 0.27s;
}

.songItem:nth-child(11) {
    animation-delay: 0.30s;
}

.songItem:nth-child(12) {
    animation-delay: 0.33s;
}

.songItem:nth-child(13) {
    animation-delay: 0.36s;
}

.songItem:nth-child(14) {
    animation-delay: 0.39s;
}

.songItem:nth-child(15) {
    animation-delay: 0.42s;
}

.songItem:nth-child(16) {
    animation-delay: 0.45s;
}

.songItem:nth-child(17) {
    animation-delay: 0.48s;
}

.songItem:nth-child(18) {
    animation-delay: 0.51s;
}

.songItem:nth-child(19) {
    animation-delay: 0.54s;
}

.songItem:nth-child(20) {
    animation-delay: 0.57s;
}

.songItemRow {
    display: flex;
    align-items: center;
    width: 100%;
}

.col-cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.songItem .col-cover {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .songItem:hover .col-cover {
        transform: scale(1.08) rotate(-2deg);
    }

    .songItem:active .col-cover {
        transform: scale(0.95);
    }
}

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

.col-cover .play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    backdrop-filter: blur(4px);
    opacity: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .songItem:hover .play-icon {
        transform: translate(-50%,-50%) scale(1.1);
        background: rgba(255,255,255,0.3);
    }
}

.col-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    flex: 1;
    gap: 10px;
}

#tooltips {
    position: absolute;
    background: var(--hot-red);
    color: #FFF;
    display: none;
    font-size: 14px;
    padding: 0 15px;
    line-height: 32px;
    border-radius: 2px;
    margin-top: -42px;
    z-index: 99;
}

#tooltips:after {
    left: 50%;
    bottom: -10px;
    position: absolute;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--hot-red);
    margin-left: -10px;
}

.song-progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
    pointer-events: none;
    z-index: 0;
}

.song-title, .song-info {
    position: relative;
    z-index: 1;
}

.hot-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding: 0 6px;
    background: rgba(255,77,79,0.1);
    color: #ff4d4f;
    border-radius: 10px;
    font-size: 10px;
}

.song-title {
    font-weight: 500;
    color: var(--name);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.songItem:hover .song-title {
    color: var(--title);
    letter-spacing: 0.3px;
}

.song-info {
    font-size: 10px;
    color: #717171;
    display: flex;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.songItem:hover .song-info {
    color: var(--name);
}

.song-info p {
    margin-right: inherit;
}

.col-check input {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #444;
    border-radius: 6px;
    background: #111;
    cursor: pointer;
    position: relative;
}

.col-check input:checked {
    background: var(--title);
    border-color: var(--title);
}

.col-check input:checked::after {
    content: "\eb7b";
    font-family: remixicon;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 8px;
}

.col-check input:hover {
    border-color: var(--title);
    transform: scale(1.1);
}

.col-check input:active {
    transform: scale(0.9);
}

.col-op {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.col-op i {
    font-size: 17px;
    color: #aaa;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg);
    position: relative;
    z-index: 11;
    pointer-events: auto;
}

.col-op i:hover {
    color: var(--hot-red);
    background: var(--bg);
    transform: scale(1.15) rotate(-5deg);
}

.col-op i:active {
    transform: scale(0.9);
}

.more-btn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--name);
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.song-more-bar {
    width: 100%;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    background: var(--bg);
    border-radius: 6px;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.song-more-bar.show {
    height: 44px;
    margin-top: 8px;
    padding: 0 10px;
}

.song-more-bar i {
    font-size: 14px;
    color: var(--name);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    pointer-events: auto;
}

.song-more-bar i:hover {
    color: var(--title);
    transform: scale(1.05);
}

.song-more-bar i:active {
    transform: scale(0.95);
}

@keyframes songFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.list_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    --list-action-h: 30px
}

.list_box .list_controllbox {
    padding: 20px var(--list-row-pad-x)
}

.list_box .list_split_page {
    padding: 20px var(--list-row-pad-x) 20px 0
}

.list_controllbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px var(--list-row-pad-x, 16px);
    background: var(--bar);
    flex-wrap: nowrap;
    gap: 0
}

.list_controllbox .index-typeicon {
    float: none;
}

.list_selectall {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--list-col-check, 40px);
    flex-shrink: 0;
    gap: 0;
    margin: 0
}

.list_left_actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.list_selectall span {
    font-size: 13px;
    color: var(--text);
    cursor: pointer
}

.list_selectall input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #444;
    border-radius: 6px;
    background: #111;
    cursor: pointer;
    position: relative
}

.list_selectall input[type="checkbox"]:checked {
    background: var(--title);
    border-color: var(--title)
}

.list_selectall input[type="checkbox"]:checked::after {
    content: "\eb7b";
    font-family: remixicon;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 8px
}

.index-typeicon {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0
}

.playall, .addall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--list-action-h);
    padding: 0 16px;
    line-height: 1;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 0;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.playall {
    background: var(--title);
    color: #fff;
}

.addall {
    background: #222;
    color: #fff;
}

.playall:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--title) 25%, transparent);
}

.addall:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.playall:active, .addall:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.list_split_page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    --list-action-h: 30px
}

.dj-page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    vertical-align: middle
}

.dj-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--list-action-h, 30px);
    height: var(--list-action-h, 30px);
    padding: 0;
    border-radius: 6px;
    background: #222;
    border: 0;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease
}

.dj-page-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    pointer-events: none
}

.dj-page-btn:not(.is-disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #fff
}

.dj-page-btn.is-disabled {
    color: #666;
    cursor: not-allowed;
    opacity: .55
}

.dj-page-btn.is-disabled:hover {
    transform: none;
    box-shadow: none
}

.dj-page-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--list-action-h, 30px);
    color: var(--text, #ccc);
    font-size: 13px;
    min-width: 52px;
    text-align: center;
    user-select: none;
    letter-spacing: .3px;
    line-height: 1
}

ul.pagination.pagination-simple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

ul.pagination.pagination-simple > li {
    list-style: none;
    margin: 0;
    padding: 0
}

ul.pagination.pagination-simple > li.disabled .dj-page-btn {
    pointer-events: none
}

.list_split_page ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.list_split_page li {
    display: inline-block;
    list-style: none
}

.list_split_page .active span {
    background: var(--title);
    color: #fff
}

.list_split_page ul a,.list_split_page ul span {
    display: inline-block;
    min-width: 32px;
    padding: 6px 12px;
    border: 1px solid var(--bg);
    border-radius: 6px;
    background: var(--bg);
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    text-align: center
}

.list_split_page ul a:hover {
    border-color: var(--title);
    color: var(--title);
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent)
}

.list_split_page .active a,.list_split_page .current {
    background: var(--title);
    border-color: var(--title);
    color: #fff
}

.list_split_page .f input {
    width: 50px;
    border: 0;
    background: var(--bg);
    color: #ccc;
    text-align: center
}

.list_split_page .f input:focus {
    outline: 0;
    border-color: var(--title)
}

.list_split_page .g a {
    background: var(--bg)
}

.list_split_page .e span {
    background: transparent;
    border: 0
}

ul.pagination.pagination-blocks {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

ul.pagination.pagination-blocks > li {
    list-style: none;
    margin: 0;
    padding: 0
}

.list_split_page .page-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--list-action-h, 30px);
    min-width: var(--list-action-h, 30px);
    height: var(--list-action-h, 30px);
    padding: 0;
    border-radius: 6px;
    background: #2c2e36;
    border: 0;
    color: #7d818a;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: color .2s ease, background .2s ease, transform .2s ease
}

.list_split_page .page-block i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    pointer-events: none
}

.list_split_page .page-block.is-active {
    background: var(--title);
    color: #fff;
    font-weight: 600
}

.list_split_page .page-block.is-disabled {
    color: #5a5d66;
    cursor: not-allowed;
    opacity: .65;
    pointer-events: none
}

.list_split_page a.page-block:hover {
    color: var(--title);
    background: color-mix(in srgb, var(--title) 12%, #2c2e36);
    border: 0
}

@media(max-width: 768px) {
    .mainLeft > .box {
        --list-row-pad-x: 12px
    }

    .listHeader, .songItem {
        padding-left: 12px;
        padding-right: 12px
    }

    .list_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 0;
        gap: 8px;
        --list-action-h: 28px;
        --list-row-pad-x: 12px
    }

    .list_controllbox {
        flex: 0 1 auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        padding: 10px var(--list-row-pad-x);
        gap: 0;
        min-width: 0;
        background: transparent
    }

    .list_left_actions {
        justify-content: flex-start;
        gap: 8px;
        flex: 0 1 auto
    }

    .list_selectall {
        flex-shrink: 0;
        justify-content: flex-start;
        width: var(--list-col-check, 30px);
    }

    .index-typeicon {
        justify-content: flex-start;
        flex-shrink: 0;
        gap: 6px
    }

    .playall,.addall {
        padding: 0 10px;
        font-size: 12px;
        white-space: nowrap
    }

    .list_split_page {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-top: 0;
        padding: 0;
        border-top: 0
    }

    .list_split_page .dj-page-nav {
        gap: 8px
    }

    .list_split_page .dj-page-btn i {
        font-size: 15px
    }

    .list_split_page .dj-page-info {
        min-width: 44px;
        font-size: 12px
    }

    .list_box:has(.pagination-blocks) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .list_box:has(.pagination-blocks) .list_controllbox {
        width: 100%;
        padding: 0;
        padding-top: 10px;
    }

    .list_box:has(.pagination-blocks) .list_split_page {
        width: 100%;
        justify-content: center;
        padding: 15px 0;
    }
}

@media(max-width: 550px) {
    .list_box {
        padding: 0;
        gap: 6px;
        --list-action-h: 26px;
        --list-row-pad-x: 12px
    }

    .list_split_page {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0;
        --list-action-h: 26px;
    }

    .list_controllbox {
        gap: 0;
        padding: 8px var(--list-row-pad-x)
    }

    .index-typeicon {
        gap: 6px;
    }

    .playall,.addall {
        padding: 0 8px;
        font-size: 11px
    }

    .list_split_page .dj-page-btn i {
        font-size: 14px
    }

    .list_split_page .dj-page-info {
        min-width: 40px;
        font-size: 11px
    }

    .list_split_page ul a,.list_split_page ul span {
        min-width: 28px;
        padding: 4px 8px;
        font-size: 12px
    }

    .list_split_page .f input {
        width: 45px
    }
}

.searchLogList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 16px
}

.searchLogItem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    font-size: 13px;
    transition: all .2s
}

.searchLogItem:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 20%, transparent)
}

.searchLogItem a {
    color: var(--text);
    text-decoration: none
}

.searchLogItem .delete-btn {
    color: var(--name);
    cursor: pointer;
    font-size: 14px;
    line-height: 1
}

.searchLogItem .delete-btn:hover {
    color: var(--red)
}

.empty-log {
    text-align: center;
    padding: 30px 0;
    color: var(--name);
    font-size: 12px
}

.hotSearchList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 16px
}

.hotSearchItem {
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    transition: all .2s
}

.hotSearchItem:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 20%, transparent)
}

.hotSearchItem a {
    color: var(--text);
    text-decoration: none;
    font-size: 13px
}

.empty-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--name);
    font-size: 14px
}

.empty-data .btn-link {
    color: var(--title);
    text-decoration: none;
    margin-left: 8px
}

.empty-data .btn-link:hover {
    text-decoration: underline
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9998;
    display: none
}

.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    z-index: 9999;
    display: none;
    overflow: hidden
}

.modal-header {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.modal-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 500
}

.modal-header h4 i {
    margin-right: 8px
}

.modal-close {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    transition: opacity .2s
}

.modal-close:hover {
    opacity: .8
}

.modal-body {
    padding: 25px 20px
}

.modal-body .alert {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--title);
    line-height: 1.6;
    border-radius: 6px
}

.modal-body textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
    box-sizing: border-box
}

.modal-body textarea:focus {
    outline: 0;
    border-color: var(--title)
}

.modal-footer {
    padding: 15px 20px 20px;
    text-align: center;
    border-top: 1px solid var(--line)
}

.modal-footer .btn {
    padding: 10px 30px;
    font-size: 14px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    margin: 0 8px
}

.modal-footer .btn-primary {
    background: var(--title);
    color: #fff
}

.modal-footer .btn-primary:hover {
    opacity: .85
}

.modal-footer .btn-default {
    background: rgba(255,255,255,0.08);
    color: var(--text)
}

.modal-footer .btn-default:hover {
    background: rgba(255,255,255,0.15)
}

@media(max-width: 768px) {
    .col-hot,.col-time {
        display:none
    }

    .col-op {
        width: 80px
    }

    .col-cz {
        width: 80px;
        text-align: end
    }

    .songItemRow .col-op i {
        display: none
    }
}

.pagination ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.pagination li {
    display: inline-block
}

.pagination a,.pagination span {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 6px;
    color: #8f8f8f;
    text-decoration: none;
    padding: 0 10px
}

.pagination a:not(.prev):not(.next):not(.more) {
    padding: 0
}

.pagination a:hover {
    background: var(--hot-red);
    color: #fff
}

.pagination .active span,.pagination .current {
    background: var(--hot-red)!important;
    color: #fff!important
}

.pagination a.more {
    background: transparent!important;
    cursor: default
}

.page-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--name)
}

.page-jump input {
    width: 55px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
    background: var(--card);
    color: var(--text)
}

.page-jump input:focus {
    outline: 0;
    border-color: var(--title)
}

.page-jump a {
    padding: 6px 14px;
    background: var(--bg);
    border-radius: 6px;
    text-decoration: none;
    color: var(--name);
    cursor: pointer;
    transition: .2s
}

.page-jump a:hover {
    background: var(--title);
    color: #fff
}

.page-info {
    font-size: 12px;
    color: var(--name)
}

@media(max-width: 768px) {
    .pagination {
        flex-direction:row;
        justify-content: center;
        flex-wrap: wrap
    }

    .pagination-wrapper {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap
    }

    .page-jump {
        margin-left: 0
    }
}

@media(max-width: 480px) {
    .pagination {
        gap:5px
    }

    .pagination a,.pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 12px
    }

    .pagination a:not(.prev):not(.next):not(.more) {
        width: 32px
    }

    .page-jump input {
        width: 50px;
        padding: 4px 6px
    }

    .page-jump a {
        padding: 4px 10px
    }
}

.albumGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 20px;
}

.albumCard {
    --radius: 16px;
    --card-bg: rgba(26, 26, 26, 0.4);
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    background: var(--bar);
    border: 1px solid var(--pl-border-color, rgba(26, 26, 26, 0.4));
}

.albumCard:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: var(--pl-glow-color, rgba(255, 0, 0, 0.25));
    box-shadow: var(--shadow);
}

.albumCard .card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, var(--pl-glow-color, rgba(255, 0, 0, 0.15)), transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.albumCard:hover .card-glow {
    opacity: 1;
}

.albumCover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0a0a0a;
    border-radius: 12px;
    z-index: 1;
}

.albumCover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.albumCard:hover .albumCover img {
    transform: scale(1.08);
}

.albumCover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 2;
    border-radius: 0 0 12px 12px;
}

.albumTag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

.tag-left, .tag-right {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    letter-spacing: 0.3px;
}

.albumPlayOverlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 4;
    background: rgba(0, 0, 0, 0.3);
}

.albumCard:hover .albumPlayOverlay {
    opacity: 1;
}

.albumPlay {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pl-glow-color, rgba(255, 0, 0, 0.9));
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    transform: scale(0.8) rotate(-15deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 40px var(--pl-glow-color, rgba(255, 0, 0, 0.3));
}

.albumCard:hover .albumPlay {
    transform: scale(1) rotate(0deg);
}

.albumPlay:hover {
    filter: brightness(1.15);
}

.albumInfo {
    padding: 0.75rem 0.9rem 0.9rem;
    position: relative;
    z-index: 1;
}

.albumInfo h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.albumInfo .meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.6rem;
    color: #6b7280;
}

.albumInfo .meta-row .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6b7280;
}

.albumProgress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.04);
    z-index: 2;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

.albumProgress .bar {
    height: 100%;
    width: 0%;
    background: var(--pl-glow-color);
    transition: width 0.6s ease;
    border-radius: 0 0 var(--radius) var(--radius);
}

.albumCard:hover .albumProgress .bar {
    width: 100%;
}

.albumCard:nth-child(8n+1) {
    --pl-glow-color: rgba(57, 211, 83, 0.8);
    --pl-border-color: rgba(57, 211, 83, 0.3);
}

.albumCard:nth-child(8n+2) {
    --pl-glow-color: rgba(250, 204, 21, 0.8);
    --pl-border-color: rgba(250, 204, 21, 0.3);
}

.albumCard:nth-child(8n+3) {
    --pl-glow-color: rgba(249, 115, 22, 0.8);
    --pl-border-color: rgba(249, 115, 22, 0.3);
}

.albumCard:nth-child(8n+4) {
    --pl-glow-color: rgba(239, 68, 68, 0.8);
    --pl-border-color: rgba(239, 68, 68, 0.3);
}

.albumCard:nth-child(8n+5) {
    --pl-glow-color: rgba(139, 92, 246, 0.8);
    --pl-border-color: rgba(139, 92, 246, 0.3);
}

.albumCard:nth-child(8n+6) {
    --pl-glow-color: rgba(6, 182, 212, 0.8);
    --pl-border-color: rgba(6, 182, 212, 0.3);
}

.albumCard:nth-child(8n+7) {
    --pl-glow-color: rgba(236, 72, 153, 0.8);
    --pl-border-color: rgba(236, 72, 153, 0.3);
}

.albumCard:nth-child(8n+8) {
    --pl-glow-color: rgba(20, 184, 166, 0.8);
    --pl-border-color: rgba(20, 184, 166, 0.3);
}

.tabContainer {
    border-top: 1px solid var(--line);
    background: #0a0a0a
}

.tabHeader {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    background: transparent;
    position: relative
}

.tabItem {
    text-align: center;
    padding: 16px 8px;
    background: transparent;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: all .28s ease;
    border: 0;
    position: relative;
    white-space: nowrap;
    font-weight: 500
}

.tabItem:hover {
    color: #fff
}

.tabItem.active {
    color: #fff;
    font-weight: 600
}

.tabItem.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--title);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(44,80,255,0.4)
}

.tabContent {
    display: none;
    padding: 0;
    background: #0d0d0d;
    max-height: 390px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--title) #0d0d0d
}

.tabContent.active {
    display: block
}

.tabContent::-webkit-scrollbar {
    width: 0;
    transition: width .3s ease
}

.tabContent:hover::-webkit-scrollbar,.tabContent:active::-webkit-scrollbar {
    width: 6px
}

.tabContent::-webkit-scrollbar-track {
    background: #0d0d0d;
    border-radius: 3px
}

.tabContent::-webkit-scrollbar-thumb {
    background: var(--title);
    border-radius: 3px
}

.tabContent::-webkit-scrollbar-thumb:hover {
    background: #3a62ff
}

.descList {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 16px
}

.descItem {
    font-size: 12.5px;
    color: var(--name);
    line-height: 1.6;
    padding-left: 14px;
    position: relative
}

.descItem::before {
    content: "1";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--title);
    font-weight: bold;
    width: 12px
}

.descItem:nth-child(1)::before {
    content: "1"
}

.descItem:nth-child(2)::before {
    content: "2"
}

.descItem:nth-child(3)::before {
    content: "3"
}

.descItem:nth-child(4)::before {
    content: "4"
}

.descItem:nth-child(5)::before {
    content: "5"
}

.descItem a {
    color: var(--title);
    font-weight: 500
}

.playWrap {
    display: flex;
    gap: 30px;
    padding: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden
}

.playCover {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.playCover-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(../images/player-default.png) no-repeat center;
    background-size: cover;
    position: relative;
}

.playCover-disc img,
.playCover > img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}

.playCover-disc.is-playing,
.playCover img.playing {
    animation: play-disc-spin 5s linear infinite !important;
}

.playCover img.paused {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes play-disc-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

body.radio-detail-active #music-player {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.music-player__pointer {
    width: 63px;
    height: 154px;
    position: absolute;
    right: -6px;
    top: 0;
    transform-origin: 46px 20px;
    transform: rotate(-15deg);
    transition: all 0.3s;
    background: url(../images/player-line.png) no-repeat 0 0;
    background-size: cover;
    z-index: 2;
    pointer-events: none;
}

.music-player__pointer.active {
    transform: rotate(-3deg);
}

.coverPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    background: color-mix(in srgb, var(--accent, var(--title)) 75%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
}

    /* 24 * (180/220) 约20px */
color: #fff; cursor: pointer; }

.coverPlay:hover {
    transform: translate(-50%,-50%) scale(1.08);
}

.playInfo {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    z-index: 1
}

.playTitle {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.playSub {
    font-size: 14px;
    color: var(--songs-name)
}

.playParams {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    color: var(--songs-name);
    font-size: 13px
}

.playParams span {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 10px
}

.playParams span::before {
    content: attr(data-label);
    font-size: 13px;
    opacity: 0.8;
    display: block
}

.playParams a {
    color: var(--songs-name)
}

.playParams a:hover {
    color: var(--hot-red)
}

.playBtns {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.playBtns .actionBtn {
    box-sizing: border-box;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none
}

.playBtn {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--title);
    color: #fff;
    border: 0;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    transform: translateY(0)
}

.playBtn:hover {
    background: #3a62ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(58,98,255,0.3)
}

.playBtn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(58,98,255,0.2)
}

.playBtn.gray {
    background: #222
}

.playBtn.gray:hover {
    background: #333;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2)
}

.playBtn.gray:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15)
}

.playerBox {
    padding: 20px 15px
}

.playerProgress {
    width: 100%;
    height: 100px;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    touch-action: none;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--line);
    z-index: 1;
}

.playerProgress.is-dragging {
    cursor: grabbing;
}

.playerProgress.is-dragging .progressBar {
    transition: none;
}

.progressBarWrapper {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
}

.playBgBlur {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    border-radius: 12px;
}

.playBgBlur img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(50px);
    transform: scale(1.1);
    opacity: 0.6;
}

.playBgBlur::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
}

.playBgBlur::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 12px;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.3) 100% );
    box-shadow: inset 0 2px 20px rgba(255, 255, 255, 0.08), inset 0 -2px 20px rgba(0, 0, 0, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.1);
}

.playBgBlur::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.playerProgress .wave-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#8dcb04,#3bc1d9);
    -webkit-mask: var(--waveform-url) no-repeat center;
    -webkit-mask-size: cover;
    mask: var(--waveform-url) no-repeat center;
    mask-size: cover;
    pointer-events: none;
    z-index: 1;
    height: 100%;
    width: 100%
}

.progressBar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg,color-mix(in srgb, var(--accent, var(--title)) 60%, transparent),var(--accent, var(--title)));
    -webkit-mask: var(--waveform-url) no-repeat center;
    -webkit-mask-size: cover;
    mask: var(--waveform-url) no-repeat center;
    mask-size: cover;
    pointer-events: none;
    z-index: 2;
    animation: gradientShift 2s ease infinite;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.1s linear
}

.playerControl {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.playerTime {
    color: var(--name);
    font-size: 12px
}

.playerTools {
    display: flex;
    align-items: center;
    gap: 10px
}

.playerTools i {
    font-size: 18px;
    color: var(--name);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px
}

.playerTools i:hover {
    color: #fff;
    background: #252525
}

@media (max-width: 768px) {
    .playWrap {
        flex-direction:column;
        align-items: center;
        gap: 20px;
        text-align: center;
        padding: 20px;
    }

    .playCover {
        width: 220px;
        height: 220px;
        margin-bottom: 0
    }

    .playInfo {
        min-width: auto;
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 15px
    }

    .playTitle {
        font-size: 20px;
        text-align: center
    }

    .playSub {
        text-align: center
    }

    .playParams {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 12px;
        justify-content: center;
        width: 100%;
        margin: 0 auto
    }

    .playParams span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 13px;
        gap: 4px;
        border-radius: 8px
    }

    .playParams span::before {
        content: attr(data-label);
        font-size: 12px;
        opacity: 0.7;
        display: block
    }

    .actionBtn {
        padding: 10px 20px !important;
        border-radius: var(--radius) !important;
    }

    .playBtns {
        justify-content: center;
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        align-items: stretch;
        gap: 10px
    }

    .playBtns > :last-child:nth-child(odd), .rankHeader_actions > :last-child:nth-child(odd), .artistDetail_actions > :last-child:nth-child(odd), .albumDetail_actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1
    }

    .playBtns .shareBox, .rankHeader_actions .shareBox, .artistDetail_actions .shareBox, .albumDetail_actions .shareBox {
        width: 100%
    }

    .playBtns .actionBtn {
        width: 100%;
        justify-content: center
    }

    .playBtn {
        white-space: normal;
        min-width: auto;
        padding: 8px 16px;
    }

    .playerBox {
        padding: 15px 10px;
    }

    .playerProgress {
        height: 80px;
    }

    .playerTools i {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .playCover {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
    }

    .playCover-disc {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: url(../images/player-default.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .playCover-disc img,
    .playCover > img {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        object-fit: cover;
        position: absolute;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .playCover-disc.is-playing,
    .playCover img.playing {
        animation: play-disc-spin 5s linear infinite !important;
    }

    .playCover img.paused {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }

    .music-player__pointer {
        width: 63px;
        height: 154px;
        position: absolute;
        right: -6px;
        top: 0;
        transform-origin: 46px 20px;
        transform: rotate(-15deg);
        transition: all 0.3s;
        background: url(../images/player-line.png) no-repeat 0 0;
        background-size: cover;
        z-index: 2;
        pointer-events: none;
    }

    .music-player__pointer.active {
        transform: rotate(-3deg);
    }

    .coverPlay {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 50px;
        height: 50px;
        background: color-mix(in srgb, var(--accent, var(--title)) 75%, transparent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        z-index: 5;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .coverPlay:hover {
        transform: translate(-50%,-50%) scale(1.08);
    }

    .playTitle {
        font-size: 18px
    }

    .playBtn {
        padding: 12px;
        font-size: 13px
    }

    .playerProgress {
        height: 60px
    }

    .playParams {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .playParams span {
        flex: 1;
        min-width: 70px;
        max-width: 100px;
    }
}

.relateList {
    padding: 15px 20px
}

.relateItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.relateItem:last-child {
    border-bottom: 0
}

.relateCover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0
}

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

.relateName {
    flex: 1;
    min-width: 0
}

.relateTitle {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.relateSinger {
    font-size: 12px;
    color: var(--name);
    margin-top: 3px
}

.relatePlay {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ccc;
    font-size: 14px;
    cursor: pointer
}

.rightFixedTool {
    position: fixed;
    right: 1%;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1005;
    pointer-events: none
}

.rightFixedTool .toolBtn {
    pointer-events: all
}

.toolBtn {
    width: 44px;
    height: 44px;
    background: var(--tool-btn);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow);
    border: var(--tool-border);
}

.toolBtn:hover {
    background: var(--title);
    color: #fff;
    transform: scale(1.05)
}

.langSwitchWrap {
    position: relative;
    pointer-events: all;
    z-index: 2
}

.langSwitchPanel {
    position: absolute;
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    min-width: 132px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1010;
    pointer-events: all
}

.langSwitchPanel[hidden] {
    display: none !important
}

.langSwitchWrap.is-switching .langSwitchBtn {
    pointer-events: none;
    opacity: .65
}

.langSwitchWrap.is-switching .langSwitchBtn i {
    animation: langSwitchSpin .8s linear infinite
}

@keyframes langSwitchSpin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

.langSwitchOption {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    padding: 10px 12px;
    border-radius: calc(var(--radius) - 2px);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    transition: background .15s ease, color .15s ease, border-color .15s ease
}

.langSwitchCheck {
    width: 16px;
    flex: 0 0 16px;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    color: var(--primary, #ff2d55);
    transition: opacity .15s ease
}

.langSwitchLabel {
    flex: 1 1 auto
}

.langSwitchOption:hover,
.langSwitchOption:focus {
    outline: 0;
    background: rgba(255,45,85,.12);
    color: var(--title)
}

.langSwitchOption.is-active {
    background: rgba(255,45,85,.16);
    border-color: rgba(255,45,85,.45);
    color: var(--title);
    font-weight: 600
}

.langSwitchOption.is-active .langSwitchCheck {
    opacity: 1
}

#mobileNavBtn {
    display: flex
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    #mobileNavBtn {
        display: none !important
    }
}

@media(max-width: 768px) {
    .rightFixedTool {
        right:3%;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        gap: 8px
    }

    body.gp-active .rightFixedTool {
        bottom: calc(160px + env(safe-area-inset-bottom, 0px))
    }

    body.gp-active.gp-collapsed-bar .rightFixedTool {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px))
    }

    .toolBtn {
        width: 40px;
        height: 40px;
        font-size: 16px
    }
}

@media(max-width: 480px) {
    .rightFixedTool {
        right:4%;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        gap: 8px
    }

    body.gp-active .rightFixedTool {
        bottom: calc(160px + env(safe-area-inset-bottom, 0px))
    }

    .toolBtn {
        width: 38px;
        height: 38px;
        font-size: 15px
    }
}

.serviceQrcode {
    position: fixed;
    right: -180px;
    bottom: 115px;
    width: 160px;
    background: var(--card);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 999;
    transition: .3s ease;
    pointer-events: none
}

.serviceQrcode.show {
    right: 70px
}

.serviceQrcode img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 8px
}

.serviceQrcode p {
    font-size: 12px;
    color: var(--name)
}

.login-dialog-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px)
}

.login-dialog-mask.show {
    display: flex
}

.login-dialog {
    width: 90%;
    max-width: 400px;
    background: var(--card,#0d0d0d);
    border-radius: var(--radius,12px);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    border: 1px solid var(--line,#101218);
    animation: dialogFadeIn .3s ease
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.login-dialog-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line,#101218);
    position: relative
}

.login-dialog-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text,#fff);
    letter-spacing: 1px;
    margin: 0
}

.login-dialog-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--name,#8f8f8f);
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    transition: all .25s ease
}

.login-dialog-close:hover {
    color: var(--text,#fff);
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent)
}

.login-avatar {
    text-align: center;
    padding: 20px 0 8px
}

.login-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent, var(--title)) 40%, transparent);
    padding: 3px;
    background: var(--bg,#131518)
}

.login-info {
    text-align: center;
    padding: 0 24px;
    margin-bottom: 8px
}

.login-info li {
    color: var(--accent, var(--title));
    font-size: 12px;
    list-style: none
}

.login-info li.is-error {
    color: var(--accent, var(--title))
}

.login-info li.is-success {
    color: var(--dl-success, #00d26a)
}

.login-info li.is-pending {
    color: var(--name, #8f8f8f)
}

.login-form {
    padding: 8px 24px 24px
}

.login-input-group {
    margin-bottom: 16px
}

.login-input {
    width: 100%;
    height: 48px;
    background: var(--bg,#131518);
    border: 1px solid var(--line,#101218);
    border-radius: 10px;
    padding: 0 16px;
    color: var(--text,#fff);
    font-size: 14px;
    outline: 0;
    transition: all .25s ease
}

.login-input:focus {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 5%, transparent)
}

.login-input::placeholder {
    color: var(--name,#8f8f8f)
}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 12px
}

.login-links a {
    color: var(--name,#8f8f8f);
    text-decoration: none;
    transition: color .2s
}

.login-links a:hover {
    color: var(--accent, var(--title))
}

.login-btn {
    width: 100%;
    height: 48px;
    background: var(--accent, var(--title));
    border: 0;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, var(--title)) 40%, transparent)
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--title)) 40%, transparent);
    background: color-mix(in srgb, var(--accent, var(--title)) 88%, white)
}

.login-btn.loading {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    pointer-events: none
}

.login-other {
    padding: 0 24px 24px;
    border-top: 1px solid var(--line,#101218);
    margin-top: 8px
}

.login-other-title {
    text-align: center;
    font-size: 12px;
    color: var(--name,#8f8f8f);
    margin: 20px 0 16px;
    position: relative
}

.login-other-title::before,.login-other-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--line,#101218)
}

.login-other-title::before {
    left: 0
}

.login-other-title::after {
    right: 0
}

.login-other-icons {
    display: flex;
    justify-content: center;
    gap: 24px
}

.login-other-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transition: all .25s ease
}

.login-other-icon.qq {
    background: #12B7F5
}

.login-other-icon.wechat {
    background: #07C160
}

.login-other-icon.weibo {
    background: #E6162D
}

.login-other-icon.douyin {
    background: #111
}

.login-other-icon.phone {
    background: var(--title, var(--hot-red, #ff2d55))
}

.login-other-icon.account {
    background: #1296ec
}

.login-other.auth-other-login {
    margin-top: 28px;
    padding: 20px 0 0;
    border-top: 1px solid var(--line,#101218)
}

.login-other.auth-other-login .login-other-title {
    margin-top: 0;
    margin-bottom: 20px
}

.login-other-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.1)
}

.login-tabs {
    display: flex;
    gap: 0;
    margin: 0 24px 16px;
    border-bottom: 1px solid var(--line, #eee)
}

.login-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: var(--name, #888);
    cursor: pointer;
    border-bottom: 2px solid transparent
}

.login-tab.active {
    color: var(--accent, var(--title));
    border-bottom-color: var(--accent, var(--title));
    font-weight: 500
}

.login-code-group {
    display: flex;
    gap: 10px;
    align-items: center
}

.login-code-group .login-input {
    flex: 1;
    min-width: 0
}

.login-code-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line, #ddd);
    border-radius: 8px;
    background: var(--hover-bg, #f5f5f5);
    color: var(--text, #333);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap
}

.login-code-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

@media(max-width: 768px) {
    .login-avatar img {
        width:60px;
        height: 60px
    }
}

@media(max-width: 480px) {
    .login-dialog {
        max-width:92%
    }

    .login-dialog-header {
        padding: 20px 20px 12px
    }

    .login-dialog-header h3 {
        font-size: 16px
    }

    .login-avatar img {
        width: 80px;
        height: 80px
    }

    .login-form {
        padding: 8px 20px 20px
    }

    .login-input {
        height: 44px;
        font-size: 13px
    }

    .login-btn {
        height: 44px;
        font-size: 13px
    }

    .login-other-icon {
        width: 40px;
        height: 40px;
        font-size: 18px
    }

    .login-other-icons {
        gap: 20px
    }

    .login-other-title {
        font-size: 11px;
        margin: 16px 0 12px
    }
}

.site-footer {
    width: 100%;
    background-color: var(--bar);
    color: var(--name);
    padding: 30px 0;
    font-size: 13px;
    flex-shrink: 0;
    border-top: var(--line);
    box-shadow: var(--shadow);
}

.footer-container {
    width: var(--dj-layout-width, 100%);
    max-width: var(--dj-layout-max-width, 1350px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.footer-left .links {
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 2;
}

.footer-left .links a {
    color: var(--name);
    text-decoration: none;
    margin-right: 10px;
    position: relative;
    padding-right: 15px;
}

.footer-left .links a::after {
    content: "/";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    font-weight: 100;
    font-size: 13px;
    color: var(--name);
}

.footer-left .links a:last-child::after {
    display: none;
}

.footer-left .links a:hover {
    color: var(--hot-red);
}

.footer-left .copyright {
    color: var(--name);
    font-size: 13px;
    margin: 0;
}

.footer-left .copyright .footerLinks {
    margin-top: 10px;
}

.footer-left .copyright .footerLink {
    margin-left: 10px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-item {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--tool-btn);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    font-size: 20px;
    box-shadow: var(--shadow);
}

.social-item:hover {
    background: var(--bar);
}

.qrcode-box {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 170px;
    background: #fff;
    border-radius: 8px;
    display: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 99;
    text-align: center;
    color: #0d0d0d;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 2px;
}

.social-item:hover .qrcode-box {
    display: block;
}

.qrcode-box img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 10px auto 0;
}

.qrcode-box .qr-text {
    margin: 10px 0;
    display: block;
}

@media (max-width: 1024px) {
    .site-footer {
        display: none !important;
    }
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--card);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    border-top: 1px solid var(--line);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--name);
    font-size: 12px
}

.mobile-nav-item i {
    font-size: 20px
}

.mobile-nav-item.active {
    color: var(--accent, var(--title, #ff2d55));
}

@media(max-width: 1200px) {
    .bannerBox,.main {
        flex-direction:column;
        gap: 15px;
        margin: 15px 0
    }

    .banner,.mainLeft,.mainRight,.rightRec {
        width: 100%!important;
    }

    .banner {
        height: 260px
    }

    .mainRight {
        position: static;
        margin-bottom: 60px
    }

    .rightFixedTool {
        right: 10px
    }

    .albumGrid {
        grid-template-columns: repeat(4,1fr)
    }

    .djBox {
        margin-top: 15px
    }

    .double {
        gap: 0
    }
}

@media(min-width: 769px) {
    .mobileHeader {
        display:none!important
    }

    .header {
        display: block!important
    }

    .tabHeader {
        flex-wrap: nowrap
    }

    .tabItem {
        flex: 1;
        min-width: auto
    }
}

@media(max-width: 768px) {
    .header {
        display:none!important
    }

    .mobileHeader {
        display: block!important
    }

    .titleBar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 12px 10px;
    }

    .titleBar h3 {
        flex: 0 1 auto;
        max-width: 46%;
        font-size: 14px;
    }

    .titleBar .breadcrumb {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px;
        justify-content: flex-end;
    }

    .titleBar .tabGroup {
        flex-shrink: 0;
    }

    .double,.exclusive {
        grid-template-columns: 1fr
    }

    .albumGrid {
        grid-template-columns: repeat(4,1fr);
        gap: 15px
    }

    .rightAlbumList {
        grid-template-columns: repeat(3,1fr)!important
    }

    .col-hot,.col-time {
        display: none!important
    }

    .col-op {
        display: none!important
    }

    .col-bg {
        padding: 5px 8px;
        border-radius: 8px;
        margin-left: 5px
    }

    .col-cz {
        display: block !important
    }
}

.more-btn {
    display: none;
    width: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 40px;
}

.songFooter {
    justify-content: flex-start
}

@media(max-width: 480px) {
    .banner {
        height:160px
    }

    .titleBar h3 {
        max-width: 40%;
        font-size: 13px;
    }

    .titleBar .breadcrumb {
        font-size: 10px;
    }

    .albumGrid {
        grid-template-columns: repeat(2,1fr);
    }

    .albumInfo .meta-row .dot {
        display: none
    }

    .playTitle {
        font-size: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: unset;
    }

    .serviceQrcode {
        width: 130px
    }
}

.fav-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease
}

.fav-mask.show {
    opacity: 1;
    visibility: visible
}

.fav-modal {
    background: var(--card,#0d0d0d);
    width: 90%;
    max-width: 460px;
    border-radius: var(--radius,12px);
    box-shadow: 0 20px 35px -10px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform .3s ease;
    border: 1px solid var(--line,#101218)
}

.fav-mask.show .fav-modal {
    transform: scale(1)
}

.fav-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line,#101218)
}

.fav-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text,#fff);
    display: flex;
    align-items: center;
    gap: 8px
}

.fav-modal-header h3 i {
    font-size: 18px;
    color: var(--title,#ff2d55)
}

.fav-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--name,#8f8f8f);
    transition: all .2s;
    background: 0;
    border: 0
}

.fav-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text,#fff)
}

.fav-modal-body {
    padding: 20px
}

.fav-music-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg,#131518);
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--line,#101218)
}

.fav-music-name i {
    font-size: 18px;
    color: var(--title,#ff2d55)
}

.fav-music-name span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text,#fff);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.fav-select-box {
    margin-bottom: 16px
}

.fav-select-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text,#fff);
    margin-bottom: 8px;
    display: block
}

.fav-select-current {
    padding: 8px 12px;
    background: var(--bg,#131518);
    border-radius: 6px;
    font-size: 13px;
    color: var(--title,#ff2d55);
    border: 1px solid var(--line,#101218);
    cursor: pointer;
    transition: all .2s
}

.fav-select-current:hover {
    border-color: var(--title,#ff2d55)
}

.fav-box-list {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid var(--line,#101218);
    border-radius: 8px;
    background: var(--bg,#131518)
}

.fav-box-list::-webkit-scrollbar {
    width: 4px
}

.fav-box-list::-webkit-scrollbar-track {
    background: var(--line,#101218);
    border-radius: 2px
}

.fav-box-list::-webkit-scrollbar-thumb {
    background: var(--name,#8f8f8f);
    border-radius: 2px
}

.fav-box-list::-webkit-scrollbar-thumb:hover {
    background: var(--title,#ff2d55)
}

.fav-box-item {
    border-bottom: 1px solid var(--line,#101218)
}

.fav-box-item:last-child {
    border-bottom: 0
}

.fav-box-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    text-decoration: none;
    font-size: 13px;
    color: var(--text,#fff);
    transition: all .2s
}

.fav-box-item a:hover {
    background: rgba(255,255,255,0.05)
}

.fav-box-item.active a {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    color: var(--title,#ff2d55);
    border-left: 2px solid var(--title,#ff2d55)
}

.fav-box-count {
    font-size: 11px;
    color: var(--name,#8f8f8f);
    background: rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 20px
}

.fav-add-box {
    margin-bottom: 20px;
    display: flex;
    gap: 10px
}

.fav-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line,#101218);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg,#131518);
    color: var(--text,#fff);
    box-sizing: border-box;
    transition: all .2s
}

.fav-input:focus {
    outline: 0;
    border-color: var(--title,#ff2d55)
}

.fav-input::placeholder {
    color: var(--name,#8f8f8f);
    font-size: 12px
}

.fav-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.fav-btn {
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0;
    background: 0
}

.fav-btn-primary {
    background: var(--title,#ff2d55);
    color: #fff
}

.fav-btn-primary:hover {
    opacity: .85
}

.fav-btn-danger {
    background: var(--title,#ff2d55);
    color: #fff
}

.fav-btn-danger:hover {
    opacity: .85
}

.fav-btn-default {
    background: rgba(255,255,255,0.08);
    color: var(--text,#fff);
    border: 1px solid var(--line,#101218)
}

.fav-btn-default:hover {
    background: rgba(255,255,255,0.12)
}

.fav-message {
    margin-top: 16px;
    font-size: 12px;
    text-align: center
}

.fav-msg-error {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    border-radius: 6px;
    color: var(--title,#ff2d55)
}

.fav-msg-success {
    padding: 8px 12px;
    background: rgba(0,200,100,0.1);
    border-radius: 6px;
    color: #00c864
}

.fav-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
    color: var(--title,#ff2d55)
}

.fav-loading i {
    font-size: 14px;
    animation: fav-spin .8s linear infinite
}

.fav-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all .25s cubic-bezier(0.68,-0.55,0.265,1.55);
    white-space: normal;
    text-align: left;
    letter-spacing: .5px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.3)
}

.fav-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,-50%) scale(1)
}

.fav-toast-success {
    background: linear-gradient(135deg,#10b981 0,#059669 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(16,185,129,0.35)
}

.fav-toast-error {
    background: linear-gradient(135deg,#ef4444 0,#dc2626 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(239,68,68,0.35)
}

.fav-toast-warning {
    background: linear-gradient(135deg,#f59e0b 0,#d97706 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(245,158,11,0.35)
}

.fav-toast-info {
    background: linear-gradient(135deg,#3b82f6 0,#2563eb 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(59,130,246,0.35)
}

.fav-toast-loading {
    background: rgba(30,30,35,0.95);
    color: #fff;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    border: 0
}

.fav-toast-success i,.fav-toast-error i,.fav-toast-warning i,.fav-toast-info i,.fav-toast-loading i {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1
}

.fav-toast-loading i {
    animation: fav-spin .8s linear infinite
}

@keyframes fav-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@media(max-width: 600px) {
    .fav-modal {
        width:92%
    }

    .fav-modal-body {
        padding: 16px
    }

    .fav-add-box {
        flex-direction: column
    }

    .fav-actions {
        flex-direction: column
    }

    .fav-btn {
        justify-content: center
    }

    .fav-music-name span {
        white-space: normal;
        word-break: break-all
    }

    .fav-toast {
        white-space: normal;
        max-width: 85%;
        text-align: center;
        padding: 10px 20px;
        font-size: 12px
    }

    .fav-toast i {
        font-size: 14px;
        margin-right: 8px
    }
}

.albumDetail {
    display: flex;
    gap: 30px;
    padding: 24px
}

.albumDetail_cover {
    width: 220px;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden
}

.albumDetail_cover img {
    width: 100%;
    height: auto;
    display: block
}

.albumDetail_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all .3s ease;
    background: var(--hot-red);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.albumDetail_cover:hover .albumDetail_play {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.05)
}

.albumDetail_play i {
    font-size: 32px;
    color: #fff
}

.albumDetail_info {
    flex: 1
}

.albumDetail_info h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text)
}

.albumDetail_meta {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    color: var(--name);
    font-size: 13px;
    flex-wrap: nowrap;
    justify-content: flex-start
}

.albumDetail_meta i {
    margin-right: 6px;
    color: var(--title)
}

@media(max-width: 768px) {
    .albumDetail_meta {
        gap:12px;
        font-size: 12px
    }
}

@media(max-width: 480px) {
    .albumDetail_meta {
        gap:8px;
        font-size: 11px
    }
}

.albumDetail_desc {
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--name);
    margin-bottom: 20px
}

.albumDetail_desc i {
    color: var(--title);
    margin-right: 6px
}

.albumDetail_actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap
}

.actionBtn.primary {
    background: var(--title);
    color: #fff
}

.actionBtn.primary:hover {
    transform: translateY(-2px)
}

@media(max-width: 900px) {
    .albumDetail {
        flex-direction:column;
        align-items: center;
        text-align: center
    }

    .albumDetail_meta {
        justify-content: center
    }

    .albumDetail_actions {
        justify-content: center;
        flex-wrap: nowrap
    }

    .actionBtn {
        flex: 0 0 auto
    }
}

@media(max-width: 600px) {
    .albumDetail_actions {
        gap:8px
    }

    .actionBtn {
        padding: 6px 12px;
        font-size: 12px
    }
}

@media(max-width: 480px) {
    .albumDetail_actions {
        flex-wrap:wrap;
        gap: 8px
    }

    .actionBtn {
        flex: 1;
        min-width: calc(33.33% - 8px);
        justify-content: center;
        border-radius: 30px;
    }
}

.albumRankList {
    padding: 12px
}

.albumRankItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: .2s;
    min-height: 70px
}

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

.albumRankItem:hover {
    margin: 0 -8px;
    padding: 10px 8px;
    border-radius: 8px
}

.albumRankCover {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

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

.albumRankPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .2s
}

.albumRankCover:hover .albumRankPlay {
    opacity: 1
}

.albumRankPlay i {
    color: #fff;
    font-size: 12px
}

.albumRankInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px
}

.albumRankName {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    line-height: 2;
    margin-bottom: 5px
}

.albumRankMeta {
    font-size: 11px;
    color: var(--name);
    line-height: 2
}

.empty-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--name);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.empty-data i {
    font-size: 48px
}

@media(max-width: 900px) {
    .albumDetail {
        flex-direction:column;
        align-items: center;
        text-align: center;
        padding: 50px 24px
    }

    .albumDetail_meta {
        justify-content: center
    }

    .albumDetail_actions {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 500px;
        margin: 0 auto
    }

    .albumDetail_actions .actionBtn, .albumDetail_actions .shareBox {
        width: 100%
    }

    .albumDetail_actions .actionBtn {
        justify-content: center
    }

    .sortTabList {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }

    .col-time,.col-hot {
        display: none
    }

    .songItemRow .col-time,.songItemRow .col-hot {
        display: none
    }

    .listHeader .col-time,.listHeader .col-hot {
        display: none
    }
}

@media(max-width: 600px) {
    .song-info {
        flex-wrap:nowrap;
        gap: 6px;
        font-size: 10px;
    }
}

.filter_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px
}

.filter_tabs {
    display: flex;
    gap: 8px
}

.filter_tab {
    padding: 6px 18px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    border-radius: 30px;
    background: var(--bg)
}

.filter_tab:hover {
    background: rgba(44,80,255,0.1);
    color: var(--title)
}

.filter_tab.active {
    background: var(--hot-red);
    color: #fff
}

.search_box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border-radius: 30px;
    padding: 4px 8px 4px 16px
}

.search_box input {
    background: transparent;
    border: 0;
    padding: 8px 0;
    color: var(--text);
    font-size: 13px;
    outline: 0;
    width: 160px
}

.search_box input::placeholder {
    color: var(--name)
}

.search_box button {
    background: var(--title);
    border: 0;
    padding: 6px 16px;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: .2s
}

.search_box button:hover {
    opacity: .85
}

.artist_row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px
}

.artist_cover {
    position: relative;
    width: 130px;
    flex-shrink: 0
}

.artist_cover a {
    position: relative;
    display: block
}

.artist_cover img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 10px
}

.cover_play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .3s ease;
    cursor: pointer
}

.cover_play_btn i {
    font-size: 18px;
    color: #fff;
    margin-left: 2px
}

.artist_cover:hover .cover_play_btn {
    opacity: 1
}

.cover_play_btn:hover {
    background: var(--title);
    transform: translate(-50%,-50%) scale(1.1)
}

.artist_songs_preview {
    flex: 3;
    min-width: 0
}

.artist_info_top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.artist_info_top .artist_name {
    font-size: 14px;
    color: var(--name);
    text-decoration: none;
    white-space: nowrap
}

.artist_info_top .artist_name:hover {
    text-decoration: underline
}

.artist_info_top .artist_meta {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap
}

.artist_info_top .artist_meta span {
    font-size: 12px;
    color: var(--name);
    white-space: nowrap
}

.artist_info_top .artist_meta i {
    margin-right: 4px;
    font-size: 12px;
    color: var(--hot-red);
}

.artist_info_top .view_more {
    font-size: 12px;
    color: var(--title);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto
}

.artist_info_top .view_more:hover {
    text-decoration: underline
}

.song_item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px
}

.song_item:last-child {
    border-bottom: 0
}

.song_arrow {
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--name);
    border-bottom: 2px solid var(--name);
    transform: rotate(-45deg);
    flex-shrink: 0
}

.song_name {
    flex: 1;
    font-size: 13px;
    color: var(--name);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.song_name:hover {
    color: var(--title)
}

.song_actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

.song_action {
    width: 30px;
    height: 30px;
    background: var(--bg);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.song_action:hover {
    background: var(--title)
}

.song_action i {
    font-size: 12px;
    color: var(--name)
}

.song_action:hover i {
    color: #fff
}

.corred1 {
    color: #94d500!important
}

@media screen and (max-width: 768px) {
    .artist_row {
        flex-direction:row;
        flex-wrap: wrap
    }

    .artist_cover {
        width: 100px
    }

    .artist_cover img {
        height: 100px
    }

    .artist_info_top {
        display: none!important
    }

    .artist_songs_preview {
        flex: 1;
        padding-left: 0
    }

    .song_item {
        margin-bottom: 10px
    }

    .song_name {
        font-size: 12px
    }

    .song_actions {
        gap: 5px
    }

    .song_action {
        width: 24px;
        height: 24px
    }

    .song_action i {
        font-size: 11px
    }

    .filter_tab {
        padding: 4px 12px;
        font-size: 12px
    }

    .search_box input {
        width: 120px
    }
}

@media screen and (max-width: 768px) {
    .artist_row {
        flex-direction:row;
        flex-wrap: wrap
    }

    .artist_cover {
        width: 100px
    }

    .artist_cover img {
        height: 100px
    }

    .artist_info_top {
        display: none!important
    }

    .artist_songs_preview {
        flex: 1;
        padding-left: 0
    }

    .song_name {
        font-size: 12px
    }

    .song_actions {
        gap: 5px
    }

    .song_action {
        width: 24px;
        height: 24px
    }

    .song_action i {
        font-size: 11px
    }

    .filter_bar {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px
    }

    .filter_tabs {
        flex: 1;
        gap: 5px
    }

    .filter_tab {
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap
    }

    .search_box {
        flex-shrink: 0;
        padding: 2px 6px 2px 12px
    }

    .search_box input {
        width: 100px;
        font-size: 11px;
        padding: 5px 0
    }

    .search_box button {
        padding: 4px 10px;
        font-size: 11px
    }
}

@media screen and (max-width: 480px) {
    .filter_tab {
        padding:5px 10px;
        font-size: 10px
    }

    .search_box input {
        width: 80px
    }

    .search_box button {
        padding: 4px 8px
    }
}

.actionBtn i {
    pointer-events: none
}

#icogz.followed i,#collectBtn.followed i {
    color: #ff4d4f
}

.actionBtn i {
    font-size: 16px
}

.actionBtn.primary {
    background: #2c50ff;
    border-color: #2c50ff;
    color: #fff
}

.actionBtn.primary i {
    color: #fff
}

.actionBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1)
}

.artistDetail {
    display: flex;
    gap: 30px;
    padding: 24px
}

.artistDetail_cover {
    width: 220px;
    flex-shrink: 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden
}

.artistDetail_cover img {
    width: 100%;
    height: auto;
    display: block
}

.artistDetail_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    background: var(--hot-red);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.artistDetail_cover:hover .artistDetail_play {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.05)
}

.artistDetail_play i {
    font-size: 32px;
    color: #fff
}

.artistDetail_info {
    flex: 1;
    min-width: 0
}

.artistDetail_header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px
}

.artistDetail_header h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text,#333);
    margin: 0
}

.artistDetail_meta {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    color: var(--name,#666);
    font-size: 13px;
    flex-wrap: wrap
}

.artistDetail_meta i {
    margin-right: 6px;
    color: var(--title,#2c50ff)
}

.artistDetail_desc {
    background: var(--bg,#f5f5f5);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--name,#666);
    margin-bottom: 20px
}

.artistDetail_actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.followBtn {
    margin-left: 0!important;
    padding: 6px 16px!important;
    font-size: 13px!important;
    background: var(--bg,#f0f0f0)!important;
    color: var(--text,#333)!important;
    border: 1px solid var(--line,#e0e0e0)!important
}

.hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding: 0 6px;
    background: rgba(255,77,79,0.1);
    color: #ff4d4f;
    border-radius: 10px;
    font-size: 10px
}

.artistRankList {
    padding: 8px 12px
}

.artistRankItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line,#f0f0f0);
    cursor: pointer;
    transition: .2s
}

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

.artistRankCover {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

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

.artistRankPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .2s
}

.artistRankCover:hover .artistRankPlay {
    opacity: 1
}

.artistRankPlay i {
    color: #fff;
    font-size: 12px
}

.artistRankInfo {
    flex: 1;
    min-width: 0
}

.artistRankName {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text,#333);
    margin-bottom: 4px
}

.artistRankMeta {
    font-size: 11px;
    color: var(--name,#999)
}

@media(max-width: 900px) {
    .artistDetail {
        flex-direction:column;
        align-items: center;
        text-align: center
    }

    .artistDetail_header {
        display: block;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 15px;
    }

    .artistDetail_meta {
        justify-content: center
    }

    .artistDetail_actions {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .artistDetail_actions .btn, .artistDetail_actions a, .artistDetail_actions button, .artistDetail_actions .actionBtn {
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        padding: 8px 12px;
        justify-content: center
    }

    .sortTabList {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }

    .col-time,.col-hot {
        display: none
    }

    .listHeader .col-time,.listHeader .col-hot {
        display: none
    }
}

@media(max-width: 768px) {
    .artistDetail_cover {
        width:160px
    }
}

.sgGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    padding: 1.25rem;
}

@media (max-width: 1200px) {
    .sgGrid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 992px) {
    .sgGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .sgGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
        padding: 0.9rem;
    }
}

@media (max-width: 480px) {
    .sgGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
        padding: 0.7rem;
    }
}

.sgCard {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    background: var(--hread);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.sgCard a {
    text-decoration: none;
    display: block;
    color: inherit;
}

.sgCard:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: color-mix(in srgb, var(--sg-accent, #0052d9) 40%, var(--line, #e8edf2));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.sgCard .sg-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient( ellipse at 30% 20%, color-mix(in srgb, var(--sg-accent, #0052d9) 15%, transparent), transparent 60% );
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

.sgCard:hover .sg-glow {
    opacity: 1;
}

.sgCard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 9999px 9999px 0;
    background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 30%, var(--sg-accent, #0052d9) 50%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 70%, transparent 100% );
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 4;
}

.sgCard::after {
    content: "";
    position: absolute;
    right: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 9999px 0 0 9999px;
    background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 30%, var(--sg-accent, #0052d9) 50%, color-mix(in srgb, var(--sg-accent, #0052d9) 30%, transparent) 70%, transparent 100% );
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 4;
}

.sgCard:hover::before, .sgCard:hover::after {
    opacity: 0.9;
    transform: scaleY(1);
}

.sgCard:nth-child(6n+1) {
    --sg-accent: #0052d9;
}

.sgCard:nth-child(6n+2) {
    --sg-accent: #2ba471;
}

.sgCard:nth-child(6n+3) {
    --sg-accent: #e37318;
}

.sgCard:nth-child(6n+4) {
    --sg-accent: #ef4444;
}

.sgCard:nth-child(6n+5) {
    --sg-accent: #8b5cf6;
}

.sgCard:nth-child(6n+6) {
    --sg-accent: #06b6d4;
}

.sgCover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    z-index: 1;
}

.sgCover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sgCard:hover .sgCover img {
    transform: scale(1.08);
}

.sgCover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 2;
    border-radius: 0 0 12px 12px;
    pointer-events: none;
}

.sgTag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    background: color-mix(in srgb, var(--sg-accent, #0052d9) 80%, #000);
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
}

.sgStats {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.sgStats span {
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.35);
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
}

.sgStats span i {
    font-size: 0.65rem;
}

.sgOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 4;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}

.sgCard:hover .sgOverlay {
    opacity: 1;
}

.sgPlayBtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sg-accent, #0052d9) 90%, #fff);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8) rotate(-15deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 40px color-mix(in srgb, var(--sg-accent, #0052d9) 25%, transparent);
    cursor: pointer;
}

.sgCard:hover .sgPlayBtn {
    transform: scale(1) rotate(0deg);
}

.sgPlayBtn i {
    font-size: 1.8rem;
    color: #fff;
    margin-left: 4px;
}

.sgInfo {
    padding: 0.75rem 0.9rem 0.9rem;
    position: relative;
    z-index: 1;
}

.sgInfo h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin: 0;
}

.sgInfo .meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.6rem;
    color: #6b7280;
}

.sgInfo .meta-row .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6b7280;
}

.sgCreator {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sgCreator .avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sg-accent, #0052d9), color-mix(in srgb, var(--sg-accent, #0052d9) 60%, #000));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: #fff;
    font-weight: 700;
}

.musicPlaylistContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 16px;
    border-top: 1px solid var(--line)
}

.playlistHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

.playlistHeader h4 {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px
}

.playlistHeader span {
    font-size: 12px;
    color: var(--name)
}

#playlistContent {
    flex: 1;
    overflow-y: auto;
    max-height: 650px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

#playlistContent::-webkit-scrollbar {
    display: none
}

.songRow1,.songRow2,.songRowActive {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    margin: 0;
    transition: all .2s ease;
    cursor: pointer
}

.songRow2 {
    background: var(--bar)
}

.songRowActive {
    background: var(--bar);
    color: var(--hot-red)
}

.songNumber {
    width: 40px;
    text-align: center;
    font-size: 12px;
    color: var(--name);
    flex-shrink: 0
}

.songNameWrapper {
    flex: 1;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

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

.songNameWrapper a:hover {
    color: var(--title)
}

.emptyMessage {
    text-align: center;
    padding: 40px 0;
    color: var(--name);
    font-size: 12px
}

.loadingMessage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px
}

.loadingMessage span {
    color: var(--name);
    font-size: 12px
}

.playlist {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    background: var(--bar);
    border-top: 1px solid var(--line);
    overflow: hidden
}

.playlist_menu {
    width: 100%;
    height: 50px;
    background: transparent;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line)
}

.playlist_menu ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    height: 100%
}

.playlist_menu li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--name);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    height: 100%
}

.playlist_menu li.ptoff:hover {
    color: var(--red)
}

.playlist_menu li.pton {
    color: var(--name);
    font-weight: 600
}

.playlist_menu li.pton::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--title)
}

@media(min-width: 769px) {
    .playlist_menu ul {
        flex-wrap:nowrap
    }

    .playlist_menu li {
        flex: 1;
        min-width: auto
    }
}

@media(max-width: 768px) {
    .playlist_menu {
        overflow-x:auto;
        overflow-y: hidden
    }

    .playlist_menu::-webkit-scrollbar {
        display: none
    }

    .playlist_menu li {
        flex: 0 0 auto;
        min-width: 85px
    }
}

#playlist_ct {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bar);
    min-height: 0
}

#playlist_ct::-webkit-scrollbar {
    width: 4px
}

#playlist_ct::-webkit-scrollbar-thumb {
    background: var(--title);
    border-radius: var(--radius)
}

#playlist_ct1 {
    width: 100%
}

#playlist_ct1 ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box
}

#playlist_ct1 .td1,#playlist_ct1 .td2,#playlist_ct1 .td3,#playlist_ct1 .tdhover {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid var(--line);
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

#playlist_ct1 .td1 {
    background: var(--bar)
}

#playlist_ct1 .td2 {
    background: var(--card)
}

#playlist_ct1 .td3 {
    background: var(--bar);
}

#playlist_ct1 .td3 .bt a {
    color: var(--title)
}

#playlist_ct1 .tdhover {
    background: var(--bar)
}

#playlist_ct1 .tdhover .bt a {
    color: var(--title)
}

#playlist_ct1 .num,#playlist_ct1 .num2 {
    width: 44px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

#playlist_ct1 .num input,#playlist_ct1 .num2 input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--title)
}

#playlist_ct1 .bt {
    flex: 1;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#playlist_ct1 .bt a {
    color: var(--name);
    text-decoration: none;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#playlist_ct1 .icodel,#playlist_ct1 .icoadd {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

#playlist_ct1 .icodel i,#playlist_ct1 .icoadd i {
    font-size: 18px;
    color: #888;
    cursor: pointer
}

#playlist_ct2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bar);
    border-top: 1px solid var(--line);
    z-index: 999;
}

.caozuo {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: var(--bar);
    font-size: 12px;
    color: #ccc;
    box-sizing: border-box;
    width: 100%
}

.tag_lv_sel {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #aaa
}

.tag_lv_sel input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--title);
    margin: 0
}

.tag_lv {
    padding: 6px 16px;
    background: var(--bg);
    cursor: pointer;
    color: var(--name);
    font-size: 12px
}

.tag_lv:hover {
    color: var(--title)
}

.load1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center
}

.load1 img {
    width: 30px;
    height: 30px;
    margin-bottom: 12px
}

.load1 span {
    color: #666;
    font-size: 12px
}

.nonere {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 13px
}

#playlist_box {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bar);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bg);
}

#playlist_box a {
    padding: 6px 16px;
    background: var(--bg);
    color: var(--name);
    border-radius: var(--radius);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer
}

#playlist_box a.boxon {
    background: var(--title);
    color: #fff
}

.featuredPlaylistBox {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden
}

.featuredHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

.featuredHeader h3 {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px
}

.featuredHeader a {
    font-size: 12px;
    color: var(--name);
    text-decoration: none;
    cursor: pointer
}

.featuredHeader a:hover {
    color: var(--title)
}

.featuredGrid {
    display: grid;
    gap: 15px;
    padding: 16px
}

.featuredItem {
    display: block;
    overflow: hidden;
    transition: .2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit
}

.featuredItem:hover {
    transform: translateY(-3px);
}

.featuredCover {
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.featuredCover img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block
}

.featuredCover:hover img {
    transform: scale(1.05)
}

.featuredTag {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 2px 6px;
    border-radius: 3px
}

.featuredIcon {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 16px;
    color: #fff;
    opacity: 0;
    transition: .3s
}

.featuredCover:hover .featuredIcon {
    opacity: 1
}

.featuredInfo {
    padding: 8px 4px;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.featuredItem:hover .featuredInfo {
    color: var(--title)
}

.featuredInfo a {
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.featuredInfo a:hover {
    color: var(--title)
}

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

.featuredGroupHidden {
    display: none
}

.rankHeader {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    margin-bottom: 20px;
    background: var(--card);
    border-radius: var(--radius);
}

.rankHeader_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%
}

.rankHeader_filters {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08))
}

.rankHeader .cardFilter.rankHeader_filter {
    width: 100%;
    border-bottom: 0;
    padding: 0;
    margin-top: 4px;
    padding-top: 30px;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08))
}

.rankHeader_filterGroup {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.rankHeader_filterLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #333)
}

.rankHeader_filterLabel i {
    color: var(--title, #2c50ff)
}

.rankHeader_filters .timeFilterList {
    padding: 0
}

.rankHeader:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
}

.rankHeader:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.rankHeader_info h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text,#333);
    text-align: justify
}

.rankHeader_desc {
    font-size: 13px;
    color: var(--name,#666);
    margin: 0 0 12px 0;
    text-align: justify
}

.rankHeader_meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--name,#666)
}

.rankHeader_meta i {
    margin-right: 6px;
    color: var(--title,#2c50ff)
}

.rankHeader_actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.filterSection {
    display: none;
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden
}

.filterSection .rankBox {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line,#eee)
}

.filterSection > .rankBox + .rankBox {
    margin-bottom: 0
}

.filterSection .rankBox:last-child {
    border-bottom: 20px
}

.filterSection .titleBar {
    padding: 12px 16px
}

.filterSection .rankNavList,.filterSection .timeFilterList {
    padding: 15px
}

.filterSection .adBox {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line,#eee)
}

.timeFilterList {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.timeFilterItem {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 20px;
    background: var(--bg,#f5f5f5);
    color: var(--name,#666);
    text-decoration: none
}

.timeFilterItem:hover,.timeFilterItem.active {
    background: var(--title,#2c50ff);
    color: #fff
}

.col-rank {
    width: 55px;
    flex-shrink: 0;
    text-align: center
}

.col-rank .rankNum {
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    width: 32px;
    text-align: center
}

.col-rank .rankNum.rank1 {
    color: #ff4d4f;
    text-shadow: 0 0 2px rgba(255,77,79,0.3)
}

.col-rank .rankNum.rank2 {
    color: #ff7a45
}

.col-rank .rankNum.rank3 {
    color: #ffa940
}

.col-rank .rankNum.rankOther {
    color: var(--name,#999);
    font-size: 16px
}

.rankNavList {
    padding: 8px 12px
}

.rankNavItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    text-decoration: none;
    font-size: 13px;
    color: var(--text,#333)
}

.rankNavItem i {
    color: var(--name,#999);
    font-size: 16px
}

.rankNavItem:hover,.rankNavItem.active {
    background: var(--bg,#f0f2f5);
    color: var(--title,#2c50ff)
}

.rankNavItem.active i {
    color: var(--title,#2c50ff)
}

.hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #ff4d4f
}

.hot-badge i {
    font-size: 12px
}

.empty-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--name,#999);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.empty-data i {
    font-size: 48px
}

.shareBox {
    position: relative;
    display: block;
    min-width: 0
}

.shareBox > .actionBtn {
    width: 100%
}

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

.share-modal-panel {
    width: min(420px, 100%);
    background: var(--card, #1f1f1f);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: modalZoomIn 0.25s ease
}

.share-modal-header {
    position: relative;
    padding: 18px 20px 10px;
    text-align: center;
    color: var(--text, #fff);
    font-size: 18px;
    font-weight: 600
}

.share-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg, rgba(255, 255, 255, 0.08));
    color: var(--name, #bbb);
    font-size: 22px;
    line-height: 1;
    cursor: pointer
}

.share-modal-body {
    padding: 8px 20px 22px
}

.share-modal-options {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 10px 0 18px
}

.share-modal-item {
    flex: 1 1 0;
    max-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--name, #ccc)
}

.share-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff
}

.share-modal-label {
    font-size: 12px;
    white-space: nowrap
}

.share-icon-wechat {
    background: #07c160
}

.share-icon-weibo {
    background: #e6162d
}

.share-icon-qq {
    background: #12b7f5
}

.share-icon-qzone {
    background: #f5b000
}

.share-icon-copy {
    background: #5f6672
}

.share-modal-linkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08))
}

.share-modal-linkbox input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--name, #aaa);
    font-size: 13px;
    outline: none
}

.share-modal-copybtn {
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    background: #07c160;
    color: #fff;
    font-size: 13px;
    cursor: pointer
}

.actionBtn {
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    border: 0;
    background: var(--bg, #f5f5f5);
    color: var(--text, #333);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.actionBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
    transition: left 0.5s ease;
    z-index: -1;
}

.actionBtn:hover::before {
    left: 100%;
}

.actionBtn.primary {
    background: var(--title, #2c50ff);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.actionBtn.primary::before {
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent );
}

.actionBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.actionBtn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent, var(--title)) 40%, transparent);
}

.actionBtn:active {
    transform: translateY(0);
}

.actionBtn.glow:hover {
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--title, #2c50ff), var(--bg, #1a1a1a));
}

.actionBtn.radial-glow {
    position: relative;
}

.actionBtn.radial-glow::after {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.actionBtn.radial-glow:hover::after {
    width: 200%;
    height: 200%;
}

@media(max-width: 900px) {
    .rankHeader_top {
        flex-direction:column;
        text-align: center
    }

    .rankHeader {
        flex-direction: column;
        text-align: center
    }

    .rankHeader_meta {
        justify-content: center
    }

    .rankHeader_actions {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 500px;
        margin: 0 auto
    }

    .rankHeader_actions .actionBtn, .rankHeader_actions .shareBox {
        width: 100%
    }

    .rankHeader_actions .actionBtn {
        justify-content: center
    }

    .rankHeader .cardFilter.rankHeader_filter {
        text-align: left
    }

    .rankHeader .cardFilter.rankHeader_filter .filterRow {
        justify-content: flex-start
    }

    .col-rank,.col-time,.col-hot {
        display: none
    }

    .listHeader .col-rank,.listHeader .col-time,.listHeader .col-hot {
        display: none
    }

    .batchBar {
        justify-content: center
    }
}

.playlog-dropdown-container {
    position: fixed;
    width: 300px;
    max-height: 400px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10000;
    overflow-y: auto;
    margin-top: 0;
    border: 1px solid var(--line)
}

.playlog-dropdown-container::-webkit-scrollbar {
    width: 0;
    background: transparent
}

.playlog-dropdown-container::-webkit-scrollbar-track {
    background: transparent
}

.playlog-dropdown-container::-webkit-scrollbar-thumb {
    background: transparent
}

.playlog-trigger {
    position: relative;
    cursor: pointer;
    color: var(--name);
    transition: color .2s
}

.playlog-trigger:hover {
    color: var(--title)
}

.playlog-list {
    padding: 0
}

.playlog-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.playlog-item-info {
    flex: 1;
    overflow: hidden
}

.playlog-item-title {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--name)
}

.playlog-item-title i {
    font-size: 18px;
    color: var(--name);
    transition: color .2s
}

.playlog-item-title:hover i {
    color: var(--title)
}

.playlog-item-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.playlog-item-title span:hover {
    color: var(--hot-red)
}

.playlog-item-artist {
    font-size: 12px;
    color: var(--name);
    margin-top: 4px;
    margin-left: 28px
}

.playlog-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.playlog-duration {
    font-size: 12px;
    color: var(--name)
}

.playlog-delete {
    color: var(--red);
    cursor: pointer;
    font-size: 18px;
    opacity: .6;
    transition: opacity .2s;
    text-decoration: none
}

.playlog-delete:hover {
    opacity: 1
}

.playlog-footer {
    padding: 12px 16px;
    text-align: center;
    position: sticky;
    bottom: 0;
    left: 0;
    background: var(--bar);
}

.playlog-clear-btn {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 20px;
    transition: all .2s
}

.playlog-clear-btn:hover {
    background: var(--red);
    color: var(--text);
    border-color: var(--red)
}

.playlog-empty {
    text-align: center;
    padding: 40px 20px
}

.playlog-empty i {
    font-size: 48px;
    color: var(--name);
    margin-bottom: 16px;
    display: block
}

.playlog-empty p {
    color: var(--name);
    font-size: 14px;
    margin-bottom: 20px
}

.playlog-browse-btn {
    display: inline-block;
    padding: 8px 24px;
    background: var(--title);
    color: var(--text);
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: opacity .2s
}

.playlog-browse-btn:hover {
    opacity: .9
}

.playlog-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--name)
}

.playlog-loading i {
    font-size: 24px;
    margin-right: 8px;
    animation: spin 1s linear infinite
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.header .user {
    position: relative
}

@media(max-width: 768px) {
    .playlog-dropdown-container {
        width:300px;
        right: 10px!important;
        max-height: 350px
    }

    .playlog-item {
        padding: 10px 14px
    }

    .playlog-item-title {
        font-size: 13px
    }

    .playlog-item-artist {
        font-size: 11px;
        margin-left: 26px
    }
}

.engraving-link,.engraving-link-mobile,.header-msg-link {
    position: relative;
    display: inline-flex;
    align-items: center
}

.engraving-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: var(--accent, var(--title));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    white-space: nowrap
}

.engraving-link-mobile .engraving-badge {
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px
}

.engraving-badge:empty {
    display: none
}

#musicBugOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9998
}

#musicBugModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 520px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 9999;
    font-family: var(--font-family)
}

#musicBugModal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center border-radius: var(--radius);
}

#musicBugModal .modal-header .close-btn {
    cursor: pointer;
    font-size: 20px;
    color: var(--name);
    transition: color .2s
}

#musicBugModal .modal-header .close-btn:hover {
    color: var(--text)
}

#musicBugModal .modal-body {
    padding: 20px
}

#musicBugModal .form-group {
    margin-bottom: 20px
}

#musicBugModal .form-group:last-child {
    margin-bottom: 0
}

#musicBugModal .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text)
}

#musicBugModal .form-label .required {
    color: var(--red)
}

#musicBugModal .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

#musicBugModal .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px
}

#musicBugModal .radio-inline input {
    margin: 0;
    cursor: pointer;
    accent-color: var(--title)
}

#musicBugModal textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
    box-sizing: border-box
}

#musicBugModal textarea:focus {
    outline: 0;
    border-color: var(--title)
}

#musicBugModal textarea::placeholder {
    color: var(--name)
}

#musicBugModal .btn-danger {
    background: var(--hot-red);
    color: #fff;
    border: 0;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .2s
}

#musicBugModal .btn-danger:hover {
    opacity: .85
}

#musicBugModal .btn-default {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s
}

#musicBugModal .btn-default:hover {
    border-color: var(--title);
    color: var(--title)
}

@media (max-width: 768px) {
    #musicBugModal {
        width:90% !important;
        max-width: 90% !important;
        max-height: 85vh;
        overflow-y: auto;
        transform: translate(-50%,-50%)
    }

    #musicBugModal .modal-body {
        padding: 16px
    }

    #musicBugModal .modal-header {
        padding: 14px 16px;
        font-size: 15px
    }

    #musicBugModal .radio-group {
        gap: 12px
    }

    #musicBugModal textarea {
        min-height: 100px;
        padding: 10px
    }
}

@media (max-width: 380px) {
    #musicBugModal {
        width:92% !important
    }

    #musicBugModal .modal-body {
        padding: 14px 12px
    }
}

.orderInfoList {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.orderInfoItem {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line,#101218)
}

.orderInfoItem:last-child {
    border-bottom: 0
}

.orderInfoLabel {
    width: 100px;
    font-size: 13px;
    color: var(--name,#8f8f8f)
}

.orderInfoValue {
    flex: 1;
    font-size: 13px;
    color: var(--text,#fff)
}

.orderInfoValue .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 12px
}

.orderInfoValue .badge-cs {
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
    color: var(--title,#ff2d55)
}

.orderInfoValue .badge-dq {
    background: rgba(52,152,219,0.12);
    color: #3498db
}

.orderInfoValue .price {
    color: var(--title,#ff2d55);
    font-size: 20px;
    font-weight: 700
}

.addressTip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px
}

.addressTip span {
    font-size: 13px;
    color: var(--text,#fff)
}

.addressTip a {
    font-size: 12px;
    color: var(--title,#ff2d55);
    text-decoration: none;
    transition: color .2s
}

.addressTip a:hover {
    text-decoration: underline
}

.addressList {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--bar);
    border: 1px solid var(--line,#101218);
    border-radius: 10px;
    overflow: hidden
}

.addressList li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line,#101218);
    transition: background .2s
}

.addressList li:last-child {
    border-bottom: 0
}

.addressList li:hover {
    background: rgba(255,255,255,0.02)
}

.addressList li input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent, var(--title))
}

.addressList li label {
    flex: 1;
    font-size: 13px;
    color: var(--text,#fff);
    cursor: pointer
}

.delimg {
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s
}

.delimg:hover {
    opacity: 1
}

.addressForm {
    background: var(--bg,#131518)!important;
    border: 1px solid var(--line,#101218)!important;
    border-radius: 12px!important;
    padding: 20px!important;
    margin-top: 16px!important;
    overflow-x: auto
}

.addressForm table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse
}

.addressForm td {
    padding: 8px 6px!important;
    font-size: 13px!important;
    color: var(--text,#fff)
}

.addressForm .inputord {
    background: rgba(255,255,255,0.05)!important;
    border: 1px solid var(--line,#101218)!important;
    color: var(--text,#fff)!important;
    border-radius: 8px!important;
    padding: 8px 12px!important;
    height: 38px!important;
    width: 100%;
    max-width: 200px
}

.addressForm .inputord:focus {
    outline: 0;
    border-color: var(--title,#ff2d55)
}

.corred {
    color: var(--title,#ff2d55);
    margin-left: 4px
}

.cor33 {
    font-size: 11px;
    color: var(--name,#8f8f8f);
    margin-left: 8px
}

.remarkItem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap
}

.remarkItem label {
    font-size: 13px;
    color: var(--text,#fff);
    width: 80px;
    flex-shrink: 0
}

.remarkItem input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line,#101218);
    border-radius: 8px;
    color: var(--text,#fff);
    font-size: 13px
}

.remarkItem input:focus {
    outline: 0;
    border-color: var(--title,#ff2d55)
}

.remarkItem input::placeholder {
    color: var(--name,#8f8f8f)
}

@media(max-width: 550px) {
    .remarkItem {
        flex-direction:column;
        align-items: stretch
    }

    .remarkItem label {
        width: auto
    }
}

.submitOrderBox {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line,#101218)
}

#addorder {
    min-width: 260px;
    height: 48px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 40px;
    background: var(--title,#ff2d55);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

#addorder:hover {
    background: #e01e46;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent, var(--title)) 30%, transparent)
}

@media(max-width: 480px) {
    #addorder {
        min-width:100%;
        height: 44px;
        font-size: 14px
    }
}

.loginTipCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 20%, transparent);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.loginTipCard i {
    font-size: 20px;
    color: var(--title,#ff2d55)
}

.loginTipCard span {
    flex: 1;
    font-size: 13px;
    color: var(--text,#fff)
}

.loginBtn {
    padding: 6px 18px;
    background: var(--title,#ff2d55);
    color: #fff;
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    font-size: 12px;
    transition: background .2s
}

.loginBtn:hover {
    background: #e01e46
}

.unpaidCard {
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 20%, transparent);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.unpaidCard i {
    font-size: 18px;
    color: var(--title,#ff2d55)
}

.unpaidCard span {
    color: var(--text,#fff);
    font-size: 13px
}

.unpaidCard .unpaidCount {
    font-size: 15px;
    font-weight: 700;
    color: var(--title,#ff2d55);
    margin: 0 4px
}

.unpaidTableBox {
    overflow-x: auto;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid var(--line,#101218);
    background: var(--bg,#131518)
}

.unpaidTable {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse
}

.unpaidTable th {
    background: rgba(255,255,255,0.03);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text,#fff);
    border-bottom: 1px solid var(--line,#101218);
    text-align: center
}

.unpaidTable td {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--name,#8f8f8f);
    border-bottom: 1px solid var(--line,#101218);
    text-align: center
}

.unpaidTable .orderNo {
    color: var(--title,#ff2d55);
    font-weight: 600;
    font-size: 11px
}

.unpaidTable .price {
    color: var(--title,#ff2d55);
    font-weight: 700
}

.btnGroup {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap
}

.btnSmall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 20px;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
    border: 0
}

.btnView {
    background: #3498db;
    color: #fff
}

.btnPay {
    background: var(--title,#ff2d55);
    color: #fff
}

.btnCancel {
    background: #7f8c8d;
    color: #fff
}

.cartActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.cartBtn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 30px;
    border: 0;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.cartBtn-primary {
    background: var(--title,#ff2d55);
    color: #fff
}

.cartBtn-default {
    background: rgba(255,255,255,0.08);
    color: var(--text,#fff);
    border: 1px solid var(--line,#101218)
}

.cartBtn-danger {
    background: rgba(255,255,255,0.05);
    color: #e74c3c;
    border: 1px solid #e74c3c
}

.orderTotalBox {
    background: var(--bg,#131518);
    border: 1px solid var(--line,#101218);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px
}

.orderTotalRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.orderTotalRow:last-child {
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line,#101218)
}

.orderTotalLabel {
    font-size: 13px;
    color: var(--name,#8f8f8f)
}

.orderTotalPrice {
    font-size: 14px;
    color: var(--text,#fff);
    font-weight: 500
}

.orderTotalAmount {
    font-size: 20px;
    font-weight: 700;
    color: var(--title,#ff2d55)
}

.formActions {
    padding: 20px 15px;
    text-align: center;
    margin-top: 20px
}

.securityBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    width: 100%;
    max-width: 280px;
    background: var(--bg);
    color: var(--name)
}

.securityBtn_primary {
    background: var(--title,#ff2d55);
    color: #fff
}

.securityCard {
    background: var(--bar);
    border-radius: var(--radius,12px);
    margin-top: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.securityCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 10, 30, 0.12);
    background: var(--bar);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.securityCard:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 10, 30, 0.08);
}

.securityCard_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid var(--line,#101218)
}

.securityCard_title {
    display: flex;
    align-items: center;
    gap: 8px
}

.securityCard_title i {
    font-size: 18px;
    color: var(--title,#ff2d55)
}

.securityCard_title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text,#fff)
}

.noticeList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px
}

.noticeSection {
    padding: 12px;
    background: var(--bg,#131518);
    border-radius: 8px
}

.noticeTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text,#fff);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px
}

.noticeTitle i {
    color: var(--title,#ff2d55);
    font-size: 14px
}

.noticeContent {
    font-size: 12px;
    color: var(--name,#8f8f8f);
    line-height: 1.7
}

.noticeContent p {
    margin: 4px 0
}

.highlight {
    color: var(--title,#ff2d55);
    font-weight: 600
}

#carlist_cs,#carlist_dq {
    display: flex;
    flex-direction: column;
    width: 100%
}

.cartSummaryBar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px
}

.cartListBox {
    margin-top: 8px
}

.cdDiscBlock {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line,#101218)
}

.cdDiscBlock:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.cdDiscTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text,#fff);
    padding: 8px 12px 10px;
    margin: 0 8px 4px
}

.cartActions form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.songRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border: 1px solid var(--line,#101218);
    margin: 8px;
    border-radius: var(--radius);
    transition: all .2s ease;
    box-sizing: border-box
}

.songRow:last-child {
    margin-bottom: 0
}

.songRow:hover {
    background: rgba(255,255,255,0.03);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, transparent)
}

.songRow-empty {
    opacity: .6;
    background: rgba(255,255,255,0.01)
}

.songRow_num {
    width: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--title,#ff2d55);
    text-align: center;
    flex-shrink: 0
}

.songRow_cover {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.songRow_cover i {
    font-size: 24px;
    color: var(--title,#ff2d55);
    opacity: .8
}

.songRow_numBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--title,#ff2d55)
}

.songRow_numBadge-off {
    background: rgba(255,255,255,0.05);
    color: var(--name,#8f8f8f)
}

.songRow_info {
    flex: 1;
    min-width: 0
}

.songRow_name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px
}

.songRow_name a {
    color: var(--text,#fff);
    text-decoration: none;
    transition: color .2s;
    word-break: break-all
}

.songRow_name a:hover {
    color: var(--title,#ff2d55)
}

.songRow_name span {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 500;
    vertical-align: middle
}

.songRow_id {
    font-size: 10px;
    color: var(--name,#8f8f8f);
    font-family: monospace
}

.songRow_type {
    width: 60px;
    flex-shrink: 0
}

.typeBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    width: 28px;
    height: 28px
}

.type-cs {
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
    color: var(--title,#ff2d55)
}

.type-dq {
    background: rgba(52,152,219,0.12);
    color: #3498db
}

.type-tq {
    background: rgba(155,89,182,0.12);
    color: #b57edc
}

.type-empty {
    background: rgba(255,255,255,0.05);
    color: var(--name,#8f8f8f)
}

#cartitleInfo {
    font-size: 12px;
    color: var(--name,#8f8f8f);
    background: rgba(255,255,255,0.02);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 0
}

#cartitleInfo span {
    color: var(--title,#ff2d55);
    font-weight: 700;
    font-size: 14px;
    margin: 0 4px
}

#buyInfo {
    font-size: 13px;
    color: var(--name,#8f8f8f);
    background: rgba(255,255,255,0.02);
    padding: 12px 16px;
    border-radius: 12px;
    text-align: left;
    margin-top: 0
}

#buyInfo span {
    color: var(--title,#ff2d55);
    font-weight: 700;
    font-size: 14px;
    margin: 0 2px
}

#buyInfo .totalPrice {
    font-size: 18px;
    margin-left: 6px
}

@media(max-width: 768px) {
    .cartActions {
        width:100%;
        flex-direction: column
    }

    .cartBtn {
        justify-content: center;
        width: 100%
    }

    .btnGroup {
        flex-direction: column;
        align-items: stretch;
        gap: 6px
    }

    .btnSmall {
        justify-content: center;
        width: 100%
    }

    .unpaidTable th,.unpaidTable td {
        padding: 8px 10px;
        font-size: 11px
    }
}

@media(max-width: 550px) {
    .songRow {
        flex-direction:column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        margin-bottom: 10px
    }

    .songRow_num {
        width: 100%;
        text-align: left;
        font-size: 14px
    }

    .songRow_cover {
        width: 100%;
        justify-content: flex-start;
        display: none
    }

    .songRow_info {
        width: 100%
    }

    .songRow_name {
        font-size: 14px
    }

    .songRow_type {
        width: 100%;
        text-align: left;
        display: none
    }

    .typeBadge {
        width: auto;
        padding: 4px 12px;
        height: auto
    }

    .songRow_actions {
        width: 100%;
        justify-content: flex-start;
        gap: 12px
    }

    #cartitleInfo,#buyInfo {
        text-align: center
    }

    #buyInfo {
        text-align: center
    }

    .orderTotalRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .orderTotalLabel,.orderTotalPrice,.orderTotalAmount {
        width: 100%
    }

    .orderTotalAmount {
        font-size: 22px
    }

    .securityBtn {
        width: 100%;
        max-width: none;
        padding: 12px 20px
    }

    .noticeList {
        padding: 12px
    }

    .noticeSection {
        padding: 10px
    }

    .unpaidCard {
        justify-content: center;
        text-align: center
    }
}

@media(max-width: 375px) {
    .main {
        padding:0 8px
    }

    .songRow {
        padding: 10px;
        gap: 8px
    }

    .songRow_name {
        font-size: 13px
    }

    .songRow_id {
        font-size: 9px
    }

    .actionBtn {
        width: 32px;
        height: 32px
    }

    .cartBtn {
        padding: 8px 14px;
        font-size: 12px
    }

    .orderTotalBox {
        padding: 12px
    }

    .orderTotalAmount {
        font-size: 20px
    }

    .noticeTitle {
        font-size: 12px
    }

    .noticeContent {
        font-size: 11px
    }
}

@media(prefers-reduced-motion:reduce) {
    .songRow {
        animation: none
    }
}

.songRow {
    animation: fadeInRow .2s ease
}

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width: 768px) {
    .actionBtn,.cartBtn,.btnSmall,.securityBtn {
        cursor:pointer;
        -webkit-tap-highlight-color: transparent
    }

    .actionBtn:active,.cartBtn:active,.btnSmall:active {
        transform: scale(0.96)
    }
}

.orderTableBox {
    margin-top: 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.orderTable {
    min-width: 800px;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--order-text-size)
}

.orderTable thead th {
    background: rgba(255,255,255,0.04);
    padding: 12px 10px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.orderTable tbody td {
    padding: 12px 10px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    vertical-align: middle
}

.orderTable tbody tr:last-child td {
    border-bottom: 0
}

.orderTable td:first-child {
    min-width: 140px
}

.orderTable td:first-child img {
    height: 38px;
    width: 38px;
    border-radius: 6px;
    object-fit: cover;
    vertical-align: middle
}

.orderTable td:first-child span {
    margin-left: 8px;
    font-weight: 500
}

.orderTable td:nth-child(3) {
    max-width: 180px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4
}

.orderTable .price {
    color: var(--title);
    font-weight: 600;
    font-size: var(--order-price-size);
    white-space: nowrap
}

.orderTable .price.total {
    font-size: var(--order-price-size);
    color: var(--accent, var(--title))
}

.orderTotalInfo {
    background: rgba(255,255,255,0.02);
    padding: 14px 16px!important;
    font-size: var(--order-text-size);
    color: var(--name);
    text-align: right
}

.orderTotalInfo .corred {
    color: var(--title);
    font-weight: 700;
    font-size: var(--order-price-size);
    margin: 0 2px
}

.orderTotalInfo .price2 {
    color: var(--accent, var(--title));
    font-size: var(--order-total-size);
    font-weight: 800;
    margin-left: 8px
}

.sectionGroup {
    padding: 20px
}

@media(max-width: 768px) {
    .sectionGroup {
        padding:16px!important
    }
}

.addressSelectBox {
    margin-bottom: 20px
}

.addressTip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px
}

.addressTip span {
    font-size: var(--order-text-size);
    color: var(--text)
}

.addressTip a {
    font-size: var(--order-small-size);
    color: var(--title)
}

.addressList {
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    margin: 0
}

.addressList li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: var(--order-text-size);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap
}

.addressList li:last-child {
    border-bottom: 0
}

.addressList li input {
    flex-shrink: 0
}

.addressList li label {
    flex: 1;
    word-break: break-word;
    color: var(--text)
}

.delAddr {
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s;
    flex-shrink: 0
}

.delAddr:hover {
    opacity: 1
}

.addressForm {
    background: var(--bg)!important;
    border: 1px solid var(--line)!important;
    border-radius: 12px!important;
    padding: 20px!important;
    margin: 20px 0!important;
    overflow-x: auto
}

.addressForm table {
    width: 100%;
    min-width: 280px
}

.addressForm td {
    padding: 8px 6px!important;
    font-size: var(--order-text-size)!important
}

.addressForm .inputord {
    background: var(--card)!important;
    border: 1px solid var(--line)!important;
    color: var(--text)!important;
    border-radius: 8px!important;
    padding: 8px 12px!important;
    height: 40px!important;
    width: 100%;
    max-width: 200px
}

@media(max-width: 600px) {
    .addressForm .inputord {
        max-width:100%;
        width: 100%;
        margin-bottom: 6px
    }

    .addressForm td {
        display: block;
        width: 100%
    }
}

.remarkItem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    flex-wrap: wrap
}

.remarkItem label {
    font-size: var(--order-text-size);
    color: var(--text);
    width: 80px;
    flex-shrink: 0
}

.remarkItem input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: var(--order-text-size);
    min-width: 180px
}

@media(max-width: 550px) {
    .remarkItem {
        flex-direction:column;
        align-items: stretch
    }

    .remarkItem label {
        width: auto
    }
}

.submitOrderBox {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

#addorder {
    min-width: 240px;
    height: 48px;
    line-height: 48px;
    padding: 0 28px;
    font-size: 1rem;
    border-radius: 40px;
    background: var(--title);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

#addorder:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 88%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,70,70,0.2)
}

@media(max-width: 480px) {
    #addorder {
        min-width:100%;
        height: 44px;
        line-height: 44px;
        font-size: .9375rem
    }
}

.loginTipCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 25%, transparent);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.loginTipCard i {
    color: var(--title);
    font-size: 20px
}

.loginTipCard span {
    flex: 1;
    font-size: var(--order-text-size)
}

.loginBtn {
    padding: 6px 18px;
    background: var(--title);
    color: #fff;
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    font-size: var(--order-small-size)
}

.sectionTitle {
    font-size: var(--order-title-size);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text)
}

.carAddorderPage .orderInfoList {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 16px
}

.carAddorderPage .orderInfoItem {
    border-bottom-color: var(--line)
}

.carAddorderPage .addressForm table {
    width: 100%!important;
    max-width: 100%
}

.carAddorderPage .addressForm tr {
    display: block;
    margin-bottom: 14px
}

.carAddorderPage .addressForm td {
    display: block;
    width: 100%!important;
    padding: 0!important
}

.carAddorderPage .addressForm td:first-child {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--name);
    font-weight: 500
}

.carAddorderPage .addressForm #address3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    line-height: 1.6
}

.carAddorderPage .addressForm #address3 select, .carAddorderPage .addressForm #citystr select, .carAddorderPage .addressForm #areastr select {
    min-width: 120px;
    max-width: 180px
}

.carAddorderPage .addressForm .inputord {
    max-width: none;
    width: 100%
}

.carAddorderPage .addressForm #address {
    max-width: 560px
}

.carAddorderPage .addressForm #consignee, .carAddorderPage .addressForm #mobile, .carAddorderPage .addressForm #tencentqq {
    max-width: 320px
}

.carAddorderPage .remarkItem input {
    min-width: 0;
    width: 100%;
    max-width: 560px
}

@media(max-width: 768px) {
    .carAddorderPage .addressForm #address3 select, .carAddorderPage .addressForm #citystr select, .carAddorderPage .addressForm #areastr select {
        width: 100%;
        max-width: none
    }

    .carAddorderPage .addressForm #address, .carAddorderPage .addressForm #consignee, .carAddorderPage .addressForm #mobile, .carAddorderPage .addressForm #tencentqq, .carAddorderPage .remarkItem input {
        max-width: none
    }
}

.price,.price2 {
    letter-spacing: .5px
}

.corred {
    color: var(--accent, var(--title))
}

.servers_left {
    flex-shrink: 0;
    width: 240px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.servers_left_menu {
    list-style: none;
    margin: 0;
    padding: 8px 0
}

.servers_left_item {
    margin: 0;
    padding: 0
}

.servers_left_link {
    display: block;
    padding: 12px 20px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    transition: all .2s;
    border-left: 3px solid transparent
}

.servers_left_link:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 5%, transparent);
    color: var(--title);
    border-left-color: var(--title)
}

.servers_left_link_active {
    display: block;
    padding: 12px 20px;
    color: var(--title);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border-left: 3px solid var(--title)
}

.servers_right {
    flex: 1;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.servers_right_header {
    padding: 16px 30px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.01)
}

.servers_right_title {
    font-size: 15px;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px
}

.servers_right_content {
    padding: 24px 28px;
    color: var(--name);
    font-size: .9rem;
    line-height: 1.8
}

.servers_right_content img {
    max-width: 100%;
    height: auto
}

.servers_right_content p {
    margin-bottom: 1em
}

.servers_right_content h1,.servers_right_content h2,.servers_right_content h3,.servers_right_content h4 {
    color: var(--text);
    margin: 1em 0 .5em
}

.servers_right_spacer {
    height: 30px
}

@media(max-width: 900px) {
    .page_bai {
        padding:16px 12px
    }

    .servers_left {
        width: 100%
    }

    .servers_left_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px
    }

    .servers_left_item {
        flex: 1;
        min-width: 100px
    }

    .servers_left_link,.servers_left_link_active {
        text-align: center;
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 10px 16px;
        border-radius: 30px
    }

    .servers_left_link:hover {
        border-left-color: transparent;
        border-bottom-color: var(--title)
    }

    .servers_left_link_active {
        border-left-color: transparent;
        border-bottom: 2px solid var(--title)
    }

    .servers_right_header {
        padding: 14px 20px
    }

    .servers_right_title {
        font-size: 1.1rem
    }

    .servers_right_content {
        padding: 20px;
        font-size: .85rem
    }
}

@media(max-width: 600px) {
    .servers_left_menu {
        flex-direction:column
    }

    .servers_left_item {
        min-width: auto
    }

    .servers_left_link,.servers_left_link_active {
        text-align: left;
        border-radius: var(--radius)
    }
}

@media (max-width: 768px) {
    .pc_right {
        display:none !important
    }
}

.dl-wrapper {
    width: 100%;
    max-width: 560px;
    border-radius: 12px;
    height: auto;
    min-height: auto;
    margin: 0 auto
}

.dl-card {
    background: #141417;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 70px -20px rgba(0,0,0,0.55);
    animation: dl-fade-in 0.5s ease forwards
}

@keyframes dl-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.dl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #0f0f12;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.05)
}

.dl-logo img {
    height: 34px;
    object-fit: contain;
    filter: brightness(1.2)
}

.dl-song-id {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    color: color-mix(in srgb, var(--accent, var(--title)) 75%, white);
    padding: 5px 15px;
    border-radius: 50px
}

.dl-song-id span {
    color: #babce0;
    font-weight: 600;
    margin-left: 4px
}

.dl-song-info {
    padding: 28px 20px 0;
    text-align: center
}

.dl-song-title {
    margin-bottom: 24px;
    width: 100%;
    overflow: hidden
}

.dl-song-title a {
    color: #f0f0f5;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.dl-song-title a:hover {
    color: var(--accent, var(--title))
}

.dl-info-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.dl-info-item {
    background: rgba(255,255,255,0.04);
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 11px;
    color: #9a9aa3;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.25s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all
}

.dl-info-item:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    color: #c3cfff
}

.dl-info-item span {
    color: var(--accent, var(--title));
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap
}

.dl-action-area {
    padding: 20px 20px 30px;
    text-align: center
}

#dl-downstr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    align-items: stretch
}

#dl-downstr .dl-downstr-tip, #dl-downstr > span:first-child, #dl-downstr > .dl-loading {
    grid-column: 1 / -1;
    display: block;
    padding: 12px 20px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    color: #a0a0a8;
    font-size: 13px;
    text-align: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box
}

#dl-downstr .dl-downstr-tip--warn {
    color: #ff6600
}

#dl-downstr > a, #dl-downstr .dl-btn-ok, #dl-downstr .dl-btn-pay, #dl-downstr .dl-btn-login, #dl-downstr .dl-btn-disk {
    width: 100%;
    box-sizing: border-box
}

#dl-downstr:has(> :only-child) {
    grid-template-columns: 1fr
}

#dl-downstr .dl-code-group {
    grid-column: 1 / -1
}

.dl-btn-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg,var(--accent, var(--title)),color-mix(in srgb, var(--accent, var(--title)) 80%, black));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--title)) 25%, transparent);
    width: 100%
}

.dl-btn-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent, var(--title)) 35%, transparent);
    color: #fff;
    background: linear-gradient(135deg,color-mix(in srgb, var(--accent, var(--title)) 75%, white),var(--accent, var(--title)))
}

.dl-btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg,var(--accent, var(--title)),color-mix(in srgb, var(--accent, var(--title)) 80%, black));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--title)) 25%, transparent);
    width: 100%
}

.dl-btn-login:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent, var(--title)) 35%, transparent);
    background: linear-gradient(135deg,color-mix(in srgb, var(--accent, var(--title)) 75%, white),var(--accent, var(--title)))
}

.dl-btn-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg,#ff9f2d,#e67e1e);
    box-shadow: 0 8px 20px rgba(255,159,45,0.25);
    width: 100%
}

.dl-btn-pay:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 12px 26px rgba(255,159,45,0.35);
    background: linear-gradient(135deg,#ffae4d,#ff8c2d)
}

.dl-btn-disk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg,#00d26a,#00aa50);
    box-shadow: 0 8px 20px rgba(0,210,106,0.25);
    width: 100%
}

.dl-btn-disk:hover {
    background: linear-gradient(135deg,#00e07a,#00c060);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,210,106,0.35);
    color: #fff
}

.dl-code-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%
}

.dl-code-input {
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #e3e3e7;
    width: 120px;
    text-align: center;
    font-size: 14px;
    outline: none;
    border-radius: 12px;
    transition: all 0.25s ease
}

.dl-code-input:focus {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 6%, transparent)
}

#dl-code-img {
    cursor: pointer;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1)
}

#dl-code-submit {
    background: linear-gradient(135deg,var(--accent, var(--title)),color-mix(in srgb, var(--accent, var(--title)) 80%, black));
    border-radius: 12px;
    padding: 13px 26px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, var(--title)) 25%, transparent);
    border: none
}

.dl-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent, var(--title));
    padding: 12px 24px;
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border-radius: 12px;
    font-size: 13px
}

.dl-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent, var(--title));
    border-top-color: transparent;
    border-radius: 50%;
    animation: dl-spin 0.7s linear infinite
}

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

.dl-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease
}

.dl-popup-overlay--show {
    opacity: 1
}

.dl-popup-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border: none;
    border-radius: 12px;
    z-index: 10000;
    background: transparent;
    box-shadow: none;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.dl-popup-panel--loading {
    background: #141417;
    box-shadow: 0 25px 70px -20px rgba(0,0,0,0.55);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.dl-popup-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 24px;
    color: #a0a0a8;
    font-size: 14px
}

.dl-popup-loading i {
    font-size: 32px;
    color: var(--accent, var(--title));
    animation: dl-spin 0.8s linear infinite;
    line-height: 1
}

.dl-popup-panel::-webkit-scrollbar {
    display: none
}

.dl-popup-panel .dl-wrapper {
    max-width: none;
    margin: 0
}

.dl-popup-panel .dl-card {
    animation: none
}

.dl-popup-panel #dl-downstr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important
}

.dl-notice {
    padding: 22px 20px;
    background: #0f0f12;
    font-size: 12px;
    line-height: 1.8;
    border-radius: 0 0 12px 12px;
    color: #8a8a94;
    border-top: 1px solid rgba(255,255,255,0.05)
}

.dl-notice a {
    color: var(--accent, var(--title));
    text-decoration: none;
    font-weight: 500
}

.dl-notice a:hover {
    text-decoration: underline
}

.dl-notice font[color="#e6a700"] {
    color: #f5bc00 !important;
    font-weight: 600
}

.dl-notice font[color="#ff2d55"] {
    color: var(--accent, var(--title)) !important;
    font-weight: 600
}

.dl-divider {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.05)
}

@media (max-width: 768px) {
    .dl-wrapper {
        max-width:100%
    }

    .dl-info-grid {
        gap: 8px
    }

    .dl-info-item {
        font-size: 11px;
        padding: 6px 4px
    }
}

@media (max-width: 480px) {
    .dl-card-head {
        padding:14px
    }

    .dl-logo img {
        height: 26px
    }

    .dl-song-id {
        font-size: 10px;
        padding: 3px 10px
    }

    .dl-song-title a {
        font-size: 16px
    }

    .dl-info-grid {
        gap: 6px
    }

    .dl-info-item {
        font-size: 10px;
        padding: 5px 3px
    }

    .dl-action-area {
        padding: 14px 14px 20px
    }

    .dl-btn-ok,.dl-btn-login,.dl-btn-pay,.dl-btn-disk {
        padding: 9px 12px;
        font-size: 12px
    }

    .dl-code-group {
        flex-direction: column;
        width: 100%
    }

    .dl-code-input {
        width: 100%
    }

    #dl-code-submit {
        width: 100%
    }

    .dl-notice {
        padding: 16px 14px;
        font-size: 10px
    }
}

@media (max-width: 380px) {
    .dl-card-head {
        padding:12px
    }

    .dl-logo img {
        height: 24px
    }

    .dl-song-id {
        font-size: 9px;
        padding: 2px 8px
    }

    .dl-song-title a {
        font-size: 14px
    }

    .dl-info-grid {
        gap: 5px
    }

    .dl-info-item {
        font-size: 9px;
        padding: 4px 2px
    }

    .dl-btn-ok,.dl-btn-login,.dl-btn-pay,.dl-btn-disk {
        padding: 12px 20px;
        font-size: 12px;
        gap: 4px
    }

    .dl-notice {
        padding: 14px 12px;
        font-size: 10px;
        line-height: 1.6
    }

    .dl-divider {
        margin-top: 12px;
        padding-top: 12px
    }
}

.pattern {
    display: flex
}

.mobile-bottom-nav {
    display: none
}

@media (max-width: 768px) {
    .pattern {
        display:none !important
    }

    .mobile-bottom-nav {
        display: flex !important
    }

    .mobile-ranks {
        margin-bottom: 70px
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcode-modal-content {
    background: var(--bg);
    border-radius: 12px;
    width: 300px;
    overflow: hidden;
    animation: modalZoomIn 0.3s ease;
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qrcode-modal-header {
    padding: 15px;
    background: var(--bar);
    color: var(--name);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.qrcode-modal-close {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.qrcode-modal-body {
    padding: 30px 20px;
    text-align: center;
}

.qrcode-modal-body #qrcodeCanvas {
    display: inline-block;
}

.qrcode-tip {
    margin-top: 15px;
    color: #666;
    font-size: 12px;
}

/* ===== 手机端全局播放器 ===== */
.gp-pc-only {
    display: flex;
}

.gp-m-only {
    display: none !important;
}

.gp-dock {
    --gp-accent: var(--accent, var(--title, #ff2d55));
    --gp-accent-hover: var(--hot-red, var(--accent, var(--title, #ff2d55)));
    --gp-accent-soft: color-mix(in srgb, var(--gp-accent) 12%, transparent);
    --gp-accent-hover-bg: color-mix(in srgb, var(--gp-accent) 18%, transparent);
    --gp-h: 72px;
    --gp-fab-h: 36px;
    --gp-nav-h: 0px;
    --gp-player-bg: var(--bar, #0d0d0d);
    --gp-track-bg: var(--line, #101218);
    --gp-text: var(--text, #fff);
    --gp-text-muted: var(--name, #8f8f8f);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity .25s ease, visibility .25s, transform .3s ease;
    font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: visible;
}

:root:not(.light) .gp-dock {
    --gp-player-bg: var(--hread, #000000b0);
}

.gp-inner {
    width: var(--dj-layout-width, 100%);
    max-width: var(--dj-layout-max-width, 1350px);
    margin: 0 auto;
    box-sizing: border-box;
}

.gp-dock.is-active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.gp-active {
    --gp-body-h: 72px;
    --gp-body-nav: 0px;
    padding-bottom: calc(var(--gp-body-h) + var(--gp-body-nav));
}

body.gp-active.gp-collapsed-bar {
    --gp-body-h: 0px;
    --gp-body-nav: 0px;
    padding-bottom: 0;
}

body.gp-pl-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .45);
}

:root.light body.gp-pl-open::before {
    background: rgba(0, 0, 0, .2);
}

.gp-toggle {
    position: fixed;
    z-index: 1002;
    width: 35px;
    height: 24px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--gp-accent);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    pointer-events: auto;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}

.gp-toggle:hover {
    color: var(--gp-accent);
}

.gp-dock.is-active:not(.is-collapsed) .gp-toggle--collapse {
    display: flex;
    bottom: calc(var(--gp-h) + var(--gp-nav-h));
    left: var(--dj-layout-edge-left, max(0px, calc((100vw - min(100vw, var(--dj-layout-max-width, 1350px))) / 2)));
    right: auto;
}

.gp-dock.is-active.is-collapsed .gp-toggle--expand {
    display: flex;
    bottom: 0;
    left: var(--dj-layout-edge-left, max(0px, calc((100vw - min(100vw, var(--dj-layout-max-width, 1350px))) / 2)));
    right: auto;
    transform: none;
}

.gp-dock.is-active.is-collapsed .gp-toggle--collapse {
    display: none;
}

.gp-dock.is-active.is-collapsed .gp-shell, .gp-dock.is-active.is-collapsed .gp-playlist {
    display: none !important;
}

.gp-shell {
    position: relative;
    width: 100%;
    background: var(--card);
    border-top: 1px solid var(--line);
    pointer-events: auto;
    overflow: visible;
}

/* ----- PC ----- */
.gp-pc-bar {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: var(--gp-h);
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.gp-pc-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 28%;
    min-width: 180px;
}

.gp-pc-cover {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius, 6px);
    overflow: hidden;
    background: var(--hover-bg, #131518);
    display: block;
}

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

.gp-pc-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gp-pc-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gp-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-pc-title:hover {
    color: var(--gp-accent);
}

.gp-pc-sub {
    font-size: 11px;
    color: var(--gp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-pc-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 40%;
    min-width: 0;
    max-width: 560px;
}

.gp-pc-time {
    font-size: 11px;
    color: var(--gp-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 32px;
}

.gp-pc-time:last-child {
    text-align: right;
}

.gp-track {
    flex: 1;
    min-width: 0;
    height: 4px;
    background: var(--bg);
    border-radius: 99px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gp-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--gp-accent);
    border-radius: 99px;
    transition: width .08s linear;
    pointer-events: none;
}

.gp-pc-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 32%;
    min-width: 0;
    justify-content: flex-end;
}

.gp-pc-skip {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--gp-text-muted);
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color .15s;
}

.gp-pc-skip:hover {
    color: var(--gp-text);
}

.gp-pc-play {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--gp-accent);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: opacity .15s, transform .15s;
    flex-shrink: 0;
}

.gp-pc-play:hover {
    opacity: .88;
    transform: scale(1.05);
}

.gp-pc-play i {
    margin-left: 2px;
}

.gp-dock.is-playing .gp-pc-play i {
    margin-left: 0;
}

.gp-pc-vol {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100px;
    flex-shrink: 0;
}

.gp-pc-vol-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--gp-text-muted);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.gp-pc-vol-btn:hover {
    color: var(--gp-text);
}

.gp-pc-vol input[type=range] {
    flex: 1;
    min-width: 0;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 99px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--gp-accent) 70%, var(--gp-track-bg) 70%);
}

.gp-pc-vol input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.gp-pc-vol input[type=range]::-moz-range-thumb {
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.gp-pc-icon {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gp-text-muted);
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: color .15s;
    flex-shrink: 0;
}

.gp-pc-icon:hover {
    color: var(--gp-text);
}

.gp-btn-list em {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    background: var(--gp-accent);
    color: #fff;
    border-radius: 99px;
}

.gp-pc-icon:hover {
    color: var(--gp-text);
}

.gp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.gp-playlist {
    display: none;
    flex-direction: column;
    position: fixed;
    right: var(--dj-layout-edge-right, max(3%, calc((100vw - var(--dj-layout-max-width, 1350px)) / 2 - 10px)));
    bottom: calc(var(--gp-h) + var(--gp-nav-h));
    width: 360px;
    max-width: calc(100vw);
    max-height: min(420px, 50vh);
    background: var(--card);
    border-bottom: 2px solid var(--line);
    border-radius: 12px 12px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1001;
    pointer-events: auto;
    scrollbar-width: none;
}

.gp-playlist::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}

.gp-playlist.show {
    display: flex;
}

.gp-playlist-head {
    flex-shrink: 0;
    border-bottom: 1px solid var(--gp-track-bg);
}

.gp-playlist-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
}

.gp-playlist-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-text);
}

.gp-playlist-title i {
    color: var(--gp-accent);
}

.gp-playlist-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gp-accent);
    background: var(--gp-accent-soft);
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gp-playlist-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.gp-pl-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: var(--gp-accent-soft);
    color: var(--gp-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 99px;
    line-height: 1;
    flex-shrink: 0;
}

.gp-pl-mode i {
    font-size: 14px;
}

.gp-pl-mode:hover {
    background: var(--gp-accent-hover-bg);
}

.gp-clear-btn {
    border: none;
    background: transparent;
    color: var(--gp-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
}

.gp-clear-btn:hover {
    color: var(--gp-accent);
    background: var(--hover-bg);
}

.gp-clear-btn.is-history-clear {
    border: 1px solid var(--gp-accent);
    color: var(--gp-accent);
    border-radius: 20px;
    padding: 4px 12px;
}

.gp-clear-btn.is-history-clear:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
}

.gp-btn-ghost {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gp-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.gp-btn-ghost:hover {
    color: var(--gp-text);
}

.gp-playlist-body {
    overflow-y: auto;
    max-height: calc(min(420px, 50vh) - 44px);
    scrollbar-width: none;
    padding: 0 14px;
    box-sizing: border-box;
}

.gp-playlist-body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}

.gp-playlist-body ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.gp-playlist-body li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    transition: background .15s;
    border-radius: 6px;
    cursor: pointer;
}

.gp-playlist-body li.active .playlist-title, .gp-playlist-body li.active .playlist-info {
    color: var(--gp-accent);
    font-weight: 600;
}

.playlist-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.playlist-title {
    font-size: 13px;
    color: var(--name);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-artist {
    font-size: 11px;
    color: var(--gp-text-muted);
    margin-top: 1px;
}

.playlist-duration {
    font-size: 11px;
    color: var(--gp-text-muted);
    flex-shrink: 0;
}

.gp-playlist-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 36px 20px;
    color: var(--gp-text-muted);
    text-align: center;
}

.gp-playlist-empty.show {
    display: flex;
}

.gp-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gp-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.gp-empty-icon i {
    color: var(--gp-accent);
    font-size: 20px;
}

.mainLeft.pjax-loading,
.mainLeft.ajax-loading,
.wrap .main.pjax-loading,
.wrap .main.ajax-loading,
.user_left.pjax-loading,
.user_left.ajax-loading {
    opacity: .98;
    transition: opacity .06s ease;
}

@media (max-width: 1100px) {
    .gp-pc-bar {
        gap: 12px;
    }

    .gp-pc-left {
        flex: 0 1 24%;
        min-width: 140px;
    }

    .gp-pc-vol {
        width: 72px;
    }
}

@media (max-width: 900px) {
    .gp-pc-left {
        display: none;
    }

    .gp-pc-center {
        flex: 1;
        max-width: none;
    }
}

/* ----- 三列布局首页底部 ----- */
@media (max-width: 768px) {
    .gp-dock {
        --gp-h: 94px;
        --gp-nav-h: 60px;
        bottom: 60px;
    }

    .gp-shell {
        position: relative;
        width: 100%;
        background: var(--card);
        border-top: 0px solid var(--gp-accent);
        pointer-events: auto;
        overflow: visible;
    }

    .gp-pc-only {
        display: none !important;
    }

    .gp-m-only {
        display: block !important;
    }

    .gp-toggle {
        display: none !important;
    }

    .gp-playlist {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        width: 100%;
        max-width: none;
        max-height: 38vh;
        border-radius: 12px 12px 0 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: none;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
    }

    .gp-playlist-body {
        max-height: calc(38vh - 44px);
        padding: 0 12px;
    }

    .gp-playlist-head-inner {
        padding: 0 12px;
    }

    .gp-dock.is-active.is-collapsed .gp-shell {
        display: block !important;
    }

    body.gp-active {
        --gp-body-h: 70px;
        --gp-body-nav: 50px;
        padding-bottom: calc(var(--gp-body-h) + var(--gp-body-nav));
    }

    body.gp-active.gp-collapsed-bar {
        --gp-body-h: 0px;
        padding-bottom: var(--gp-body-nav);
    }

    .gp-m-bar {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .gp-m-progress-top {
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        flex-shrink: 0;
        order: -1;
    }

    .gp-track--m {
        width: 100%;
        height: 3px;
        border-radius: 0;
        cursor: pointer;
    }

    .gp-m-body {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px 10px;
        box-sizing: border-box;
        flex: 1;
    }

    .gp-m-cover {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 6px;
        overflow: hidden;
        background: var(--hover-bg, #131518);
        display: block;
    }

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

    .gp-m-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
    }

    .gp-m-heading {
        font-size: 13px;
        font-weight: 500;
        color: var(--gp-text);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .gp-m-heading:hover {
        color: var(--gp-accent);
    }

    .gp-m-artist {
        font-size: 11px;
        color: var(--gp-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .gp-m-ctrl {
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
    }

    .gp-m-skip {
        width: 26px;
        height: 26px;
        border: none;
        background: transparent;
        color: var(--gp-text-muted);
        font-size: 17px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .gp-m-skip:hover {
        color: var(--gp-text);
    }

    .gp-m-play {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--gp-accent);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
        flex-shrink: 0;
        margin: 0 2px;
    }

    .gp-m-play i {
        margin-left: 2px;
    }

    .gp-dock.is-playing .gp-m-play i {
        margin-left: 0;
    }

    .gp-m-list {
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--gp-text-muted);
        font-size: 16px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        position: relative;
        flex-shrink: 0;
        margin-left: 2px;
    }

    .gp-m-list:hover {
        color: var(--gp-text);
    }

    .gp-m-list em {
        position: absolute;
        top: -2px;
        right: -4px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        font-size: 9px;
        font-style: normal;
        font-weight: 600;
        line-height: 14px;
        text-align: center;
        background: var(--gp-accent);
        color: #fff;
        border-radius: 99px;
    }

    .mobile-ranks {
        margin-bottom: calc(70px + var(--gp-h));
    }

    body.gp-active .mainRight {
        margin-bottom: calc(60px + var(--gp-h));
    }
}

/* ===== U盘/定制页面共用样式 ===== */
.securityCard_body {
    padding: 0;
}

.payCheckoutPage .securityCard_body {
    padding: 20px;
}

.securityBtn_primary:hover {
    opacity: .85;
    transform: translateY(-2px);
}

.securityBtn_primary:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.securityBtn_secondary {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
}

.securityBtn_secondary:hover {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
}

/* 定制U盘 index 页 */
.mediaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.mediaCard {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
}

.mediaCard:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    transform: translateY(-2px);
}

.upboxoff {
    border: 2px solid var(--bg);
    border-radius: 12px;
    padding: 10px;
}

.upboxon {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent) !important;
    border: 2px solid var(--accent, var(--title)) !important;
    border-radius: 12px;
    padding: 10px;
}

.mediaImg img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.mediaName {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
}

.mediaPrice {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent, var(--title));
}

.mediaSubtotal, .albumSubtotal, .musicSubtotal {
    text-align: right;
    padding-top: 16px;
    font-size: 14px;
    color: var(--name);
    border-top: 1px solid var(--line);
}

.subtotalLabel {
    color: var(--name);
}

.subtotalName {
    color: var(--text);
    margin: 0 8px;
}

.subtotalPrice {
    color: var(--accent, var(--title));
    font-weight: 600;
}

.subtotalPrice b {
    font-size: 18px;
}

.albumSelectCard {
    background: transparent;
    cursor: pointer;
    width: 100%;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    transition: all .2s ease;
}

.albumSelectCover {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: all .2s ease;
}

.albumSelectCover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.albumSelectCard.upboxon .albumSelectCover {
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
}

.albumSelectCard.upboxon .albumSelectCover img {
    opacity: .9;
}

.albumSelectBtn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, var(--title)) 95%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    opacity: 0;
    transition: .25s;
    z-index: 10;
    cursor: pointer;
}

.albumSelectCover:hover .albumSelectBtn {
    opacity: 1;
}

.albumInfoBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    gap: 6px;
}

.albumSelectName {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.albumSelectPrice {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, var(--title));
    white-space: nowrap;
}

.musicArea {
    min-height: 200px;
    margin-bottom: 16px;
}

.emptyArea {
    text-align: center;
    color: var(--name);
    padding: 40px 20px;
}

.emptyArea a {
    color: var(--accent, var(--title));
    text-decoration: none;
}

.emptyArea a:hover {
    text-decoration: underline;
}

.orderTotal {
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent, var(--title));
    padding: 12px 0;
}

.upan-music-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.upan-music-content {
    max-height: 400px;
    overflow-y: auto;
}

.upan-music-content::-webkit-scrollbar {
    width: 4px;
}

.upan-music-content::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 4px;
}

.upan-music-content::-webkit-scrollbar-thumb {
    background: var(--accent, var(--title));
    border-radius: 4px;
}

.upan-music-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all .2s ease;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    animation: upanFadeInUp .3s ease backwards;
}

.upan-music-item:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    background: color-mix(in srgb, var(--accent, var(--title)) 2%, transparent);
}

.upan-music-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.upan-music-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    border-radius: 8px;
    color: var(--accent, var(--title));
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.upan-music-detail {
    flex: 1;
    min-width: 0;
}

.upan-music-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.music-title-link {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
    line-height: 1.4;
    word-break: break-all;
}

.music-title-link:hover {
    color: var(--accent, var(--title));
}

.repeat-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--accent, var(--title)) 20%, transparent);
    color: var(--accent, var(--title));
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    flex-shrink: 0;
    gap: 4px;
}

.repeat-badge::before {
    content: '\21BB';
    font-size: 10px;
}

.upan-music-id {
    font-size: 11px;
    color: var(--name);
}

.music-id-text {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 10px;
}

.upan-music-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.type-cs {
    background: rgba(88, 101, 242, .15);
    color: #5865f2;
    border: 1px solid rgba(88, 101, 242, .3);
}

.type-dq {
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    color: var(--accent, var(--title));
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
}

.type-tq {
    background: rgba(155, 89, 182, .15);
    color: #b57edc;
    border: 1px solid rgba(155, 89, 182, .3);
}

.upan-music-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.upan-del-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--name);
    cursor: pointer;
    transition: all .2s ease;
    font-size: 16px;
}

.upan-del-btn:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 50%, transparent);
    color: var(--accent, var(--title));
}

.price-original {
    color: var(--name);
    text-decoration: line-through;
    font-size: 16px;
    margin-right: 8px;
}

.price-discount, .price-total {
    color: var(--accent, var(--title));
    font-size: 24px;
    font-weight: 700;
}

.price-min-tip {
    color: var(--name);
    font-size: 12px;
    margin-left: 8px;
}

.upan-music-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--name);
}

.upan-music-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    opacity: .4;
    color: var(--accent, var(--title));
}

.empty-text {
    font-size: 14px;
    margin-bottom: 16px;
}

.empty-link {
    display: inline-block;
    color: var(--accent, var(--title));
    text-decoration: none;
    font-weight: 600;
    padding: 8px 20px;
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
    border-radius: 30px;
    transition: all .2s ease;
}

.empty-link:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    border-color: var(--accent, var(--title));
}

@keyframes upanFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .mediaGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .mediaImg img {
        width: 80px;
        height: 80px;
    }

    .orderTotal {
        text-align: center;
        font-size: 20px;
    }

    .price-discount, .price-total {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .mediaGrid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    .mediaCard {
        padding: 12px;
    }

    .mediaImg img {
        width: 70px;
        height: 70px;
    }

    .mediaName {
        font-size: 12px;
    }

    .mediaPrice {
        font-size: 14px;
    }

    .albumSelectName, .albumSelectPrice {
        font-size: 12px;
    }

    .orderTotal {
        font-size: 18px;
    }
}

/* ===== 商城 mall index 页面 ===== */
.mallIndexPage .mainLeft > .box {
    background: var(--bar);
    border-radius: var(--radius, 12px);
    overflow: hidden;
}

.mallIndexPage .securityCard {
    background: var(--bar);
}

.productDisplay {
    display: flex;
    gap: 24px;
    padding: 20px;
    align-items: flex-start;
}

@media (min-width: 1101px) {
    .mallIndexPage .productDisplay {
        --mall-panel-h: 392px;
        align-items: flex-start;
    }

    .mallIndexPage .productGallery {
        height: var(--mall-panel-h);
        flex-shrink: 0;
    }

    .mallIndexPage .productPackages {
        height: var(--mall-panel-h);
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .mallIndexPage .packagesTable {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .mallIndexPage .tableBody {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mallIndexPage .tableBody::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mallIndexPage .actionButtons {
        flex-direction: row;
        flex-wrap: nowrap;
        flex-shrink: 0;
        margin-top: 12px;
        gap: 12px;
    }

    .mallIndexPage .actionButtons .securityBtn {
        flex: 1;
        width: auto;
        max-width: none;
    }
}

.productGallery {
    width: 320px;
    flex-shrink: 0;
}

.galleryMain {
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
}

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

.galleryThumbs {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.thumbPrev, .thumbNext {
    width: 28px;
    height: 56px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.thumbPrev:hover, .thumbNext:hover {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--title) 6%, var(--bar));
}

.thumbPrev::before, .thumbNext::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: var(--name);
    line-height: 1;
}

.thumbPrev:hover::before, .thumbNext:hover::before {
    color: var(--accent, var(--title));
}

.thumbPrev::before {
    content: '\2039';
}

.thumbNext::before {
    content: '\203A';
}

.thumbList {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.mallIndexPage .thumbList, .mallIndexPage #spec-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mallIndexPage .thumbList::-webkit-scrollbar, .mallIndexPage #spec-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.thumbPrev.is-disabled, .thumbNext.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.thumbListInner {
    display: flex;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.thumbListInner li {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    border: 2px solid transparent;
}

.thumbListInner li:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 50%, transparent);
}

.thumbListInner li.active {
    border-color: var(--accent, var(--title));
}

.thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.productPackages {
    flex: 1;
    min-width: 0;
}

.packagesTable {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bar);
}

.mallIndexPage .packagesTable {
    background: var(--bar);
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
}

.mallIndexPage .tableHeader {
    background: var(--bg);
    border-bottom-color: var(--line);
    color: var(--name);
}

.mallIndexPage .tableFooter {
    background: var(--bg);
    border-top-color: var(--line);
}

.mallIndexPage .packageRow {
    background: transparent;
    border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.mallIndexPage .packageRow:hover {
    background: color-mix(in srgb, var(--title) 5%, var(--bar));
}

.mallIndexPage .checkMark {
    background: color-mix(in srgb, var(--text) 4%, var(--bar));
    border: 2px solid color-mix(in srgb, var(--name) 50%, var(--line));
}

.mallIndexPage .checkboxLabel:hover .checkMark {
    border-color: color-mix(in srgb, var(--title) 45%, var(--name));
}

.mallIndexPage .checkboxLabel input:checked ~ .checkMark {
    background: var(--title);
    border-color: var(--title);
}

:root.light .mallIndexPage .checkMark {
    background: #fff;
    border-color: #c9cdd4;
}

:root.light .mallIndexPage .checkboxLabel:hover .checkMark {
    border-color: color-mix(in srgb, var(--title) 55%, #c9cdd4);
}

:root.light .mallIndexPage .checkboxLabel input:checked ~ .checkMark {
    background: var(--title);
    border-color: var(--title);
}

.mallIndexPage .quantityControl {
    background: color-mix(in srgb, var(--text) 6%, var(--bar));
    border-color: var(--line);
}

.mallIndexPage .quantityControl input {
    color: var(--text);
    border-color: color-mix(in srgb, var(--line) 80%, transparent);
}

.mallIndexPage .qtyBtn {
    color: var(--name);
}

.mallIndexPage .qtyBtn:hover {
    background: color-mix(in srgb, var(--title) 12%, transparent);
    color: var(--title);
}

.mallIndexPage .typeBtn_off {
    background: color-mix(in srgb, var(--text) 8%, var(--bar));
    color: var(--name);
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
}

.mallIndexPage .typeBtn {
    background: var(--title);
}

.mallIndexPage .tableFooter .selectAllText {
    color: var(--text);
    cursor: pointer;
}

.tableHeader {
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--name);
    white-space: nowrap;
}

.tableHeader .colSelect, .packageRow .colSelect, .tableFooter .colSelect {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 8px 12px 16px;
    box-sizing: border-box;
}

.tableHeader .colName, .packageRow .colName {
    flex: 1 1 140px;
    min-width: 100px;
    padding: 12px 8px;
}

.tableHeader .colType, .packageRow .colType {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    padding: 12px 8px;
}

.tableHeader .colPrice, .packageRow .colPrice {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    padding: 12px 8px;
}

.tableHeader .colQuantity, .packageRow .colQuantity {
    width: 120px;
    flex-shrink: 0;
    text-align: center;
    padding: 12px 8px;
}

.tableHeader .colSubtotal, .packageRow .colSubtotal {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    padding: 12px 8px;
}

.tableBody {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
}

.packageRow {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background .2s;
    min-width: 0;
    min-height: 64px;
}

.packageRow:last-child {
    border-bottom: 0;
}

.packageRow:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 3%, transparent);
}

.packageRow .colName {
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
}

.priceValue, .subtotalValue {
    color: var(--accent, var(--title));
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.checkboxLabel {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkboxLabel input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkMark {
    position: relative;
    width: 18px;
    height: 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.checkboxLabel input:checked ~ .checkMark {
    background: var(--accent, var(--title));
    border-color: var(--accent, var(--title));
}

.checkboxLabel input:checked ~ .checkMark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.typeSwitch {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.typeBtn {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    background: var(--accent, var(--title));
    color: #fff;
    white-space: nowrap;
}

.typeBtn_off {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--name);
}

.typeBtn_off:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    color: var(--accent, var(--title));
}

.quantityControl {
    display: inline-flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.qtyBtn {
    width: 28px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: none;
    color: var(--name);
    cursor: pointer;
}

.qtyBtn:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    color: var(--accent, var(--title));
}

.quantityControl input {
    width: 36px;
    height: 30px;
    text-align: center;
    background: var(--bg);
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
}

.quantityControl input:focus {
    outline: none;
}

.tableFooter {
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    flex-wrap: nowrap;
}

.tableFooter .footerSummary {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px 12px 8px;
}

.tableFooter .selectAllText {
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    cursor: pointer;
}

.footerRight {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: var(--name);
}

.countHighlight {
    color: var(--accent, var(--title));
    font-weight: 700;
    font-size: 16px;
}

.totalLabel {
    margin-left: 8px;
    font-size: 15px;
    color: var(--text);
}

.mallIndexPage .totalPrice {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent, var(--title));
}

.mallIndexPage .actionButtons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: nowrap;
    flex-direction: row;
}

.mallIndexPage .actionButtons .securityBtn {
    flex: 1;
    width: auto;
    min-width: 0;
    border-radius: 12px;
    max-width: none;
    padding: 12px 28px;
}

.productDetail {
    padding: 20px;
}

.detailContent {
    display: none;
    color: var(--text);
    line-height: 1.8;
    word-break: break-word;
}

.detailContent:first-child {
    display: block;
}

.detailContent img, .detailInner img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 12px 0;
    border-radius: 8px;
}

.detailContent img[width], .detailInner img[width], .detailContent img[style*='width'], .detailInner img[style*='width'] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
}

.detailInner {
    overflow-x: auto;
    max-width: 100%;
}

.detailContent video, .detailContent iframe, .detailInner video, .detailInner iframe {
    max-width: 100% !important;
    height: auto !important;
}

.tableBody::-webkit-scrollbar, #spec-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mallIndexPage .tableBody::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.tableBody::-webkit-scrollbar-thumb, #spec-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 3px;
}

.tableBody, #spec-list {
    scrollbar-width: thin;
}

.mallIndexPage .tableBody {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 定制订单/支付页 */
.mallIndexPage .mallAlbumBox {
    background: var(--bar);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.mallIndexPage .mallAlbumBox .titleBar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.mallIndexPage .mallAlbumBox .titleBar h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.mallIndexPage .mallAlbumBox .titleBar h3 i {
    color: var(--title);
    margin-right: 6px;
}

.mallIndexPage .mallAlbumBox .titleBar a {
    font-size: 12px;
    color: var(--name);
    transition: color .2s;
}

.mallIndexPage .mallAlbumBox .titleBar a:hover {
    color: var(--title);
}

.mallIndexPage .mallAlbumBox .rightAlbumList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.mallIndexPage .mallAlbumBox .rightAlbumItem {
    display: block;
    text-decoration: none;
    min-width: 0;
}

.mallIndexPage .mallAlbumBox .album-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background: color-mix(in srgb, var(--text) 4%, var(--bar));
    box-shadow: none;
    transition: border-color .2s, transform .2s;
}

.mallIndexPage .mallAlbumBox .rightAlbumItem:hover .album-wrap {
    border-color: color-mix(in srgb, var(--title) 40%, var(--line));
    transform: translateY(-2px);
}

.mallIndexPage .mallAlbumBox .album-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    background: color-mix(in srgb, var(--text) 6%, var(--bar));
    transition: transform .25s;
}

.mallIndexPage .mallAlbumBox .rightAlbumItem:hover .album-wrap img {
    transform: scale(1.05);
}

.mallIndexPage .mallAlbumBox .album-num {
    font-size: 10px;
    line-height: 1.4;
    padding: 2px 8px;
    background: color-mix(in srgb, #000 55%, transparent);
}

.mallIndexPage .mallAlbumBox .rightAlbumItem p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mallIndexPage .mallAlbumBox .rightAlbumItem:hover p {
    color: var(--title);
}

@media (max-width: 1100px) {
    .mallIndexPage .mallAlbumBox .rightAlbumList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .mallIndexPage .mallAlbumBox .rightAlbumList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }
}

@media (max-width: 1100px) {
    .productDisplay {
        flex-direction: column;
    }

    .productGallery {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .productPackages {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .productDisplay {
        padding: 12px;
        gap: 16px;
    }

    .galleryMain {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .mallIndexPage .packagesTable {
        --mall-m-cols: 30px minmax(0, 1fr) 42px 48px 84px 52px;
        font-size: 12px;
        overflow-x: visible;
    }

    .mallIndexPage .tableHeader {
        display: grid;
        grid-template-columns: var(--mall-m-cols);
        column-gap: 6px;
        align-items: center;
        padding: 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .mallIndexPage .tableHeader .colSelect, .mallIndexPage .tableHeader .colName, .mallIndexPage .tableHeader .colType, .mallIndexPage .tableHeader .colPrice, .mallIndexPage .tableHeader .colQuantity, .mallIndexPage .tableHeader .colSubtotal, .mallIndexPage .packageRow .colSelect, .mallIndexPage .packageRow .colName, .mallIndexPage .packageRow .colType, .mallIndexPage .packageRow .colPrice, .mallIndexPage .packageRow .colQuantity, .mallIndexPage .packageRow .colSubtotal {
        width: auto;
        min-width: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .mallIndexPage .tableHeader .colSelect {
        justify-content: flex-start;
        padding-left: 2px;
    }

    .mallIndexPage .tableHeader .colName, .mallIndexPage .packageRow .colName {
        justify-content: flex-start;
    }

    .mallIndexPage .tableHeader .colSelect::after {
        content: '选';
    }

    .mallIndexPage .tableHeader .colSelect {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colName {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colName::after {
        content: '套餐';
        font-size: 11px;
    }

    .mallIndexPage .tableHeader .colType {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colType::after {
        content: '型';
        font-size: 11px;
    }

    .mallIndexPage .tableHeader .colPrice {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colPrice::after {
        content: '单价';
        font-size: 11px;
    }

    .mallIndexPage .tableHeader .colQuantity {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colQuantity::after {
        content: '数';
        font-size: 11px;
    }

    .mallIndexPage .tableHeader .colSubtotal {
        font-size: 0;
    }

    .mallIndexPage .tableHeader .colSubtotal::after {
        content: '计';
        font-size: 11px;
    }

    .mallIndexPage .tableBody {
        max-height: none;
        overflow: visible;
    }

    .mallIndexPage .packageRow {
        display: grid;
        grid-template-columns: var(--mall-m-cols);
        column-gap: 6px;
        align-items: center;
        min-width: 0;
        min-height: 50px;
        padding: 8px;
        gap: 0;
    }

    .mallIndexPage .packageRow .colSelect {
        justify-content: flex-start;
        padding-left: 2px;
    }

    .mallIndexPage .packageRow .colName {
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mallIndexPage .packageRow .colType .typeSwitch {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .mallIndexPage .packageRow .typeBtn, .mallIndexPage .packageRow .typeBtn_off {
        padding: 2px 5px;
        font-size: 10px;
        line-height: 1.2;
    }

    .mallIndexPage .packageRow .priceValue, .mallIndexPage .packageRow .subtotalValue {
        font-size: 12px;
    }

    .mallIndexPage .packageRow .colPrice::before, .mallIndexPage .packageRow .colQuantity::before, .mallIndexPage .packageRow .colSubtotal::before {
        content: none;
        display: none;
    }

    .mallIndexPage .packageRow .quantityControl {
        width: 100%;
        max-width: 84px;
        min-width: 0;
    }

    .mallIndexPage .packageRow .qtyBtn {
        width: 24px;
        height: 26px;
        font-size: 12px;
    }

    .mallIndexPage .packageRow .quantityControl input {
        width: 28px;
        height: 26px;
        font-size: 12px;
        padding: 0;
    }

    .mallIndexPage .tableFooter {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 6px;
        align-items: center;
        padding: 10px 8px;
        gap: 8px;
        min-width: 0;
    }

    .mallIndexPage .tableFooter .colSelect, .mallIndexPage .tableFooter .colName {
        width: auto;
        padding: 0;
    }

    .mallIndexPage .tableFooter .colSelect {
        justify-content: flex-start;
        padding-left: 2px;
    }

    .mallIndexPage .tableFooter .colName {
        justify-content: flex-start;
    }

    .mallIndexPage .tableFooter .footerSummary {
        grid-column: 1 / -1;
        width: 100%;
        padding: 8px 0 0;
        border-top: 1px solid var(--line);
    }

    .mallIndexPage .tableFooter .footerRight {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        font-size: 12px;
    }

    .mallIndexPage .tableFooter .totalLabel {
        margin-left: 0;
    }

    .mallIndexPage .tableFooter .totalPrice {
        font-size: 18px;
    }

    .mallIndexPage .actionButtons {
        flex-direction: column;
        gap: 10px;
    }

    .mallIndexPage .actionButtons .securityBtn {
        width: 100%;
        text-align: center;
    }

    .productDetail {
        padding: 16px 12px;
    }
}

@media (max-width: 480px) {
    .mallIndexPage .packagesTable {
        --mall-m-cols: 28px minmax(0, 1fr) 38px 44px 76px 48px;
    }

    .mallIndexPage .packageRow .colName {
        font-size: 11px;
    }

    .mallIndexPage .packageRow .priceValue, .mallIndexPage .packageRow .subtotalValue {
        font-size: 11px;
    }

    .mallIndexPage .packageRow .quantityControl {
        max-width: 76px;
    }

    .mallIndexPage .packageRow .qtyBtn {
        width: 22px;
        height: 24px;
    }

    .mallIndexPage .packageRow .quantityControl input {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .footerRight {
        font-size: 13px;
    }

    .mallIndexPage .totalPrice {
        font-size: 16px;
    }

    .typeBtn {
        padding: 2px 6px;
        font-size: 11px;
    }
}

/* ===== 商城订单/支付页 ===== */
.orderInfoCard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px;
}

.orderInfoHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--text) 2%, transparent);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px;
}

.orderInfoHeader h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.orderInfoHeader h3 i {
    color: var(--accent, var(--title));
    font-size: 18px;
}

.editAddressBtn {
    font-size: 12px;
    color: var(--accent, var(--title));
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.editAddressBtn:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 20%, transparent);
    transform: translateY(-1px);
}

.orderDetailBox {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.orderDetailTable {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
}

.orderDetailTable td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.orderDetailTable tr:last-child td {
    border-bottom: none;
}

.orderDetailTable .label {
    width: 100px;
    font-weight: 500;
    color: var(--name);
    font-size: 13px;
    background: color-mix(in srgb, var(--text) 1%, transparent);
}

.orderDetailTable .value {
    color: var(--text);
    font-size: 13px;
}

.orderNo {
    font-weight: 600;
    font-size: 14px;
    color: var(--accent, var(--title));
}

.orderStatus {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(243, 156, 18, .12);
    color: #f39c12;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.payPage .orderAmount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, var(--title));
}

.payPage .productList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payPage .productItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.payPage .productItem img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.payPage .productItem .productInfo {
    flex: 1;
}

.payPage .productItem .productName {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.payPage .productItem .productSpec {
    font-size: 11px;
    color: var(--name);
    margin-top: 2px;
}

.payAmountCard {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--title)) 5%, transparent) 0%, color-mix(in srgb, var(--accent, var(--title)) 2%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    border-radius: 12px;
    padding: 24px 20px;
    margin: 20px;
    text-align: center;
}

.payAmountCard .payLabel {
    font-size: 13px;
    color: var(--name);
    margin-bottom: 8px;
}

.payAmountCard .payNumber {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent, var(--title));
}

.payAmountCard .payNumber small {
    font-size: 14px;
    font-weight: normal;
}

.payMethodSection {
    margin: 20px;
}

.payMethodList {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.payMethodItem {
    flex: 1;
    min-width: 200px;
    cursor: pointer;
    transition: all .2s;
}

.payMethodCard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    transition: all .2s;
}

.payMethodItem.active .payMethodCard {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 2%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
}

.payMethodCard:hover {
    border-color: var(--accent, var(--title));
    transform: translateY(-2px);
}

.payMethodIcon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payMethodIcon i {
    font-size: 36px;
    color: var(--accent, var(--title));
}

.payMethodInfo h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}

.payMethodInfo p {
    font-size: 11px;
    color: var(--name);
    margin: 0;
}

.shippingTip {
    margin-top: 12px;
    padding: 15px;
    background: rgba(0, 200, 100, .1);
    border-radius: 8px;
    font-size: 12px;
    color: #00c864;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== 商城结算/支付 mallCheckoutPage ===== */
.mallCheckoutPage .mallCheckoutShell {
    padding: 0;
    overflow: hidden;
}

.mallCheckoutHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--title)) 14%, transparent) 0%, transparent 55%), var(--bar);
    border-bottom: 1px solid var(--line);
}

.mallCheckoutHeroText h2 {
    margin: 8px 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.mallCheckoutStatus {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 14%, transparent);
}

.mallCheckoutStatus--pay {
    color: #f59e0b;
    background: rgba(245, 158, 11, .14);
}

.mallCheckoutSub,
.mallCheckoutOrderNo,
.mallCheckoutHeroMeta {
    margin: 0;
    font-size: 13px;
    color: var(--name);
}

.mallCheckoutOrderNo {
    margin-top: 6px;
    word-break: break-all;
}

.mallCheckoutHeroAmount {
    text-align: right;
    flex-shrink: 0;
}

.mallCheckoutHeroLabel {
    display: block;
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutHeroPrice {
    display: block;
    margin-top: 4px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent, var(--title));
}

.mallCheckoutHeroMeta {
    margin-top: 6px;
}

.mallCheckoutLayout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.mallCheckoutPanel--address {
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 88%, transparent);
}

.mallCheckoutGoodsItem--empty {
    justify-content: center;
    color: var(--name);
}

.mallCheckoutPanel {
    min-width: 0;
    border-top: 1px solid var(--line);
}

.mallCheckoutPanel:first-child {
    border-top: 0;
}

.mallCheckoutPanelHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--line);
}

.mallCheckoutPanelHead h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.mallCheckoutPanelHead h3 i {
    color: var(--accent, var(--title));
    font-size: 18px;
}

.mallCheckoutLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent, var(--title));
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    transition: background .2s ease, transform .2s ease;
}

.mallCheckoutLink:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
    transform: translateY(-1px);
}

.mallCheckoutForm {
    padding: 16px 24px 0;
}

.mallCheckoutFormHint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--name);
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
}

.mallCheckoutFormHint i {
    color: var(--accent, var(--title));
    font-size: 15px;
    margin-top: 1px;
}

.mallCheckoutPage .addressForm {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: visible;
}

.mallCheckoutPage .addressForm table {
    width: 100% !important;
    max-width: 100%;
}

.mallCheckoutPage .addressForm tr {
    display: block;
    margin-bottom: 16px;
}

.mallCheckoutPage .addressForm td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
}

.mallCheckoutPage .addressForm td:first-child {
    margin-bottom: 8px;
    font-size: 13px !important;
    color: var(--name) !important;
    font-weight: 500;
}

.mallCheckoutPage .addressForm #address3,
.mallCheckoutPage .addressForm #citystr,
.mallCheckoutPage .addressForm #areastr {
    width: 100%;
}

.mallCheckoutPage .addressForm select.inputord,
.mallCheckoutPage .addressForm .checkoutSelect,
.mallCheckoutPage .addressForm .checkoutInput,
.mallCheckoutPage .addressForm .inputord {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 36px 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--text) 4%, transparent) !important;
    color: var(--text) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.mallCheckoutPage .addressForm input.inputord,
.mallCheckoutPage .addressForm .checkoutInput {
    padding-right: 12px !important;
}

.mallCheckoutPage .addressForm select.inputord:focus,
.mallCheckoutPage .addressForm .checkoutSelect:focus,
.mallCheckoutPage .addressForm .checkoutInput:focus,
.mallCheckoutPage .addressForm .inputord:focus {
    outline: 0 !important;
    border-color: color-mix(in srgb, var(--accent, var(--title)) 55%, var(--line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--title)) 16%, transparent) !important;
    background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}

.mallCheckoutPage .checkoutRegionGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.mallCheckoutPage .checkoutField label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutPage .checkoutSelectWrap {
    position: relative;
}

.mallCheckoutPage .checkoutSelectWrap::after {
    display: none;
}

.mallCheckoutPage .themeSelectNative {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

.mallCheckoutPage .themeSelectTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.mallCheckoutPage .themeSelectValue {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mallCheckoutPage .themeSelectArrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--name);
    transition: transform .2s ease, color .2s ease;
}

.mallCheckoutPage .themeSelect.is-open .themeSelectArrow {
    transform: rotate(180deg);
    color: var(--accent, var(--title));
}

.mallCheckoutPage .themeSelectTrigger:hover,
.mallCheckoutPage .themeSelect.is-open .themeSelectTrigger {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 45%, var(--line));
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.mallCheckoutPage .themeSelect.is-open .themeSelectTrigger {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--title)) 14%, transparent);
}

.mallCheckoutPage .themeSelectMenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 22%, var(--line));
    border-radius: 12px;
    background: var(--card, var(--bg));
    box-shadow: 0 14px 36px color-mix(in srgb, #000 28%, transparent);
    overflow: hidden;
    animation: themeSelectMenuIn .16s ease;
}

@keyframes themeSelectMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mallCheckoutPage .themeSelectMenuInner {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent, var(--title)) 35%, var(--line)) transparent;
}

.mallCheckoutPage .themeSelectMenuInner::-webkit-scrollbar {
    width: 6px;
}

.mallCheckoutPage .themeSelectMenuInner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--title)) 35%, var(--line));
}

.mallCheckoutPage .themeSelectOption {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mallCheckoutPage .themeSelectOption:hover,
.mallCheckoutPage .themeSelectOption:focus {
    outline: 0;
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
    color: var(--text);
}

.mallCheckoutPage .themeSelectOption.is-selected {
    background: color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
    color: var(--accent, var(--title));
    font-weight: 600;
}

.mallCheckoutPage .themeSelectOption.is-placeholder {
    color: var(--name);
}

.mallCheckoutPage .checkoutFieldHint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutPage .savedAddrItem.is-active {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 45%, var(--line));
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, var(--card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
}

.mallCheckoutPage .mallCheckoutForm .remarkItem {
    display: block !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 16px 0 0 !important;
}

.mallCheckoutPage .mallCheckoutForm .remarkItem label {
    display: block !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin-bottom: 8px;
    font-size: 13px !important;
    color: var(--name) !important;
    font-weight: 500;
}

.mallCheckoutPage .mallCheckoutForm .remarkItem input {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: 42px;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--text) 4%, transparent) !important;
    color: var(--text) !important;
    font-size: 14px !important;
}

.mallCheckoutPage .mallCheckoutForm .remarkItem input:focus {
    outline: 0 !important;
    border-color: color-mix(in srgb, var(--accent, var(--title)) 55%, var(--line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--title)) 16%, transparent) !important;
    background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}

.mallCheckoutPage .savedAddrPick {
    align-items: center;
}

.mallCheckoutPage .savedAddrBody {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.mallCheckoutPage .savedAddrName {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.mallCheckoutPage .savedAddrPhone {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--name);
    white-space: nowrap;
}

.mallCheckoutPage .savedAddrText {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--name);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mallCheckoutPage .savedAddrDel {
    align-self: center;
}

.mallCheckoutPage .mallCheckoutSaveAddr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 0;
    font-size: 13px;
    color: var(--name);
    cursor: pointer;
    user-select: none;
}

.mallCheckoutPage .mallCheckoutSaveAddr input {
    margin: 0;
}

.mallCheckoutGoodsItem--stack {
    align-items: flex-start;
}

.mallCheckoutGoodsItem--stack .mallCheckoutGoodsBody {
    width: 100%;
}

.mallCheckoutSummary--inline {
    margin: 0 24px 12px;
    padding-top: 4px;
}

.mallCheckoutPage .upanAddorderSongList {
    margin-top: 8px;
}

.mallCheckoutPage .submitOrderBox {
    margin: 18px 0 8px;
}

.mallCheckoutPage .submitOrderBox button {
    width: 100%;
    max-width: 320px;
}

.mallCheckoutSaved {
    padding: 8px 24px 24px;
}

.mallCheckoutSavedHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mallCheckoutSavedActions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mallCheckoutNewAddr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    color: var(--accent, var(--title));
    font-size: 12px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.mallCheckoutNewAddr:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
    transform: translateY(-1px);
}

.mallCheckoutSavedHead span {
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutSavedHead h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.mallCheckoutGoods {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mallCheckoutGoodsItem {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.mallCheckoutGoodsItem:last-child {
    border-bottom: none;
}

.mallCheckoutGoodsThumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--bg);
}

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

.mallCheckoutGoodsBody {
    flex: 1;
    min-width: 0;
}

.mallCheckoutGoodsName {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.mallCheckoutGoodsSpec {
    margin-top: 4px;
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutGoodsPrice {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent, var(--title));
}

.mallCheckoutNotice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 24px 20px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--name);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--line);
}

.mallCheckoutNotice i {
    color: var(--accent, var(--title));
    font-size: 16px;
    margin-top: 1px;
}

.mallCheckoutMethods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 24px 6px;
}

.mallCheckoutMethod {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: inherit;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    text-align: left;
}

.mallCheckoutMethod:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 35%, var(--line));
}

.mallCheckoutMethod.is-active {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 55%, var(--line));
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, var(--card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
}

.mallCheckoutMethodIcon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mallCheckoutMethodIcon i {
    font-size: 22px;
}

.mallCheckoutMethodIcon--alipay {
    color: #1677ff;
    background: rgba(22, 119, 255, .12);
}

.mallCheckoutMethodIcon--wechat {
    color: #07c160;
    background: rgba(7, 193, 96, .12);
}

.mallCheckoutMethodText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mallCheckoutMethodText strong {
    font-size: 14px;
    color: var(--text);
}

.mallCheckoutMethodText em {
    font-style: normal;
    font-size: 12px;
    color: var(--name);
}

.mallCheckoutMethodCheck {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
}

.mallCheckoutMethod.is-active .mallCheckoutMethodCheck {
    color: #fff;
    border-color: var(--accent, var(--title));
    background: var(--accent, var(--title));
}

.mallCheckoutSummary {
    margin: 8px 24px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--line);
}

.mallCheckoutSummaryRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--name);
}

.mallCheckoutSummaryRow + .mallCheckoutSummaryRow {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.mallCheckoutSummaryRow strong {
    color: var(--text);
    font-size: 14px;
}

.mallCheckoutSummaryRow--total strong {
    font-size: 18px;
    color: var(--accent, var(--title));
}

.mallCheckoutActions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 24px 24px;
}

.mallCheckoutSubmit,
.mallCheckoutGhost {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.mallCheckoutSubmit {
    border: 0;
    color: #fff;
    background: var(--accent, var(--title));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent, var(--title)) 28%, transparent);
}

.mallCheckoutSubmit:hover {
    transform: translateY(-1px);
}

.mallCheckoutGhost {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--name);
}

.mallCheckoutGhost:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, var(--line));
}

@media (max-width: 768px) {
    .mallCheckoutPage .savedAddrBody {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .mallCheckoutPage .savedAddrText {
        flex-basis: 100%;
        white-space: normal;
    }

    .mallCheckoutHero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 18px 18px;
    }

    .mallCheckoutHeroAmount {
        width: 100%;
        text-align: left;
    }

    .mallCheckoutPage .checkoutRegionGrid {
        grid-template-columns: 1fr;
    }

    .mallCheckoutPanelHead,
    .mallCheckoutForm,
    .mallCheckoutSaved,
    .mallCheckoutGoodsItem,
    .mallCheckoutNotice,
    .mallCheckoutMethods,
    .mallCheckoutSummary,
    .mallCheckoutActions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mallCheckoutNotice {
        margin-left: 16px;
        margin-right: 16px;
    }

    .mallCheckoutPage .submitOrderBox button,
    .mallCheckoutSubmit {
        max-width: none;
    }
}

.mallPayPage .mallPayShell {
    padding: 0;
    overflow: hidden;
}

.mallPayHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 50px 28px 50px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--title)) 14%, transparent) 0%, transparent 55%), var(--bar);
    border-bottom: 1px solid var(--line);
}

.mallPayHeroText h2 {
    margin: 8px 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.mallPayStatus {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, .14);
}

.mallPayOrderNo {
    margin: 0;
    font-size: 13px;
    color: var(--name);
    word-break: break-all;
}

.mallPayHeroAmount {
    text-align: right;
    flex-shrink: 0;
}

.mallPayHeroLabel, .mallPayHeroTime {
    display: block;
    font-size: 12px;
    color: var(--name);
}

.mallPayHeroTime {
    margin-top: 6px;
}

.mallPayHeroPrice {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent, var(--title));
}

.mallPayLayout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.mallPayPanel {
    min-width: 0;
}

.mallPayPanelHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--line);
}

.mallPayPanelHead h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.mallPayPanelHead h3 i {
    color: var(--accent, var(--title));
    font-size: 18px;
}

.mallPayLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent, var(--title));
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
    transition: background .2s ease, transform .2s ease;
}

.mallPayLink:hover {
    background: color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
    transform: translateY(-1px);
}

.mallPayGoods {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mallPayGoodsItem {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.mallPayGoodsItem:last-child {
    border-bottom: none;
}

.mallPayGoodsThumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--bg);
}

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

.mallPayGoodsName {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.mallPayGoodsSpec {
    margin-top: 4px;
    font-size: 12px;
    color: var(--name);
}

.mallPayNotice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 24px 20px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--name);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--line);
}

.mallPayNotice i {
    color: var(--accent, var(--title));
    font-size: 16px;
    margin-top: 1px;
}

.mallPayPanel--checkout {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
}

.mallPayPanel--goods {
    border-bottom: 1px solid var(--line);
}

.mallPayMethods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 6px;
}

.mallPayMethod {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: inherit;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    text-align: left;
}

.mallPayMethod:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 35%, var(--line));
}

.mallPayMethod.is-active {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 6%, var(--card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--title)) 25%, transparent);
}

.mallPayMethodIcon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mallPayMethodIcon i {
    font-size: 26px;
}

.mallPayMethodIcon--alipay {
    background: rgba(22, 119, 255, .12);
    color: #1677ff;
}

.mallPayMethodIcon--wechat {
    background: rgba(7, 193, 96, .12);
    color: #07c160;
}

.mallPayMethodText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mallPayMethodText strong {
    font-size: 14px;
    color: var(--text);
}

.mallPayMethodText em {
    font-style: normal;
    font-size: 11px;
    color: var(--name);
}

.mallPayMethodCheck {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: all .2s ease;
}

.mallPayMethod.is-active .mallPayMethodCheck {
    border-color: var(--accent, var(--title));
    background: var(--accent, var(--title));
    color: #fff;
}

.mallPaySummary {
    margin: 8px 20px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--line);
}

.mallPaySummaryRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--name);
}

.mallPaySummaryRow + .mallPaySummaryRow {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.mallPaySummaryRow strong {
    color: var(--text);
    font-weight: 600;
}

.mallPaySummaryRow--total strong {
    font-size: 18px;
    color: var(--accent, var(--title));
}

.mallPayActions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 22px;
}

.mallPaySubmit, .mallPayGhost {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}

.mallPaySubmit {
    border: none;
    background: var(--accent, var(--title));
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--title)) 28%, transparent);
}

.mallPaySubmit:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.mallPayGhost {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--name);
}

.mallPayGhost:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent, var(--title)) 30%, var(--line));
}

@media (max-width: 960px) {
    .mallPayLayout {
        grid-template-columns: 1fr;
    }

    .mallPayPanel--goods {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .mallPayPanel--checkout {
        position: static;
    }
}

@media (max-width: 640px) {
    .mallPayHero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 18px 18px;
    }

    .mallPayHeroAmount {
        width: 100%;
        text-align: left;
        padding-top: 4px;
    }

    .mallPayHeroPrice {
        font-size: 28px;
    }

    .mallPayPanelHead, .mallPayGoodsItem, .mallPayNotice, .mallPayMethods, .mallPaySummary, .mallPayActions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mallPayNotice {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.submitBtnBox {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--line);
}

#buttonx {
    min-width: 240px;
    height: 48px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 40px;
    border: none;
    background: var(--accent, var(--title));
    color: #fff;
    cursor: pointer;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#buttonx:hover {
    filter: brightness(.92);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
}

@media (max-width: 768px) {
    .orderInfoHeader {
        flex-direction: column;
        align-items: flex-start;
    }

    .orderDetailTable td {
        display: block;
        width: 100%;
        padding: 10px 16px;
    }

    .orderDetailTable .label {
        width: auto;
        background: none;
        padding-bottom: 0;
    }

    .orderDetailTable .value {
        padding-top: 0;
    }

    .payMethodList {
        flex-direction: column;
    }

    .payMethodItem {
        min-width: auto;
    }

    .payAmountCard .payNumber {
        font-size: 30px;
    }

    #buttonx {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .payPage .productItem img {
        width: 38px;
        height: 38px;
    }

    .payPage .productItem .productName {
        font-size: 12px;
    }

    .payAmountCard {
        padding: 18px 16px;
    }

    .payAmountCard .payNumber {
        font-size: 26px;
    }
}

/* 订单详情区块 */
.orderSection {
    margin-bottom: 32px;
}

.sectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.sectionHeader h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sectionHeader h3 i {
    color: var(--accent, var(--title));
    font-size: 20px;
}

.editLink {
    color: var(--accent, var(--title));
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all .2s;
}

.editLink:hover {
    opacity: .8;
}

.orderTable {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.orderRow {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.orderRow:last-child {
    border-bottom: none;
}

.orderHeader {
    background: var(--bar);
    font-weight: 500;
    color: var(--name);
    font-size: 13px;
}

.orderCol {
    padding: 14px 12px;
    display: flex;
    align-items: center;
}

.payCheckoutPage .orderNo {
    width: 180px;
}

.payCheckoutPage .orderInfo {
    flex: 1;
    min-width: 280px;
}

.payCheckoutPage .orderStatus {
    width: 100px;
}

.payCheckoutPage .orderTime {
    width: 140px;
}

.payCheckoutPage .orderAmount {
    width: 120px;
    justify-content: flex-end;
}

.orderProductItem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.orderProductItem:last-child {
    margin-bottom: 0;
}

.productThumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.payCheckoutPage .productName {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.payCheckoutPage .productSpec {
    font-size: 12px;
    color: var(--name);
}

.statusBadge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.statusPending {
    background: color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    color: var(--accent, var(--title));
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
}

.amountPrice {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent, var(--title));
    white-space: nowrap;
}

.paymentAmount {
    background: color-mix(in srgb, var(--accent, var(--title)) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 15%, transparent);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 32px;
}

.amountTip {
    font-size: 16px;
    color: var(--name);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amountHighlight {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent, var(--title));
}

.paymentMethods {
    margin-bottom: 24px;
}

.methodsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.methodItem {
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.methodItem:hover {
    border-color: color-mix(in srgb, var(--accent, var(--title)) 50%, transparent);
    transform: translateY(-2px);
}

.methodItem.vipboxon {
    border-color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 5%, transparent);
}

.methodContent {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.methodIconWrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 32px;
    flex-shrink: 0;
}

.methodIconWrapper.alipayIcon {
    background: linear-gradient(135deg, #1677ff 0%, #0a5fd0 100%);
    color: #fff;
}

.methodIconWrapper.wechatIcon {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
}

.methodInfo {
    flex: 1;
    min-width: 0;
}

.methodName {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    white-space: nowrap;
}

.methodDesc {
    font-size: 12px;
    color: var(--name);
    white-space: nowrap;
}

.methodCheck {
    color: var(--name);
    font-size: 22px;
    transition: all .2s;
    flex-shrink: 0;
}

.methodItem.vipboxon .methodCheck {
    color: var(--accent, var(--title));
}

.deliveryTip {
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--name);
}

.deliveryTip i {
    color: var(--accent, var(--title));
    font-size: 18px;
    flex-shrink: 0;
}

.payCheckoutPage .actionButtons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.payCheckoutPage .actionButtons .securityBtn {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    flex: 1;
    max-width: 220px;
}

.payCheckoutPage .securityBtn_primary:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, var(--title)) 30%, transparent);
}

@media (max-width: 992px) {
    .payCheckoutPage .orderRow {
        flex-wrap: wrap;
    }

    .payCheckoutPage .orderCol {
        width: auto !important;
        flex: unset !important;
    }

    .payCheckoutPage .orderInfo {
        width: 100% !important;
        order: 5;
        border-top: 1px dashed var(--line);
        margin-top: 10px;
        padding-top: 15px;
    }
}

@media (max-width: 768px) {
    .payCheckoutPage .securityCard_body {
        padding: 16px 14px;
    }

    .payCheckoutPage .sectionHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

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

    .payCheckoutPage .actionButtons {
        flex-direction: column;
    }

    .payCheckoutPage .actionButtons .securityBtn {
        max-width: 100%;
        padding: 14px;
    }

    .amountTip {
        flex-direction: column;
        gap: 6px;
    }

    .amountHighlight {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .payCheckoutPage .orderHeader .orderCol {
        font-size: 12px;
        padding: 10px 6px;
    }

    .payCheckoutPage .orderCol {
        padding: 10px 6px;
    }

    .methodItem {
        padding: 16px 14px;
    }

    .methodIconWrapper {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }
}

.u-hidden {
    display: none;
}

.u-contents {
    display: contents;
}

.u-mt-20 {
    margin-top: 20px;
}

.sectionTitle.is-spaced {
    margin-top: 24px;
}

.u-flex-gap-12 {
    display: flex;
    gap: 12px;
    align-items: center;
}

.list_split_page.is-compact {
    padding: 20px;
}

.producer-page {
    display: none;
}

.producer-page.is-active {
    display: contents;
}

.audio-hidden {
    display: none;
}

.load-thumb {
    width: 30px;
}

.empty-state-tip {
    padding: 30px;
    text-align: center;
    color: var(--name);
}

.dl-coin, .dl-coin-val {
    color: var(--dl-coin, #e6a700);
    font-weight: 600;
}

.dl-accent {
    color: var(--accent, var(--title));
}

.dl-danger {
    color: var(--dl-danger, #e34d59);
}

.dl-info {
    color: var(--dl-info, #00c8ff);
}

.dl-price {
    color: var(--dl-price, #f5bc00);
}

.dl-vip {
    color: var(--dl-vip, #e6a700);
    font-weight: 600;
}

.dl-alert {
    color: var(--dl-alert, #e34d59);
    font-weight: 600;
}

.dl-msg-block {
    display: none;
}

.dl-msg-block.is-visible {
    display: block;
}

/* ===== 定制U盘下单页 upanAddorderPage ===== */
.upanAddorderPage .upanAddorderShell {
    padding: 0;
    overflow: hidden;
}

.upanAddorderHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--title)) 14%, transparent) 0%, transparent 55%), var(--bar);
    border-bottom: 1px solid var(--line);
}

.upanAddorderStatus {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent, var(--title));
    background: color-mix(in srgb, var(--accent, var(--title)) 12%, transparent);
}

.upanAddorderHeroText h2 {
    margin: 8px 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

.upanAddorderSub {
    margin: 0;
    font-size: 13px;
    color: var(--name);
}

.upanAddorderHeroAmount {
    text-align: right;
    flex-shrink: 0;
}

.upanAddorderHeroLabel {
    display: block;
    font-size: 12px;
    color: var(--name);
}

.upanAddorderHeroPrice {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent, var(--title));
    line-height: 1.1;
}

.upanAddorderHeroTime {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--name);
}

.upanAddorderLayout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.upanAddorderPanel {
    min-width: 0;
}

.upanAddorderPanel--address {
    border-left: 0;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 88%, transparent);
}

.upanAddorderPanelHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--line);
}

.upanAddorderPanelHead h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.upanAddorderPanelHead h3 i {
    color: var(--accent, var(--title));
    font-size: 18px;
}

.upanAddorderLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent, var(--title));
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--title)) 10%, transparent);
}

.upanAddorderGoods {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.upanAddorderGoodsItem {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.upanAddorderGoodsItem:last-child {
    border-bottom: none;
}

.upanAddorderGoodsThumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--bg);
}

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

.upanAddorderGoodsBody {
    flex: 1;
    min-width: 0;
}

.upanAddorderGoodsName {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.upanAddorderGoodsSpec {
    margin-top: 4px;
    font-size: 12px;
    color: var(--name);
}

.upanAddorderGoodsPrice {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent, var(--title));
}

.upanAddorderSongList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.upanAddorderSongTag {
    display: inline-block;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--name);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upanAddorderSummary {
    margin: 8px 24px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--line);
}

.upanAddorderSummaryRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--name);
}

.upanAddorderSummaryRow strong {
    color: var(--text);
    font-weight: 600;
}

.upanAddorderSummaryRow--total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 14px;
    color: var(--text);
}

.upanAddorderSummaryRow--total strong {
    font-size: 18px;
    color: var(--accent, var(--title));
}

.upanAddorderNotice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 24px 20px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--name);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--line);
}

.upanAddorderNotice i {
    color: var(--accent, var(--title));
    font-size: 16px;
    margin-top: 1px;
}

.upanAddorderForm {
    padding: 16px 24px 0;
}

.upanAddorderFormHint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--name);
    background: color-mix(in srgb, var(--accent, var(--title)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--title)) 18%, transparent);
}

.upanAddorderFormHint i {
    color: var(--accent, var(--title));
    font-size: 15px;
    margin-top: 1px;
}

.upanAddorderSaveAddr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.upanAddorderSaveAddr input {
    margin: 0;
}

.addressFormTable {
    color: var(--text);
}

.upanAddorderPage .addressForm table {
    width: 100%!important;
    max-width: 100%;
}

.upanAddorderPage .addressForm tr {
    display: block;
    margin-bottom: 14px;
}

.upanAddorderPage .addressForm td {
    display: block;
    width: 100%!important;
    padding: 0!important;
}

.upanAddorderPage .addressForm td:first-child {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--name);
    font-weight: 500;
}

.upanAddorderPage .addressForm #address3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    line-height: 1.6;
}

.upanAddorderPage .addressForm #address3 select,
.upanAddorderPage .addressForm #citystr select,
.upanAddorderPage .addressForm #areastr select {
    min-width: 120px;
    max-width: 180px;
}

.upanAddorderPage .addressForm .inputord {
    max-width: none;
    width: 100%;
}

.upanAddorderPage .addressForm #address {
    max-width: 560px;
}

.upanAddorderPage .addressForm #consignee,
.upanAddorderPage .addressForm #mobile,
.upanAddorderPage .addressForm #tencentqq {
    max-width: 320px;
}

.upanAddorderPage .remarkItem {
    margin-top: 8px;
}

.upanAddorderPage .remarkItem input {
    min-width: 0;
    width: 100%;
    max-width: 560px;
}

.upanAddorderPage .submitOrderBox {
    margin: 18px 0 8px;
}

.upanAddorderPage .submitOrderBox button {
    width: 100%;
    max-width: 320px;
}

.upanAddorderSaved {
    padding: 8px 24px 24px;
}

.upanAddorderSavedHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.upanAddorderSavedHead h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.upanAddorderSavedHead span {
    font-size: 12px;
    color: var(--name);
}

.savedAddrList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.savedAddrItem {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
}

.savedAddrPick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.savedAddrPick input {
    margin-top: 4px;
    flex-shrink: 0;
}

.savedAddrBody {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.savedAddrName {
    font-size: 14px;
    color: var(--text);
}

.savedAddrPhone {
    font-size: 12px;
    color: var(--name);
}

.savedAddrText {
    font-size: 12px;
    color: var(--name);
    line-height: 1.5;
    word-break: break-all;
}

.savedAddrDel {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--name);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.savedAddrDel:hover {
    color: #e34d59;
    background: color-mix(in srgb, #e34d59 12%, transparent);
}

.savedAddrEmpty {
    list-style: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--name);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px dashed var(--line);
}

@media (max-width: 960px) {
    .upanAddorderLayout {
        grid-template-columns: 1fr;
    }

    .upanAddorderPanel--address {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 768px) {
    .upanAddorderHero {
        flex-direction: column;
        align-items: flex-start;
    }

    .upanAddorderHeroAmount {
        text-align: left;
        width: 100%;
    }

    .upanAddorderPage .addressForm #address3 select,
    .upanAddorderPage .addressForm #citystr select,
    .upanAddorderPage .addressForm #areastr select,
    .upanAddorderPage .addressForm #address,
    .upanAddorderPage .addressForm #consignee,
    .upanAddorderPage .addressForm #mobile,
    .upanAddorderPage .addressForm #tencentqq,
    .upanAddorderPage .remarkItem input,
    .upanAddorderPage .submitOrderBox button {
        max-width: none;
        width: 100%;
    }
}