.tasks-page {
    width: calc(100vw - 40px);
    max-width: 1380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.tasks-page .tasks-container {
    width: 100%;
    max-width: 915px;
    display: flex;
    gap: 30px;
    flex-direction: column;
    margin-bottom: 60px;
}

.tasks-page .tasks-top {
    width: 100%;
    height: 353px;
    border-radius: 24px;
    background: linear-gradient(102deg, #01E2D6 -4.71%, #0095FF 108.52%), #FFF;
    margin-top: 50px;
}

.tasks-page .tasks-top .layer {
    width: 100%;
    height: 353px;
    margin-top: -353px;
    display: flex;
}
.tasks-page .tasks-top .layer:first-child {
    margin-top: 0;
    overflow: hidden;
    justify-content: center;
}

.tasks-page .tasks-top .layer .light {
    width: 36px;
    height: 36px;
}
.tasks-page .tasks-top .layer .light .circle {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    filter: blur(31px);
}
.tasks-page .tasks-top .layer .light .dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    transform: translate(15px, -21px);
    filter: blur(2px);
}

.tasks-page .tasks-top .layer .light:nth-child(1) {
    transform: translate(50px, 260px);
}
.tasks-page .tasks-top .layer .light:nth-child(2) {
    transform: translate(400px, 180px) scale(0.7);
}
.tasks-page .tasks-top .layer .light:nth-child(3) {
    transform: translate(-150px, 120px) scale(1.3);
}

.tasks-page .tasks-top .layer.diamonds {
    overflow: hidden;
    border-radius: 24px;
    justify-content: center;
}
.tasks-page .tasks-top .layer.diamonds .diamond {
    width: 100px;
    height: 90px;
    background-image: url(../../../system/tasks/diamond.png);

}

.tasks-page .tasks-top .layer.diamonds .diamond:nth-child(1) {
    transform: scale(0.8) translate(160px, 70px)  rotate(-25deg);
    filter: blur(3px);
}
.tasks-page .tasks-top .layer.diamonds .diamond:nth-child(2) {
    transform: scale(0.8) translate(470px, 20px)  rotate(35deg);
    filter: blur(2px);
}
.tasks-page .tasks-top .layer.diamonds .diamond:nth-child(3) {
    transform: scale(1) translate(-220px, 260px)  rotate(15deg);
    filter: blur(2px);
}

.tasks-page .tasks-top .layer.mascot {
    justify-content: flex-end;
}
.tasks-page .tasks-top .layer.mascot .girl {
    width: 395px;
    height: 405px;
    background-image: url(../../../system/tasks/mascot.png);
    background-size: 100%;
    transform: translate(-10px, -52px);
}

.tasks-page .tasks-top .layer.content {
    width: calc(100% - 60px);
    height: calc(353px - 60px);
    padding: 30px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.tasks-page .tasks-top .layer.content .title {
    color: #fff;
    font-size: 64px;
    font-weight: 900;
    line-height: 100%;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.tasks-page .tasks-top .layer.content .descriptions {
    font-size: 14px;
    font-weight: 500;
    width: 242px;
}
.tasks-page .tasks-top .layer.content .balance {
    display: flex;
    width: 170px;
    height: 52px;
    align-items: center;
    border-radius: 14px;
    background: rgba(18, 47, 80, 0.50);
    backdrop-filter: blur(5px);
    padding: 0px 15px;
    justify-content: space-between;
}
.tasks-page .tasks-top .layer.content .balance span {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
}
.tasks-page .tasks-top .layer.content .balance .bal {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.tasks-page .tasks-top .layer.content .balance .bal svg {}

@media (max-width: 722px) {
    .tasks-page .tasks-top {margin-top: 0;}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(1) {transform: scale(0.8) translate(160px, 70px)  rotate(-25deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(2) {transform: scale(0.8) translate(340px, 20px)  rotate(35deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(3) {transform: scale(1) translate(-220px, 260px)  rotate(15deg);}
    .tasks-page .tasks-top .layer .light:nth-child(1) {transform: translate(50px, 260px);}
    .tasks-page .tasks-top .layer .light:nth-child(2) {transform: translate(310px, 180px) scale(0.7);}
    .tasks-page .tasks-top .layer .light:nth-child(3) {transform: translate(-150px, 120px) scale(1.3);}
    .tasks-page .tasks-top .layer.mascot .girl {transform: translate(40px, -11px) scale(0.8);}
}

@media (max-width: 586px) {
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(1) {transform: scale(0.8) translate(160px, 70px)  rotate(-25deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(2) {transform: scale(0.8) translate(260px, 20px)  rotate(35deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(3) {transform: scale(1) translate(-220px, 260px)  rotate(15deg);}
    .tasks-page .tasks-top .layer .light:nth-child(1) {transform: translate(50px, 260px);}
    .tasks-page .tasks-top .layer .light:nth-child(2) {transform: translate(240px, 180px) scale(0.7);}
    .tasks-page .tasks-top .layer .light:nth-child(3) {transform: translate(-150px, 120px) scale(1.3);}
    .tasks-page .tasks-top .layer.mascot .girl {transform: translate(70px, 9px) scale(0.7);}
}

@media (max-width: 515px) {
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(1) {transform: scale(0.8) translate(230px, 70px)  rotate(-25deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(2) {transform: scale(0.8) translate(180px, 270px)  rotate(35deg);}
    .tasks-page .tasks-top .layer.diamonds .diamond:nth-child(3) {transform: scale(1) translate(-220px, 260px)  rotate(15deg);}
    .tasks-page .tasks-top .layer .light:nth-child(1) {transform: translate(50px, 260px);}
    .tasks-page .tasks-top .layer .light:nth-child(2) {transform: translate(-90px, 150px) scale(0.7);}
    .tasks-page .tasks-top .layer .light:nth-child(3) {transform: translate(100px, 120px) scale(1.3);}
    .tasks-page .tasks-top .layer.mascot .girl {display: none;}
}

@media (max-width: 358px) {
    .tasks-page .tasks-top .layer {overflow: hidden;}
    .tasks-page .tasks-top .layer.content .title {font-size: 55px;}
}

.tasks-page .tasks-body {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.tasks-page .tasks-body .left {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tasks-page .tasks-body .left .tasks-group {}
.tasks-page .tasks-body .left .tasks-group .tasks-title {
    font-size: 20px;
    color: #fff;
    font-weight: 800;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list:first-child {}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task  {
    width: calc(50% - 40px);
    padding: 20px;
    height: -webkit-fill-available;
    border-radius: 24px;
    border: 1px solid #30344F;
    background: #161B2D;
    height: max-content;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1E2337;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-top .icon {
    width: 32px;
    height: 32px;
}

.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-top .icon img {
    width: 32px;
    height: 32px;
}

.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-top .title {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info {
    padding-top: 15px;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .descriptions {}

.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block.completed {
    border-radius: 14px;
    border: 1px solid rgba(136, 222, 113, 0.50);
    background: radial-gradient(224.74% 224.74% at 50% 50%, rgba(136, 222, 113, 0.15) 0%, rgba(22, 27, 45, 0.05) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #88DE71;
    font-size: 14px;
    font-weight: 500;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block.pending {
    border-radius: 14px;
    border: 1px solid rgba(169, 169, 169, 0.50);
    background: radial-gradient(224.74% 224.74% at 50% 50%, rgba(169, 169, 169, 0.15) 0%, rgba(22, 27, 45, 0.05) 100%);
    color: #A9A9A9;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block {
    height: 44px;
    width: 100%;
    background: #090F1E;
    border-radius: 14px;
    display: flex;
    align-items: center;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block .button {width: calc(100% - 80px);height: 44px;display: flex;align-items: center;justify-content: center;border-radius: 14px;background: linear-gradient(279deg, #01E2D6 -26.03%, #0095FF 144.66%), linear-gradient(84deg, #4FB1A1 -7.08%, #79EE73 132.64%);color: #fff;font-weight: 500;font-size: 14px;cursor: pointer;}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block .diamonds {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.tasks-page .tasks-body .left .tasks-group .tasks-list .task .task-info .button-block .diamonds svg {
    margin-left: -7px;
}

.tasks-page .tasks-body .line {
    width: 1px;
    height: auto;
    background: #161B2D;
}

.tasks-page .tasks-body .right {
    width: 35%;
}

.tasks-page .tasks-body .right .tasks-group {}

.tasks-page .tasks-body .right .tasks-group .tasks-title {
    display: flex;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    align-items: center;
    gap: 15px;
}
.tasks-page .tasks-body .right .tasks-group .tasks-title span {
    width: 20px;
    height: 20px;
    display: block;
    background: #161B2D;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.tasks-page .tasks-body .right .tasks-group .tasks-title span svg {}

.tasks-page .tasks-body .right .tasks-group .tasks-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task {
    width: calc(100% - 40px);
    padding: 20px;
    height: -webkit-fill-available;
    border-radius: 24px;
    border: 1px solid #30344F;
    background: #161B2D;
    height: max-content;
    cursor: pointer;
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task > .slide {}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task > .slide > .swiper {
    width: 98%;
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-reward {
    position: relative;
    height: 26px;
    width: 100%;
    margin-top: -20px;
    margin-bottom: -6px;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-reward .reward-block {
    width: 69px;
    height: 26px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(279deg, #01E2D6 -26.03%, #0095FF 144.66%), linear-gradient(286deg, #01E2D6 -196.61%, #0095FF 113.88%);
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    justify-content: center;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-reward .reward-block svg {
    margin-left: -5px;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content {
    display: flex;
    flex-direction: column;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content .task-top {
    display: flex;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1E2337;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content .task-top .icon {
    width: 32px;
    height: 32px;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content .task-top .task-name {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content .task-top .task-name span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-content .descriptions {
    padding-top: 15px;
    font-size: 14px;
    font-weight: 400;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom {
    gap: 20px;
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination {
    display: flex;
    gap: 5px;
    height: 18px;
    display: flex;
    align-items: center;
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page {
    width: 18px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page svg {
    display: none;
}


.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page.active {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    /* background: unset; */
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page.active svg {
    display: block;
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page.success {
    background: linear-gradient(282deg, #01E2D6 23.08%, #0095FF 132.41%);
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page.warning {
    background: linear-gradient(282deg, #E20175 23.08%, #FF002B 132.41%);
}
.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .pagination .pagination-page.pending {
    background: rgba(255, 255, 255, 0.1);
}

.tasks-page .tasks-body .right .tasks-group .tasks-list .task .task-bottom .button {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(279deg, #01E2D6 -26.03%, #0095FF 144.66%), linear-gradient(84deg, #4FB1A1 -7.08%, #79EE73 132.64%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

@media (max-width: 840px) {
    .tasks-page .tasks-body .left {width: 50%;}
    .tasks-page .tasks-body .left .tasks-group .tasks-list {flex-direction: column;}
    .tasks-page .tasks-body .left .tasks-group .tasks-list .task {width: calc(100% - 40px);}
    .tasks-page .tasks-body .right {width: 50%;}
}

@media (max-width: 600px) {
    .tasks-page .tasks-body {flex-direction: column;}
    .tasks-page .tasks-body .left {width: 100%;}
    .tasks-page .tasks-body .right {width: 100%;}
    .tasks-page .tasks-body .line {
        width: 100%;
        height: 1px;
        background: #161B2D;
    }
}

.shop-lore {
    text-align: center;
    font-size: 20px;
    opacity: 0.5;
    line-height: 25PX;
    padding: 50px 0px;
}

.tasks-page .shop {}
.tasks-page .shop .category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tasks-page .shop .category .category-title {
    font-size: 20px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 32px;
}
.tasks-page .shop .category .boxes {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
.tasks-page .shop .category .boxes .box {
    width: calc(calc(100% - 60px - 160px - 8px) / 4);
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid #30344F;
    background: #161B2D;
    height: max-content;
    align-items: center;
    cursor: pointer;
}
.tasks-page .shop .category .boxes .box .name {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 99%;
}
.tasks-page .shop .category .boxes .box .image {}
.tasks-page .shop .category .boxes .box .image img {
    width: 150px;
    height: 150px;
}
.tasks-page .shop .category .boxes .box .button {
    border-radius: 14px;
    border: 1px solid rgba(169, 169, 169, 0.50);
    /* background: #090F1E; */
    color: #A9A9A9;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    padding-right: 16px;
    color: #fff;
    gap: 3px;
    cursor: pointer;
}
.tasks-page .shop .category .boxes .box .button span {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}
.tasks-page .shop .category .boxes .box .button span svg {
    margin-right: -3px;
}

@media (max-width: 870px) {
    .tasks-page .shop .category .boxes .box {
        width: calc(calc(100% - 40px - 120px - 6px) / 3) !important;
    }
}

@media (max-width: 570px) {
    .tasks-page .shop .category .boxes .box {
        width: calc(calc(100% - 20px - 80px - 4px) / 2) !important;
    }
}

@media (max-width: 380px) {
    .tasks-page .shop .category .boxes .box {
        width: calc(100% - 40px - 2px) !important;
    }
}