.modal-rounded {
    border-radius: 15px;
    overflow: hidden;
}

.reply-msg-box , .like-msg-box , .system-msg-box {
    padding: 40px;
}

.msg-right-content .title {
    background: linear-gradient(45deg, #f0f0ff, #fff7ff);
    padding: 20px 30px;
}

.reply-msg-box .reply-item , .like-msg-box .msg-like-item {
    padding: 15px 0;
    border-bottom: 1px solid #ededff;
}

.reply-msg-box .reply-item .reply-inner , .like-msg-box .msg-like-item .like-inner {
    display: flex;
}

.reply-msg-box .reply-user a , .like-msg-box .like-user a {
    width: 52px;
    height: 52px;
    display: block;
    position: relative;
}

.reply-msg-box .reply-user a img , .like-msg-box .like-user a img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.reply-avatar , .like-avatar {
    margin-right: 15px;
}

.reply-msg-box .u-name , .like-msg-box .u-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f186e;
    margin-right: 10px;
}

.reply-msg-box .reply-info , .like-msg-box .like-info{
    font-size: 14px;
    color: #62627c;
}

.reply-msg-box .p-link {
    color: #62627c;
}

.reply-msg-box .comment-content  {
    font-size: 15px;
}

.like-msg-box .like-content  {
    font-size: 15px;
    position: relative;
    padding-left: 10px;
    margin-top: 5px;
}

.like-msg-box .like-content::before {
    content: "";
    position: absolute;
    left: 0;
    width: 3px;
    height: 80%;
    background: #948ed1;
    top: 2px;
    border-radius: 3px;
}

.reply-msg-box .comment-content {
    font-size: 15px;
    margin-top: 5px;
}

.reply-msg-box .footer , .like-msg-box .footer {
    font-size: 13px;
    margin-top: 5px;
    color: #a5a1bc;
    display: flex;
}

.reply-msg-box .footer span {
    margin-right: 15px;
    display: flex;
    cursor: pointer;
}

.reply-msg-box .footer span:hover , .reply-btn a:hover {
    color: #2815fe;
}

.reply-msg-box .footer span i {
    margin-right: 3px;
}

.reply-msg-box .thum , .like-msg-box .thum {
    width: 72px;
    height: 72px;
    display: block;
    background: #f1f0ff;
    border-radius: 7px;
}

.reply-msg-box .comment-right , .like-msg-box .like-right {
    flex: 1;
    margin-right: 10px;
}

.reply-msg-box .thum img , .like-msg-box .thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.like-msg-box .thum.moment-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.like-msg-box .like-right {
    display: block;
    text-decoration: none;
    color: inherit;
}

.like-msg-box .like-right:hover {
    opacity: 0.8;
}

.like-msg-box .thum.moment-thumb a {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.like-msg-box .thum.moment-thumb i {
    font-size: 28px;
    color: #fff;
}

.parent-expert {
    font-size: 13px;
    color: #6d6d6d;
    height: 85%;
    margin: 00;
    padding: 5px;
}

.reply-btn a {
    display: flex;
    color: #a5a1bc;
}

a.cancel-msg-reply-link {
    margin-right: 5px;
    background: #9a9bb9;
    line-height: 1;
    border-radius: 5px;
    color: #fff;
    padding: 10px 15px;
    font-size: 15px;
}

.reply-msg-box .edit_comment_info {
    width: 40px;
    height: 40px;
}

.reply-msg-box img.v-avatar.avatar.avatar-50 {
    min-width: 40px;
    height: 40px;
}

.reply-msg-box form {
    margin-top: 20px;
}

span.msg-badge {
    border-radius: 20px;
    margin-left: 8px;
    font-size: 12px;
    background: #ff4c4c;
    padding: 0px 6px;
    color: #fff;
    position: absolute;
    right: 5%;
}

.msg-load-more {
    padding: 40px;
    padding-top: 0;
    text-align: center;
    color: #828282;
}

a.comment-like-btn {
    display: flex;
    color: #a5a1bc;
    margin-right: 12px;
}

.reply-msg-box .comment-like-btn span {
    margin: 0;
}

.reply-msg-box .comment-like-btn:hover span {
    color: #2815fe;
}

.reply-msg-box .comment-like-btn.liked  , a.comment-like-btn.liked {
    color: #2815fe;
}

span.unread-bage {
    background: #ff4e4e;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    top: 0;
    position: absolute;
    right: 0;
}

.system-msg-item .icon {
    width: 52px;
    height: 52px;
    display: block;
    margin-right: 10px;
    position: relative;
}

.system-msg-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.system-msg-item {
    padding: 15px 0;
    border-bottom: 1px solid #ededff;
    cursor: pointer;
}

.system-msg-item .name {
    padding-bottom: 3px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
}

.system-msg-item:hover .name {
    color: #3f43ff;
    transition: all 0.3s;
}

.system-msg-item:hover {
    background: linear-gradient(45deg, #00000000, #f9f5ff, #dddddd00);
}

.system-msg-inner {
    display: flex;
}

.system-msg-inner .meta {
    font-size: 13px;
    color: #8f8cba;
}

.system-msg-inner .meta time {
    margin-right: 10px;
}

.system-msg-inner .meta > * {
    display: inline-flex;
}

.system-msg-inner .meta > * i {
    margin-right: 2px;
}

.system-msg-inner .right-info {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.system-msg-modal-title {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px !important;
}

.uk-modal-dialog.system-msg-modal {
    width: 800px;
}

.system-modal-meta {
    display: flex;
    font-size: 14px;
    color: #8a8a9a;
}

.system-modal-meta > * {
    display: inline-flex;
    margin-right: 15px;
}

.system-modal-meta > * i {
    margin-right: 2px;
}

.system-msg-modal .uk-button-primary {
    background: #3f43ff;
    border: none;
    border-radius: 20px;
}

.system-msg-modal .uk-modal-footer.uk-text-right {
    padding: 30px 20px;
}

.user-banner-info .right {
    display: inline-flex;
    align-items: flex-end;
    column-gap: 10px;
}

.user-banner-btn {
    height: 35px;
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    background: #ddd;
    border-radius: 8px;
}

a.send-msg-btn.user-banner-btn {
    background: #ffefef66;
    border: 1px solid #ffffff5e;
    transition: all 0.2s;
}

a.send-msg-btn.user-banner-btn:hover {
    color: #fff;
    background: #fefefea8;
    transition: all 0.2s;
}

a.follow-user-btn.user-banner-btn {
    background: linear-gradient(45deg, #203cff, #91a7ff);
    color: #fff;
    border: 1px solid #7d94ff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

a.follow-user-btn.user-banner-btn span {
    margin-right: 3px;
}

a.follow-user-btn.unfollow.user-banner-btn {
    background: linear-gradient(45deg, #ff4242, #ff9191);
    border: 1px solid #ffacac;
}

.user-chat-modal {
    border-radius: 10px;
    overflow: hidden;
}

.user-chat-modal .avatar {
    width: 40px;
    height: 40px;
    display: block;
    margin-right: 10px;
    background: #d2cfec;
    border-radius: 7px;
}

.user-chat-modal .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.user-chat-modal .uk-modal-header {
    display: flex;
}

.user-chat-modal .uk-modal-body {
    background: #f8f6ff;
    height: 450px;
}

.private-msg-list-content {
    min-height: 200px;
}

textarea.send-msg-textarea {
    border: 1px solid #f0edff;
    background: #fcf9ff;
    padding: 10px;
    resize: none;
    font-size: 14px;
    outline: none;
    border-radius: 7px;
}

textarea.send-msg-textarea:focus {
    border: 1px solid #6647ff;

}

.user-chat-modal .uk-modal-close {
    border-radius: 7px;
}

button.uk-button.uk-button-primary.push-private-msg-btn {
    background: #4b29ff;
    border-radius: 7px;
}

.send-msg-box {
    margin-bottom: 10px;
}

.ppo-chat-item.me {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

.ppo-chat-item.other {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.ppo-chat-item .chat-avatar {
    width: 35px;
    height: 35px;
    display: block;
}

.ppo-chat-item .chat-avatar img {
    border-radius: 5px;
}

.ppo-chat-item.msg-bot .chat-avatar {
    display: none;
}

.ppo-chat-item .other_content {
    font-size: 14px;
    background: #ffffff;
    padding: 7px 12px;
    border-radius: 8px;
    margin-left: 10px;
    max-width: 80%;
    position: relative;
    border-top-left-radius: 0px;
}

.ppo-chat-item .me_content {
    font-size: 14px;
    background: #445aff;
    padding: 7px 12px;
    border-radius: 8px;
    margin-right: 10px;
    color: #fff;
    max-width: 80%;
    position: relative;
    border-top-right-radius: 0px;
}

.ppo-chat-item .me_content p , .ppo-chat-item .other_content p {
    margin: 0;
}

.ppo-chat-timestamp {
    text-align: center;
    margin-bottom: 15px;
    font-size: 13px;
    color: #a6a9bd;
}

.ppo-chat-item {
    margin-bottom: 15px;
}

.push-private-msg-btn.protect {
    opacity: .5;
    cursor: not-allowed;
}

.ppo-chat-item.msg-bot {
    display: flex;
    justify-content: center;
}  

.ppo-chat-item.msg-bot .other_content {
    margin: 0;
    padding: 15px;
    border-radius: 8px 8px 8px 8px;
    width: 80%;
}  

.ppo-chat-item.msg-bot .other_content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
} 

.ppo-chat-item.msg-bot .other_content p {
    font-size: 15px;
} 

.ppo-chat-item.msg-bot .other_content::after {
    display: none;
}

.bot-msg-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    border-top: 1px solid #f1f3ff;
    padding-top: 15px;
    margin-top: 15px;
}

.bot-msg-bottom .btn-primary {
    padding: 4px 12px;
    border: 1px solid #5273ff;
    color: #5273ff;
    border-radius: 8px;
}

.bot-msg-bottom .btn-primary:hover {
    background: #5273ff;
    color: #fff;
}

.chat-loading {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 15px;
}

.ppo-chat-empty {
    text-align: center;
    color: #9b9b9b;
}

.chat-user-list-avatar {
    width: 42px;
    height: 42px;
}

.chat-user-list-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.chat-user-list-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
}

.chat-user-list-item.active , .chat-user-list-item:hover {
    background: linear-gradient(45deg, #ffefe7, #fff1ed00);
} 

.chat-user-info {
    margin-left: 10px;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
}

.chat-user-info .name {
    font-size: 15px;
    color: #1f186e;
    display: flex;
    justify-content: space-between;
}

.chat-user-info time {
    font-size: 12px;
    color: #bebfd2;
}

.whisper-msg-box {
    height: calc(100vh - 250px);
}

.chat-user-warp {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e3f6;
}

.chat-user-warp .private-msg-list-content {
    min-height: 100%;
}

.chat-user-warp .chat-scroll-body {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f6f7ff;
}

.whisper-msg-box textarea.send-msg-textarea {
    height: 130px;
    border-radius: 0px;
    background: #f6f7ff;
    border: none;
    border-top: 1px solid #e5e3f6;
    padding: 20px;
}

.chat-footer-texarea {
    background: #f6f7ff;
}

.chat-footer-tool {
    padding: 20px;
    text-align: right;
}

.whisper-msg-box .grid-height {
    height: inherit;
}

.chat-scroll-body {
    padding: 30px;
}

.whisper-msg-box .chat-user-info .content {
    word-break: keep-all;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.chat-unread-count {
    font-size: 12px;
    background: #ff4c4c;
    color: #fff;
    padding: 0 6px;
    border-radius: 20px;
    display: inline-block;
    transform: scale(0.9);
}

.ppo-navtab {
    display: flex;
    width: 100%;
    padding: 30px 40px;
    border-bottom: 1px solid #f4f2ff;
    column-gap: 8px;
}

.ppo-navtab a {
    color: #484d90;
    background: #f5f5ff;
    padding: 6px 18px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #eeedfe;
    display: inline-flex;
}

.ppo-navtab a.active {
    background: #5552ff;
    color: #fff;
}

.ppo-navtab a i {
    margin-right: 3px;
}

.ppo-navtab a small {
    margin-left: 2px;
}

.ppo-navtab.big-rounded a {
    border-radius: 20px;
}

.follow-content {
    padding: 40px;
}

.follower-item a.follower-avatar {
    width: 80px;
    height: 80px;
    display: block;
    margin-right: 15px;
}

.follower-item a.follower-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.follower-item {
    display: flex;
    align-items: center;
}

.follower-item .follower-info {
    display: flow;
    flex: 1;
}

.follower-item .follower-info .name a {
    font-size: 16px;
    color: #303030;
}

.follower-item .follower-info .name a:hover {
    color: #203cff;
}

.follower-item .follower-info .des {
    font-size: 12px;
    color: #626262;
}

.follower-item .follower-info .follow-list-btn {
    display: inline-flex;
    font-size: 14px;
    background: #eeedf8;
    padding: 6px 4px;
    color: #585b6e;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid #e6e6e6;
    min-width: 88px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.follower-item .follower-info .follow-list-btn span {
    margin-right: 3px;
}

.follower-item .follower-info .follow-list-btn:hover {
    border-color: #203cff;
    color: #203cff;
}

.user-cover-upload-btn {
    right: 40px;
    position: absolute;
    top: 30px;
    font-size: 14px;
}

.user-cover-upload-btn input {
    font-size: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.user-cover-upload-btn a {
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    background: #ffffff36;
    padding: 6px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s;
}

.user-cover-upload-btn:hover a , a.my-user-center:hover , a.my-user-manage:hover {
    background: #ffffff5e;
    transition: all 0.2s;
}

.user-cover-upload-btn a i , a.my-user-center i , a.my-user-manage i {
    margin-right: 3px;
}

a.my-user-center , a.my-user-manage {
    position: absolute;
    font-size: 14px;
    right: 40px;
    bottom: 10px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    background: #ffffff36;
    padding: 6px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s;
}

a.my-user-center {
    background: #afb4ff36;
    border-color: #9ba6bd;
}

.user-index-box {
    padding: 30px 40px;
}

.htmx-pagination {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.htmx-pagination li a , .htmx-pagination li span.current {
    padding: 4px 12px;
    display: flex;
    background: #f4f7ff;
    border: 1px solid #e0e0ff;
    border-radius: 7px;
    height: 32px;
    min-width: 32px;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: #33386b;
    font-size: 13px;
}

.htmx-pagination li span.current {
    background: #364dff;
    color: #fff;
}

.user-comment-item-inner {
    padding: 15px;
    border: 1px solid #e8e7ff;
    border-radius: 8px;
    background: linear-gradient(130deg, #fafaff, #f9f7ff);
    display: inline-flex;
    justify-content: space-between;
}

.user-comment-item a.title {
    font-size: 15px;
    color: #515695;
    display: flex;
    margin-bottom: 5px;
}

.user-comment-item a.title i {
    margin-right: 3px;
    color: #203cff;
}

.user-comment-item .parent-comment {
    font-size: 14px;
    color: #72718f;
}

.user-comment-item .content {
    font-size: 14px;
    padding: 0 10px;
    color: #131313;
    margin-top: 8px;
    border-left: 3px solid #2a28ff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-comment-item time {
    font-size: 13px;
    color: #a7a9b9;
    margin-top: 8px;
    display: block;
}

.user-comment-item a.thum {
    width: 50px;
    display: block;
    height: 50px;
}

.user-comment-item a.thum img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.user-comment-item .left {
    flex: 1;
    margin-right: 10px;
}

.user-moments-list .inner {
    position: relative;
    height: 150px;
}

.user-moments-list .inner .bg-banner {
    height: 150px;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.user-moments-list .inner .bg-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s;
}

.user-moments-list .inner .bottom {
    position: absolute;
    bottom: 5%;
    width: 94%;
    padding: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    background: #e1e2ff96;
    left: 50%;
    right: 0;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    border: 1px solid #e4e5ee;
    transform: translateX(-50%);
}

.user-moments-list .inner .left {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.user-moments-list .inner .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.user-moments-list .inner .right {
    font-size: 13px;
    color: #1a1a1a;
}

.user-moments-list .inner .right .info {
    font-size: 12px;
    color: #444175;
}

.user-moments-a:hover .bg-banner img {
    transform: scale(1.1);
    transition: ease-in-out .3s;
}

.ppo-navtab a:not(.active):hover {
    color: #6061e3;
    border-color: #6061e3;
    transition: ease-in-out 0.2s;
}

.user-follow-block {
    display: flex;
    column-gap: 10px;
}

.user-follow-block a {
    flex: 1;
    padding: 15px 10px;
    background: linear-gradient(135deg, #ffffff00, #eee7ff);
    border-radius: 8px;
    border: 1px solid #ece9ff;
    padding-left: 20px;
    color: #31388c;
    position: relative;
    overflow: hidden;
    font-size: 15px;
}

.user-follow-block a .icon {
    position: absolute;
    right: -15px;
    font-size: 70px;
    display: flex;
    bottom: -35px;
    filter: blur(5px);
    color: #343bff3d;
    transition: all .3s;
}

.user-follow-block a.follower-block {
    background: linear-gradient(135deg, #ffffff00, #ffecec);
}

.user-follow-block a.follower-block .icon {
    color: #ea9084b0;
}

.user-follow-block a:hover .icon {
    transform: scale(1.1);
    transition: all .3s;
}

.user-follow-block small {
    font-size: 14px;
    display: inline-flex;
    flex: 1;
    justify-content: space-between;
    z-index: 2;
}

.user-follow-block .info {
    display: flex;
}

.user-follow-block span {
    margin-right: 5px;
}

.user-follow-block .info i {
    opacity: .6;
}

.user-location-block {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid #ece9ff;
}

.user-location-block img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    filter: blur(2px);
}

.user-location-block .info {
    display: flex;
    padding: 15px;
    position: relative;
    z-index: 2;
    color: #31388c;
}

.user-location-block .info i {
    margin-right: 5px;
}

.user-info-block {
    background: linear-gradient(135deg, #ffffff00, #f1ecff);
    padding: 15px;
    margin-top: 12px;
    border: 1px solid #ece9ff;
    border-radius: 8px;
}

.user-info-block li {
    font-size: 14px;
    color: #75769b;
    padding: 8px 0;
}

.user-location-block .info:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background: linear-gradient(45deg, #efefff, transparent);
    z-index: -1;
}

.user-info-block li span {
    margin-right: 12px;
    min-width: 60px;
    display: inline-block;
}

.user-info-block li small {
    color: #31388c;
    font-size: 14px;
}

.user-dash-box {
    padding: 30px 40px;
}

.user-vip-block {
    padding: 15px 25px;
    background: linear-gradient(135deg, #f7faff, #dadfff);
    border-radius: 10px;
    height: 150px;
    border: 2px solid #ebecff;
    position: relative;
}

.user-vip-block .vip-card {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.user-vip-block .vip-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.user-vip-block .info {
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-vip-block .vip-name {
    font-size: 17px;
    font-weight: 600;
    color: #404589;
}

.user-vip-block .vip-icon {
    height: 90px;
}

.user-vip-block .current-vip {
    font-size: 12px;
    background: #ffe3c1;
    padding: 2px 10px;
    border-bottom-right-radius: 8px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    color: #a84003;
    border-top-left-radius: 8px;
}

.user-vip-block .vip-end-time {
    font-size: 12px;
    color: #7b7fa9;
    margin-top: 5px;
}

.user-vip-block .vip-end-time a {
    color: #6c74e1;
    display: inline-flex;
}

.user-vip-block a.go-vip {
    font-size: 13px;
    padding: 5px 15px;
    background: linear-gradient(45deg, #ffc0a0d9, #ffe6adb5);
    border-radius: 20px;
    color: #903204;
    display: inline-flex;
}

.user-vip-block a.go-vip i {
    margin-right: 2px;
}

.user-vip-block .info.no-vip {
    padding-top: 20px;
}

.user-vip-block .info.no-vip small {
    font-size: 12px;
    color: #585693;
    display: inline-flex;
}

.user-vip-block .info.no-vip small i {
    margin-right: 2px;
}

.user-vip-block .user-vip-btn {
    position: relative;
    z-index: 2;
}

.user-vip-block .see-limits  {
    font-size: 13px;
    display: inline-flex;
    background: #415aff;
    border-radius: 20px;
    padding: 3px 10px;
    color: #ffffff;
    border: 1px solid #415aff;
}

.user-vip-block .vip-renew {
    font-size: 13px;
    display: inline-flex;
    background: #ff62622e;
    border-radius: 20px;
    padding: 3px 12px;
    color: #af3232;
    border: 1px solid #deb1b1;
    margin-right: 5px;
}

.user-vip-block .user-vip-btn.no-vip {
    margin-top: 15px;
}

.user-lv-block {
    background: linear-gradient(135deg, #fafffb, #dcfff3);
    padding: 15px 25px;
    height: 150px;
    border: 2px solid #ecffef;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.user-lv-block .lv-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: 20px;
    justify-content: space-between;
}


.user-lv-block .lv-bage {
    font-size: 12px;
    background: #1eca5cc7;
    padding: 2px 10px;
    border-bottom-right-radius: 8px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    color: #ffffff;
    border-top-left-radius: 8px;
}

.user-lv-block .lv-icon {
    display: flex;
    column-gap: 10px;
}

.user-lv-block .lv-icon img {
    height: 24px;
}

.user-lv-block .lv-icon .lv-slug {
    color: #7eb48a;
    font-weight: 600;
}

.user-lv-block .blur-bg {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 70%;
    filter: blur(30px) brightness(1.2) opacity(0.5);
    transform: translate(-50%, -30%) scale(1.3);
}

.user-lv-block .lv-detail {
    font-size: 12px;
    padding: 3px 10px;
    background: #a9f0c0;
    border-radius: 20px;
    color: #2a9328;
    display: inline-flex;
}

.xp-line {
    position: relative;
    z-index: 2;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
}

.base-line {
    width: 100%;
    height: 4px;
    display: block;
    background: #c3e6d270;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.current-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #afffc4, #5bff92);
    border-radius: 20px;
}

span.xp-tips {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: #19193ca8;
}

.next-lv {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    color: #19193ca8;
}

.user-checkin-block {
    background: linear-gradient(312deg, #ffe8d4, #ffffff);
    height: 150px;
    border-radius: 10px;
    padding: 15px;
    border: 2px solid #fef0e1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.user-checkin-block .circle {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #ffbfac;
    border-radius: 50%;
    filter: blur(30px);
    bottom: -15px;
    right: -10px;
}

.user-checkin-block .user-sign-btn-style {
    color: #7e492a;
    font-size: 14px;
    background: linear-gradient(45deg, #fec586, #ffa6a2);
    padding: 6px 10px;
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 20px;
    display: flex;
    min-height: 33px;
    align-items: center;
    justify-content: center;
}

.user-checkin-block .user-sign-btn-style img {
    height: 16px;
    margin-left: 5px;
}

.checkin-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkin-top .title {
    font-size: 14px;
    font-weight: 600;
    color: #9f463a;
}

.checkin-detail {
    font-size: 20px;
    display: inline-flex;
    transition: transform 0.3s ease;
}

.user-checkin-block:hover .checkin-detail {
    animation: item-bounce 0.3s ease;
}

.checkin-detail img {
    width: 30px;
}

.total-sign {
    font-size: 13px;
    color: #8e532c;
    padding: 5px 0;
}

.chcekin-bottom {
    position: relative;
    z-index: 2;
}

@keyframes item-bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
  }

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}

.checkin-modal {
    background: linear-gradient(180deg, #ffe6b9, #ffffff);
    width: 480px;
    padding: 20px;
}

.calendar-inner {
    display: flex;
    justify-content: space-between;
    row-gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
}

.checkin-calendar {
    padding: 15px;
    background: #ffffff;
    border-radius: 12px;
}

.checkin-list {
    flex: 0 0 calc(25% - 8px);
    box-sizing: border-box;
    padding: 10px;
    opacity: .6;
    background: #e6e7f4;
    border: 1px solid #d9dbff;
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.checkin-list.checked {
    opacity: 1;
    background: linear-gradient(90deg, #ffc88c, #ffe8b4);
    border: 1px solid #ffe5d9;
}

.checkin-list.today {
    opacity: 1;
    background: #e6e7f4;
    border: 1px solid #ff9564;
}

.checkin-list.today.checked {
    opacity: 1;
    background: linear-gradient(90deg, #ffc88c, #ffe8b4);
    border: 1px solid #ff9564;
}

.calendar-inner .checkin-list:nth-child(7) {
  flex: 0 0 calc(50% - 8px);
}

.give-xp img {
    height: 18px;
}

.checkin-daynum {
    font-size: 13px;
    color: #c97146;
    font-weight: 600;
}

.checkin-daynum img {
    height: 16px;
    margin-right: 3px;
    filter: hue-rotate(262deg);
}

.checkin-card {
    font-size: 13px;
    display: flex;
    align-items: center;
}

.fudai img {
    width: 40px;
    margin-right: 15px;
}

.give-xp span , .give-point span {
    margin-left: 3px;
}

.give-xp , .give-point{
    margin: 5px 0;
}

.checkin-banner {
    padding: 40px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkin-banner .left img {
    width: 170px;
}

.checkin-banner .right img {
    height: 150px;
}

.checkin-btn-box {
    padding: 20px 0;
}

.checkin-btn-box a {
    display: flex;
    justify-content: center;
}

.checkin-btn-box a img {
    height: 60px;
}

.checkin-modal .circle1 {
    background: #ffcaae;
    width: 220px;
    height: 220px;
    position: absolute;
    top: -40px;
    right: -40px;
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
    opacity: .8;    
}

.checkin-modal .circle2 {
    background: #eeffae;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 180px;
    left: 10px;
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
    opacity: .6;
}

.xp-icon {
    height: 16px;
}

.user-xp-info {
    display: flex;
    column-gap: 10px;
    margin-top: 30px;
}


.user-xp-info b {
    font-size: 14px;
    font-weight: 400;
    margin-left: 5px;
}

.user-xp-info .user-xp , .user-xp-info .user-point {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px;
    background: #ffe4b0cf;
    border-radius: 20px;
    border: 1px solid #ffdcc3;
    cursor: pointer;
}

.user-xp-info .user-xp img {
    width: 18px;
    height: 18px;
}

.user-xp-info .user-point img {
    width: 18px;
    height: 18px;
}

.checkin-streak {
    margin-bottom: 15px;
    font-size: 15px;
}

.checkin-streak b {
    color: #f07446;
    font-weight: 400;
    padding: 0 3px;
}

a.user-has-sign-btn {
    padding: 10px 20px;
    background: #fde8ca;
    border-radius: 20px;
    color: #7e452d;
    cursor: auto;
}

.daily-task-list {
    padding: 12px 18px;
    background: #f3f3ff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #eae9ff;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.daily-task-list.completed {
    background: #f5fcf6;
    border-color: #d0eddf;
}

.task-completed {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 100px;
    opacity: .5;
}

.daily-task-list .add img {
    height: 18px;
    margin-right: 3px;
}

.daily-task-list .add {
    font-size: 14px;
    display: flex;
    margin-top: 8px;
}

.daily-task-list .add span {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.daily-task-list .title {
    font-size: 14px;
}

.daily-task-list .task-count {
    font-size: 14px;
}

.daily-task-list span.tasked-count {
    color: #2e49ff;
}

.daily-task-list .completed-bar {
    height: 6px;
    width: 60px;
    background: #e6e3fd;
    border-radius: 10px;
    position: relative;
    margin-top: 8px;
}

.daily-task-list .completed-bar .percent {
    height: 100%;
    position: absolute;
    background: #5f76ff;
    border-radius: 10px;
}

.daily-task-list .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.task-page-title {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.task-page-title .left {
    position: relative;
    display: flex;
    align-items: center;
}

.task-page-title .xp-detail-total {
    font-weight: 400;
    font-size: 14px;
    color: #a5a5c9;
    margin-left: 8px;
}

.task-page-title a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4e50a3;
}

.task-page-title span {
    z-index: 1;
    font-weight: 600;
}

.task-page-title .left::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100px;
    height: 8px;
    background: linear-gradient(90deg, #30e5a3, transparent);
    border-radius: 4px;
}

.daily-task-item {
    margin-bottom: 30px;
}

.task-page-title i {
    margin-right: 3px;
    z-index: 1;
}

.daily-task-empty {
    padding: 20px 0;
    text-align: center;
    margin-bottom: 40px;
    color: #889bbb;
    background: #f6f7ff;
    border-radius: 8px;
}

.user-lv-detail {
    background: linear-gradient(135deg, #fffbf9, #ffecdd);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #fff3e9;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 12px;
}

.lv-detail-item .lv-icon {
    display: flex;
    align-items: center;
    margin-top: 3px;
    width: 40px;    
}

.lv-detail-item .lv-icon img {
    width: 100%;
}

.lv-detail-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.lv-detail-item .lv-xp {
    font-size: 13px;
}

.lv-detail-item .lv-xp {
    font-size: 13px;
    color: #a07c6e;
}

.lv-detail-item .lv-xp.current {
    color: #f07446;
}

#user-lv-detail-list span.lv-height {
    width: 7px;
    border-radius: 20px;
    background: #f4e1d2;
}

.user-lv-detail-title {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.user-lv-detail-title a {
    display: flex;
    color: #f07446;
    font-weight: 600;
}

.user-lv-detail-title a span {
    font-weight: 400;
    color: #c58061;
}

.user-lv-detail-title span {
    display: flex;
    align-items: center;
    color: #c58061;
}

.user-lv-detail-title span i {
    margin-right: 3px;
}

#user-lv-detail-list span.lv-height.current {
    background: linear-gradient(0deg, #ffaa52, #ff784c);
}

div#user-lv-detail-list {
    height: auto;
    -ms-overflow-style: none; 
    user-select: none; 
    -webkit-user-select: none;
    -moz-user-select: none; 
     -ms-user-select: none
}

.dash-lv-info {
    margin-bottom: 40px;
}

.daily_checkin_banner {
    font-size: 14px;
    display: flex;
    align-items: center;
    background: linear-gradient(312deg, #ffe8d4, #ffeded);
    padding: 12px 18px;
    border-radius: 8px;
    height: 100%;
    justify-content: space-between;
    border: 1px solid #ffd5b8;
}

.daily_checkin_banner img {
    height: 32px;
    margin-right: 8px;
}

.daily_checkin_banner .user-sign-btn {
    background: linear-gradient(45deg, #fec586, #ffa6a2);
    padding: 6px 18px;
    font-size: 12px;
    border-radius: 20px;
    color: #7e492a;
}

.daily_checkin_banner .left {
    display: flex;
}

.daily_checkin_banner .left span {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.daily_checkin_banner .left span a {
    font-size: 13px;
    color: #d18f68;
    display: inline-flex;
}

.checkin-completed {
    background: #ffd9bd;
    padding: 6px 18px;
    font-size: 12px;
    border-radius: 20px;
    color: #a98874;
}

.xp-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 5px;
    border-bottom: 1px solid #eff4ff;
    margin-bottom: 10px;
}

.xp-detail-item .xp-detail-info {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

span.xp-detail-time {
    font-size: 12px;
    color: #a7a8c6;
}

span.xp-detail-task {
    font-size: 15px;
}

.xp-detail-reward {
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: #1e7a3c;
    font-size: 18px;
}

.resetpwd-wrap {
    max-width: 640px;
    width: 100%;
    margin-top: 120px;
}

.resetpwd-box {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.resetpwd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

a.back-link {
    display: flex;
    color: #8696e2;
}

.resetpwd-title {
    font-size: 24px;
    display: flex;
    column-gap: 3px;
    color: #2156ff;
}

.resetpwd-step-1-wrap , .resetpwd-step-2-wrap {
    max-width: 300px;
    width: 100%;
}

.resetpwd-form.resetpwd-step-1 {
    width: 100%;
}

.resetpwd-form input , .pwd-sure-form input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1f1fe;
    border: none;
    font-size: 13px;
    outline: none;
    padding-left: 32px;
}

.resetpwd-form input:focus , .pwd-sure-form input:focus {
    box-shadow: 0px 0px 0px 3px rgb(37 64 255 / 31%);
    transition: all .2s;
}

.resetpwd-form label , .pwd-sure-form label {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 40px;
}

.resetpwd-form label i , .pwd-sure-form label i {
    position: absolute;
    left: 10px;
    color: #7984ad;
}

.resetpwd-form .pwd-send-code {
    display: none;
}

.reset-pwd-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.reset-pwd-btn a {
    position: relative;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, #3039ff 0%, #719aff 100%);
    border-radius: 8px;
    color: #fff;
    -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;
    box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;
}

a.reset-back-step1 {
    box-shadow: none;
    background: #c4c4e0;
    margin-top: 10px;
    border: 1px solid #c9c9ea;
}

.reset-pwd-btn a:active {
    top: 1.5px;
}

.resetpwd-form .top-tips {
    font-size: 13px;
    background: #f1f1fe;
    padding: 10px;
    border-radius: 8px;
    color: #d18968;
}

.resetpwd-progress {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
    max-width: 400px;
    position: relative;
}

.resetpwd-progress .progress-item {
    display: flex;
    color: #a1a0af;
    align-items: center;
    background: #fff;
    z-index: 1;
    padding: 0 8px;
}

.resetpwd-progress .progress-item.active {
    color: #2156ff;
}

span.step-number {
    width: 20px;
    height: 20px;
    background: #d9dcff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13px;
    color: #868db9;
    margin-right: 4px;
}

.resetpwd-progress .progress-item.active span.step-number {
    background: #2156ff;
    color: #fff;
}

.resetpwd-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #d9dcff;
    transform: translateY(-50%);
    z-index: 0;
}

.resetpwd-step-2-wrap .tips {
    font-size: 13px;
    color: #d18968;
    margin-bottom: 10px;
}

.overlay_loading {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    border-radius: 8px;
}

.resetpwd-success {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 20px 0;
}

.resetpwd-success i {
    font-size: 24px;
    color: #2ed435;
}

.bth-spinner {
    margin-right: 5px;
}

.reset-pwd-btn a.protect {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 钱包页面 */
.wallet-box {
    padding: 16px 20px;
    background: #f8f9fe;
    border-radius: 8px;
    border: 1px solid #e4e8ff;
}

.dash-wallet .top-name {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-wallet .top-name a.user-sign-btn {
    color: #8897d8;
    display: inline-flex;
    font-size: 14px;
}

.wallet-card-btn {
    color: #8897d8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    cursor: pointer;
}

.wallet-top-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wallet-sign-btn {
    color: #8897d8;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

.wallet-signed {
    color: #999;
    font-size: 13px;
    cursor: default;
}

.dash-wallet .wallet-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.dash-wallet .cash-value {
    font-size: 32px;
    color: #ff8383;
    font-weight: 600;
    display: inline-flex;
    align-items: baseline;
}

.dash-wallet .cash-value span {
    font-size: 18px;
    margin-right: 3px;
}

.dash-wallet .credit-value {
    font-size: 32px;
    color: #6e86f3;
    font-weight: 600;
    display: inline-flex;
    align-items: baseline;
}

.dash-wallet .credit-value span {
    font-size: 18px;
    margin-right: 3px;
}

.wallet-signin-wrap .user-has-sign-btn {
    background: none;
    font-size: 14px;
    padding: 0;
    color: #be9f91;
}

a.charge-cash-btn {
    background: linear-gradient(90deg, #ff4444, #ff9f9f);
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 8px;
    color: #ffffff;
}

a.charge-credit-btn {
    background: linear-gradient(90deg, #5769ff, #a6a3fc);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    color: #ffffff;
}

a.transfer-credit-btn , a.transfer-cash-btn {
    margin-right: 8px;
    background: #ffffff00;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    color: #5769ff;
    border: 1px solid #5769ff;
}

a.transfer-cash-btn {
    color: #ff4444;
    border: 1px solid #ff4444;
}

.charge-credit, .charge-credit {
    display: flex;
    align-items: center;
}

.charge-modal {
    width: 380px;
    border-radius: 8px;
    min-height: 200px;
    max-height: 200px; /* 初始最大高度 */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* 过渡动画 */
}

.charge-modal.loaded {
    max-height: 800px;
}

.charge-inner-html .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.charge-input-form input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #ffdcdc;
    outline: none;
    background: #ffffff;
    padding-left: 40px;
}

.charge-input-form input:focus {
    border-color: #ff7555;
}

.charge-cash-set , .charge-credit-set {
    display: grid;
    justify-content: flex-start;
    align-items: center;
    margin-top: 12px;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.charge-cash-set .charge-cash-set-item , .charge-credit-set .charge-credit-set-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    padding: 6px 0;
    border: 1px solid #d8baab;
    cursor: pointer;
    position: relative;
}

.charge-cash-set-amount , .charge-credit-set-amount {
    font-weight: 600;
    color: #ff6c6c;
    font-size: 18px;
}

.charge-cash-set-discount , .charge-credit-set-add {
    font-weight: 400;
    color: #d0966e;
}

.charge-credit-set-add {
    font-size: 12px;
}

.charge-cash-set-amount span , .charge-cash-set-discount span , .charge-credit-set-amount span {
    font-size: 14px;
    margin-right: 2px;
}

.charge-credit-set-add span {
    font-size: 12px;
}

.charge-notice {
    font-size: 13px;
    color: #d18968;
    margin-top: 12px;
    padding: 10px 10px 10px 25px;
    background: #fff9f1;
    border-radius: 8px;
    border: 1px solid #ffecdf;
}

.charge-notice ul li {
    list-style: circle;
}

.charge-notice a {
    color: #ff3737;
}

.charge-input-form {
    position: relative;
    display: flex;
    align-items: center;
}

.charge-icon {
    position: absolute;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    color: #767676;
}

.charge-pay-box .pay-push-btn {
    flex-direction: column;
}

.charge-pay-box .need-pay-box {
    min-height: 27px;
    width: 80px;
    background: #f8f8ff;
    border-radius: 4px;
    margin-bottom: 10px;
}

.charge-pay-box .need-pay {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #ff6c6c;
}

.charge-pay-box .need-pay span {
    font-size: 14px;
    font-weight: 400;
    color: #767676;
}

.charge-cash-set-item.active , .charge-credit-set-item.active {
    border-color: #ff3921;
    background: #ffedd8;
    transition: all .2s;
}

.charge-cash-set-amount .ppo-pay-icon {
    width: 14px;
    height: 14px;
    margin-bottom: 2px;
}

.cash-center .cash-icon .ppo-pay-icon {
    width: 16px;
    height: 16px;
    margin-bottom: 3px;
}

.charge-cash-set-tag {
    position: absolute;
    font-size: 12px;
    top: -8px;
    right: -6px;
    background: linear-gradient(45deg, #fe4423, #ffa05c);
    padding: 0 6px;
    border-radius: 4px;
    border-bottom-left-radius: 0px;
    color: #fff;
    transform: scale(0.9);
}

.charge-credit-box .need-pay {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.charge-credit-box .need-pay .right {
    font-size: 14px;
    font-weight: 400;
    color: #c56034;
}

.charge-credit-box .need-pay .right span {
    color: #c56034;
}

.user_credit_record , .user_balance_record {
    display: flex;
    justify-content: space-between;
    padding: 15px 5px;
    border-bottom: 1px solid #eff4ff;
    margin-bottom: 10px;
}

.user_credit_record .left , .user_balance_record .left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.user_credit_record .left .object , .user_balance_record .left .object {
    font-size: 15px;
}

.user_credit_record .left .time , .user_balance_record .left .time {
    font-size: 12px;
    color: #a7a8c6;
}

.user_credit_record .right , .user_balance_record .right {
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: #6e86f3;
    font-size: 18px;
}

.user_balance_record .right {
    color: #ff8383;
}

.user_credit_record_list {
    margin-top: 40px;
}

.dashboard-tab {
    display: flex;
    margin-top: 40px;
    column-gap: 8px;
}

.dashboard-tab .tab-item {
    color: #484d90;
    background: #f5f5ff;
    padding: 6px 18px;
    font-size: 13px;
    border: 1px solid #eeedfe;
    display: inline-flex;
    cursor: pointer;
    border-radius: 20px;
}

.dashboard-tab .tab-item.active {
    background: #5552ff;
    color: #fff;
}

.dashboard-tab a:not(.active):hover {
    color: #6061e3;
    border-color: #6061e3;
    transition: ease-in-out 0.2s;
}

.wallet_record_list , .order_record_list {
    margin-top: 20px;
}

.user_order_item {
    padding: 14px 20px;
    background: #fdfdff;    
    border-radius: 12px;
    border: 1px solid #ebeeff;
    margin-bottom: 14px;
}

.order-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;  
    padding-bottom: 14px;
    border-bottom: 1px solid #e6e8ff;
    align-items: center;
    cursor: pointer;
}

.order-medium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.order-thum {
    flex-shrink: 0;
    margin-right: 12px;
    width: 72px;
    height: 72px;
    background: #f6f8ff;
    border-radius: 8px;
    border: 1px solid #ecefff;
    overflow: hidden;
}

img.order-thum-img.lazy.entered.loaded {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-meta {
    flex: 1;
    min-width: 0;
}

.order-price {
    flex-shrink: 0;
    margin-left: 12px;
}

.order-status {
    font-size: 13px;
    padding: 2px 12px;
    background: #dfffe0;
    color: #0d8f32;
    border-radius: 20px;
    border: 1px solid #a2e6a9;
}

.order-detail-modal .order-status-1 {
    color: #0d8f32;
}

span.order-time {
    font-size: 13px;
    color: #8e8e8e;
}

.order-status.order-status-0 {
    background: #fff3f3;
    color: #ff6c6c;
    border-color: #ffcfce;
}

.order-detail-modal .order-status-0 {
    color: #ff6c6c;
}

.order-status.order-status-2 {
    background: #fffbee;
    color: #d98800;
    border-color: #ffe7b2;
}

.order-detail-modal .order-status-2 {
    color: #d98800;
}

.order-status.order-status-3 {
    background: #e3e4f0;
    color: #4d5881;
    border-color: #d4def8;
}

.order-detail-modal .order-status-3 {
    color: #4d5881;
}

.order-action {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 14px;
    align-items: center;
}

.order-action a.order-btn {
    padding: 4px 12px;
    background: #0055ff1a;
    color: #3f64da;
    border-radius: 20px;
    border: 1px solid #cadaff; 
}

.order-action a.order-btn.cancel {
    background: #ffffff00;
    color: #3f64da;
}

.order-action a.order-btn:hover {
    opacity: 0.8;
    transition: ease-in-out 0.2s;
}

.order-action-right {
    display: inline-flex;
    column-gap: 8px;
}

a.order_detail {
    display: inline-flex;
    color: #99a0d8;
}

.user_order_item {
    transition: all 0.2s;
    cursor: pointer;
}

.user_order_item:hover {
    box-shadow: 0px 4px 9px 0px rgb(117 131 185 / 10%);
    border-color: #acb5ff;
}

.order-detail-dialog {
    width: 480px;
    border-radius: 8px;
}

.order-detail-modal {
    padding: 14px;
    border: 1px solid #e5e9f7;
    border-radius: 8px;
    background: #fbfcff;
}

.order-detail-row {
    font-size: 14px;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
}

.order-detail-row .label {
    color: #484d90;
}

.order-id-right {
    display: flex;
    column-gap: 2px;
}

.order-id-right i {
    color: #2c44ff;
}

.order-detail-banner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    margin-top: 16px;
}

.order-detail-banner .thum {
    width: 60px;
    height: 60px;
    background: #f6f8ff;
    border-radius: 8px;
    border: 1px solid #ecefff;
    overflow: hidden;
    margin-right: 12px;
}

.order-detail-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-detail-banner .info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 用户数据统计区块 */
.user-stats-block {
    margin-top: 40px;
}

.user-stats-block .stats-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-stats-block .stats-title i {
    color: #6c7bef;
}

.user-stats-block .stats-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 20px;
    background: #f8f9fb;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    min-height: 90px;
}

.user-stats-block .stats-item:hover {
    background: #eceeff;
    transform: translateY(-2px);
}

.user-stats-block .stats-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.user-stats-block .stats-item-disabled:hover {
    transform: none;
    background: #f8f9fb;
}

.user-stats-block .stats-icon {
    position: absolute;
    top: 4px;
    right: 12px;
    font-size: 42px;
    color: #b8c0e8;
    opacity: 0.15;
}

.user-stats-block .stats-item:hover .stats-icon {
    color: #6c7bef;
}

.user-stats-block .stats-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.user-stats-block .stats-count {
    font-size: 22px;
    font-weight: 700;
    color: #333;
}