:root {
    --bg: #131518;
    --card: #0d0d0d;
    --bar: #0d0d0d;
    --line: #101218;
    --text: #fff;
    --name: #8f8f8f;
    --title: #ff2d55;
    --red: #f44;
    --hot-red: #ff2d55;
    --hover-bg: #1f2229;
    --radius: 12px;
    --font-family: 'OPPOSans2',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --play: #10b981;
    --fav: #f59e0b;
    --burn: #8b5cf6;
    --down: #3b82f6
}

a,a:link,a:visited,a:hover,a:active,a:focus {
    text-decoration: none!important;
    outline: 0
}

a:hover {
    color: var(--title);
    opacity: .85;
    transition: all .2s ease
}

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

.user_left {
    width: 85%
}

.nav-menu {
    background: var(--card,#0d0d0d);
    border-radius: var(--radius,12px);
    overflow: hidden
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 8px 0
}

.nav-item {
    display: block;
    margin: 0;
    padding: 0
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--name,#8f8f8f);
    text-decoration: none;
    transition: all .25s ease;
    position: relative
}

.nav-item a i:first-child {
    font-size: 18px;
    width: 24px;
    color: var(--name,#8f8f8f);
    transition: all .25s ease
}

.nav-item a span {
    flex: 1
}

.nav-item a .arrow {
    font-size: 14px;
    opacity: 0;
    transition: all .25s ease;
    color: var(--title,#2c50ff)
}

.nav-item:hover a {
    background: var(--bg,#131518);
    color: var(--title,#2c50ff);
    padding-left: 22px
}

.nav-item:hover a i:first-child {
    color: var(--title,#2c50ff)
}

.nav-item:hover a .arrow {
    opacity: 1;
    transform: translateX(4px)
}

.nav-item.myqf a,.nav-item.geren a,.nav-item.mima a,.nav-item.ziliao a,.nav-item.fouces a,.nav-item.shoucang a,.nav-item.jiaoyi a,.nav-item.mingxi a,.nav-item.cd a,.nav-item.cdadress a,.nav-item.zhuanji a,.nav-item.music a,.nav-item.djupload a,.nav-item.qianbao a,.nav-item.tixian a,.nav-item.duihuan a {
    background: linear-gradient(90deg,rgba(44,80,255,0.08),transparent);
    color: var(--title,#2c50ff)
}

.nav-item.myqf a i:first-child,.nav-item.geren a i:first-child,.nav-item.mima a i:first-child,.nav-item.ziliao a i:first-child,.nav-item.fouces a i:first-child,.nav-item.shoucang a i:first-child,.nav-item.jiaoyi a i:first-child,.nav-item.mingxi a i:first-child,.nav-item.cd a i:first-child,.nav-item.cdadress a i:first-child,.nav-item.zhuanji a i:first-child,.nav-item.music a i:first-child,.nav-item.djupload a i:first-child,.nav-item.qianbao a i:first-child,.nav-item.tixian a i:first-child,.nav-item.duihuan a i:first-child {
    color: var(--title,#2c50ff)
}

.nav-item.myqf a::before,.nav-item.geren a::before,.nav-item.mima a::before,.nav-item.ziliao a::before,.nav-item.fouces a::before,.nav-item.shoucang a::before,.nav-item.jiaoyi a::before,.nav-item.mingxi a::before,.nav-item.cd a::before,.nav-item.cdadress a::before,.nav-item.zhuanji a::before,.nav-item.music a::before,.nav-item.djupload a::before,.nav-item.qianbao a::before,.nav-item.tixian a::before,.nav-item.duihuan a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--title,#2c50ff);
    border-radius: 0 2px 2px 0
}

.nav-divider {
    height: 1px;
    background: var(--bg);
    margin: 8px 0
}

.mobile-nav-btn {
    position: fixed;
    right: 10px;
    bottom: calc(20%);
    z-index: 999;
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border-radius: 100%;
    color: #fff;
    cursor: pointer;
    width: 44px;
    height: 44px;
    justify-content: center
}

.mobile-nav-btn i {
    font-size: 18px
}

.mobile-nav-btn span {
    font-size: 13px;
    font-weight: 500
}

.mobile-nav-btn:hover {
    transform: scale(1.05);
    background: #3a62ff
}

.mobile-nav-drawer {
    position: fixed;
    right: -280px;
    top: 0;
    bottom: 0;
    width: 280px;
    background: var(--card,#0d0d0d);
    z-index: 1001;
    transition: right .3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.mobile-nav-drawer.open {
    right: 0
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--bg,#131518);
    border-bottom: 1px solid var(--line,#101218);
    height: 50px;
    line-height: 50px
}

.drawer-header i:first-child {
    font-size: 20px;
    color: var(--title,#2c50ff)
}

.drawer-header span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text,#fff)
}

.drawer-header .ri-close-line {
    font-size: 22px;
    color: var(--name,#8f8f8f);
    cursor: pointer;
    padding: 5px;
    transition: all .25s
}

.drawer-header .ri-close-line:hover {
    color: var(--red,#f44)
}

.drawer-list {
    list-style: none;
    margin: 0;
    padding: 8px 0
}

.drawer-item {
    display: block
}

.drawer-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--name,#8f8f8f);
    text-decoration: none;
    transition: all .25s ease
}

.drawer-item a i:first-child {
    font-size: 18px;
    width: 24px
}

.drawer-item a i:last-child {
    margin-left: auto;
    font-size: 14px;
    opacity: 0;
    transition: all .25s;
    color: var(--title,#2c50ff)
}

.drawer-item a span {
    flex: 1
}

.drawer-item:hover a {
    background: var(--bg,#131518);
    color: var(--title,#2c50ff)
}

.drawer-item:hover a i:last-child {
    opacity: 1;
    transform: translateX(4px)
}

.drawer-item.myqf a,.drawer-item.geren a,.drawer-item.mima a,.drawer-item.ziliao a,.drawer-item.fouces a,.drawer-item.shoucang a,.drawer-item.jiaoyi a,.drawer-item.mingxi a,.drawer-item.cd a,.drawer-item.cdadress a,.drawer-item.zhuanji a,.drawer-item.music a,.drawer-item.djupload a,.drawer-item.qianbao a,.drawer-item.tixian a,.drawer-item.duihuan a {
    background: linear-gradient(90deg,rgba(44,80,255,0.08),transparent);
    color: var(--title,#2c50ff);
    border-left: 3px solid var(--title)
}

.drawer-item.myqf a i:first-child,.drawer-item.geren a i:first-child,.drawer-item.mima a i:first-child,.drawer-item.ziliao a i:first-child,.drawer-item.fouces a i:first-child,.drawer-item.shoucang a i:first-child,.drawer-item.jiaoyi a i:first-child,.drawer-item.mingxi a i:first-child,.drawer-item.cd a i:first-child,.drawer-item.cdadress a i:first-child,.drawer-item.zhuanji a i:first-child,.drawer-item.music a i:first-child,.drawer-item.djupload a i:first-child,.drawer-item.qianbao a i:first-child,.drawer-item.tixian a i:first-child,.drawer-item.duihuan a i:first-child {
    color: var(--title,#2c50ff)
}

.drawer-divider {
    height: 1px;
    background: var(--line,#101218);
    margin: 8px 20px
}

.drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity .3s ease
}

.drawer-mask.show {
    display: block;
    opacity: 1
}

@media(min-width: 769px) {
    .user_right {
        display:block
    }

    .mobile-nav-btn,.mobile-nav-drawer,.drawer-mask {
        display: none
    }
}

@media(max-width: 768px) {
    .user_right {
        display:none
    }

    .mobile-nav-btn {
        display: flex
    }
}

@media(max-width: 1200px) {
    .user_right {
        width:100%;
        position: static
    }

    .user_left {
        width: 100%
    }
}

@media(max-width: 768px) {
    .nav-item a {
        padding:10px 16px;
        font-size: 12px
    }

    .nav-item a i:first-child {
        font-size: 16px;
        width: 20px
    }

    .nav-divider {
        margin: 6px 16px
    }
}

@media(max-width: 480px) {
    .nav-item a {
        padding:10px 14px;
        font-size: 12px
    }

    .nav-item a i:first-child {
        font-size: 15px;
        width: 20px
    }
}

.nav-item a .btn-login {
    background: linear-gradient(135deg,var(--title,#ff2d55),#ff6b6b);
    color: #fff;
    border: 0;
    padding: 6px 16px;
    border-radius: 30px;
    margin-left: auto
}

.nav-item a .btn-login:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.index_user_info_card,.index_follow_box,.index_order_section,.index_download_section {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    transition: all .3s ease
}

.index_follow_box {
    height: 100%;
    display: flex;
    flex-direction: column
}

.index_follow_box .index_follow_list {
    flex: 1
}

.index_user_info_card {
    margin-bottom: 24px
}

.index_order_section {
    margin-bottom: 24px
}

.index_download_section {
    margin-bottom: 0
}

.index_order_section .index_order_table,.index_download_section .index_download_table {
    padding: 0
}

@media(max-width: 768px) {
    .index_user_info_card,.index_follow_box,.index_order_section,.index_download_section {
        border-radius:16px
    }
}

@media(max-width: 480px) {
    .index_user_info_card,.index_follow_box,.index_order_section,.index_download_section {
        border-radius:14px
    }
}

.index_user_info_card .index_title_bar,.index_follow_box .index_title_bar,.index_order_section .index_title_bar,.index_download_section .index_title_bar {
    border-bottom: 1px solid var(--line);
    background: var(--card)
}

.index_user_info_card .index_empty_tip,.index_follow_box .index_empty_tip,.index_order_section .index_empty_tip,.index_download_section .index_empty_tip {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

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

@media(max-width: 900px) {
    .index_follow_grid {
        grid-template-columns:repeat(2,1fr);
        gap: 20px
    }
}

@media(max-width: 600px) {
    .index_follow_grid {
        grid-template-columns:1fr;
        gap: 16px
    }
}

.index_follow_list {
    max-height: 380px;
    overflow-y: auto;
    padding: 12px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.index_follow_list::-webkit-scrollbar {
    width: 4px
}

.index_follow_list::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 4px
}

.index_follow_list::-webkit-scrollbar-thumb {
    background: var(--title);
    border-radius: 4px
}

.index_order_section .index_table_wrapper,.index_download_section .index_table_wrapper {
    overflow-x: auto;
    border-radius: 0 0 var(--radius) var(--radius)
}

@media(max-width: 768px) {
    .index_order_section .index_data_table td,.index_download_section .index_data_table td {
        padding:10px 14px
    }
}

.index_user_info_card:last-child,.index_follow_box:last-child,.index_order_section:last-child,.index_download_section:last-child {
    margin-bottom: 0
}

.index_user_info_card .index_title_bar h3 i,.index_follow_box .index_title_bar h3 i,.index_order_section .index_title_bar h3 i,.index_download_section .index_title_bar h3 i {
    color: var(--title)
}

.index_user_info_card,.index_follow_box,.index_order_section,.index_download_section {
    will-change: transform,box-shadow
}

.index_title_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px 12px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.index_title_bar h3 {
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px
}

.index_title_bar h3 i {
    font-size: 1.35rem;
    color: var(--title)
}

.index_user_id_badge {
    background: rgba(255,45,85,0.12);
    padding: 4px 14px;
    border-radius: 30px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--title);
    border: 1px solid rgba(255,45,85,0.2)
}

.index_more_link {
    color: var(--hot-red);
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .2s
}

.index_more_link:hover {
    color: var(--play)
}

.index_avatar_section {
    display: flex;
    gap: 24px;
    padding: 24px 24px 16px 24px;
    flex-wrap: wrap
}

.index_avatar_wrapper {
    position: relative;
    flex-shrink: 0
}

.index_avatar_wrapper img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--title);
    background: var(--line);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3)
}

.index_vip_badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: linear-gradient(135deg,#ff2d55,#ff6b8a);
    color: #fff;
    font-size: .65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 30px;
    border: 1.5px solid var(--card);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2)
}

.index_user_detail_info {
    flex: 1;
    min-width: 200px
}

.index_user_name_display {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text)
}

.index_musician_badge {
    background: rgba(255,45,85,0.15);
    color: var(--title);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.index_stats_area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 12px
}

.index_stat_item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    padding: 6px 14px;
    border-radius: 40px;
    font-size: .8rem;
    color: var(--name);
    transition: all .2s
}

.index_stat_item i {
    font-size: 1rem;
    color: var(--fav)
}

.index_stat_item em {
    font-weight: 700;
    color: var(--title);
    font-style: normal;
    margin: 0 2px
}

.index_stat_item .index_coin_num {
    color: var(--title);
    font-weight: 700
}

.index_action_item {
    cursor: pointer;
    background: rgba(255,45,85,0.1);
    border: 1px solid rgba(255,45,85,0.2)
}

.index_action_item a {
    color: var(--title)
}

.index_action_item:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.index_recharge_action {
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3)
}

.index_recharge_action a,.index_recharge_action i {
    color: #10b981!important
}

.index_recharge_action:hover {
    background: rgba(16,185,129,0.25);
    border-color: rgba(16,185,129,0.5)
}

.index_vip_action {
    background: linear-gradient(135deg,rgba(255,45,85,0.15),rgba(139,92,246,0.15));
    border: 1px solid rgba(255,45,85,0.3)
}

.index_vip_action a,.index_vip_action i {
    color: #ff2d55!important
}

.index_vip_action:hover {
    background: linear-gradient(135deg,rgba(255,45,85,0.25),rgba(139,92,246,0.25));
    border-color: rgba(255,45,85,0.5)
}

.index_sign_action.signed {
    background: rgba(143,143,143,0.15);
    border-color: rgba(143,143,143,0.3);
    opacity: .7;
    cursor: default
}

.index_sign_action.signed a {
    color: var(--name);
    cursor: default
}

.index_login_info_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 16px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid var(--line);
    margin-top: 4px
}

.index_info_item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    background: var(--card);
    padding: 10px 14px;
    border-radius: var(--radius);
    transition: background .2s
}

.index_info_item i {
    font-size: 1.2rem;
    color: var(--title);
    opacity: .8
}

.index_info_content {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.index_info_label {
    color: var(--name);
    font-size: .7rem
}

.index_info_value {
    font-weight: 500;
    color: var(--text);
    font-size: .85rem;
    word-break: break-all
}

.index_follow_list {
    padding: 12px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.index_follow_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--bar);
    transition: all .2s;
    border: 1px solid #00000
}

.index_follow_item:hover {
    background: rgba(255,45,85,0.2);
    border-color: var(--hot-red);
    transform: translateX(2px)
}

.index_follow_item img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--line);
    flex-shrink: 0
}

.index_follow_info {
    flex: 1;
    min-width: 0
}

.index_follow_name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.index_follow_fans {
    font-size: .7rem;
    color: var(--name)
}

.index_follow_fans em {
    font-weight: 600;
    color: var(--title);
    font-style: normal
}

.index_follow_item i {
    color: var(--name);
    font-size: 1rem;
    flex-shrink: 0
}

.index_table_wrapper {
    overflow-x: auto;
    margin: 0;
    border-radius: 0 0 var(--radius) var(--radius)
}

.index_data_table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem
}

.index_data_table th {
    text-align: left;
    padding: 14px 16px;
    background: var(--card);
    color: var(--name);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.index_data_table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--name)
}

@media(max-width: 768px) {
    .index_data_table thead {
        display:none
    }

    .index_data_table tbody tr {
        display: block;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--line)
    }

    .index_data_table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        text-align: right;
        gap: 12px;
        flex-wrap: wrap
    }

    .index_data_table td:last-child {
        border-bottom: 0
    }

    .index_data_table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--name);
        text-align: left;
        flex-shrink: 0;
        min-width: 60px;
        font-size: .75rem
    }

    .index_actions {
        justify-content: flex-end
    }
}

.index_price {
    font-weight: 600;
    color: var(--title)
}

.index_tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500;
    margin-right: 4px
}

.index_tag_danger {
    background: rgba(255,68,68,0.15);
    color: var(--red)
}

.index_tag_success {
    background: rgba(16,185,129,0.15);
    color: #10b981
}

.index_tag_wechat {
    background: rgba(7,193,96,0.15);
    color: #07c160
}

.index_tag_alipay {
    background: rgba(22,119,255,0.15);
    color: #1677ff
}

.index_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.index_status_wait {
    background: rgba(245,158,11,0.15);
    color: #f59e0b
}

.index_status_success {
    background: rgba(16,185,129,0.15);
    color: #10b981
}

.index_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.index_btn_link,.index_btn_pay,.index_btn_cancel {
    font-size: .7rem;
    padding: 5px 12px;
    border-radius: 30px;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.index_btn_link {
    background: rgba(255,255,255,0.05);
    color: var(--name);
    border: 1px solid var(--line)
}

.index_btn_link:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title)
}

.index_btn_pay {
    background: var(--title);
    border: 0;
    color: #fff
}

.index_btn_pay:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.index_btn_cancel {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--name)
}

.index_btn_cancel:hover {
    border-color: var(--red);
    color: var(--red)
}

.index_song_info {
    display: flex;
    align-items: center;
    gap: 10px
}

.index_song_info i {
    color: var(--title);
    font-size: 1.1rem
}

.index_song_info a {
    color: var(--name);
    transition: color .2s
}

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

.index_expiry_badge {
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 30px;
    font-size: .7rem;
    color: var(--name)
}

.index_action_play {
    font-size: .7rem;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(16,185,129,0.12);
    color: var(--play);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .2s;
    border: 1px solid rgba(16,185,129,0.25)
}

.index_action_play:hover {
    background: rgba(16,185,129,0.25);
    color: #34d399;
    border-color: rgba(16,185,129,0.5);
    transform: translateY(-1px)
}

.index_action_fav {
    font-size: .7rem;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(245,158,11,0.12);
    color: var(--fav);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .2s;
    border: 1px solid rgba(245,158,11,0.25)
}

.index_action_fav:hover {
    background: rgba(245,158,11,0.25);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.5);
    transform: translateY(-1px)
}

.index_action_burn {
    font-size: .7rem;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(139,92,246,0.12);
    color: var(--burn);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .2s;
    border: 1px solid rgba(139,92,246,0.25)
}

.index_action_burn:hover {
    background: rgba(139,92,246,0.25);
    color: #a78bfa;
    border-color: rgba(139,92,246,0.5);
    transform: translateY(-1px)
}

.index_action_down {
    font-size: .7rem;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(59,130,246,0.12);
    color: var(--down);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .2s;
    border: 1px solid rgba(59,130,246,0.25)
}

.index_action_down:hover {
    background: rgba(59,130,246,0.25);
    color: #60a5fa;
    border-color: rgba(59,130,246,0.5);
    transform: translateY(-1px)
}

.index_empty_tip {
    text-align: center;
    padding: 48px 24px;
    color: var(--name);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.index_empty_tip i {
    font-size: 3rem;
    color: var(--title);
    opacity: .5
}

.index_empty_tip p {
    font-size: .9rem
}

.index_empty_btn {
    background: rgba(255,45,85,0.12);
    padding: 8px 24px;
    border-radius: 40px;
    color: var(--title);
    font-size: .8rem;
    transition: all .2s;
    border: 1px solid rgba(255,45,85,0.2)
}

.index_empty_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.index_order_info {
    font-size: .8rem
}

.index_order_info em {
    color: var(--title);
    font-style: normal;
    font-weight: 600
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background: var(--title);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #ff5c7c
}

@media(max-width: 480px) {
    .index_title_bar {
        padding:14px 16px
    }

    .index_title_bar h3 {
        font-size: 1rem
    }

    .index_avatar_section {
        padding: 16px;
        gap: 16px
    }

    .index_avatar_wrapper img {
        width: 70px;
        height: 70px
    }

    .index_user_name_display {
        font-size: 1rem
    }

    .index_stats_area .index_stat_item:nth-child(1),.index_stats_area .index_stat_item:nth-child(2),.index_stats_area .index_stat_item:nth-child(3) {
        display: none
    }

    .index_stats_area {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 8px
    }

    .index_stats_area .index_stat_item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 10px;
        font-size: .7rem;
        margin: 0;
        width: 100%
    }

    .index_login_info_grid {
        padding: 12px 0;
        gap: 10px;
        grid-template-columns: repeat(2,1fr)
    }

    .index_info_item {
        padding: 8px 12px
    }
}

.index_box:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.4)
}

.index_vip_badge,.index_stat_item em {
    text-shadow: 0 0 4px rgba(255,45,85,0.3)
}

.index_data_table td a:hover {
    text-decoration: underline
}

.index_msg_link {
    color: var(--title);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem
}

.index_msg_link:hover {
    text-decoration: underline
}

.index_msg_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    border-radius: 30px;
    line-height: 1
}

.index_login_info_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 16px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid var(--line);
    margin-top: 4px
}

.index_info_item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    background: rgba(255,255,255,0.02);
    padding: 10px 14px;
    border-radius: var(--radius);
    transition: background .2s
}

.index_info_item i {
    font-size: 1.2rem;
    color: var(--title);
    opacity: .8
}

.index_info_content {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.index_info_label {
    color: var(--name);
    font-size: .7rem
}

.index_info_value {
    font-weight: 500;
    color: var(--text);
    font-size: .85rem;
    word-break: break-all
}

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

.profile_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.profile_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.profile_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.profile_header_info h1 i {
    color: var(--title)
}

.profile_header_desc {
    color: var(--name);
    font-size: .85rem
}

.profile_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.profile_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.profile_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.profile_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.profile_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.profile_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.profile_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.profile_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.profile_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.profile_card_body {
    padding: 28px 32px
}

.profile_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.profile_form_label {
    width: 100px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem
}

.profile_form_value {
    flex: 1;
    padding: 10px 0;
    color: var(--name);
    border-bottom: 1px dashed var(--line);
    font-size: .9rem
}

.profile_form_control {
    flex: 1
}

.profile_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s;
    max-width: 100%
}

.profile_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.profile_form_input::placeholder {
    color: var(--name)
}

.profile_form_select {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    width: 100%
}

.profile_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.profile_distpicker_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.profile_distpicker_group .profile_form_select {
    flex: 1;
    min-width: 120px
}

.profile_form_actions {
    display: flex;
    gap: 16px;
    padding: 20px 32px 32px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap
}

.profile_btn_security {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 0
}

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

.profile_btn_security_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.profile_btn_security_primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.profile_btn_security_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.profile_btn_security_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

@media(max-width: 768px) {
    .profile_user_left {
        padding:16px 12px
    }

    .profile_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .profile_header_info h1 {
        font-size: 1.3rem
    }

    .profile_card_body {
        padding: 20px
    }

    .profile_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .profile_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .profile_form_control {
        width: 100%
    }

    .profile_form_input {
        max-width: 100%
    }

    .profile_distpicker_group {
        flex-direction: column
    }

    .profile_distpicker_group .profile_form_select {
        width: 100%
    }

    .profile_form_actions {
        padding: 16px 20px 24px;
        flex-direction: column
    }

    .profile_btn_security {
        justify-content: center
    }
}

@media(max-width: 480px) {
    .profile_header_tabs {
        width:100%
    }

    .profile_tabs_group {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%
    }

    .profile_btn {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: .8rem
    }

    .profile_alert_tip {
        padding: 10px 16px;
        font-size: .8rem
    }
}

.profile_btn_security_primary i,.profile_btn_security_default i,.profile_btn_primary i,.profile_btn_default i {
    font-size: 1rem
}

.avatar_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.avatar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.avatar_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.avatar_header_info h1 i {
    color: var(--title)
}

.avatar_header_desc {
    color: var(--name);
    font-size: .85rem
}

.avatar_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.avatar_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.avatar_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.avatar_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.avatar_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.avatar_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.avatar_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.avatar_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.avatar_alert_tip_danger {
    background: rgba(255,68,68,0.1);
    border-left-color: var(--red)
}

.avatar_alert_tip_danger i {
    color: var(--red)
}

.avatar_alert_tip strong {
    color: var(--title);
    font-weight: 600
}

.avatar_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.avatar_card_header {
    padding: 18px 28px;
    border-bottom: 1px solid var(--line)
}

.avatar_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.avatar_card_title i {
    font-size: 1.3rem;
    color: var(--title)
}

.avatar_card_title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text)
}

.avatar_card_body {
    padding: 40px 28px
}

.avatar_upload_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.avatar_cover_preview {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--line);
    transition: all .3s ease;
    margin-bottom: 20px
}

.avatar_cover_preview:hover {
    border-color: var(--title);
    transform: scale(1.02)
}

.avatar_cover_preview:hover .avatar_cover_overlay {
    opacity: 1
}

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

.avatar_cover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer
}

.avatar_cover_overlay i {
    font-size: 2rem;
    color: var(--title)
}

.avatar_cover_overlay span {
    font-size: .75rem
}

.avatar_cover_hint {
    color: var(--name);
    font-size: .8rem;
    text-align: center;
    margin-top: 8px
}

@media(max-width: 768px) {
    .avatar_user_left {
        padding:16px 12px
    }

    .avatar_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .avatar_header_info h1 {
        font-size: 1.3rem
    }

    .avatar_header_tabs {
        width: 100%
    }

    .avatar_tabs_group {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%
    }

    .avatar_btn {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: .8rem
    }

    .avatar_card_header {
        padding: 14px 20px
    }

    .avatar_card_body {
        padding: 30px 20px
    }

    .avatar_cover_preview {
        width: 140px;
        height: 140px
    }
}

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

    .avatar_btn {
        padding: 6px 10px;
        font-size: .75rem
    }

    .avatar_btn i {
        font-size: .8rem
    }

    .avatar_cover_preview {
        width: 120px;
        height: 120px
    }

    .avatar_cover_overlay i {
        font-size: 1.5rem
    }

    .avatar_cover_overlay span {
        font-size: .7rem
    }

    .avatar_cover_hint {
        font-size: .7rem
    }

    .avatar_alert_tip {
        padding: 10px 16px;
        font-size: .8rem
    }
}

.pwd_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.pwd_header {
    padding: 50px 35px
}

.pwd_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.pwd_header_info h1 i {
    color: var(--title)
}

.pwd_header_desc {
    color: var(--name);
    font-size: .85rem
}

.pwd_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.pwd_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.pwd_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.pwd_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.pwd_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.pwd_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.pwd_status_warning {
    background: rgba(255,45,85,0.12);
    color: var(--title)
}

.pwd_card_body {
    padding: 24px 28px
}

.pwd_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.pwd_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.pwd_form_label i {
    color: var(--title);
    font-size: 1rem
}

.pwd_form_control {
    flex: 1
}

.pwd_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.pwd_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.pwd_form_input::placeholder {
    color: var(--name)
}

.pwd_form_select {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    width: 100%;
    max-width: 250px
}

.pwd_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.pwd_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.pwd_form_error {
    color: var(--red);
    font-size: .7rem;
    margin-top: 6px
}

.pwd_form_error span {
    color: var(--red)
}

.pwd_verify_info_box {
    background: rgba(255,45,85,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem
}

.pwd_verify_info_box strong {
    color: var(--title)
}

.pwd_code_input_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.pwd_code_input {
    max-width: 180px
}

.pwd_code_btn {
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--title);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s
}

.pwd_code_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.pwd_code_timer {
    color: var(--name);
    font-size: .75rem;
    margin-top: 8px
}

.pwd_code_timer span {
    color: var(--title);
    font-weight: 600
}

.pwd_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 8px;
    flex-wrap: wrap
}

.pwd_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.pwd_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.pwd_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.pwd_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.pwd_password_tips {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.pwd_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.pwd_tip_item i {
    color: var(--title);
    font-size: 1rem
}

@media(max-width: 768px) {
    .pwd_user_left {
        padding:16px 12px
    }

    .pwd_header {
        padding: 16px 20px
    }

    .pwd_header_info h1 {
        font-size: 1.3rem
    }

    .pwd_card_body {
        padding: 20px
    }

    .pwd_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .pwd_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .pwd_form_control {
        width: 100%
    }

    .pwd_form_input {
        max-width: 100%
    }

    .pwd_form_select {
        max-width: 100%
    }

    .pwd_code_input_group {
        flex-direction: column;
        align-items: stretch
    }

    .pwd_code_input {
        max-width: 100%
    }

    .pwd_code_btn {
        text-align: center;
        justify-content: center
    }

    .pwd_form_actions {
        flex-direction: column
    }

    .pwd_btn {
        justify-content: center
    }
}

@media(max-width: 480px) {
    .pwd_card_header {
        padding:12px 16px
    }

    .pwd_card_title h3 {
        font-size: .9rem
    }

    .pwd_form_label {
        font-size: .85rem
    }

    .pwd_form_input,.pwd_form_select {
        padding: 8px 12px;
        font-size: .85rem
    }

    .pwd_code_btn {
        padding: 6px 16px;
        font-size: .75rem
    }

    .pwd_tip_item {
        font-size: .75rem
    }
}

.safe_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.safe_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.safe_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.safe_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.safe_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.safe_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.safe_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.safe_status_warning {
    background: rgba(255,45,85,0.12);
    color: var(--title)
}

.safe_status_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red)
}

.safe_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.safe_status_info {
    background: rgba(59,130,246,0.12);
    color: #3b82f6
}

.safe_content {
    padding: 20px 24px
}

.safe_tips {
    margin-bottom: 20px
}

.safe_tips p {
    color: var(--text);
    font-size: .85rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px
}

.safe_tips p i {
    color: var(--title)
}

.safe_tips ul {
    list-style: none;
    padding-left: 22px
}

.safe_tips li {
    color: var(--name);
    font-size: .8rem;
    margin-bottom: 6px;
    position: relative
}

.safe_tips li::before {
    content: "•";
    color: var(--title);
    position: absolute;
    left: -14px
}

.safe_danger_text {
    color: var(--red)!important
}

.safe_btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.safe_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.safe_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.safe_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.safe_btn_warning {
    background: rgba(255,45,85,0.12);
    color: var(--title);
    border: 1px solid rgba(255,45,85,0.3)
}

.safe_btn_warning:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.safe_btn_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(255,68,68,0.3)
}

.safe_btn_danger:hover {
    background: rgba(255,68,68,0.2);
    transform: translateY(-1px)
}

.safe_bind_info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0
}

.safe_bind_icon i {
    font-size: 1.5rem;
    color: #10b981
}

.safe_bind_text {
    color: var(--text);
    font-size: .9rem
}

.safe_bind_text strong {
    color: var(--title)
}

.safe_bind_link {
    color: var(--title);
    font-size: .8rem;
    text-decoration: none;
    margin-left: auto
}

.safe_bind_link:hover {
    text-decoration: underline
}

@media(max-width: 768px) {
    .safe_user_left {
        padding:16px 12px
    }

    .safe_card_header {
        padding: 12px 16px
    }

    .safe_content {
        padding: 16px
    }

    .safe_bind_info {
        flex-direction: column;
        align-items: flex-start
    }

    .safe_bind_link {
        margin-left: 0
    }

    .safe_btn {
        width: 100%;
        justify-content: center
    }
}

@media(max-width: 480px) {
    .safe_card_title h3 {
        font-size:.9rem
    }

    .safe_tips li {
        font-size: .75rem
    }

    .safe_bind_text {
        font-size: .8rem
    }
}

.bind_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.bind_header {
    padding: 50px 35px
}

.bind_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.bind_header_info h1 i {
    color: var(--title)
}

.bind_header_desc {
    color: var(--name);
    font-size: .85rem
}

.bind_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.bind_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.bind_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.bind_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.bind_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.bind_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.bind_status_warning {
    background: rgba(255,45,85,0.12);
    color: var(--title)
}

.bind_card_body {
    padding: 24px 28px
}

.bind_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.bind_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.bind_form_label i {
    color: var(--title);
    font-size: 1rem
}

.bind_form_control {
    flex: 1
}

.bind_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.bind_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.bind_form_input::placeholder {
    color: var(--name)
}

.bind_form_error {
    color: var(--red);
    font-size: .7rem;
    margin-top: 6px
}

.bind_form_error span {
    color: var(--red)
}

.bind_phone_box {
    background: var(--bar);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.bind_phone_box i {
    color: var(--title)
}

.bind_phone_box strong {
    color: var(--title)
}

.bind_code_input_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.bind_code_input {
    max-width: 180px
}

.bind_code_btn {
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--title);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s
}

.bind_code_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.bind_code_timer {
    color: var(--name);
    font-size: .75rem;
    margin-top: 8px
}

.bind_code_timer span {
    color: var(--title);
    font-weight: 600
}

.bind_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.bind_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.bind_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.bind_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.bind_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.bind_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.bind_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.bind_tip_item i {
    color: var(--title);
    font-size: 1rem
}

@media(max-width: 768px) {
    .bind_user_left {
        padding:16px 12px
    }

    .bind_header {
        padding: 16px 20px
    }

    .bind_header_info h1 {
        font-size: 1.3rem
    }

    .bind_card_body {
        padding: 20px
    }

    .bind_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .bind_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .bind_form_control {
        width: 100%
    }

    .bind_form_input {
        max-width: 100%
    }

    .bind_code_input_group {
        flex-direction: column;
        align-items: stretch
    }

    .bind_code_input {
        max-width: 100%
    }

    .bind_code_btn {
        text-align: center;
        justify-content: center
    }

    .bind_form_actions {
        flex-direction: column
    }

    .bind_btn {
        justify-content: center
    }
}

@media(max-width: 480px) {
    .bind_card_header {
        padding:12px 16px
    }

    .bind_card_title h3 {
        font-size: .9rem
    }

    .bind_tip_item {
        font-size: .75rem
    }
}

.oauth_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.oauth_header {
    padding: 50px 35px
}

.oauth_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.oauth_header_info h1 i {
    color: var(--title)
}

.oauth_header_desc {
    color: var(--name);
    font-size: .85rem
}

.oauth_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.oauth_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.oauth_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.oauth_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.oauth_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.oauth_card_body {
    padding: 8px 0
}

.oauth_bind_item {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
    flex-wrap: wrap
}

.oauth_bind_item:last-child {
    border-bottom: 0
}

.oauth_bind_icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0
}

.oauth_bind_icon_qq {
    background: rgba(18,150,236,0.12);
    color: #1296ec
}

.oauth_bind_icon_wechat {
    background: rgba(7,193,96,0.12);
    color: #07c160
}

.oauth_bind_info {
    flex: 1
}

.oauth_bind_name {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 4px
}

.oauth_bind_desc {
    color: var(--name);
    font-size: .75rem
}

.oauth_bind_action {
    flex-shrink: 0
}

.oauth_bind_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

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

.oauth_bind_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.oauth_bind_status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 500
}

.oauth_bind_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.oauth_bind_status_success i {
    font-size: .9rem
}

.oauth_tips_list {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.oauth_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.oauth_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

@media(max-width: 768px) {
    .oauth_user_left {
        padding:16px 12px
    }

    .oauth_header {
        padding: 16px 20px
    }

    .oauth_header_info h1 {
        font-size: 1.3rem
    }

    .oauth_bind_item {
        padding: 16px 20px;
        flex-direction: column;
        text-align: center
    }

    .oauth_bind_action {
        width: 100%
    }

    .oauth_bind_btn {
        width: 100%;
        justify-content: center
    }

    .oauth_bind_status {
        width: 100%;
        justify-content: center
    }

    .oauth_tips_list {
        padding: 16px 20px
    }
}

@media(max-width: 480px) {
    .oauth_card_header {
        padding:12px 16px
    }

    .oauth_card_title h3 {
        font-size: .9rem
    }

    .oauth_bind_icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem
    }

    .oauth_bind_name {
        font-size: .9rem
    }

    .oauth_tip_item {
        font-size: .75rem
    }
}
.follow_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.follow_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px; 
    flex-wrap: nowrap;
    gap: 30px;
}

.follow_header_info {
    flex-shrink: 0; /* 标题区域不压缩 */
}

.follow_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.follow_header_info h1 i {
    color: var(--title)
}

.follow_header_desc {
    color: var(--name);
    font-size: .85rem
}

/* 核心修改：tabs 自适应宽度，右对齐 */
.follow_header_tabs {
    width: auto;
    margin-left: auto;
}

.follow_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end; /* 标签按钮右对齐 */
}

.follow_tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    text-decoration: none
}

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

.follow_tab_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.follow_tab_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.follow_tab_count {
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .7rem
}


.follow_action_bar {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.follow_action_bar_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.follow_action_bar_left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
}

.follow_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: .85rem
}

.follow_checkbox_label input {
    display: none
}

.follow_checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.05)
}

.follow_checkbox_label input:checked+.follow_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 12px
}

.follow_label_text {
    color: var(--text)
}

.follow_action_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

.follow_action_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.follow_action_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.follow_action_btn_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(255,68,68,0.3)
}

.follow_action_btn_danger:hover {
    background: rgba(255,68,68,0.2);
    transform: translateY(-1px)
}

.follow_action_bar_right {
    color: var(--name);
    font-size: .85rem
}

.follow_action_bar_right strong {
    color: var(--title);
    font-size: 1rem
}

.follow_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 24px
}

.follow_card {
    background: var(--bar);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all .3s ease;
    position: relative
}

.follow_card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,45,85,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3)
}

.follow_card_check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10
}

.follow_checkbox_custom {
    display: inline-block;
    cursor: pointer
}

.follow_checkbox_custom input {
    display: none
}

.follow_checkbox_custom .follow_checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--line);
    border-radius: 4px;
    background: rgba(0,0,0,0.5)
}

.follow_checkbox_custom input:checked+.follow_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 12px
}

.follow_card_cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden
}

.follow_card_cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.follow_card:hover .follow_card_cover img {
    transform: scale(1.05)
}

.follow_card_info {
    padding: 14px 16px
}

.follow_card_title {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 8px
}

.follow_card_title a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

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

.follow_card_stats {
    display: flex;
    align-items: center;
    gap: 12px
}

.follow_stat_item {
    color: var(--name);
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.follow_stat_item i {
    color: var(--title);
    font-size: .8rem
}

.follow_stat_item strong {
    color: var(--title)
}

.follow_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.follow_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.follow_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .follow_user_left {
        padding:16px 12px
    }

    .follow_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .follow_header_info h1 {
        font-size: 1.3rem
    }

    .follow_tabs_group {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap
    }

    .follow_tab_count {
        display: none
    }

    .follow_tab {
        flex: 1;
        justify-content: center;
        padding: 6px 12px;
        font-size: .75rem
    }

    .follow_action_bar_top {
        flex-direction: column;
        align-items: flex-start
    }

    .follow_grid {
        grid-template-columns: repeat(4,1fr);
        padding: 16px;
        gap: 16px
    }
}

@media(max-width: 480px) {
    .follow_grid {
        grid-template-columns:repeat(1,1fr)
    }

    .follow_action_bar_left {
        width: 100%;
        justify-content: space-between
    }

    .follow_action_btn {
        padding: 5px 12px;
        font-size: .75rem
    }

    .follow_card_title {
        font-size: .85rem
    }
}

.musicbox_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.musicbox_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.musicbox_header_info h1 i {
    color: var(--title)
}

.musicbox_header_desc {
    color: var(--name);
    font-size: .85rem
}

.musicbox_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.musicbox_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.musicbox_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.musicbox_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.musicbox_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.musicbox_action_bar {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.musicbox_action_bar_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.musicbox_action_bar_left,.musicbox_action_bar_right {
    color: var(--name);
    font-size: .85rem
}

.musicbox_action_bar_left strong {
    color: var(--title);
    font-size: 1rem
}

.musicbox_stat_text {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.musicbox_link_highlight {
    color: var(--title);
    text-decoration: none
}

.musicbox_link_highlight:hover {
    text-decoration: underline
}

.musicbox_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 24px
}

.musicbox_card {
    background: var(--bar);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all .3s ease
}

.musicbox_card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,45,85,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3)
}

.musicbox_card_cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden
}

.musicbox_card_cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.musicbox_card:hover .musicbox_card_cover img {
    transform: scale(1.05)
}

.musicbox_card_count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.musicbox_card_count i {
    color: var(--title);
    font-size: .7rem
}

.musicbox_card_info {
    padding: 14px 16px
}

.musicbox_card_title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px
}

.musicbox_card_title a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

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

.musicbox_card_actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.musicbox_action {
    color: var(--name);
    font-size: .75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .2s;
    padding: 4px 8px;
    border-radius: 20px
}

.musicbox_action:hover {
    color: var(--title);
    background: rgba(255,45,85,0.1)
}

.musicbox_action_danger:hover {
    color: var(--red);
    background: rgba(255,68,68,0.1)
}

.musicbox_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.musicbox_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.musicbox_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .musicbox_user_left {
        padding:16px 12px
    }

    .musicbox_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .musicbox_header_info h1 {
        font-size: 1.3rem
    }

    .musicbox_tabs_group {
        width: 100%
    }

    .musicbox_btn {
        flex: 1;
        justify-content: center
    }

    .musicbox_action_bar_top {
        padding: 16px 15px;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
        gap: 20px
    }

    .musicbox_action_bar_left {
        flex: 1;
        text-align: left
    }

    .musicbox_action_bar_right {
        flex: 1;
        text-align: right
    }

    .musicbox_action_bar_left,.musicbox_action_bar_right {
        color: var(--name);
        font-size: .85rem;
        white-space: nowrap
    }

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

@media(max-width: 480px) {
    .musicbox_card_title {
        font-size:.9rem
    }

    .musicbox_card_actions {
        gap: 8px
    }

    .musicbox_action {
        font-size: .7rem;
        padding: 2px 6px
    }
}

.musicbox_detail_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_detail_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    flex-wrap: wrap;
    gap: 16px
}

.musicbox_detail_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.musicbox_detail_header_info h1 i {
    color: var(--title)
}

.musicbox_detail_header_desc {
    color: var(--name);
    font-size: .85rem
}

.musicbox_detail_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.musicbox_detail_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.musicbox_detail_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.musicbox_detail_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_detail_stat_tip {
    background: rgba(0,160,80,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.musicbox_detail_stat_tip i {
    color: #00a050;
    font-size: 1.1rem
}

.musicbox_detail_stat_tip strong {
    color: #00a050
}

.musicbox_detail_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.musicbox_detail_form_select {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 16px;
    color: var(--text);
    font-size: .85rem;
    cursor: pointer
}

.musicbox_detail_song_list {
    overflow-x: auto
}

.musicbox_detail_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

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

.musicbox_detail_col_id {
    width: 100px;
    flex-shrink: 0
}

.musicbox_detail_col_name {
    flex: 1
}

.musicbox_detail_col_genre {
    width: 150px;
    flex-shrink: 0
}

.musicbox_detail_col_action {
    width: 120px;
    flex-shrink: 0
}

.musicbox_detail_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.musicbox_detail_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.musicbox_detail_song_id {
    color: var(--name);
    font-size: .85rem
}

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

.musicbox_detail_song_link:hover {
    color: var(--title)
}

.musicbox_detail_genre_link {
    color: var(--name);
    text-decoration: none;
    font-size: .8rem;
    transition: color .2s
}

.musicbox_detail_genre_link:hover {
    color: var(--title)
}

.musicbox_detail_action_icons {
    display: flex;
    gap: 12px
}

.musicbox_detail_action_icon {
    color: var(--name);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all .2s
}

.musicbox_detail_action_icon:hover {
    color: var(--title);
    transform: scale(1.1)
}

.musicbox_detail_action_icon_danger:hover {
    color: var(--red)
}

.musicbox_detail_checkbox_custom {
    display: inline-block;
    cursor: pointer
}

.musicbox_detail_checkbox_custom input {
    display: none
}

.musicbox_detail_checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.05)
}

.musicbox_detail_checkbox_custom input:checked+.musicbox_detail_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 11px
}

.musicbox_detail_batch_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--card);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.musicbox_detail_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: .85rem
}

.musicbox_detail_checkbox_label input {
    display: none
}

.musicbox_detail_label_text {
    color: var(--text)
}

.musicbox_detail_batch_buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.musicbox_detail_batch_btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 6px 16px;
    color: var(--text);
    font-size: .75rem;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.musicbox_detail_batch_btn:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.musicbox_detail_batch_btn_danger:hover {
    background: rgba(255,68,68,0.1);
    color: var(--red);
    border-color: rgba(255,68,68,0.3)
}

.musicbox_detail_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.musicbox_detail_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .musicbox_detail_left {
        padding:16px 12px
    }

    .musicbox_detail_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .musicbox_detail_header_info h1 {
        font-size: 1.3rem
    }

    .musicbox_detail_list_header {
        display: none
    }

    .musicbox_detail_list_row {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .musicbox_detail_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .musicbox_detail_card_label {
        width: 80px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .musicbox_detail_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem
    }

    .musicbox_detail_batch_bar {
        flex-direction: column
    }

    .musicbox_detail_batch_buttons {
        justify-content: center
    }
}

@media(max-width: 480px) {
    .musicbox_detail_title_card {
        flex-direction:column;
        text-align: center
    }

    .musicbox_detail_batch_btn {
        padding: 4px 12px;
        font-size: .7rem
    }

    .musicbox_detail_action_icons {
        gap: 8px
    }
}

.musicbox_create_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_create_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.musicbox_create_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.musicbox_create_header_info h1 i {
    color: var(--title)
}

.musicbox_create_header_desc {
    color: var(--name);
    font-size: .85rem
}

.musicbox_create_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.musicbox_create_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.musicbox_create_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.musicbox_create_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_create_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.musicbox_create_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.musicbox_create_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_create_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.musicbox_create_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.musicbox_create_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.musicbox_create_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.musicbox_create_card_body {
    padding: 24px 28px
}

.musicbox_create_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.musicbox_create_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.musicbox_create_form_label i {
    color: var(--title);
    font-size: 1rem
}

.musicbox_create_form_control {
    flex: 1
}

.musicbox_create_form_input {
    width: 100%;
    max-width: 400px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.musicbox_create_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.musicbox_create_form_input::placeholder {
    color: var(--name)
}

.musicbox_create_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.musicbox_create_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.musicbox_create_btn_submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.musicbox_create_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_create_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.musicbox_create_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.musicbox_create_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.musicbox_create_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.musicbox_create_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

@media(max-width: 768px) {
    .musicbox_create_left {
        padding:16px 12px
    }

    .musicbox_create_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .musicbox_create_header_info h1 {
        font-size: 1.3rem
    }

    .musicbox_create_tabs_group {
        width: 100%
    }

    .musicbox_create_btn {
        flex: 1;
        justify-content: center
    }

    .musicbox_create_card_body {
        padding: 20px
    }

    .musicbox_create_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .musicbox_create_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .musicbox_create_form_control {
        width: 100%
    }

    .musicbox_create_form_input {
        max-width: 100%
    }

    .musicbox_create_form_actions {
        flex-direction: column
    }

    .musicbox_create_btn_submit {
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 480px) {
    .musicbox_create_card_header {
        padding:12px 16px
    }

    .musicbox_create_card_title h3 {
        font-size: .9rem
    }

    .musicbox_create_tip_item {
        font-size: .75rem
    }
}

.musicbox_edit_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_edit_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.musicbox_edit_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.musicbox_edit_header_info h1 i {
    color: var(--title)
}

.musicbox_edit_header_desc {
    color: var(--name);
    font-size: .85rem
}

.musicbox_edit_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.musicbox_edit_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.musicbox_edit_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.musicbox_edit_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_edit_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.musicbox_edit_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.musicbox_edit_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musicbox_edit_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.musicbox_edit_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.musicbox_edit_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.musicbox_edit_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.musicbox_edit_card_body {
    padding: 24px 28px
}

.musicbox_edit_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.musicbox_edit_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.musicbox_edit_form_label i {
    color: var(--title);
    font-size: 1rem
}

.musicbox_edit_form_control {
    flex: 1
}

.musicbox_edit_form_input {
    width: 100%;
    max-width: 400px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.musicbox_edit_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.musicbox_edit_form_input::placeholder {
    color: var(--name)
}

.musicbox_edit_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.musicbox_edit_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap
}

.musicbox_edit_btn_submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.musicbox_edit_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.musicbox_edit_cover_upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.musicbox_edit_cover_preview {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--line);
    transition: all .3s ease;
    margin-bottom: 16px
}

.musicbox_edit_cover_preview:hover {
    border-color: var(--title);
    transform: scale(1.02)
}

.musicbox_edit_cover_preview:hover .musicbox_edit_cover_overlay {
    opacity: 1
}

.musicbox_edit_cover_image {
    width: 100%;
    height: 100%
}

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

.musicbox_edit_cover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer
}

.musicbox_edit_cover_overlay i {
    font-size: 2rem;
    color: var(--title)
}

.musicbox_edit_cover_overlay span {
    font-size: .75rem
}

.musicbox_edit_cover_hint {
    color: var(--name);
    font-size: .8rem;
    text-align: center
}

@media(max-width: 768px) {
    .musicbox_edit_left {
        padding:16px 12px
    }

    .musicbox_edit_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .musicbox_edit_header_info h1 {
        font-size: 1.3rem
    }

    .musicbox_edit_tabs_group {
        width: 100%
    }

    .musicbox_edit_btn {
        flex: 1;
        justify-content: center
    }

    .musicbox_edit_card_body {
        padding: 20px
    }

    .musicbox_edit_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .musicbox_edit_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .musicbox_edit_form_control {
        width: 100%
    }

    .musicbox_edit_form_input {
        max-width: 100%
    }

    .musicbox_edit_form_actions {
        flex-direction: column
    }

    .musicbox_edit_btn_submit {
        justify-content: center;
        width: 100%
    }

    .musicbox_edit_cover_preview {
        width: 160px;
        height: 160px
    }
}

@media(max-width: 480px) {
    .musicbox_edit_card_header {
        padding:12px 16px
    }

    .musicbox_edit_card_title h3 {
        font-size: .9rem
    }

    .musicbox_edit_cover_preview {
        width: 140px;
        height: 140px
    }

    .musicbox_edit_cover_overlay i {
        font-size: 1.5rem
    }

    .musicbox_edit_cover_hint {
        font-size: .7rem
    }
}

.trade_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.trade_header {
    padding: 50px 35px
}

.trade_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.trade_header_info h1 i {
    color: var(--title)
}

.trade_header_desc {
    color: var(--name);
    font-size: .85rem
}

.trade_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.trade_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.trade_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.trade_order_list {
    overflow-x: auto
}

.trade_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.trade_col_trade_no {
    width: 30%
}

.trade_col_username {
    width: 15%
}

.trade_col_amount {
    width: 10%
}

.trade_col_type {
    width: 10%
}

.trade_col_pay_method {
    width: 10%
}

.trade_col_time {
    width: 15%
}

.trade_col_status {
    width: 10%;
    gap: 6px
}

.trade_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.trade_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.trade_no {
    color: var(--title);
    font-size: .85rem
}

.trade_amount_text {
    color: var(--title);
    font-weight: 600;
    font-size: .9rem
}

.trade_type_badge {
    background: rgba(255,255,255,0.05);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    color: var(--text);
    display: inline-block
}

.trade_pay_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.trade_alipay {
    background: rgba(22,119,255,0.12);
    color: #1677ff
}

.trade_wechat {
    background: rgba(7,193,96,0.12);
    color: #07c160
}

.trade_status_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.trade_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.trade_status_failed {
    background: rgba(255,68,68,0.12);
    color: var(--red)
}

.trade_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.trade_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.trade_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.trade_empty span {
    font-size: .9rem
}

.trade_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    flex-wrap: wrap
}

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

.trade_page_jump input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text);
    text-align: center
}

.trade_page_jump a {
    color: var(--title);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,45,85,0.1)
}

.trade_page_info {
    color: var(--name);
    font-size: .8rem
}

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .trade_user_left {
        padding:16px 12px
    }

    .trade_header {
        padding: 16px 20px
    }

    .trade_header_info h1 {
        font-size: 1.3rem
    }

    .desktop_header {
        display: none
    }

    .desktop_item {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .trade_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .trade_card_label {
        width: 80px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .trade_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem
    }

    .trade_type_badge_mobile {
        background: rgba(255,255,255,0.05);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: .75rem;
        color: var(--text);
        display: inline-block
    }

    .trade_pagination {
        flex-direction: column
    }
}

@media(max-width: 480px) {
    .trade_card_label {
        width:70px;
        font-size: .75rem
    }

    .trade_card_value {
        font-size: .8rem
    }

    .trade_no {
        font-size: .75rem;
        word-break: break-all
    }
}

.recharge_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.recharge_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.recharge_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.recharge_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.download_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.download_header {
    padding: 50px 35px
}

.download_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.download_header_info h1 i {
    color: var(--title)
}

.download_header_desc {
    color: var(--name);
    font-size: .85rem
}

.download_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.download_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.download_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.download_list {
    overflow-x: auto
}

.download_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.download_col_id {
    width: 100px;
    flex-shrink: 0
}

.download_col_name {
    flex: 1;
    min-width: 200px
}

.download_col_coin {
    width: 80px;
    flex-shrink: 0
}

.download_col_ip {
    width: 130px;
    flex-shrink: 0
}

.download_col_time {
    width: 150px;
    flex-shrink: 0
}

.download_col_action {
    width: 140px;
    flex-shrink: 0
}

.download_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.download_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.download_song_id {
    color: var(--name);
    font-size: .85rem
}

.download_song_link {
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.download_song_link:hover {
    color: var(--title)
}

.download_coin_text {
    color: var(--title);
    font-weight: 600
}

.download_ip_text {
    color: var(--name);
    font-size: .8rem
}

.download_time_text {
    color: var(--name);
    font-size: .8rem
}

.download_action_icons {
    display: flex;
    gap: 12px
}

.download_action_icon {
    color: var(--name);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all .2s
}

.download_action_icon:hover {
    color: var(--title);
    transform: scale(1.1)
}

.download_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.download_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.download_empty span {
    font-size: .9rem
}

.download_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap
}

.download_page_links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap
}

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .download_user_left {
        padding:16px 12px
    }

    .download_header {
        padding: 16px 20px
    }

    .download_header_info h1 {
        font-size: 1.3rem
    }

    .download_list_header {
        display: none
    }

    .download_list_row {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .download_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .download_card_label {
        width: 85px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .download_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem;
        word-break: break-all
    }

    .download_action_icons {
        gap: 12px
    }
}

@media(max-width: 480px) {
    .download_card_label {
        width:75px;
        font-size: .75rem
    }

    .download_card_value {
        font-size: .8rem
    }

    .download_song_id {
        font-size: .75rem
    }

    .download_action_icon {
        font-size: 1rem
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.ri-spin {
    animation: spin 1s linear infinite
}

.recharge_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.recharge_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.recharge_card_body {
    padding: 24px 28px
}

.recharge_info_row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.recharge_info_label {
    width: 100px;
    flex-shrink: 0;
    color: var(--name);
    font-size: .9rem
}

.recharge_info_value {
    color: var(--text);
    font-size: .9rem
}

.recharge_highlight {
    color: var(--title);
    font-weight: 600
}

.recharge_pay_method_row {
    align-items: flex-start
}

.recharge_pay_method_select {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.recharge_pay_method_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s;
    background: var(--bar)
}

.recharge_pay_method_item i {
    font-size: 1.3rem
}

.recharge_pay_method_item span {
    font-size: .9rem;
    color: var(--text)
}

.recharge_pay_method_item:hover {
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.recharge_pay_method_active {
    border-color: var(--title);
    background: rgba(255,45,85,0.1)
}

.recharge_pay_method_active i {
    color: var(--title)
}

.recharge_pay_method_active span {
    color: var(--title)
}

.recharge_amount_input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.recharge_form_input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s;
    width: 120px
}

.recharge_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.recharge_amount_field {
    text-align: center
}

.recharge_amount_unit {
    color: var(--text);
    font-size: .9rem
}

.recharge_amount_hint {
    color: var(--name);
    font-size: .75rem
}

.recharge_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.recharge_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.recharge_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.recharge_help_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.recharge_help_item {
    color: var(--name);
    font-size: .85rem;
    line-height: 1.6
}

.recharge_help_item strong {
    color: var(--title)
}

.recharge_link_highlight {
    color: var(--title);
    text-decoration: none
}

.recharge_link_highlight:hover {
    text-decoration: underline
}

.recharge_help_warning {
    color: var(--red);
    background: rgba(255,68,68,0.05);
    padding: 10px 12px;
    border-radius: var(--radius);
    margin-top: 8px
}

@media(max-width: 768px) {
    .recharge_user_left {
        padding:16px 12px
    }

    .recharge_card_body {
        padding: 20px
    }

    .recharge_info_row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .recharge_info_label {
        width: 100%
    }

    .recharge_pay_method_select {
        width: 100%
    }

    .recharge_pay_method_item {
        flex: 1;
        justify-content: center
    }

    .recharge_form_actions {
        flex-direction: column
    }

    .recharge_btn {
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 480px) {
    .recharge_card_header {
        padding:12px 16px
    }

    .recharge_card_title h3 {
        font-size: .9rem
    }

    .recharge_pay_method_item {
        padding: 8px 16px
    }

    .recharge_pay_method_item i {
        font-size: 1.1rem
    }

    .recharge_pay_method_item span {
        font-size: .8rem
    }

    .recharge_help_item {
        font-size: .75rem
    }
}

.order_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.order_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.order_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.order_header_info h1 i {
    color: var(--title)
}

.order_header_desc {
    color: var(--name);
    font-size: .85rem
}

.order_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.order_tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    text-decoration: none
}

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

.order_tab_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.order_tab_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.order_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.order_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.order_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.order_list {
    overflow-x: auto
}

.order_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.order_col_orderid {
    width: 15%;
    flex-shrink: 0
}

.order_col_info {
    width: 25%;
    flex-shrink: 0
}

.order_col_price {
    width: 10%;
    flex-shrink: 0
}

.order_col_time {
    width: 15%;
    flex-shrink: 0
}

.order_col_pay {
    width: 10%;
    flex-shrink: 0
}

.order_col_status {
    width: 10%;
    flex-shrink: 0
}

.order_col_action {
    width: 15%;
    flex-shrink: 0
}

.order_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.order_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.order_link {
    color: var(--title);
    text-decoration: none;
    font-size: .85rem
}

.order_link:hover {
    text-decoration: underline
}

.order_product_info {
    display: flex;
    align-items: center;
    gap: 8px
}

.order_product_img_small {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover
}

.order_product_name_small {
    font-size: .8rem;
    color: var(--text)
}

.order_price_text {
    color: var(--title);
    font-weight: 600;
    font-size: .9rem
}

.order_pay_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.order_alipay {
    background: rgba(22,119,255,0.12);
    color: #1677ff
}

.order_wechat {
    background: rgba(7,193,96,0.12);
    color: #07c160
}

.order_status_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.order_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.order_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.order_status_info {
    background: rgba(59,130,246,0.12);
    color: #3b82f6
}

.order_action_link {
    color: var(--name);
    text-decoration: none;
    font-size: .8rem;
    margin-right: 12px
}

.order_action_link:hover {
    color: var(--title)
}

.order_pay_btn {
    background: var(--title);
    border: 0;
    border-radius: 20px;
    padding: 4px 12px;
    color: #fff;
    font-size: .7rem;
    cursor: pointer;
    margin-right: 8px;
    transition: all .2s
}

.order_pay_btn:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.order_cancel_btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 12px;
    color: var(--name);
    font-size: .7rem;
    cursor: pointer;
    transition: all .2s
}

.order_cancel_btn:hover {
    border-color: var(--red);
    color: var(--red)
}

.order_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.order_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.order_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .order_user_left {
        padding:16px 12px
    }

    .order_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .order_header_info h1 {
        font-size: 1.3rem
    }

    .order_tabs_group {
        width: 100%
    }

    .order_tab {
        flex: 1;
        justify-content: center
    }

    .order_list_header {
        display: none
    }

    .order_list_row {
        display: block;
        padding: 16px
    }

    .order_list_row>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        text-align: right
    }

    .order_list_row>div::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--name);
        text-align: left;
        font-size: .8rem
    }

    .order_col_orderid,.order_col_info,.order_col_price,.order_col_time,.order_col_pay,.order_col_status,.order_col_action {
        width: 100%
    }

    .order_product_info {
        justify-content: flex-end
    }

    .order_pagination {
        flex-direction: column
    }
}

@media(max-width: 480px) {
    .order_tab {
        padding:6px 12px;
        font-size: .75rem
    }

    .order_product_img_small {
        width: 32px;
        height: 32px
    }

    .order_product_name_small {
        font-size: .7rem
    }
}

.cancel_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.cancel_header {
    padding: 50px 35px
}

.cancel_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.cancel_header_info h1 i {
    color: var(--title)
}

.cancel_header_desc {
    color: var(--name);
    font-size: .85rem
}

.cancel_alert_card {
    background: rgba(255,68,68,0.08);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.cancel_alert_card i {
    color: var(--red);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px
}

.cancel_alert_content {
    color: var(--name);
    font-size: .85rem;
    line-height: 1.6
}

.cancel_alert_content strong {
    color: var(--red)
}

.cancel_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.cancel_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.cancel_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.cancel_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.cancel_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.cancel_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.cancel_status_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red)
}

.cancel_card_body {
    padding: 24px 28px
}

.cancel_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.cancel_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.cancel_form_label i {
    color: var(--title);
    font-size: 1rem
}

.cancel_form_control {
    flex: 1
}

.cancel_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.cancel_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.cancel_form_input::placeholder {
    color: var(--name)
}

.cancel_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.cancel_link_text {
    color: var(--title);
    text-decoration: none
}

.cancel_link_text:hover {
    text-decoration: underline
}

.cancel_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.cancel_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

.cancel_btn_danger {
    background: rgba(255,68,68,0.15);
    color: var(--red);
    border: 1px solid rgba(255,68,68,0.3)
}

.cancel_btn_danger:hover {
    background: rgba(255,68,68,0.25);
    transform: translateY(-1px)
}

.cancel_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.cancel_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.cancel_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cancel_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.cancel_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

.cancel_tip_item_warning i {
    color: var(--red)
}

.cancel_tip_item_warning span {
    color: var(--red)
}

@media(max-width: 768px) {
    .cancel_user_left {
        padding:16px 12px
    }

    .cancel_header {
        padding: 16px 20px
    }

    .cancel_header_info h1 {
        font-size: 1.3rem
    }

    .cancel_card_body {
        padding: 20px
    }

    .cancel_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .cancel_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .cancel_form_control {
        width: 100%
    }

    .cancel_form_input {
        max-width: 100%
    }

    .cancel_form_actions {
        flex-direction: column
    }

    .cancel_btn {
        justify-content: center;
        width: 100%
    }

    .cancel_alert_card {
        padding: 12px 16px
    }

    .cancel_alert_content {
        font-size: .8rem
    }
}

@media(max-width: 480px) {
    .cancel_card_header {
        padding:12px 16px
    }

    .cancel_card_title h3 {
        font-size: .9rem
    }

    .cancel_tip_item {
        font-size: .75rem
    }
}

.address_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.address_header {
    padding: 50px 35px
}

.address_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.address_header_info h1 i {
    color: var(--title)
}

.address_header_desc {
    color: var(--name);
    font-size: .85rem
}

.address_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.address_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.address_alert_tip strong {
    color: var(--title)
}

.address_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.address_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.address_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.address_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.address_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.address_card_body {
    padding: 24px 28px
}

.address_list {
    overflow-x: auto
}

.address_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.address_col_consignee {
    width: 12%;
    flex-shrink: 0
}

.address_col_area {
    width: 20%;
    flex-shrink: 0
}

.address_col_address {
    flex-shrink: 0;
    width: 35%
}

.address_col_mobile {
    width: 13%;
    flex-shrink: 0
}

.address_col_action {
    width: 20%;
    flex-shrink: 0
}

.address_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.address_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.address_consignee_name {
    color: var(--text);
    font-size: .9rem;
    margin-right: 8px
}

.address_default_badge {
    background: rgba(16,185,129,0.12);
    color: #10b981;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 500
}

.address_action_link {
    text-decoration: none;
    font-size: .75rem;
    padding: 5px 10px;
    border-radius: 20px;
    margin-right: 8px;
    transition: all .2s;
    display: inline-block
}

.address_set_default {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.address_set_default:hover {
    background: #10b981;
    color: #fff
}

.address_edit {
    background: rgba(59,130,246,0.12);
    color: #3b82f6
}

.address_edit:hover {
    background: #3b82f6;
    color: #fff
}

.address_delete {
    background: rgba(239,68,68,0.12);
    color: #ef4444
}

.address_delete:hover {
    background: #ef4444;
    color: #fff
}

.address_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.address_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.address_empty span {
    font-size: .9rem
}

.address_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap
}

.address_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.address_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

@media(max-width: 768px) {
    .address_user_left {
        padding:16px 12px
    }

    .address_header {
        padding: 16px 20px
    }

    .address_header_info h1 {
        font-size: 1.3rem
    }

    .address_card_body {
        padding: 20px
    }

    .address_list_header {
        display: none
    }

    .address_list_row {
        display: block;
        padding: 16px
    }

    .address_list_row>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        text-align: right
    }

    .address_list_row>div::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--name);
        text-align: left;
        font-size: .8rem
    }

    .address_col_consignee,.address_col_area,.address_col_address,.address_col_mobile,.address_col_action {
        width: 100%
    }

    .address_form_actions {
        flex-direction: column
    }

    .address_btn {
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 480px) {
    .address_card_header {
        padding:12px 16px
    }

    .address_card_title h3 {
        font-size: .9rem
    }
}

.address_form_container {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.address_form_group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px
}

.address_form_label {
    width: 100px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.address_form_label .required {
    color: var(--red);
    font-size: .85rem
}

.address_form_control {
    flex: 1;
    min-width: 200px
}

.region_group {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 8px
}

.address_select {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    min-width: 120px
}

.address_select:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.address_select option {
    background: var(--card);
    color: var(--text)
}

.address_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.address_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.address_input::placeholder {
    color: var(--name)
}

@media(max-width: 768px) {
    .address_form_group {
        flex-direction:column;
        gap: 8px
    }

    .address_form_label {
        width: 100%;
        padding-top: 0
    }

    .address_form_control {
        width: 100%
    }

    .address_input {
        max-width: 100%
    }

    .region_group {
        display: block;
        margin-right: 0;
        margin-bottom: 12px
    }

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

    .address_select {
        width: 100%;
        margin-bottom: 8px
    }
}

@media(max-width: 480px) {
    .address_form_label {
        font-size:.85rem
    }

    .address_input {
        padding: 8px 12px;
        font-size: .85rem
    }

    .address_select {
        padding: 8px 12px;
        font-size: .85rem
    }
}

.album_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.album_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.album_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.album_header_info h1 i {
    color: var(--title)
}

.album_header_desc {
    color: var(--name);
    font-size: .85rem
}

.album_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.album_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.album_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.album_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.album_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.album_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.album_upload_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.album_upload_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.album_grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 20px;
    margin-bottom: 20px;
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius)
}

.album_card {
    background: var(--bar);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all .3s ease
}

.album_card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,45,85,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3)
}

.album_card_cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden
}

.album_card_cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.album_card:hover .album_card_cover img {
    transform: scale(1.05)
}

.album_card_count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.album_card_count i {
    color: var(--title);
    font-size: .7rem
}

.album_card_info {
    padding: 12px
}

.album_card_title {
    font-size: .9rem;
    font-weight: 600;
    text-align: center
}

.album_card_title a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

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

.album_pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px
}

.album_alert_card {
    background: rgba(255,45,85,0.08);
    border-left: 3px solid var(--title);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.album_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.album_alert_card_warning {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b
}

.album_alert_card_warning i {
    color: #f59e0b
}

.album_highlight {
    color: var(--title);
    font-weight: 500
}

.album_require_count {
    color: var(--title);
    font-size: 1rem
}

.album_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.album_security_card_body {
    padding: 40px 28px
}

.album_empty {
    text-align: center;
    color: var(--name)
}

.album_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.album_empty_title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px
}

.album_empty_desc {
    font-size: .9rem;
    margin-bottom: 20px
}

.album_empty_condition {
    background: var(--bar);
    border-radius: var(--radius);
    padding: 16px 24px;
    margin-bottom: 24px;
    display: inline-block;
    text-align: left
}

.album_empty_condition p {
    color: var(--text);
    font-weight: 500;
    margin-bottom: 8px
}

.album_empty_condition ul {
    list-style: none;
    padding-left: 0
}

.album_empty_condition li {
    font-size: .85rem;
    margin-bottom: 6px;
    position: relative;
    padding-left: 18px
}

.album_empty_condition li::before {
    content: "•";
    color: var(--title);
    position: absolute;
    left: 4px
}

.album_empty_condition strong {
    color: var(--title)
}

.album_security_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 0
}

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

.album_security_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

@media(max-width: 768px) {
    .album_user_left {
        padding:16px 12px
    }

    .album_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .album_header_info h1 {
        font-size: 1.3rem
    }

    .album_tabs_group {
        width: 100%
    }

    .album_btn {
        flex: 1;
        justify-content: center
    }

    .album_grid {
        grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
        gap: 16px
    }

    .album_security_card_body {
        padding: 30px 20px
    }

    .album_empty_condition {
        padding: 12px 16px
    }
}

@media(max-width: 480px) {
    .album_grid {
        grid-template-columns:repeat(2,1fr);
        gap: 12px
    }

    .album_card_title {
        font-size: .8rem
    }

    .album_empty_title {
        font-size: 1rem
    }

    .album_empty_desc {
        font-size: .8rem
    }

    .album_empty_condition li {
        font-size: .75rem
    }

    .album_security_btn {
        padding: 8px 20px;
        font-size: .85rem
    }
}

.album_create_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.album_create_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.album_create_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.album_create_header_info h1 i {
    color: var(--title)
}

.album_create_header_desc {
    color: var(--name);
    font-size: .85rem
}

.album_create_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.album_create_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.album_create_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.album_create_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.album_create_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.album_create_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.album_create_alert_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.album_create_alert_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.album_create_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.album_create_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.album_create_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.album_create_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.album_create_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.album_create_card_body {
    padding: 24px 28px
}

.album_create_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.album_create_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.album_create_form_label i {
    color: var(--title);
    font-size: 1rem
}

.album_create_form_control {
    flex: 1
}

.album_create_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.album_create_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.album_create_form_input::placeholder {
    color: var(--name)
}

.album_create_form_select {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s
}

.album_create_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.album_create_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.album_create_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.album_create_btn_submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.album_create_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.album_create_cover_upload {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: center
}

.album_create_cover_preview {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--line);
    transition: all .3s ease;
    margin-bottom: 16px
}

.album_create_cover_preview:hover {
    border-color: var(--title);
    transform: scale(1.02)
}

.album_create_cover_preview:hover .album_create_cover_overlay {
    opacity: 1
}

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

.album_create_cover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer
}

.album_create_cover_overlay i {
    font-size: 2rem;
    color: var(--title)
}

.album_create_cover_overlay span {
    font-size: .75rem
}

.album_create_cover_hint {
    color: var(--name);
    font-size: .8rem;
    text-align: center
}

.album_create_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.album_create_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.album_create_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

@media(max-width: 768px) {
    .album_create_left {
        padding:16px 12px
    }

    .album_create_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .album_create_header_info h1 {
        font-size: 1.3rem
    }

    .album_create_tabs_group {
        width: 100%
    }

    .album_create_btn {
        flex: 1;
        justify-content: center
    }

    .album_create_card_body {
        padding: 20px
    }

    .album_create_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .album_create_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .album_create_form_control {
        width: 100%
    }

    .album_create_form_input,.album_create_form_select {
        max-width: 100%
    }

    .album_create_form_actions {
        flex-direction: column
    }

    .album_create_btn_submit {
        justify-content: center;
        width: 100%
    }

    .album_create_cover_preview {
        width: 140px;
        height: 140px
    }
}

@media(max-width: 480px) {
    .album_create_card_header {
        padding:12px 16px
    }

    .album_create_card_title h3 {
        font-size: .9rem
    }

    .album_create_cover_preview {
        width: 120px;
        height: 120px
    }

    .album_create_cover_overlay i {
        font-size: 1.5rem
    }

    .album_create_tip_item {
        font-size: .75rem
    }
}

.music_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.music_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 35px;
    flex-wrap: wrap;
    gap: 16px
}

.music_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.music_header_info h1 i {
    color: var(--title)
}

.music_header_desc {
    color: var(--name);
    font-size: .85rem
}

.music_tabs_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.music_tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    text-decoration: none
}

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

.music_tab_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.music_tab_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.music_tab_count {
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .7rem
}

.music_tab_active .music_tab_count {
    background: rgba(255,255,255,0.2)
}

.music_upload_tip {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.music_upload_tip i {
    color: var(--title);
    font-size: 1.1rem
}

.music_upload_tip strong {
    color: var(--title)
}

.music_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.music_mobile_tabs_card {
    display: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line)
}

.music_mobile_tabs_group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.music_mobile_tab {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 30px;
    color: var(--text);
    font-size: .75rem;
    text-decoration: none;
    transition: all .2s
}

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

.music_list {
    overflow-x: auto
}

.music_list_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.music_col_id {
    width: 8%;
    flex-shrink: 0
}

.music_col_name {
    flex: 1;
    min-width: 200px;
    width: 36%
}

.music_col_listens {
    width: 10%;
    flex-shrink: 0
}

.music_col_download {
    width: 10%;
    flex-shrink: 0
}

.music_col_genre {
    width: 14%;
    flex-shrink: 0
}

.music_col_time {
    width: 10%;
    flex-shrink: 0
}

.music_col_action {
    width: 12%;
    flex-shrink: 0
}

.music_list_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.music_list_row:hover {
    background: rgba(255,45,85,0.05)
}

.music_song_id {
    color: var(--name);
    font-size: .85rem
}

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

.music_song_link:hover {
    color: var(--title)
}

.music_listens_text,.music_download_text {
    color: var(--name);
    font-size: .85rem
}

.music_genre_link {
    color: var(--title);
    text-decoration: none;
    font-size: .8rem
}

.music_genre_link:hover {
    text-decoration: underline
}

.music_action_icons {
    display: flex;
    gap: 12px
}

.music_action_icon {
    color: var(--name);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all .2s
}

.music_action_icon:hover {
    color: var(--title);
    transform: scale(1.1)
}

.music_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.music_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.music_empty span {
    font-size: .9rem
}

.music_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--line)
}

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

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

.music_page_links a,.music_page_links 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;
    transition: all .2s
}

.music_page_links a:hover {
    border-color: var(--title);
    color: var(--title);
    background: rgba(255,45,85,0.1)
}

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

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .music_user_left {
        padding:16px 12px
    }

    .music_header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .music_header_info h1 {
        font-size: 1.3rem
    }

    .desktop_tabs {
        display: none
    }

    .music_mobile_tabs_card {
        display: block
    }

    .music_list_header {
        display: none
    }

    .music_list_row {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .music_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .music_card_label {
        width: 85px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .music_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem;
        word-break: break-all
    }

    .music_action_icons {
        gap: 12px
    }
}

@media(max-width: 480px) {
    .music_mobile_tab {
        font-size:.7rem;
        padding: 6px 8px
    }

    .music_card_label {
        width: 75px;
        font-size: .75rem
    }

    .music_card_value {
        font-size: .8rem
    }

    .music_song_id {
        font-size: .75rem
    }

    .music_action_icon {
        font-size: 1rem
    }
}

.upload_user_left {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px
}

.upload_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.upload_header {
    padding: 50px 35px
}

.upload_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.upload_header_info h1 i {
    color: var(--title)
}

.upload_header_desc {
    color: var(--name);
    font-size: .85rem
}

.upload_form_container {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 24px;
    margin-bottom: 20px
}

.upload_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px
}

.upload_col_12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 12px
}

.upload_col_3 {
    flex: 0 0 25%;
    max-width: 100%;
    padding: 0 12px
}

.upload_category_group {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px
}

.upload_category_label {
    width: 100px;
    flex-shrink: 0;
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    padding-top: 8px
}

.upload_category_items {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center
}

.upload_category_item {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 30px;
    font-size: .8rem;
    color: var(--text);
    cursor: pointer;
    transition: all .2s
}

.upload_category_item:hover {
    background: rgba(255,45,85,0.1);
    border-color: rgba(255,45,85,0.3);
    color: var(--title)
}

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

.upload_category_placeholder {
    color: var(--name);
    font-size: .8rem
}

.upload_sub_category_wrapper {
    display: none;
    width: 100%
}

.upload_sub_category_wrapper .upload_category_items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.upload_file_group {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.upload_file_label {
    width: 100px;
    flex-shrink: 0;
    color: var(--text);
    font-size: .9rem;
    font-weight: 500
}

.upload_file_items {
    flex: 1;
    position: relative
}

.upload_mark_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 10;
    display: none
}

.upload_file_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 30px;
    color: var(--title);
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s;
    overflow: hidden
}

.upload_file_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.upload_file_input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 200px;
    direction: ltr;
    cursor: pointer
}

.upload_progress_wrapper {
    margin-top: 16px;
    margin-bottom: 16px
}

.upload_progress_bar {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    height: 8px;
    overflow: hidden
}

.upload_progress_fill {
    background: var(--title);
    width: 0;
    height: 100%;
    border-radius: 10px;
    transition: width .3s ease
}

.upload_progress_striped .upload_progress_fill {
    background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px
}

.upload_progress_text {
    color: var(--name);
    font-size: .7rem;
    margin-top: 4px
}

.upload_action_group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.upload_action_left,.upload_action_right {
    display: flex;
    gap: 12px;
    align-items: center
}

.upload_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    border: 0
}

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

.upload_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.upload_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.upload_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.upload_table {
    width: 100%;
    border-collapse: collapse
}

.upload_table th,.upload_table td {
    padding: 12px;
    vertical-align: middle
}

.upload_table_striped tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0.02)
}

.upload_file_row {
    border-bottom: 1px solid var(--line)
}

.upload_play_btn {
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    color: var(--title);
    font-size: 1rem
}

.upload_play_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: scale(1.05)
}

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

.upload_file_name {
    color: var(--text);
    font-size: .85rem;
    word-break: break-all
}

.upload_file_info {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.upload_file_size {
    color: var(--name);
    font-size: .75rem
}

.upload_success_text {
    color: #10b981
}

.upload_success_text i {
    margin-right: 4px
}

.upload_error_text {
    color: var(--red)
}

.upload_action_small {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 12px;
    color: var(--name);
    font-size: .7rem;
    cursor: pointer;
    transition: all .2s;
    margin: 0 4px
}

.upload_action_small:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title)
}

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

.upload_action_start:hover {
    background: #ff5c7c
}

.upload_action_cancel:hover {
    border-color: var(--red);
    color: var(--red)
}

.upload_terms_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-top: 20px;
    overflow: hidden
}

.upload_terms_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.upload_terms_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.upload_terms_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.upload_terms_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.upload_terms_body {
    padding: 20px 24px
}

.upload_terms_content {
    max-height: none;
    overflow-y: visible;
    padding-right: 0
}

.upload_terms_content::-webkit-scrollbar {
    display: none
}

.upload_term_item {
    color: var(--name);
    font-size: .8rem;
    line-height: 1.6;
    margin-bottom: 12px;
    display: flex;
    gap: 6px
}

.upload_term_number {
    color: var(--title);
    flex-shrink: 0
}

.upload_term_warning {
    color: var(--red)
}

.upload_term_warning .upload_term_number {
    color: var(--red)
}

@media(max-width: 768px) {
    .upload_user_left {
        padding:16px 12px
    }

    .upload_header {
        padding: 16px 20px
    }

    .upload_header_info h1 {
        font-size: 1.3rem
    }

    .upload_form_container {
        padding: 16px
    }

    .upload_category_group {
        flex-direction: column
    }

    .upload_category_label {
        width: 100%;
        padding-top: 0
    }

    .upload_file_group {
        flex-direction: column
    }

    .upload_file_label {
        width: 100%
    }

    .upload_col_3 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .upload_action_group {
        flex-direction: column
    }

    .upload_action_left,.upload_action_right {
        width: 100%;
        justify-content: center
    }

    .upload_table td {
        display: block;
        text-align: center;
        padding: 8px
    }

    .upload_terms_header {
        padding: 12px 16px
    }

    .upload_terms_body {
        padding: 16px
    }

    .upload_term_item {
        font-size: .75rem
    }
}

@media(max-width: 480px) {
    .upload_category_item {
        padding:4px 12px;
        font-size: .7rem
    }

    .upload_btn {
        padding: 6px 16px;
        font-size: .75rem
    }
}

@keyframes uploadSpin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.upload_spin {
    animation: uploadSpin 1s linear infinite
}

.musician_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musician_header {
    padding: 50px 35px
}

.musician_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.musician_header_info h1 i {
    color: var(--title)
}

.musician_header_desc {
    color: var(--name);
    font-size: .85rem
}

.musician_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.musician_alert_card i {
    color: var(--title);
    font-size: 1.1rem;
    flex-shrink: 0
}

.musician_alert_card_info {
    background: rgba(59,130,246,0.08);
    border-left-color: #3b82f6
}

.musician_alert_card_info i {
    color: #3b82f6
}

.musician_alert_card_warning {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b
}

.musician_alert_card_warning i {
    color: #f59e0b
}

.musician_alert_card_danger {
    background: rgba(255,68,68,0.08);
    border-left-color: var(--red)
}

.musician_alert_card_danger i {
    color: var(--red)
}

.musician_alert_card_success {
    background: rgba(16,185,129,0.08);
    border-left-color: #10b981
}

.musician_alert_card_success i {
    color: #10b981
}

.musician_alert_content p {
    margin-bottom: 6px
}

.musician_alert_content p:last-child {
    margin-bottom: 0
}

.musician_link_highlight {
    color: var(--title);
    text-decoration: none
}

.musician_link_highlight:hover {
    text-decoration: underline
}

.musician_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.musician_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.musician_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.musician_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.musician_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.musician_security_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.musician_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.musician_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.musician_security_card_body {
    padding: 24px 28px
}

.musician_verify_success_box,.musician_bind_success_box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #10b981;
    font-size: .9rem
}

.musician_verify_success_box i,.musician_bind_success_box i {
    font-size: 1.2rem
}

.musician_bind_change_link {
    margin-left: 16px;
    color: var(--title);
    text-decoration: none;
    font-size: .8rem
}

.musician_bind_change_link:hover {
    text-decoration: underline
}

.musician_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.musician_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.musician_form_label i {
    color: var(--title);
    font-size: 1rem
}

.musician_form_control {
    flex: 1
}

.musician_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.musician_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.musician_form_input::placeholder {
    color: var(--name)
}

.musician_form_select {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s
}

.musician_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.musician_form_textarea {
    width: 100%;
    max-width: 500px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s;
    resize: vertical
}

.musician_form_textarea:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.musician_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.musician_form_hint_row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.musician_highlight_text {
    color: var(--title);
    font-size: 1rem
}

.musician_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: .85rem
}

.musician_checkbox_label input {
    display: none
}

.musician_checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.05)
}

.musician_checkbox_label input:checked+.musician_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 11px
}

.musician_checkbox_text {
    color: var(--name)
}

.musician_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.musician_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 0
}

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

.musician_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

@media(max-width: 768px) {
    .musician_user_left {
        padding:16px 12px
    }

    .musician_header {
        padding: 16px 20px
    }

    .musician_header_info h1 {
        font-size: 1.3rem
    }

    .musician_security_card_body {
        padding: 20px
    }

    .musician_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .musician_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .musician_form_control {
        width: 100%
    }

    .musician_form_input,.musician_form_select,.musician_form_textarea {
        max-width: 100%
    }

    .musician_form_actions {
        flex-direction: column
    }

    .musician_btn {
        justify-content: center;
        width: 100%
    }

    .musician_alert_card {
        padding: 12px 16px;
        font-size: .8rem
    }
}

@media(max-width: 480px) {
    .musician_security_card_header {
        padding:12px 16px
    }

    .musician_security_card_title h3 {
        font-size: .9rem
    }

    .musician_form_hint_row {
        flex-direction: column;
        gap: 4px
    }
}

.login_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.login_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.login_header_left h1 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px
}

.login_header_left h1 i {
    color: var(--title)
}

.login_header_desc {
    color: var(--name);
    font-size: .85rem
}

.login_card_body {
    padding: 28px 32px
}

.login_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.login_form_label {
    width: 80px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.login_form_label i {
    color: var(--title);
    font-size: 1rem
}

.login_form_control {
    flex: 1
}

.login_form_input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.login_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.login_form_input::placeholder {
    color: var(--name)
}

.login_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.login_captcha_group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap
}

.login_captcha_input {
    flex: 1;
    min-width: 120px
}

.login_captcha_img {
    height: 40px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05)
}

.login_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.login_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0;
    width: 100%;
    justify-content: center
}

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

.login_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.login_third_party {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.login_third_party_title {
    text-align: center;
    position: relative;
    margin-bottom: 20px
}

.login_third_party_title span {
    background: var(--card);
    padding: 0 16px;
    color: var(--name);
    font-size: .8rem
}

.login_third_party_icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

.login_third_party_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 40px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--text)
}

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

.login_qq:hover {
    background: rgba(18,150,236,0.15);
    border-color: #1296ec;
    color: #1296ec
}

.login_wechat:hover {
    background: rgba(7,193,96,0.15);
    border-color: #07c160;
    color: #07c160
}

@media(max-width: 768px) {
    .login_user_left {
        padding:20px 16px
    }

    .login_header {
        padding: 14px 20px;
        text-align: center
    }

    .login_header_left h1 {
        font-size: 1.2rem
    }

    .login_card_body {
        padding: 20px
    }

    .login_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .login_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .login_form_control {
        width: 100%
    }

    .login_captcha_group {
        flex-direction: column
    }

    .login_captcha_img {
        width: 100%;
        height: auto;
        min-height: 40px
    }

    .login_third_party_btn {
        padding: 6px 20px;
        font-size: .8rem
    }
}

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

    .login_third_party_btn {
        padding: 5px 16px;
        font-size: .75rem
    }
}

.register_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.register_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.register_header_left h1 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px
}

.register_header_left h1 i {
    color: var(--title)
}

.register_header_desc {
    color: var(--name);
    font-size: .85rem
}

.register_card_body {
    padding: 28px 32px
}

.register_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.register_form_label {
    width: 90px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.register_form_label i {
    color: var(--title);
    font-size: 1rem
}

.register_form_control {
    flex: 1
}

.register_form_input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.register_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.register_form_input::placeholder {
    color: var(--name)
}

.register_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.register_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: .85rem
}

.register_checkbox_label input {
    display: none
}

.register_checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.05)
}

.register_checkbox_label input:checked+.register_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 11px
}

.register_checkbox_text {
    color: var(--name)
}

.register_link_highlight {
    color: var(--title);
    text-decoration: none
}

.register_link_highlight:hover {
    text-decoration: underline
}

.register_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.register_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0;
    flex: 1;
    justify-content: center
}

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

.register_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.register_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.register_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.register_third_party {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.register_third_party_title {
    text-align: center;
    position: relative;
    margin-bottom: 20px
}

.register_third_party_title span {
    background: var(--card);
    padding: 0 16px;
    color: var(--name);
    font-size: .8rem
}

.register_third_party_icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

.register_third_party_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 40px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--text)
}

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

.register_qq:hover {
    background: rgba(18,150,236,0.15);
    border-color: #1296ec;
    color: #1296ec
}

.register_wechat:hover {
    background: rgba(7,193,96,0.15);
    border-color: #07c160;
    color: #07c160
}

.register_captcha_group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap
}

.register_captcha_input {
    flex: 1;
    min-width: 0
}

.register_captcha_img {
    flex-shrink: 0;
    height: 42px;
    width: auto;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05)
}

@media(max-width: 768px) {
    .register_captcha_group {
        flex-wrap:nowrap;
        gap: 10px
    }

    .register_captcha_img {
        height: 42px;
        width: auto;
        min-width: 100px
    }
}

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

    .register_captcha_img {
        height: 40px;
        min-width: 90px
    }
}

@media(max-width: 768px) {
    .register_user_left {
        padding:20px 16px
    }

    .register_header {
        padding: 14px 20px;
        text-align: center
    }

    .register_header_left h1 {
        font-size: 1.2rem
    }

    .register_card_body {
        padding: 20px
    }

    .register_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .register_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .register_form_control {
        width: 100%
    }

    .register_form_actions {
        flex-direction: column
    }

    .register_btn {
        width: 100%
    }

    .register_third_party_btn {
        padding: 6px 20px;
        font-size: .8rem
    }
}

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

    .register_third_party_btn {
        padding: 5px 16px;
        font-size: .75rem
    }
}

.reset_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.reset_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.reset_header_left h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px
}

.reset_header_left h1 i {
    color: var(--title);
    font-size: 1.6rem
}

.reset_header_desc {
    font-size: .85rem;
    color: var(--name);
    margin: 0
}

.reset_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.reset_card_body {
    padding: 24px 28px
}

.reset_alert_card {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px
}

.reset_alert_card_warning {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3)
}

.reset_alert_card_warning i {
    color: #f59e0b;
    font-size: 1.1rem;
    flex-shrink: 0
}

.reset_alert_card_warning span {
    font-size: .8rem;
    color: #f59e0b;
    line-height: 1.5
}

.reset_form_group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.reset_form_label {
    width: 110px;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px
}

.reset_form_label i {
    color: var(--title);
    font-size: 1rem
}

.reset_form_control {
    flex: 1
}

.reset_display_value {
    width: 100%;
    max-width: 380px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--title);
    font-weight: 600;
    border: 1px solid var(--line);
    box-sizing: border-box
}

.reset_form_input {
    width: 100%;
    max-width: 380px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .85rem;
    background: var(--bg);
    color: var(--text);
    transition: all .2s ease;
    box-sizing: border-box
}

.reset_form_input:focus {
    outline: 0;
    border-color: var(--title)
}

.reset_form_input::placeholder {
    color: var(--name)
}

.reset_form_hint {
    font-size: .7rem;
    color: var(--name);
    margin-top: 6px
}

.reset_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap
}

.reset_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

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

.reset_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.regerr {
    color: var(--red)
}

.regsuccess {
    color: #10b981
}

@media(max-width: 768px) {
    .reset_header {
        padding:16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .reset_header_left h1 {
        font-size: 1.3rem
    }

    .reset_card_body {
        padding: 20px
    }

    .reset_form_group {
        flex-direction: column;
        gap: 8px
    }

    .reset_form_label {
        width: auto;
        padding-top: 0
    }

    .reset_form_control {
        width: 100%
    }

    .reset_display_value,.reset_form_input {
        max-width: 100%
    }

    .reset_form_actions {
        flex-direction: column;
        align-items: center
    }

    .reset_btn {
        width: 100%;
        justify-content: center
    }
}

@media(max-width: 480px) {
    .reset_header_left h1 {
        font-size:1.2rem
    }

    .reset_card_body {
        padding: 16px
    }

    .reset_alert_card_warning span {
        font-size: .75rem
    }
}

.forgot_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.forgot_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.forgot_header_left h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px
}

.forgot_header_left h1 i {
    color: var(--title);
    font-size: 1.4rem
}

.forgot_header_desc {
    font-size: .85rem;
    color: var(--name);
    margin: 0
}

.forgot_card_body {
    padding: 28px 32px
}

.forgot_form_group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.forgot_form_label {
    width: 90px;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px
}

.forgot_form_label i {
    color: var(--title);
    font-size: 1rem
}

.forgot_form_control {
    flex: 1
}

.forgot_form_input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .85rem;
    background: var(--bg);
    color: var(--text);
    transition: all .2s ease;
    box-sizing: border-box
}

.forgot_form_input:focus {
    outline: 0;
    border-color: var(--title)
}

.forgot_form_input::placeholder {
    color: var(--name)
}

.forgot_form_hint {
    font-size: .7rem;
    color: var(--name);
    margin-top: 6px
}

.forgot_captcha_group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap
}

.forgot_captcha_input {
    flex: 1;
    min-width: 0
}

.forgot_send_code_btn {
    flex-shrink: 0;
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--title);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap
}

.forgot_send_code_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.forgot_countdown_btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--name);
    font-size: .8rem;
    white-space: nowrap
}

.forgot_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.forgot_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

.forgot_btn_primary {
    background: var(--title);
    color: #fff;
    width: 100%
}

.forgot_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.forgot_help_section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.forgot_help_title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px
}

.forgot_help_title i {
    color: var(--title);
    font-size: 1rem
}

.forgot_help_content {
    font-size: .8rem;
    color: var(--name);
    line-height: 1.6
}

.regerr {
    color: var(--red)
}

.regsuccess {
    color: #10b981
}

@media(max-width: 768px) {
    .forgot_header {
        padding:14px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .forgot_header_left h1 {
        font-size: 1.2rem
    }

    .forgot_card_body {
        padding: 20px
    }

    .forgot_form_group {
        flex-direction: column;
        gap: 8px
    }

    .forgot_form_label {
        width: auto;
        padding-top: 0
    }

    .forgot_form_control {
        width: 100%
    }

    .forgot_captcha_group {
        flex-wrap: nowrap;
        gap: 10px
    }

    .forgot_send_code_btn,.forgot_countdown_btn {
        padding: 8px 16px;
        font-size: .75rem;
        white-space: nowrap
    }
}

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

    .forgot_send_code_btn,.forgot_countdown_btn {
        padding: 6px 12px;
        font-size: .7rem
    }

    .forgot_btn_primary {
        font-size: .85rem;
        padding: 8px 20px
    }

    .forgot_help_content {
        font-size: .75rem
    }
}

.email_verify_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.email_verify_header {
    padding: 50px 35px
}

.email_verify_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.email_verify_header_info h1 i {
    color: var(--title)
}

.email_verify_header_desc {
    color: var(--name);
    font-size: .85rem
}

.email_verify_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.email_verify_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.email_verify_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.email_verify_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.email_verify_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.email_verify_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.email_status_warning {
    background: rgba(255,45,85,0.12);
    color: var(--title)
}

.email_verify_card_body {
    padding: 24px 28px
}

.email_verify_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.email_verify_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.email_verify_form_label i {
    color: var(--title);
    font-size: 1rem
}

.email_verify_form_control {
    flex: 1
}

.email_verify_email_box {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.email_verify_email_box i {
    color: var(--title)
}

.email_verify_email_box strong {
    color: var(--title)
}

.email_verify_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.email_verify_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.email_verify_form_input::placeholder {
    color: var(--name)
}

.email_verify_code_group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.email_verify_code_input {
    max-width: 180px
}

.email_verify_code_btn {
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--title);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s
}

.email_verify_code_btn:hover {
    background: rgba(255,45,85,0.2);
    transform: translateY(-1px)
}

.email_verify_code_timer {
    color: var(--name);
    font-size: .75rem;
    margin-top: 8px
}

.email_verify_code_timer span {
    color: var(--title);
    font-weight: 600
}

.email_verify_form_error {
    color: var(--red);
    font-size: .7rem;
    margin-top: 6px
}

.email_verify_form_error span {
    color: var(--red)
}

.email_verify_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.email_verify_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.email_verify_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.email_verify_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.email_verify_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.email_verify_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.email_verify_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.email_verify_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

.regerr {
    color: var(--red)
}

.regsuccess {
    color: #10b981
}

@media(max-width: 768px) {
    .email_verify_header {
        padding:16px 20px
    }

    .email_verify_header_info h1 {
        font-size: 1.3rem
    }

    .email_verify_card_body {
        padding: 20px
    }

    .email_verify_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .email_verify_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .email_verify_form_control {
        width: 100%
    }

    .email_verify_form_input,.email_verify_code_input {
        max-width: 100%
    }

    .email_verify_code_group {
        flex-direction: column;
        align-items: stretch
    }

    .email_verify_code_btn {
        text-align: center;
        justify-content: center
    }

    .email_verify_form_actions {
        flex-direction: column
    }

    .email_verify_btn {
        justify-content: center
    }
}

@media(max-width: 480px) {
    .email_verify_card_header {
        padding:12px 16px
    }

    .email_verify_card_title h3 {
        font-size: .9rem
    }

    .email_verify_tip_item {
        font-size: .75rem
    }

    .email_verify_code_btn {
        padding: 6px 16px;
        font-size: .75rem
    }
}

.verify_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.verify_header {
    padding: 50px 35px
}

.verify_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.verify_header_info h1 i {
    color: var(--title)
}

.verify_header_desc {
    color: var(--name);
    font-size: .85rem
}

.verify_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.verify_alert_card i {
    color: var(--title);
    font-size: 1.1rem;
    flex-shrink: 0
}

.verify_alert_card_warning {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b
}

.verify_alert_card_warning i {
    color: #f59e0b
}

.verify_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.verify_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.verify_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.verify_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.verify_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.verify_security_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.verify_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.verify_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.verify_security_card_body {
    padding: 24px 28px
}

.verify_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.verify_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.verify_form_label i {
    color: var(--title);
    font-size: 1rem
}

.verify_form_control {
    flex: 1
}

.verify_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.verify_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.verify_form_input::placeholder {
    color: var(--name)
}

.verify_form_select {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s
}

.verify_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.verify_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.verify_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.verify_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.verify_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.verify_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.verify_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.verify_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.verify_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.verify_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

.verify_cert_success_box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0
}

.verify_cert_success_icon i {
    font-size: 1.8rem;
    color: #10b981
}

.verify_cert_success_info {
    color: var(--text);
    font-size: .95rem
}

@media(max-width: 768px) {
    .verify_header {
        padding:16px 20px
    }

    .verify_header_info h1 {
        font-size: 1.3rem
    }

    .verify_security_card_body {
        padding: 20px
    }

    .verify_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .verify_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .verify_form_control {
        width: 100%
    }

    .verify_form_input,.verify_form_select {
        max-width: 100%
    }

    .verify_form_actions {
        flex-direction: column
    }

    .verify_btn {
        justify-content: center;
        width: 100%
    }

    .verify_alert_card {
        padding: 12px 16px;
        font-size: .8rem
    }
}

@media(max-width: 480px) {
    .verify_security_card_header {
        padding:12px 16px
    }

    .verify_security_card_title h3 {
        font-size: .9rem
    }

    .verify_tip_item {
        font-size: .75rem
    }

    .verify_cert_success_icon i {
        font-size: 1.5rem
    }

    .verify_cert_success_info {
        font-size: .85rem
    }
}

.orderdetail_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.orderdetail_header {
    padding: 50px 35px
}

.orderdetail_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.orderdetail_header_info h1 i {
    color: var(--title)
}

.orderdetail_header_desc {
    color: var(--name);
    font-size: .85rem
}

.orderdetail_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.orderdetail_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.orderdetail_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.orderdetail_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.orderdetail_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.orderdetail_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.orderdetail_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.orderdetail_security_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.orderdetail_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.orderdetail_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.orderdetail_status_info {
    background: rgba(59,130,246,0.12);
    color: #3b82f6
}

.orderdetail_security_card_body {
    padding: 24px 28px
}

.orderdetail_info_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 16px;
    margin-bottom: 20px
}

.orderdetail_info_item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap
}

.orderdetail_info_label {
    color: var(--name);
    font-size: .85rem
}

.orderdetail_info_value {
    color: var(--text);
    font-size: .85rem
}

.orderdetail_order_id {
    color: var(--title);
    font-weight: 500
}

.orderdetail_highlight {
    color: var(--title)
}

.orderdetail_price {
    color: var(--title);
    font-size: 1rem;
    font-weight: 600
}

.orderdetail_actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap
}

.orderdetail_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 40px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.orderdetail_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.orderdetail_btn_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(255,68,68,0.3)
}

.orderdetail_btn_danger:hover {
    background: rgba(255,68,68,0.2);
    transform: translateY(-1px)
}

.orderdetail_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.orderdetail_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.orderdetail_product_item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.orderdetail_product_item:last-child {
    border-bottom: 0
}

.orderdetail_product_img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    object-fit: cover
}

.orderdetail_product_info {
    flex: 1
}

.orderdetail_product_name {
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 4px
}

.orderdetail_product_spec {
    color: var(--name);
    font-size: .75rem
}

.orderdetail_song_item {
    padding: 8px 0;
    border-bottom: 1px solid var(--line)
}

.orderdetail_song_item:last-child {
    border-bottom: 0
}

.orderdetail_song_link {
    color: var(--text);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s
}

.orderdetail_song_link:hover {
    color: var(--title)
}

.orderdetail_album_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.orderdetail_album_item:last-child {
    border-bottom: 0
}

.orderdetail_album_img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    object-fit: cover
}

.orderdetail_album_name {
    color: var(--text);
    font-size: .85rem
}

.orderdetail_address_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 16px
}

.orderdetail_address_item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap
}

.orderdetail_address_label {
    color: var(--name);
    font-size: .85rem
}

.orderdetail_address_value {
    color: var(--text);
    font-size: .85rem
}

.orderdetail_express_info {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.orderdetail_express_item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.orderdetail_express_label {
    color: var(--name);
    font-size: .85rem
}

.orderdetail_express_value {
    color: var(--text);
    font-size: .85rem
}

.orderdetail_track_link {
    color: var(--title);
    text-decoration: none;
    font-size: .8rem;
    margin-left: 12px
}

.orderdetail_track_link:hover {
    text-decoration: underline
}

.orderdetail_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap
}

.orderdetail_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.orderdetail_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.orderdetail_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .orderdetail_header {
        padding:16px 20px
    }

    .orderdetail_header_info h1 {
        font-size: 1.3rem
    }

    .orderdetail_security_card_body {
        padding: 20px
    }

    .orderdetail_info_grid,.orderdetail_address_grid {
        grid-template-columns: 1fr
    }

    .orderdetail_actions,.orderdetail_form_actions {
        flex-direction: column
    }

    .orderdetail_btn {
        justify-content: center;
        width: 100%
    }

    .orderdetail_product_item {
        flex-direction: column;
        text-align: center
    }

    .orderdetail_album_item {
        flex-direction: column;
        text-align: center
    }
}

@media(max-width: 480px) {
    .orderdetail_security_card_header {
        padding:12px 16px
    }

    .orderdetail_security_card_title h3 {
        font-size: .9rem
    }

    .orderdetail_product_img,.orderdetail_album_img {
        width: 80px;
        height: 80px
    }

    .orderdetail_express_item {
        flex-direction: column;
        align-items: flex-start
    }
}

.withdrawal_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.withdrawal_user_info_card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    flex-wrap: wrap
}

.withdrawal_user_avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--title)
}

.withdrawal_user_stats {
    flex: 1
}

.withdrawal_user_name {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 12px
}

.withdrawal_user_name strong {
    color: var(--title)
}

.withdrawal_balance_stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.withdrawal_stat_item {
    display: flex;
    align-items: baseline;
    gap: 6px
}

.withdrawal_stat_label {
    color: var(--name);
    font-size: .85rem
}

.withdrawal_stat_value {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500
}

.withdrawal_highlight {
    color: var(--title);
    font-size: 1.2rem
}

.withdrawal_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.withdrawal_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.withdrawal_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.withdrawal_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.withdrawal_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

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

.withdrawal_header_tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 500;
    transition: all .2s ease;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.withdrawal_header_tab:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

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

.withdrawal_header_tab_active:hover {
    background: #ff5c7c;
    color: #fff
}

.withdrawal_security_card_body {
    padding: 24px 28px
}

.withdrawal_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.withdrawal_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.withdrawal_alert_card_info {
    background: rgba(59,130,246,0.08);
    border-left-color: #3b82f6
}

.withdrawal_alert_card_info i {
    color: #3b82f6
}

.withdrawal_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.withdrawal_form_label {
    width: 100px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.withdrawal_form_label i {
    color: var(--title);
    font-size: 1rem
}

.withdrawal_form_control {
    flex: 1
}

.withdrawal_display_value {
    padding: 10px 0;
    color: var(--text);
    font-size: .9rem
}

.withdrawal_form_input {
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.withdrawal_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.withdrawal_form_input::placeholder {
    color: var(--name)
}

.withdrawal_form_select {
    width: 100%;
    max-width: 200px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s
}

.withdrawal_form_select:focus {
    outline: 0;
    border-color: var(--title)
}

.withdrawal_input_group {
    display: flex;
    align-items: center;
    max-width: 320px
}

.withdrawal_input_group_text {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius);
    padding: 8px 14px;
    color: var(--text);
    font-size: .9rem;
    margin-right: 5px
}

.withdrawal_input_group .withdrawal_form_input {
    border-radius: var(--radius);
    max-width: calc(100% - 40px)
}

.withdrawal_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.withdrawal_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.withdrawal_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0;
    background: var(--hover-bg);
    color: var(--name)
}

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

.withdrawal_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.withdrawal_tips_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.withdrawal_tip_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--name);
    font-size: .85rem
}

.withdrawal_tip_item i {
    color: var(--title);
    font-size: 1rem;
    flex-shrink: 0
}

@media(max-width: 768px) {
    .withdrawal_user_info_card {
        flex-direction:column;
        text-align: center;
        padding: 20px
    }

    .withdrawal_balance_stats {
        justify-content: center
    }

    .withdrawal_security_card_header {
        align-items: flex-start
    }

    .withdrawal_security_card_body {
        padding: 20px
    }

    .withdrawal_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .withdrawal_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .withdrawal_form_control {
        width: 100%
    }

    .withdrawal_form_input,.withdrawal_form_select,.withdrawal_input_group {
        max-width: 100%
    }

    .withdrawal_form_actions {
        flex-direction: column
    }

    .withdrawal_btn {
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 480px) {
    .withdrawal_header_tab {
        padding:4px 12px;
        font-size: .75rem
    }

    .withdrawal_stat_value {
        font-size: .9rem
    }

    .withdrawal_highlight {
        font-size: 1rem
    }
}

.exchange_log_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.exchange_log_record_list {
    overflow-x: auto
}

.exchange_log_record_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.exchange_log_col_amount {
    width: 150px;
    flex-shrink: 0
}

.exchange_log_col_time {
    flex: 1;
    min-width: 160px
}

.exchange_log_col_status {
    width: 100px;
    flex-shrink: 0
}

.exchange_log_record_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.exchange_log_record_row:hover {
    background: rgba(255,45,85,0.05)
}

.exchange_log_amount_text {
    color: var(--title);
    font-weight: 600;
    font-size: .9rem
}

.exchange_log_status_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.exchange_log_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.exchange_log_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.exchange_log_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.exchange_log_empty span {
    font-size: .9rem
}

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .exchange_log_user_left {
        padding:16px 12px
    }

    .exchange_log_user_info_card {
        flex-direction: column;
        text-align: center;
        padding: 20px
    }

    .exchange_log_balance_stats {
        justify-content: center
    }

    .exchange_log_record_header {
        display: none
    }

    .exchange_log_record_row {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .exchange_log_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .exchange_log_card_label {
        width: 85px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .exchange_log_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem;
        word-break: break-all
    }
}

@media(max-width: 480px) {
    .exchange_log_card_label {
        width:75px;
        font-size: .75rem
    }

    .exchange_log_card_value {
        font-size: .8rem
    }

    .exchange_log_stat_value {
        font-size: .9rem
    }

    .exchange_log_highlight {
        font-size: 1rem
    }
}

.withdrawal_log_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.withdrawal_log_user_info_card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    flex-wrap: wrap
}

.withdrawal_log_user_avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--title)
}

.withdrawal_log_user_stats {
    flex: 1
}

.withdrawal_log_user_name {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 12px
}

.withdrawal_log_user_name strong {
    color: var(--title)
}

.withdrawal_log_balance_stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.withdrawal_log_stat_item {
    display: flex;
    align-items: baseline;
    gap: 6px
}

.withdrawal_log_stat_label {
    color: var(--name);
    font-size: .85rem
}

.withdrawal_log_stat_value {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500
}

.withdrawal_log_highlight {
    color: var(--title);
    font-size: 1.2rem
}

.withdrawal_log_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.withdrawal_log_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.withdrawal_log_alert_card_info {
    background: rgba(59,130,246,0.08);
    border-left-color: #3b82f6
}

.withdrawal_log_alert_card_info i {
    color: #3b82f6
}

.withdrawal_log_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.withdrawal_log_record_list {
    overflow-x: auto
}

.withdrawal_log_record_header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--name);
    font-size: .85rem
}

.withdrawal_log_col_account {
    width: 200px;
    flex-shrink: 0
}

.withdrawal_log_col_money {
    width: 120px;
    flex-shrink: 0
}

.withdrawal_log_col_time {
    flex: 1;
    min-width: 160px
}

.withdrawal_log_col_status {
    width: 100px;
    flex-shrink: 0
}

.withdrawal_log_record_row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.withdrawal_log_record_row:hover {
    background: rgba(255,45,85,0.05)
}

.withdrawal_log_account_text {
    color: var(--text);
    font-size: .85rem;
    word-break: break-all
}

.withdrawal_log_money_text {
    color: var(--title);
    font-weight: 600;
    font-size: .9rem
}

.withdrawal_log_status_badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 500;
    display: inline-block
}

.withdrawal_log_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.withdrawal_log_status_pending {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.withdrawal_log_status_failed {
    background: rgba(255,68,68,0.12);
    color: var(--red)
}

.withdrawal_log_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.withdrawal_log_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.withdrawal_log_empty span {
    font-size: .9rem
}

.withdrawal_log_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    flex-wrap: wrap
}

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

.withdrawal_log_page_jump input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text);
    text-align: center
}

.withdrawal_log_page_jump a {
    color: var(--title);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,45,85,0.1)
}

.withdrawal_log_page_info {
    color: var(--name);
    font-size: .8rem
}

.mobile_item {
    display: none
}

@media(max-width: 768px) {
    .withdrawal_log_user_info_card {
        flex-direction:column;
        text-align: center;
        padding: 20px
    }

    .withdrawal_log_balance_stats {
        justify-content: center
    }

    .withdrawal_log_record_header {
        display: none
    }

    .withdrawal_log_record_row {
        display: none
    }

    .mobile_item {
        display: block
    }

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

    .withdrawal_log_card_row {
        display: flex;
        padding: 8px 0;
        gap: 12px;
        flex-wrap: wrap
    }

    .withdrawal_log_card_label {
        width: 85px;
        flex-shrink: 0;
        color: var(--name);
        font-size: .8rem
    }

    .withdrawal_log_card_value {
        flex: 1;
        color: var(--text);
        font-size: .85rem;
        word-break: break-all
    }

    .withdrawal_log_pagination {
        flex-direction: column
    }
}

@media(max-width: 480px) {
    .withdrawal_log_card_label {
        width:75px;
        font-size: .75rem
    }

    .withdrawal_log_card_value {
        font-size: .8rem
    }

    .withdrawal_log_stat_value {
        font-size: .9rem
    }

    .withdrawal_log_highlight {
        font-size: 1rem
    }
}

.qqlogin_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.qqlogin_header {
    padding: 20px 28px
}

.qqlogin_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.qqlogin_header_info h1 i {
    color: var(--title)
}

.qqlogin_header_desc {
    color: var(--name);
    font-size: .85rem
}

.qqlogin_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.qqlogin_security_card_body {
    padding: 24px 28px
}

.qqlogin_user_info_card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    flex-wrap: wrap
}

.qqlogin_user_avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover
}

.qqlogin_user_name {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 4px
}

.qqlogin_user_name strong {
    color: var(--title)
}

.qqlogin_welcome_text {
    color: var(--name);
    font-size: .8rem
}

.qqlogin_tabs {
    margin-bottom: 20px
}

.qqlogin_tabs_group {
    display: flex;
    gap: 10px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 4px
}

.qqlogin_tab {
    flex: 1;
    text-align: center;
    padding: 10px 16px;
    border-radius: calc(var(--radius) - 4px);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s
}

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

.qqlogin_tab_default {
    background: transparent;
    color: var(--text)
}

.qqlogin_tab_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title)
}

.qqlogin_tab_content {
    display: none
}

.qqlogin_tab_content_active {
    display: block
}

.qqlogin_alert_card {
    background: rgba(255,45,85,0.08);
    border-left: 3px solid var(--title);
    padding: 12px 16px;
    border-radius: var(--radius);
    color: var(--name);
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.qqlogin_alert_card i {
    color: var(--title);
    font-size: 1rem
}

.qqlogin_alert_card_info {
    background: rgba(59,130,246,0.08);
    border-left-color: #3b82f6
}

.qqlogin_alert_card_info i {
    color: #3b82f6
}

.qqlogin_alert_card_warning {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b
}

.qqlogin_alert_card_warning i {
    color: #f59e0b
}

.qqlogin_alert_card strong {
    color: var(--title)
}

.qqlogin_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.qqlogin_form_label {
    width: 100px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.qqlogin_form_label i {
    color: var(--title);
    font-size: 1rem
}

.qqlogin_form_control {
    flex: 1
}

.qqlogin_form_input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.qqlogin_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.qqlogin_form_input::placeholder {
    color: var(--name)
}

.qqlogin_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.qqlogin_form_error {
    color: var(--red);
    font-size: .7rem;
    margin-top: 6px
}

.qqlogin_code_group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap
}

.qqlogin_code_input {
    flex: 1;
    min-width: 0
}

.qqlogin_code_img {
    flex-shrink: 0;
    height: 42px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05)
}

.qqlogin_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap
}

.qqlogin_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0;
    width: 100%;
    justify-content: center
}

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

.qqlogin_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.regerr {
    color: var(--red)
}

.regsuccess {
    color: #10b981
}

@media(max-width: 768px) {
    .qqlogin_header {
        padding:16px 20px
    }

    .qqlogin_header_info h1 {
        font-size: 1.3rem
    }

    .qqlogin_security_card_body {
        padding: 20px
    }

    .qqlogin_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .qqlogin_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .qqlogin_form_control {
        width: 100%
    }

    .qqlogin_code_group {
        flex-wrap: nowrap
    }

    .qqlogin_code_img {
        height: 42px
    }

    .qqlogin_tab {
        padding: 8px 12px;
        font-size: .8rem
    }
}

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

    .qqlogin_code_img {
        height: 40px
    }

    .qqlogin_tab {
        padding: 6px 10px;
        font-size: .75rem
    }
}

.agreement_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.agreement_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.agreement_header_left h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px
}

.agreement_header_left h1 i {
    color: var(--title);
    font-size: 1.6rem
}

.agreement_header_desc {
    font-size: .85rem;
    color: var(--name);
    margin: 0
}

.agreement_content_wrapper {
    padding: 28px 32px
}

.agreement_warning {
    background: rgba(255,45,85,0.08);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    color: var(--name);
    font-size: .85rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 12px
}

.agreement_warning i {
    color: var(--title);
    font-size: 1.2rem;
    flex-shrink: 0
}

.agreement_section {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}

.agreement_section_number {
    flex-shrink: 0;
    color: var(--title);
    font-weight: 600;
    font-size: .95rem
}

.agreement_section_content {
    color: var(--name);
    font-size: .85rem;
    line-height: 1.7
}

.agreement_special_notice {
    background: rgba(255,45,85,0.05);
    border: 1px solid rgba(255,45,85,0.15);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 28px
}

.agreement_special_notice_title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--title);
    font-size: .95rem;
    margin-bottom: 12px
}

.agreement_special_notice_title i {
    font-size: 1.1rem
}

.agreement_special_notice_content {
    color: var(--name);
    font-size: .85rem;
    line-height: 1.7
}

@media(max-width: 768px) {
    .agreement_header {
        padding:16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .agreement_header_left h1 {
        font-size: 1.3rem
    }

    .agreement_content_wrapper {
        padding: 20px
    }

    .agreement_warning {
        padding: 10px 14px;
        font-size: .8rem
    }

    .agreement_section {
        margin-bottom: 16px
    }

    .agreement_section_content {
        font-size: .8rem
    }

    .agreement_special_notice {
        padding: 14px 16px
    }

    .agreement_special_notice_content {
        font-size: .8rem
    }
}

@media(max-width: 480px) {
    .agreement_content_wrapper {
        padding:16px
    }

    .agreement_section {
        gap: 8px
    }

    .agreement_section_number {
        font-size: .85rem
    }

    .agreement_section_content {
        font-size: .75rem
    }
}

.vip_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.vip_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.vip_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.vip_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.vip_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.vip_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.vip_card_body {
    padding: 24px 28px
}

.vip_upgrade_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 20px
}

.vip_upgrade_card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease
}

.vip_upgrade_card:hover {
    border-color: rgba(255,45,85,0.4);
    transform: translateY(-2px)
}

.vip_upgrade_active {
    background: rgba(255,45,85,0.08);
    border-color: var(--title)
}

.vip_upgrade_price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--title);
    margin-bottom: 8px
}

.vip_upgrade_days {
    color: var(--text);
    font-size: .85rem;
    margin-bottom: 8px
}

.vip_upgrade_down {
    color: var(--name);
    font-size: .7rem
}

.vip_upgrade_down strong {
    color: var(--title)
}

.vip_pay_section {
    margin-bottom: 24px
}

.vip_section_label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 16px
}

.vip_pay_grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.vip_pay_card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s
}

.vip_pay_card i {
    font-size: 1.3rem
}

.vip_pay_card span {
    font-size: .85rem;
    color: var(--text)
}

.vip_pay_card:hover {
    border-color: rgba(255,45,85,0.4)
}

.vip_pay_card.vip_upgrade_active {
    background: rgba(255,45,85,0.08);
    border-color: var(--title)
}

.vip_pay_card.vip_upgrade_active i {
    color: var(--title)
}

.vip_pay_card.vip_upgrade_active span {
    color: var(--title)
}

.vip_confirm_section {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 8px
}

.vip_confirm_row {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.vip_confirm_left {
    width: 100%
}

.vip_confirm_price {
    color: var(--name);
    font-size: .85rem
}

.vip_price_amount {
    color: var(--title);
    font-size: 1.1rem;
    font-weight: 600
}

.vip_confirm_right {
    width: 100%
}

@media(max-width: 768px) {
    .vip_confirm_right {
        width:100%
    }
}

.vip_checkbox_label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 16px
}

.vip_checkbox_label input {
    display: none
}

.vip_checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0
}

.vip_checkbox_label input:checked+.vip_checkmark::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--title);
    font-size: 11px
}

.vip_checkbox_text {
    color: var(--name);
    font-size: .75rem;
    line-height: 1.4
}

.vip_form_actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.vip_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.vip_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.vip_notice_list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.vip_notice_item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--name);
    font-size: .85rem
}

.vip_notice_num {
    color: var(--title);
    flex-shrink: 0
}

.vip_notice_warning {
    color: var(--red);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line)
}

@media(max-width: 768px) {
    .vip_card_body {
        padding:20px
    }

    .vip_upgrade_grid {
        grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
        gap: 12px
    }

    .vip_confirm_row {
        flex-direction: column;
        align-items: flex-start
    }

    .vip_confirm_right {
        width: 100%
    }

    .vip_pay_grid {
        gap: 12px
    }

    .vip_pay_card {
        padding: 10px 18px
    }

    .vip_btn {
        width: 100%;
        justify-content: center
    }
}

@media(max-width: 480px) {
    .vip_upgrade_price {
        font-size:1.5rem
    }

    .vip_upgrade_days {
        font-size: .75rem
    }

    .vip_pay_card {
        flex: 1;
        justify-content: center
    }

    .vip_notice_item {
        font-size: .75rem
    }
}

.cdorder_detail_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.cdorder_detail_header {
    padding: 20px 28px
}

.cdorder_detail_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.cdorder_detail_header_info h1 i {
    color: var(--title)
}

.cdorder_detail_header_desc {
    color: var(--name);
    font-size: .85rem
}

.cdorder_detail_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.cdorder_detail_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.cdorder_detail_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.cdorder_detail_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.cdorder_detail_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.cdorder_detail_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.cdorder_detail_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.cdorder_detail_security_card_status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: .7rem;
    font-weight: 500
}

.cdorder_detail_status_warning {
    background: rgba(245,158,11,0.12);
    color: #f59e0b
}

.cdorder_detail_status_success {
    background: rgba(16,185,129,0.12);
    color: #10b981
}

.cdorder_detail_status_info {
    background: rgba(59,130,246,0.12);
    color: #3b82f6
}

.cdorder_detail_security_card_body {
    padding: 24px 28px
}

.cdorder_detail_info_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 16px;
    margin-bottom: 20px
}

.cdorder_detail_info_item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap
}

.cdorder_detail_info_label {
    color: var(--name);
    font-size: .85rem
}

.cdorder_detail_info_value {
    color: var(--text);
    font-size: .85rem
}

.cdorder_detail_order_id {
    color: var(--title);
    font-weight: 500
}

.cdorder_detail_highlight {
    color: var(--title)
}

.cdorder_detail_product_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.cdorder_detail_product_type_list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.cdorder_detail_product_type_badge {
    background: rgba(255,45,85,0.12);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    color: var(--title)
}

.cdorder_detail_product_count {
    color: var(--name);
    font-size: .75rem
}

.cdorder_detail_total_price {
    color: var(--name);
    font-size: .85rem
}

.cdorder_detail_price_text {
    color: var(--title);
    font-size: 1rem;
    font-weight: 600
}

.cdorder_detail_actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap
}

.cdorder_detail_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 40px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.cdorder_detail_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.cdorder_detail_btn_danger {
    background: rgba(255,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(255,68,68,0.3)
}

.cdorder_detail_btn_danger:hover {
    background: rgba(255,68,68,0.2);
    transform: translateY(-1px)
}

.cdorder_detail_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.cdorder_detail_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.cdorder_detail_song_item {
    padding: 8px 0;
    border-bottom: 1px solid var(--line)
}

.cdorder_detail_song_item:last-child {
    border-bottom: 0
}

.cdorder_detail_song_link {
    color: var(--text);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s
}

.cdorder_detail_song_link:hover {
    color: var(--title)
}

.cdorder_detail_address_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 16px
}

.cdorder_detail_address_item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap
}

.cdorder_detail_address_label {
    color: var(--name);
    font-size: .85rem
}

.cdorder_detail_address_value {
    color: var(--text);
    font-size: .85rem
}

.cdorder_detail_express_info {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cdorder_detail_express_item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.cdorder_detail_express_label {
    color: var(--name);
    font-size: .85rem
}

.cdorder_detail_express_value {
    color: var(--text);
    font-size: .85rem
}

.cdorder_detail_track_link {
    color: var(--title);
    text-decoration: none;
    font-size: .8rem;
    margin-left: 12px
}

.cdorder_detail_track_link:hover {
    text-decoration: underline
}

.cdorder_detail_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap
}

.cdorder_detail_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.cdorder_detail_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.cdorder_detail_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .cdorder_detail_header {
        padding:16px 20px
    }

    .cdorder_detail_header_info h1 {
        font-size: 1.3rem
    }

    .cdorder_detail_security_card_body {
        padding: 20px
    }

    .cdorder_detail_info_grid,.cdorder_detail_address_grid {
        grid-template-columns: 1fr
    }

    .cdorder_detail_product_info {
        flex-direction: column;
        align-items: flex-start
    }

    .cdorder_detail_actions,.cdorder_detail_form_actions {
        flex-direction: column
    }

    .cdorder_detail_btn {
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 480px) {
    .cdorder_detail_security_card_header {
        padding:12px 16px
    }

    .cdorder_detail_security_card_title h3 {
        font-size: .9rem
    }

    .cdorder_detail_express_item {
        flex-direction: column;
        align-items: flex-start
    }

    .cdorder_detail_track_link {
        margin-left: 0
    }
}

.album_edit_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.album_edit_header {
    padding: 20px 28px
}

.album_edit_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.album_edit_header_info h1 i {
    color: var(--title)
}

.album_edit_header_desc {
    color: var(--name);
    font-size: .85rem
}

.album_edit_action_bar {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.album_edit_action_buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.album_edit_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none
}

.album_edit_btn_primary {
    background: var(--title);
    color: #fff;
    border: 0
}

.album_edit_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.album_edit_btn_default {
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid var(--line)
}

.album_edit_btn_default:hover {
    background: rgba(255,45,85,0.1);
    color: var(--title);
    border-color: rgba(255,45,85,0.3)
}

.album_edit_action_tip {
    color: var(--name);
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.album_edit_action_tip i {
    color: var(--title)
}

.album_edit_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.album_edit_security_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.album_edit_security_card_title {
    display: flex;
    align-items: center;
    gap: 10px
}

.album_edit_security_card_title i {
    font-size: 1.2rem;
    color: var(--title)
}

.album_edit_security_card_title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text)
}

.album_edit_security_card_body {
    padding: 24px 28px
}

.album_edit_form_group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.album_edit_form_label {
    width: 110px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.album_edit_form_label i {
    color: var(--title);
    font-size: 1rem
}

.album_edit_form_control {
    flex: 1
}

.album_edit_form_input {
    width: 100%;
    max-width: 400px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    color: var(--text);
    font-size: .9rem;
    transition: all .2s
}

.album_edit_form_input:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.album_edit_form_input::placeholder {
    color: var(--name)
}

.album_edit_form_hint {
    color: var(--name);
    font-size: .7rem;
    margin-top: 6px
}

.album_edit_form_actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap
}

.album_edit_btn_submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
    border: 0
}

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

.album_edit_btn_primary:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

.album_edit_cover_upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.album_edit_cover_preview {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--line);
    transition: all .3s ease;
    margin-bottom: 16px
}

.album_edit_cover_preview:hover {
    border-color: var(--title);
    transform: scale(1.02)
}

.album_edit_cover_preview:hover .album_edit_cover_overlay {
    opacity: 1
}

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

.album_edit_cover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer
}

.album_edit_cover_overlay i {
    font-size: 2rem;
    color: var(--title)
}

.album_edit_cover_overlay span {
    font-size: .75rem
}

.album_edit_cover_hint {
    color: var(--name);
    font-size: .8rem;
    text-align: center
}

@media(max-width: 768px) {
    .album_edit_header {
        padding:16px 20px
    }

    .album_edit_header_info h1 {
        font-size: 1.3rem
    }

    .album_edit_action_bar {
        flex-direction: column;
        align-items: flex-start
    }

    .album_edit_action_buttons {
        width: 100%
    }

    .album_edit_btn {
        flex: 1;
        justify-content: center
    }

    .album_edit_security_card_body {
        padding: 20px
    }

    .album_edit_form_group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .album_edit_form_label {
        width: 100%;
        padding-bottom: 6px;
        padding-top: 0
    }

    .album_edit_form_control {
        width: 100%
    }

    .album_edit_form_input {
        max-width: 100%
    }

    .album_edit_form_actions {
        flex-direction: column
    }

    .album_edit_btn_submit {
        justify-content: center;
        width: 100%
    }

    .album_edit_cover_preview {
        width: 160px;
        height: 160px
    }
}

@media(max-width: 480px) {
    .album_edit_security_card_header {
        padding:12px 16px
    }

    .album_edit_security_card_title h3 {
        font-size: .9rem
    }

    .album_edit_cover_preview {
        width: 140px;
        height: 140px
    }

    .album_edit_cover_overlay i {
        font-size: 1.5rem
    }

    .album_edit_cover_hint {
        font-size: .7rem
    }
}

.message_box {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.message_header {
    padding: 20px 28px
}

.message_header_info h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.message_header_info h1 i {
    color: var(--title)
}

.message_header_desc {
    color: var(--name);
    font-size: .85rem
}

.message_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden
}

.message_chat_list {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto
}

.message_chat_item {
    display: flex;
    margin-bottom: 20px;
    gap: 12px
}

.message_chat_item_received {
    justify-content: flex-start
}

.message_chat_item_sent {
    justify-content: flex-end
}

.message_chat_avatar {
    flex-shrink: 0
}

.message_chat_avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.message_chat_bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 18px;
    position: relative
}

.message_bubble_received {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-top-left-radius: 4px
}

.message_bubble_sent {
    background: rgba(255,45,85,0.12);
    border: 1px solid rgba(255,45,85,0.3);
    border-top-right-radius: 4px
}

.message_chat_name {
    font-size: .7rem;
    color: var(--name);
    margin-bottom: 4px
}

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

.message_chat_content {
    color: var(--text);
    font-size: .85rem;
    line-height: 1.5;
    word-break: break-all
}

.message_chat_time {
    font-size: .65rem;
    color: var(--name);
    margin-top: 6px;
    text-align: right
}

.message_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.message_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.message_empty span {
    font-size: .9rem
}

.message_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    flex-wrap: wrap
}

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

.message_page_jump input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text);
    text-align: center
}

.message_page_jump a {
    color: var(--title);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,45,85,0.1)
}

.message_page_info {
    color: var(--name);
    font-size: .8rem
}

.message_send_form {
    display: flex;
    gap: 16px;
    padding: 20px;
    flex-wrap: wrap
}

.message_send_avatar {
    flex-shrink: 0
}

.message_send_avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.message_send_content {
    flex: 1
}

.message_send_textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--text);
    font-size: .85rem;
    resize: vertical;
    font-family: inherit;
    transition: all .2s
}

.message_send_textarea:focus {
    outline: 0;
    border-color: var(--title);
    background: rgba(255,45,85,0.05)
}

.message_send_textarea::placeholder {
    color: var(--name)
}

.message_send_actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px
}

.message_send_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 500;
    background: var(--title);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: all .2s
}

.message_send_btn:hover {
    background: #ff5c7c;
    transform: translateY(-1px)
}

@media(max-width: 768px) {
    .message_header {
        padding:16px 20px
    }

    .message_header_info h1 {
        font-size: 1.3rem
    }

    .message_chat_list {
        padding: 16px
    }

    .message_chat_bubble {
        max-width: 85%
    }

    .message_send_form {
        flex-direction: column
    }

    .message_send_avatar {
        display: none
    }

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

@media(max-width: 480px) {
    .message_chat_bubble {
        max-width:90%
    }

    .message_chat_content {
        font-size: .8rem
    }

    .message_send_btn {
        width: 100%;
        justify-content: center
    }
}

.notice_alert_card {
    background: rgba(255,45,85,0.08);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--name);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.notice_alert_card i {
    color: var(--title);
    font-size: 1.1rem
}

.notice_alert_card_info {
    background: rgba(59,130,246,0.08)
}

.notice_alert_card_info i {
    color: #3b82f6
}

.notice_security_card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden
}

.notice_message_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px
}

.notice_message_title_section {
    display: flex;
    align-items: center;
    gap: 10px
}

.notice_message_title_section i {
    font-size: 1.3rem;
    color: var(--title)
}

.notice_message_title_section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0
}

.notice_mark_all_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: .8rem;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3);
    color: #10b981;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap
}

.notice_mark_all_btn:hover {
    background: rgba(16,185,129,0.2);
    transform: translateY(-1px)
}

.notice_message_item {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    transition: background .2s
}

.notice_message_item:hover {
    background: rgba(255,45,85,0.03)
}

.notice_unread {
    position: relative
}

.notice_message_icon {
    flex-shrink: 0
}

.notice_message_icon i {
    font-size: 1.5rem;
    color: var(--title)
}

.notice_message_content {
    flex: 1
}

.notice_message_title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.notice_message_title h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0
}

.notice_unread_tag {
    background: var(--title);
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .65rem
}

.notice_message_text {
    color: var(--name);
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.notice_message_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.notice_message_time {
    color: var(--name);
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.notice_message_actions {
    display: flex;
    gap: 12px
}

.notice_status_read {
    color: #10b981;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 4px
}

.notice_message_link {
    color: var(--title);
    text-decoration: none;
    font-size: .7rem
}

.notice_message_link:hover {
    text-decoration: underline
}

.notice_empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--name)
}

.notice_empty i {
    font-size: 4rem;
    color: var(--title);
    opacity: .5;
    margin-bottom: 16px;
    display: block
}

.notice_empty span {
    font-size: .9rem
}

@media(max-width: 768px) {
    .notice_message_header {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px
    }

    .notice_message_title_section {
        flex-shrink: 0
    }

    .notice_message_title_section i {
        font-size: 1.1rem
    }

    .notice_message_title_section h3 {
        font-size: .9rem
    }

    .notice_mark_all_btn {
        flex-shrink: 0;
        padding: 5px 12px;
        font-size: .7rem;
        white-space: nowrap
    }

    .notice_message_item {
        padding: 16px;
        gap: 12px
    }

    .notice_message_icon i {
        font-size: 1.3rem
    }

    .notice_message_title h4 {
        font-size: .9rem
    }

    .notice_message_text {
        font-size: .8rem
    }

    .notice_message_footer {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width: 480px) {
    .notice_message_header {
        padding:12px 16px;
        gap: 8px
    }

    .notice_message_title_section i {
        font-size: 1rem
    }

    .notice_message_title_section h3 {
        font-size: .85rem
    }

    .notice_mark_all_btn {
        padding: 4px 10px;
        font-size: .65rem
    }

    .notice_mark_all_btn i {
        font-size: .7rem
    }

    .notice_message_item {
        padding: 12px
    }

    .notice_message_icon i {
        font-size: 1.1rem
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.ri-spin {
    animation: spin 1s linear infinite
}