:root {
    --ui-container: 1200px;
    --ui-header-height: 80px;
}




@media screen and (max-width: 768px) {
    :root {
        --ui-header-height: 58px;
    }
}

html {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
    html {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto
    }
}

@media only screen and (max-width: 959px) {
    html {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-feature-settings: 'ss01';
    font-feature-settings: 'ss01';
    background: #fff;
    overflow-x: hidden;
    color: #0d0c22;
}

:where(.wp-block-comments *) {
    all: unset;
}

[v-cloak] {
    display: none;
}

.circle {
    aspect-ratio: 1 / 1;
}

a {
    text-decoration: none;
}

.page-numbers:where(.next, .prev) {
    order: -1;
    flex: none;
    background: 0;
}

:is(.page-numbers):not(.next, .prev, .dots):hover {
    outline-color: hsl(var(--ls--subs-color) / .8);
    outline-offset: 0;
    background: 0;
}

:where(.entry-content) {
    counter-reset: h2;
    font-synthesis: initial;
}

:where(.entry-content) ul {
    list-style: disc;
    margin-left: 2em;
}

:where(.entry-content) ol {
    list-style: decimal inside;
    padding-left: 1em;
}

:where(.entry-content) li {
    list-style: inherit;
}

:where(.entry-content)> :where(thyuu-embed, p, pre, address, blockquote, figure, details, iframe, audio, video, h1, h2, h3, h4, h5, h6, ul, ol) {
    margin-block: 1em;
}

:where(.entry-content) :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: .5em;
    font-synthesis: initial;
}

:where(.entry-content)> :first-child {
    margin-top: 0;
}

:where(.entry-content)> :last-child {
    margin-bottom: 0;
}

:where(.entry-content) a:not([role="button"]) {
    color: hsl(var(--ls--main-color));
}

:where(.entry-content) a:not(:has(*))::before {
    display: inline-block;
    text-indent: 0;
    margin: 0 .25em 0 0;
}

:where(.entry-content) a:not(:has(*), .post-page-numbers, [aria-label], [role="button"])::before {
    content: "\ecaf";
    rotate: 45deg;
    scale: .75;
    transition: rotate .5s;
    font-family: "remixicon";
}

:where(.entry-content) a[target="_blank"]:not(:has(*), .post-page-numbers, [aria-label], [role="button"])::before {
    content: "\e667";
}

:where(.entry-content) a:not(:has(*), [role="button"]):hover::before {
    rotate: 0deg;
}

:where(.wp-block-code) button {
    cursor: pointer;
}

:where(.entry-content) sup.fn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    line-height: 1.5em;
    margin: 0 .25em;
    vertical-align: middle;
    color: hsl(var(--ls--main-color));
    background: hsl(var(--ls--subs-color) / .1);
    border-radius: 1em;
}

:where(.entry-content) sup.fn a:is(:hover, :target) {
    color: white;
    background: hsl(var(--ls--main-color));
}

:where(.entry-content) sup.fn a::before {
    display: none !important;
}


.table-content {
    width: min(var(--ls--size-card-normal), 100%);
    margin-inline: auto 0;
    bottom: auto;
    gap: 1em;
}

#mulu-toggle:checked~.thyuu-icon-mulu:after {
    content: attr(close-title);
}

.table-content header {
    font-weight: var(--ls--font-weight-title);
}

.table-content header:before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: hsl(var(--ls--color-font) / .05);
}

.table-content ul {
    padding: .5em;
    margin: -1em;
    counter-reset: h2;
    overflow: clip overlay;
    overscroll-behavior-y: contain;
    -webkit-mask: var(--ls--mask-scroll-y);
}

.table-content a {
    --table-back: hsl(var(--ls--color-font) / .05);
    display: flex;
    align-items: center;
    margin: 0 0 0 calc(var(--table-edge, 0em) + 1.5em);
    outline: thin solid #0000;
    border-radius: var(--ls--size-radius);
    padding: .5em .75em;
    gap: .25em;
    transition: .5s;
}

.table-content a:hover {
    --table-back: hsl(var(--ls--main-color) / .1);
    background: hsl(var(--ls--main-color) / 5%);
}

.entry-content h2,
.table-content .h2 {
    counter-reset: h3;
    --table-ment: h2;
    --table-edge: -1.5em;
}

.entry-content h3,
.table-content .h3 {
    counter-reset: h4;
    --table-ment: h3;
    --table-tent: counter(h2) "." counter(h3);
}

.entry-content h4,
.table-content .h4 {
    counter-reset: h5;
    --table-ment: h4;
    --table-tent: counter(h2) "." counter(h3) "." counter(h4);
    --table-edge: 1em;
}

.entry-content h5,
.table-content .h5 {
    counter-reset: h6;
    --table-ment: h5;
    --table-tent: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
    --table-edge: 2em;
}

.entry-content h6,
.table-content .h6 {
    --table-ment: h6;
    --table-tent: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
    --table-edge: 3em;
}

body.toc-order-cjk :is(.entry-content h2, .table-content .h2) {
    --table-tent: counter(h2, cjk-decimal);
}

body.toc-order-cjk :is(.entry-content h3, .table-content .h3) {
    --table-tent: "(" counter(h3, cjk-decimal) ")";
}

body.toc-order-cjk :is(.entry-content h4, .table-content .h4) {
    --table-tent: counter(h4, decimal);
}

body.toc-order-cjk :is(.entry-content h5, .table-content .h5) {
    --table-tent: "(" counter(h5, decimal) ")";
}

body.toc-order-cjk :is(.entry-content h6, .table-content .h6) {
    --table-tent: counter(h6, disc);
}

body.toc-order-roman :is(.entry-content h2, .table-content .h2) {
    --table-tent: counter(h2, upper-roman);
}

body.toc-order-roman :is(.entry-content h3, .table-content .h3) {
    --table-tent: counter(h3, lower-roman);
}

body.toc-order-roman :is(.entry-content h4, .table-content .h4) {
    --table-tent: counter(h4);
}

body.toc-order-roman :is(.entry-content h5, .table-content .h5) {
    --table-tent: counter(h4) "." counter(h5);
}

body.toc-order-roman :is(.entry-content h6, .table-content .h6) {
    --table-tent: counter(h4) "." counter(h5) "." counter(h6);
}

body.toc-order-auto .entry-content :is(h1, h2, h3, h4, h5, h6)::before,
body.toc-order-auto .table-content :is(.h1, .h2, .h3, .h4, .h5, .h6)::before {
    counter-increment: var(--table-ment);
    content: var(--table-tent, counter(h2));
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75em;
    font-variant-numeric: tabular-nums;
    margin: 0 .25em 0 0;
    padding: .5em;
    min-width: 2em;
    height: 2em;
    line-height: 1em;
    vertical-align: .125em;
    border-radius: 1em;
    background: var(--table-back, radial-gradient(farthest-side at 0 0, hsl(var(--ls--main-color) / .3), #0000) no-repeat 0 0 / 2em 2em);
    transition: .3s;
}

body.toc-order-auto .table-content :is(.h1, .h2, .h3, .h4, .h5, .h6):active::before {
    scale: 1.2;
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6):target {
    position: relative;
    z-index: 2;
}

:where(.entry-content) :is(h1, h2, h3, h4, h5, h6):target::after {
    --trfm: translateX(-1rem);
    content: var(--table-mark, "\ea6e");
    color: hsl(var(--ls--main-color));
    font-family: 'remixicon' !important;
    position: absolute;
    top: 0;
    right: 100%;
    width: 100vw;
    text-align: right;
    margin: 0 .5em;
    font-size: xx-large;
    background: linear-gradient(90deg, #0000, currentColor 80%, #0000 calc(100% - 1em)) no-repeat 100% / 100% .125em;
    animation: transform 1s .5s ease both, opacity 1s .5s ease both;
}

body.toc-order-auto .entry-content :is(h1, h2, h3, h4, h5, h6):target::before {
    color: white;
    background: hsl(var(--ls--main-color));
}

.site-logo {
    width: auto;
    height: 30px;
}

.site-nav-search {
    box-sizing: border-box;
    flex: 1;
    height: var(--site-search-height, var(--site-nav-search-height, 56px));
    position: relative;
}

.site-header .site-nav-search {
    margin: 0 12px 0 0;
}

.site-nav-search__wrapper {
    align-items: center;
    background: #f3f3f6;
    border: 1px solid transparent;
    border-radius: 9999999px;
    box-sizing: border-box;
    display: inline-flex;
    gap: 12px;
    height: 100%;
    outline: 3px solid transparent;
    outline-offset: -3px;
    padding: 0 6px 0 0;
    transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
    transition-property: background-color;
    width: 100%;
}

.site-nav-search__input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000;
    flex: 1;
    font-size: var(--site-search-font-size, 16px) !important;
    font-weight: 400 !important;
    height: 100% !important;
    line-height: 1;
    margin: 0 !important;
    outline: none;
    padding: 0 0 0 16px !important;
    text-overflow: ellipsis;
    width: 100%;
}

@media (min-width:790px) {
    .site-nav-search.site-nav-search--nav {
        max-width: 520px;
        width: 520px;
    }

    .site-nav-search__wrapper {
        padding: 0 8px 0 0;
    }
}


.search-panel {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    max-height: 650px;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    scrollbar-color: #fff #eaeaea;
    scrollbar-width: thin;
    visibility: hidden;
}

.search-panel--visible {
    opacity: 1;
    visibility: visible;
}

.search-item {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    min-height: 40px;
    padding: 4px;
    font-size: 14px;
}

.search-item__link {
    align-items: center;
    color: inherit;
    display: grid;
    grid-gap: 4px;
    gap: 4px;
    grid-auto-flow: column;
    justify-content: space-between;
    width: 100%;
}

.search-item__content {
    align-items: center;
    cursor: pointer;
    display: grid;
    grid-gap: 8px;
    gap: 8px;
    grid-auto-flow: column;
    line-height: 1.25em;
    overflow: hidden;
}

.search-item__icon {
    align-items: center;
    background: #fff;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--ui-border);
    color: var(--ui-text-muted);
    display: flex;
    flex-shrink: 0;
    font-size: .7em;
    height: 28px;
    justify-content: center;
    overflow: hidden;
    stroke-width: 1.6;
    text-align: center;
    width: 28px;
    background: none;
    box-shadow: none;
}

.search-item svg {
    height: 15px;
    width: 15px;
}

.single-wrap-after li {
    list-style: none;
}

body[data-site-nav-hide-search] .site-header {
    margin-bottom: 0;
}

body[data-site-nav-hide-search='true'] .site-header {
    position: relative;
}

body.home:not([data-site-nav-scrolled]) .site-nav-search--nav {
    display: none;
}

body[data-site-nav-hide-search='true'] .site-nav-search--nav {
    display: none;
}

.site-nav-search--home-hero .dropdown {
    display: none;
}

#article-index {
    background-color: var(--ls--color-back-font);
    border-radius: 8px;
    padding: 12px;
}

#article-index strong {
    border-bottom: 1px dashed #DDDDDD;
    display: block;
    line-height: 30px;
    padding: 0 4px;
    font-size: var(--ls--size-small);
}

#article-index li ul {
    padding-left: 20px;
}

#article-index a {
    padding-left: .3rem;
    color: var(--toc-link-color, #666261);
    line-height: 24px;
    padding: 8px;
    border-radius: 12px;
    color: rgba(60, 60, 67, 0.8);
    cursor: default;
    min-height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#article-index a.active {
    opacity: 1;
    filter: blur(0);
}

#article-index a:not(.active) {
    opacity: .6;
    cursor: pointer;
    filter: blur(1px);
    transition: .3s;
    width: 100%;
}


@media (max-width: 789px) {
    .site-nav-search--nav {
        bottom: 1px;
        left: 0;
        opacity: 1;
        padding: 3px 16px 7px;
        pointer-events: auto;
        position: absolute;
        transform: translateY(100%);
        transition: .4s cubic-bezier(.87, 0, .13, 1);
        width: 100%;
        z-index: -2;
        background-color: white;
    }
}


@media (max-width: 789px) {
    body[data-site-nav-scrolled]:not([data-site-nav-search-open]) .site-nav-search--nav {
        transform: translateY(85%);
        opacity: 0;
        pointer-events: none;
    }
}


.home-hero [data-home-trending-items] {
    display: none;
}

.home-hero label {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    display: block;
    border-radius: 9999999px;
    cursor: pointer;
}

.home-hero input[type="radio"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}



.home-hero label:has(:checked) {
    background-color: var(--hero-checked-bg-color, #3a3546);
    color: var(--hero-checked-text-color, #fff);
}

.home-hero:has(input[data-home-search-type-radio='post']:checked) [data-home-trending-items='post'] {
    display: contents;
}

.home-hero:has(input[data-home-search-type-radio='user']:checked) [data-home-trending-items='user'] {
    display: contents;
}

.home-hero:has(input[data-home-search-type-radio='piece']:checked) [data-home-trending-items='piece'] {
    display: contents;
}


.shot-thumbnail-overlay {
    align-items: flex-end;
    background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .003) 63.94%, rgba(0, 0, 0, .014) 65.89%, rgba(0, 0, 0, .033) 67.83%, rgba(0, 0, 0, .059) 69.78%, rgba(0, 0, 0, .093) 71.72%, rgba(0, 0, 0, .133) 73.67%, rgba(0, 0, 0, .177) 75.61%, rgba(0, 0, 0, .223) 77.56%, rgba(0, 0, 0, .267) 79.5%, rgba(0, 0, 0, .307) 81.44%, rgba(0, 0, 0, .341) 83.39%, rgba(0, 0, 0, .367) 85.33%, rgba(0, 0, 0, .386) 87.28%, rgba(0, 0, 0, .397) 89.22%, rgba(0, 0, 0, .4) 91.17%);
    border-radius: 8px;
    content: "";
    display: flex;
    inset: 0;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    transition: opacity .3s ease;
    z-index: 2;
}

.shot-thumbnail-base:after {
    background: linear-gradient(180deg, transparent 0, transparent 8.1%, rgba(0, 0, 0, .001) 15.5%, rgba(0, 0, 0, .003) 22.5%, rgba(0, 0, 0, .005) 29%, rgba(0, 0, 0, .008) 35.3%, rgba(0, 0, 0, .011) 41.2%, rgba(0, 0, 0, .014) 47.1%, rgba(0, 0, 0, .016) 52.9%, rgba(0, 0, 0, .019) 58.8%, rgba(0, 0, 0, .022) 64.7%, rgba(0, 0, 0, .025) 71%, rgba(0, 0, 0, .027) 77.5%, rgba(0, 0, 0, .029) 84.5%, rgba(0, 0, 0, .03) 91.9%, rgba(0, 0, 0, .03));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}


.shot-thumbnail-overlay-content .shot-actions-container {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    list-style: none;
}

.shot-thumbnail-overlay-content .shot-actions-container .shot-action {
    margin-left: 12px;
}

.grid-list {
    display: grid;
    gap: var(--shots-gap, 40px);
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill, minmax(var(--shots-width, 300px), 1fr));
}

.shot-thumbnail-base:hover .shot-thumbnail-overlay {
    opacity: 1;
}

.vote-btn.liked {
    color: #ea64d9;
}

.overlay-shot-action .vote-btn.liked {
    background-color: #fdf0fb;
}

img.lazyload:not(.loaded) {
    /*opacity: .5;*/
    -webkit-transition: .8s ease-in-out opacity;
    transition: .8s ease-in-out opacity;
    filter: blur(35px);
    -webkit-filter: blur(35px);
}

img.lazyload.loaded {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    /*opacity: 1;*/
    transition: 1s filter linear, 1s -webkit-filter linear;
}



.shot-container {
    position: relative;
    display: flex;
    width: 100%;
}


@media(max-width: 499px) {
    .shot-container {
        flex-direction: column;
    }
}

.shot-container .shot-content {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 32px 16px;
    flex: 1 1 auto;
    min-width: 0;
}





.shot-container .shot-content-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    margin: auto;
    gap: 2em;
}




.shot-sidebar-wrapper {
    position: relative;
    flex: 0 0 auto;
}



.shot-sidebar {
    position: relative;
    z-index: 11;
    height: 100%;
    border-left: 1px solid rgb(230.8, 230.7, 232.9);
    background: #fff;
    will-change: transform
}



.slide-sidebar-enter-active {
    transition-duration: .4s;
    transition-property: opacity, transform;
    transition-timing-function: ease;
    opacity: 0;
    transform: translate(100%)
}

.slide-sidebar-enter-to {
    opacity: 1;
    transform: translate(0);
    transition-delay: .25s
}

.slide-sidebar-leave-active {
    display: none;
}

.shot-sidebar .close-sidebar {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: all .2s ease;
    color: rgb(158.2, 157.8, 166.6)
}

@media(max-width: 767px) {
    .shot-sidebar .close-sidebar {
        top: var(--ui-header-height);
    }
}

@media(max-width: 499px) {
    .shot-sidebar .close-sidebar {
        color: rgb(61.4, 60.6, 78.2)
    }

    .shot-sidebar .close-sidebar:active,
    .shot-sidebar .close-sidebar:hover {
        color: #0d0c22
    }

    .shot-sidebar .close-sidebar:active .close-icon-mobile,
    .shot-sidebar .close-sidebar:hover .close-icon-mobile {
        transform: translateX(-4px)
    }
}

@media(min-width: 500px) {
    .shot-sidebar .close-sidebar {
        top: 40px;
        left: -13px;
        width: 24px;
        height: 24px;
        border: 1px solid rgb(230.8, 230.7, 232.9);
        border-radius: 50%;
        background: #fff
    }

    .shot-sidebar .close-sidebar:hover {
        transform: scale(1.1);
        border-color: rgb(158.2, 157.8, 166.6);
        color: rgb(109.8, 109.2, 122.4)
    }
}

.shot-sidebar .close-sidebar .close-icon-desktop {
    display: none;
    width: 20px;
    height: auto
}

@media(min-width: 500px) {
    .shot-sidebar .close-sidebar .close-icon-desktop {
        display: block
    }
}

.shot-sidebar .close-sidebar .close-icon-mobile {
    width: 16px;
    height: auto;
    margin-left: 8px;
    transition: transform .2s ease
}

@media(min-width: 500px) {
    .shot-sidebar .close-sidebar .close-icon-mobile {
        display: none
    }
}

.shot-sidebar-index {
    position: sticky;
    top: 0;
}


.shot-sidebar.shot-show-comment .shot-sidebar-index {
    display: none;
}

.shot-sidebar.shot-show-comment .shot-sidebar-main {
    display: block;
}

.shot-sidebar .shot-sidebar-main {
    display: none;
}

.shot-sidebar .shot-sidebar-content {
    box-sizing: border-box;
    height: 100vh;
}

@media(min-width: 500px) {
    .shot-sidebar .shot-sidebar-content {
        position: sticky;
        top: 14px;
        width: 380px
    }
}

.shot-overlay .shot-sidebar .shot-sidebar-content {
    top: 0
}

.shot-sidebar .sidebar-scrolling-container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: var(--ui-header-height) 24px 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}

@media(min-width: 500px) {
    .shot-sidebar .sidebar-scrolling-container {
        padding: 30px 16px 120px
    }
}

.shot-sidebar .sidebar-scrolling-container::-webkit-scrollbar {
    display: none
}

.shot-sidebar .loading-more {
    display: block;
    margin-top: 24px
}

.shot-sidebar .reached-end-message {
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgb(230.8, 230.7, 232.9);
    color: rgb(61.4, 60.6, 78.2);
    text-align: center
}

.shot-actions-toolbar {
    margin: 260px 12px 0 0
}

@media(min-width: 920px) {
    .shot-actions-toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateX(0);
        opacity: 1;
        will-change: transform
    }

    .shot-actions-toolbar.action-toolbar-enter-active {
        opacity: 0;
        transition: all .4s ease
    }

    .shot-actions-toolbar.action-toolbar-enter-to {
        transition-delay: .8s;
        opacity: 1
    }

    .shot-actions-toolbar.action-toolbar-leave-active {
        display: none;
    }

}

@media(min-width: 920px) {
    .shot-actions-toolbar .designer-hovercard {
        margin-bottom: 16px
    }
}

.shot-actions-toolbar .action-buttons-divider {
    width: 100%;
    height: 1px;
    background: rgb(230.8, 230.7, 232.9)
}

.shot-actions-toolbar-buttons {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    grid-gap: 16px;
    gap: 16px
}

.shot-actions-toolbar-buttons {
    position: relative;
    will-change: transform
}

@media(min-width: 920px) {
    .shot-actions-toolbar-buttons {
        z-index: 1
    }
}

.shot-sidebar-app {
    height: 100%;
    flex-shrink: 0;
}


.shot-sidebar-wrapper .admin-actions-menu {
    position: absolute;
    z-index: 2;
    top: 202px;
    right: 12px
}

@media(max-width: 919px) {
    .shot-sidebar-wrapper .admin-actions-menu {
        display: none
    }
}




/* comment */


.shot-comments-post {
    margin-bottom: 24px
}

.shot-comment {
    display: flex;
    position: relative;
    flex-direction: column;
    margin-bottom: 24px
}

.shot-comment .shot-comment-avatar-and-author {
    padding-right: 32px;
    padding-left: 44px;
    pointer-events: none
}

.shot-comment .profile-avatar {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto
}

.profile-avatar .avatar-link {
    display: inline-block;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    opacity: 1;
}


.profile-avatar .avatar-image-wrapper.avatar-regular {
    width: 32px;
    height: 32px;
}

.profile-avatar .avatar-image-wrapper {
    overflow: hidden;
    border-radius: 50%;
    background: #e7e7e9;
}

.profile-avatar .avatar-image {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.shot-comment .shot-comment-author {
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 4px;
    color: #0d0c22;
    line-height: 16px;
    pointer-events: auto
}

.shot-comment .children-comments {
    margin-top: 24px
}

.shot-comment .reply-link {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-right: 12px;
    color: rgb(109.8, 109.2, 122.4);
}

.shot-comment .edit-link {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: rgb(109.8, 109.2, 122.4);
}



.shot-comment .children-comments:empty {
    display: none
}

.shot-comment .shot-comment-author:hover {
    color: rgb(61.4, 60.6, 78.2)
}

.shot-comment .shot-comment-content {
    padding-left: 44px
}

.shot-comment .shot-comment-text {
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 2px;
    color: rgb(61.4, 60.6, 78.2);
    word-wrap: break-word
}

.shot-comment .shot-comment-text p {
    margin-bottom: 12px;
    padding: 0;
    color: rgb(61.4, 60.6, 78.2)
}

.shot-comment .shot-comment-text p:last-child {
    margin-bottom: 0
}

.shot-comment .comment-time-and-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shot-comment .comment-time-and-actions .time-ago {
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: rgb(109.8, 109.2, 122.4)
}

.shot-comment .comment-time-and-actions .like-comment,
.shot-comment .comment-time-and-actions .reply-comment {
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-left: 13px;
    color: rgb(109.8, 109.2, 122.4)
}

.shot-comment .comment-time-and-actions .like-comment:hover,
.shot-comment .comment-time-and-actions .reply-comment:hover {
    color: #0d0c22
}

.shot-comment .shot-comment-rebound {
    display: flex;
    margin-top: 10px
}

.shot-comment .shot-comment-rebound .lazy-img-wrapper {
    flex-grow: 0;
    max-width: 63px;
    margin: 0 12px 6px 0
}

.shot-comment .shot-comment-rebound .lazy-img-wrapper .shot-comment-rebound-image {
    width: 100%;
    height: auto;
    border-radius: 6px
}

.shot-comment .shot-comment-rebound .shot-comment-rebound-info h3 {
    margin-bottom: 4px;
    color: rgb(158.2, 157.8, 166.6);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase
}

.shot-comment .shot-comment-rebound .shot-comment-rebound-info a {
    display: inline-block;
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.shot-comment .comment-actions {
    position: absolute;
    top: -4px;
    right: -4px
}

.shot-comment .comment-actions a {
    display: inline-block;
    width: 24px;
    color: rgb(109.8, 109.2, 122.4);
    text-align: center
}

.shot-comment .comment-actions a:hover {
    color: rgb(61.4, 60.6, 78.2)
}

.shot-comment .comment-actions a svg {
    width: 12px;
    height: auto
}

.shot-comments-disabled {
    margin-bottom: 24px;
    padding: 32px 48px;
    border-radius: 8px;
    background: rgb(247.74, 247.71, 248.37);
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shot-comments-disabled-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    color: rgb(158.2, 157.8, 166.6)
}

.shot-comments-disabled-text {
    color: rgb(61.4, 60.6, 78.2);
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.shot-comments-empty {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.shot-comments-empty-image {
    width: 100%;
    max-width: 130px;
    height: auto;
    margin-bottom: 8px
}

.shot-comments-empty-text {
    margin-bottom: 16px;
    color: rgb(61.4, 60.6, 78.2);
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.shot-comments-signup {
    margin-bottom: 24px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.shot-comments-signup.has-comments {
    margin-bottom: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgb(242.9, 242.85, 243.95)
}

.shot-comments-signup-image {
    width: 100%;
    max-width: 134px;
    height: auto
}

.shot-comments-signup-header {
    margin-bottom: 8px;
    color: #0d0c22;
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px
}

@media(min-width: 768px) {
    .shot-comments-signup-header {
        font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 29px
    }
}

.shot-comments-signup-text {
    margin-bottom: 12px;
    padding: 0 20px;
    color: rgb(61.4, 60.6, 78.2);
    font-family: Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}



/* fancybox */
[data-fancybox="gallery"],
[data-fancybox="images"] {
    cursor: url('../../assets/images/zoom-in.cur'), zoom-in;
    transition: .5s;
}

.f-button {
    --f-button-svg-width: 50% !important;
    --f-button-svg-height: 50% !important;
    --f-button-border-radius: var(--f-button-width);
    --f-button-hover-bg: hsl(var(--ls--main-color) / .7);
    --f-button-hover-color: white;
    --f-button-svg-filter: none;
}

.fancybox__content>.f-button.is-close-btn {
    position: fixed;
    color: #fff;
    inset: auto 0 var(--ls--size-divs) !important;
    margin: 0 auto;
    align-self: center;
    background: linear-gradient(135deg, var(--ls--color-back-font) 20%, hsl(var(--ls--main-color) / .8) 30%, hsl(var(--ls--subs-color) / .8) 70%, var(--ls--color-back-font) 80%) 50% / 300% 100%;
    box-shadow: 0 0 1rem 0 hsl(var(--ls--main-color) / .2), 0 0.5rem 1rem -0.5rem hsl(var(--ls--main-color) / .5);
    border-radius: 50%;
    opacity: 1;
}

.fancybox__content.comment-respond {
    max-width: calc(var(--ls--size-content) + var(--ls--size-edgelr)* 2);
}

.fancybox__container.thyuu-tip .f-button.is-close-btn {
    bottom: -3rem !important;
}

.fancybox__backdrop {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
    padding: 0;
}

.fancybox__container {
    --fancybox-bg: var(--ls--color-back-shift, hsl(0 0% 100% / .9));
    --fancybox-color: hsl(var(--ls--color-font) / var(--ls--alpha-font));
    --fancybox-content-color: hsl(var(--ls--color-font) / var(--ls--alpha-font));
    --fancybox-content-bg: none;
}

.fancybox__content {
    padding: var(--ls--size-edgelr);
}

.fancybox__toolbar {
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-bg: none;
    font-family: inherit;
    text-shadow: none;
    flex-wrap: wrap;
    margin: .5em;
}

.fancybox__toolbar__column {
    align-items: center;
    background: var(--ls--color-back-font);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--f-button-width);
    flex: unset !important;
}

.fancybox__infobar {
    font-size: var(--ls--size-small);
    padding: 0 .5em;
    margin: 0 0 0 -.5em;
}

.fancybox__footer {
    background: var(--ls--color-back-white) !important;
    box-shadow: var(--ls--shadow-normal);
    border-radius: var(--ls--size-radius);
    text-align: center;
    text-wrap: balance;
    font-size: var(--ls--size-small);
}

.fancybox__caption a {
    color: hsl(var(--ls--main-color) / .7);
    line-height: 1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: hsl(var(--ls--subs-color) / .1) linear-gradient(90deg, hsl(var(--ls--main-color) / .7), hsl(var(--ls--main-color) / .7)) no-repeat 100% 100% / 0 100%;
    border-radius: 2em;
    font-size: .8em;
    padding: .5em .75em;
    margin: 0 .5em;
    vertical-align: middle;
}

.fancybox__caption a:hover {
    color: white;
    background-position-x: 0;
    background-size: 100% 100%;
}

.entry-content a[data-fancybox="gallery"],
.entry-content .wp-block-image a::after {
    content: none;
    background: none !important;
}

.f-carousel {
    --f-button-width: 2.5em;
    --f-button-height: 2.5em;
    --f-carousel-theme-color: unset;
    --f-button-bg: var(--ls--color-back-font);
    --f-carousel-dots-height: 1rem;
}

[data-fancybox-toggle-slideshow] {
    overflow: hidden;
}

.f-carousel__viewport {
    border-radius: var(--ls--size-radius);
}

figure.f-carousel.wp-block-gallery {
    --caption-size: auto;
    --wp--style--unstable-gallery-gap: 1rem;
}

figure.f-carousel.wp-block-gallery:is(.alignfull, .alignwide) {
    --image-max-size: 80vh;
    --caption-align: center;
}

figure.f-carousel.wp-block-gallery.alignfull {
    --image-max-size: 100vh;
    --caption-size: unset;
    --f-button-width: 3.5em;
    --f-button-height: 3.5em;
    --f-button-bg: hsl(var(--ls--color-font) / 10%);
    --f-button-color: #fff;
    --f-button-next-pos: var(--ls--size-edgelr);
    --f-button-prev-pos: var(--ls--size-edgelr);
}

figure.f-carousel.wp-block-gallery figcaption {
    margin: 0;
    flex: var(--caption-size);
    text-align: left;
}

figure.f-carousel.wp-block-gallery .wp-block-image {
    margin: 0 var(--wp--style--unstable-gallery-gap) 0 0 !important;
}

figure.f-carousel.wp-block-gallery:not(.is-cropped) .wp-block-image {
    width: auto !important;
}

figure.f-carousel.wp-block-gallery .wp-block-image img {
    height: 100%;
    min-height: var(--ls--size-card-normal);
    max-height: var(--image-max-size, 55vh);
}

figure.f-carousel.wp-block-gallery .f-carousel__nav {
    order: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: .5rem;
}

figure.f-carousel.wp-block-gallery .f-carousel__dots,
figure.f-carousel.wp-block-gallery:not(.alignfull) .f-carousel__nav .f-button {
    position: static;
    transform: none;
    margin: 0 !important;
}

.comment-respond {
    position: relative;
    width: 100%;
    margin: 0 0 2em;
}

.comment-list .comment-respond {
    margin: 1em 0 1em;
}

.comment-reply-title,
.comment-form-button {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: var(--ls--size-small);
    color: hsl(var(--ls--main-color));
}

#cancel-comment-reply-link {
    display: flex;
    align-items: center;
    gap: .25em;
    border-radius: 2em;
    padding: 0 .5em;
    font-size: 14px;
}

.comment-reply-title {
    margin-bottom: .5em !important;
}

.comment-reply-title small {
    margin-left: auto !important;
}


.comment-form-comment {
    border: none;
    outline: none;
    padding: 1em;
    border-radius: 1rem;
    background: var(--color-gray-100);
    font-size: 12px;
    resize: none;
}


.comment-reply-title::before,
.comment-form-button::after {
    content: "\ef4a";
    font-family: 'remixicon' !important;
}

.comment-form-text {
    width: 100%;
}

.comment-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    display: inline-flex;
    width: calc((100% - 1rem) / 3);
    vertical-align: top;
    margin-right: .5rem;
    box-sizing: border-box;
    margin-top: .5rem;
    align-items: center;
    background: var(--ls--color-back-font);
    border-radius: var(--ls--size-radius);
    padding-left: .5em;
}

.comment-form-url {
    margin-right: 0;
}


.form-submit {
    width: 100%;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    border: none;
    outline: none;
    padding: .5em;
    border-radius: var(--ls--size-radius);
    font-size: var(--ls--size-small);
    background: transparent;
}

.shot-comment.comment.depth-1 {
    background: var(--color-gray-100);
    padding: 1em;
    border-radius: 1rem;
}

.shot-comment.comment.depth-1>article .profile-avatar {
    top: 1em;
    left: 1em;
}

.shot-comment.comment.depth-1 .children {
    margin-top: 1em;
}

button.send-comment {
    position: absolute;
    right: 10px;
    transform: translateY(calc(-100% - 10px));
}

.no-logged-in button.send-comment {
    transform: translateY(calc(-200% - 20px));
}


.shot-comment.comment.depth-2 .comment-respond {
    margin-bottom: 1em;
}

.wp-block-gallery {
    columns: unset !important;
    column-gap: unset !important;
}

.wp-block-gallery[data-gallery-type="waterfall"] .wp-block-image {
    margin-right: 2% !important;
    width: 48% !important;
    display: block !important;
    height: unset !important;
    margin-bottom: 2% !important;
    border-radius: 8px;
    overflow: hidden;
}

.comment-pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
}

:is(.page-numbers):not(.next, .prev, .dots) {
    text-align: center;
    min-width: 2em;
    padding: 0 .25em;
    outline: thin solid #0000;
    outline-offset: 2em;
    border-radius: 2em;
    background: var(--ls--color-back-font);
    white-space: nowrap;
    transition: .5s;
}

:is(.page-numbers).current {
    color: hsl(var(--ls--main-color) / .8);
    background: hsl(var(--ls--main-color) / .2);
    cursor: no-drop;
}

.comment-pagination>span {
    background: black;
    color: #fff;
}


.top-menu .menu>li {
    position: relative;
}

 .top-menu .menu li {
    position: relative;
    padding: 0.5em;
    border-radius: var(--ls--size-radius);
    transition: 0.3s;
}

.top-menu .menu>li>.sub-menu {
    position: fixed;
    width: var(--ls--size-card-normal);
    max-height: calc(100vh - var(--ls--size-edgetb) - var(--ls--size-span));
    top: var(--ls--size-edgetb);
    backdrop-filter: blur(1em) saturate(1.5);
    box-shadow: var(--ls--shadow-normal);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1em);
    transform-origin: left top;
    z-index: 30;
    padding: 0.5em;
    margin: 0px 0px 0px -2em;
    outline: var(--ls--border);
    border-radius: var(--ls--size-radius);
    background: var(--ls--color-back-shift, hsl(0 0% 100% / .8));
    overflow: clip auto;
    transition: 0.5s cubic-bezier(0.6, 0.1, 0, 1);
}


.top-menu .menu {
    display: grid;
    grid: auto / auto-flow max-content;
}


 .top-menu .menu li ul > li ul {
    grid: auto / repeat(auto-fill, minmax(min(var(--ls--size-card-normal) / 2 - 3em, 100%), 1fr));
    margin: 0.5em -0.5em -0.5em;
}

.top-menu .menu li ul {
    display: grid;
    align-items: start;
}

 .top-menu .menu a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: none;
}

.top-menu .menu>li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    will-change: transform;
}

.top-menu .sub-menu ul a::before {
    content: "";
    flex: 0 0 2em;
}

.top-menu .menu > li > ul > li > a {
    font-weight: var(--ls--font-weight-title);
}

.top-menu .menu>li>.sub-menu>li:has(> .sub-menu)>a::after {
    content: "\ea6e";
    font-family: "remixicon" !important;
}

.top-menu a::after {
    opacity: 0.3;
    font-size: var(--ls--size-small);
    font-family: thyuu-iconfont;
    transition: transform 1s;
}

.top-menu .menu > li > ul li:hover {
    background: hsl(var(--ls--main-color) / 5%);
}


.sub-menu>li:has(> .sub-menu)>a:not(:hover)::after {
    transform: rotate(90deg);
}


.top-menu .menu>li:has(> .sub-menu)>a::after {
    content: "\ea4e";
    font-size: 12px;
    margin-left: 4px;
    font-family: "remixicon" !important;
}


.skip-link,
#wp-skip-link {
    display: none !important;
}


.dropdown2,
.input2,
.input2[type],
drb-select {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-align: center;
    align-items: center;
    max-width: var(--input-max-width);
    height: var(--input-height, 40px);
    min-height: var(--input-min-height, var(--input-height, 40px));
    margin: var(--input-margin, 0);
    padding: var(--input-padding-top, 0) var(--input-padding-right) var(--input-padding-bottom, 0) var(--input-padding-left);
    -webkit-transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transition-property: color, border, background-color, -webkit-box-shadow;
    transition-property: color, border, background-color, -webkit-box-shadow;
    transition-property: color, box-shadow, border, background-color;
    transition-property: color, box-shadow, border, background-color, -webkit-box-shadow;
    border: 1px solid var(--input-border-color, rgba(219, 218, 222, 0.9));
    border-radius: var(--input-radius, 8px);
    background-color: var(--input-bg-color, #fff);
    -webkit-box-shadow: var(--input-box-shadow);
    box-shadow: var(--input-box-shadow);
    color: var(--input-color, #0d0c22);
    font-family: inherit;
    font-size: var(--input-font-size, 16px);
    font-weight: var(--input-font-weight, 400);
    line-height: 1;
    gap: var(--input-gap, 8px);
}

.dropdown2 {
    --input-box-shadow: 0px 4px 4px 0px rgba(6, 3, 24, 0.01);
    --input-font-weight: 500;
    --input-icon-color: #3d3d4e;
    --input-padding-right: calc(var(--input-padding-left) + var(--caret-gap) + (var(--caret-size) * 0.75));
    --caret-size: 14px;
    --caret-gap: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.dropdown2--text-only {
    --input-padding-left: 0px;
    border: none;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.dropdown2:after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--input-padding-left);
    width: var(--caret-size);
    height: var(--caret-size);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(../icons/caret-down-small.svg);
    background-repeat: no-repeat;
    background-size: var(--caret-size);
}


drb-dropdown[active='true'] .dropdown2 {
    --input-bg-color: #f9f9fa;
    --input-border-color: unset;
    --input-box-shadow: unset
}

drb-dropdown[active='true'] .dropdown2:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

drb-dropdown:not(:defined) [slot="dropdown-content"] {
    display: none;
}

drb-tooltip:not(:defined) [slot="tooltip-content"] {
    display: none;
}


body[data-site-nav-hide-search] [data-site-nav-search-btn] {
    transition: none;
}


button[data-site-nav-search-btn] {
    visibility: hidden;
    opacity: 0;
}


body[data-site-nav-scrolled] button[data-site-nav-search-btn] {
    visibility: visible;
    opacity: 1;
}



.wp-block-content-hide {
    background: var(--color-gray-100);
    padding: 16px 24px;
    border-radius: 1em;
    font-size: 14px;
}
.wp-block-content-hide .rigth{
    float: right;
}

.wp-block-content-hide .role-title i{
    margin-right: 4px;
}


.wp-block-content-hide .role-price {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
}

drb-dialog#sign-in-dialog {
    --dialog-max-width: 400px;
    --dialog-remote-initial-height: 550px;
}


.accessibility-text {
    position: absolute;
    width: 0;
    overflow: hidden;
    opacity: 0;
}

.shot-thumbnail-base .like-shot,
.shot-thumbnail-base .bucket-shot {
    pointer-events: auto;
}

.current-user-likes i {
    color: #ea64d9;
}

.shot-statistic i {
    margin-right: 4px;
}

.author-posts .shot-statistic-container {
    display: none;
}


/********弹出消息***********/
.ls-message {
    position: fixed;
    top: 136px;
    -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;
    transition: opacity .3s, top .4s, -webkit-transform .4s;
    transition: opacity .3s, transform .4s, top .4s;
    transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;
    z-index: 9999999;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ls-message-wrapper {
    text-align: center;
}

.ls-message-wrapper>* {
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background-color: black;
    color: #fff;
}

.ls-message-success {
    background-color: #47d279;
}

.ls-message-warning {
    background-color: #ffb243;
}

.ls-message-error {
    background-color: #ff6464;
}

.ls-message-content {
    font-size: 13px;
    font-weight: normal;
}

.ls-message-fade-enter,
.ls-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%)
}




.auth-screen__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.auth-screen__form label {
    color: #7b7194;
    font-size: 14px;
}

.auth-screen__form p:has(label + input) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-screen__form .register-code-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.auth-screen__form .register-code-container input {
    flex: 1;
    width: 100%;
}

.auth-screen__form .login-remember,
.auth-screen__form .register-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7b7194;
    font-size: 14px;
}


.auth-layout {
    --ui-container: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 100vh;
}

@media (min-width: 960px) {
    .auth-layout {
        --container-gutter: 48px;
        grid-template-columns: 1fr -webkit-min-content;
        grid-template-columns: 1fr min-content;
    }
}

.auth-layout__content {
    display: grid;
    position: relative;
    place-items: center;
    margin: 48px 0;
}

@media (max-width: 959px) {
    .auth-layout__content {
        margin: 32px auto;
        padding-top: 60px;
    }
}



.auth-screen {
    --input-placeholder-font-size: 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: var(--auth-screen-container-width, 310px);
    margin: 0 auto;
    gap: 24px;
}


.auth-sidebar {
    position: relative;
    height: 100%;
    width: 400px;
}


.auth-sidebar__video {
    display: -ms-flexbox;
    display: flex;
    width: 400px;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.auth-screen.auth-screen__form>* {
    width: 310px;
}

.auth-screen__disclaimer-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    color: #7b7194;
    text-align: center;
}

.auth-layout__logo {
    position: absolute;
    top: 0;
    left: var(--container-gutter, 16px);
}

@media (max-width: 959px) {
    .auth-layout__logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.auth-screen-header__heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
}

.auth-screen-app{
    padding: 16px;
}

.auth-screen-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    gap: 24px;
}

@media (max-width: 959px) {
    .auth-sidebar {
        display: none;
    }
}



drb-toast {
    display: none
}


.sl-toast-stack {
    top: unset !important;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: var(--sl-toast-stack-width, 28rem) !important;
    padding: 4px;
    position: sticky;
}

@media (min-width: 768px) {
    .sl-toast-stack {
        bottom: 56px;
        inset-inline-end: 56px !important
    }
}

.sl-toast-stack:has(#pro-callout-toast) {
    --sl-toast-stack-width: 490px
}

.sl-toast-stack:has(#pro-callout-toast) #pro-callout-toast {
    --drb-toast-max-width: 490px
}

.sl-toast-stack .drb-toast {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--toast-gap, 8px)
}

.sl-toast-stack .drb-toast__title {
    font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    font-weight: 600
}

.sl-toast-stack .drb-toast a:not(.btn2) {
    color: var(--toast-link-color, var(--toast-text-color, #fff));
    text-decoration: underline
}

.sl-toast-stack sl-alert[variant='success'] {
    --toast-icon-color: #4cea95
}

.sl-toast-stack sl-alert[variant='warning'] {
    --toast-icon-color: #ee746d
}

.sl-toast-stack sl-alert [slot='icon'] svg {
    color: var(--toast-icon-color, #ea4c89)
}

.sl-toast-stack sl-alert::part(icon) {
    display: -ms-flexbox;
    display: flex;
    padding: 0
}

.sl-toast-stack sl-alert::part(base) {
    display: -ms-flexbox;
    display: flex;
    gap: 14px;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    max-width: var(--drb-toast-max-width, 470px);
    margin: 6px auto 0;
    padding: var(--drb-toast-padding-y, 24px) var(--drb-toast-padding-x, 20px);
    border: var(--drb-toast-border, 1px);
    border: none;
    border-radius: var(--drb-toast-border, 8px);
    border-color: var(--drb-toast-border-color, #f3f3f4);
    background-color: var(--drb-toast-bg-color, #060318);
    color: var(--drb-toast-text-color, #fff)
}

.sl-toast-stack sl-alert::part(message) {
    padding: 0
}

.sl-toast-stack sl-alert::part(close-button) {
    position: relative;
    bottom: 6px;
    padding-right: 0;
    color: #fff
}



.filter-categories .scroll a {
    position: absolute;
    z-index: 1;
    width: 40px;
    padding: 10px 0;
    color: #0d0c22;
}


.filter-categories .scroll-backward a {
    left: 0;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, white));
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, white 50%);
}

.filter-categories .scroll-forward a {
    right: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, white));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%);
}



.filter-categories .scroll a i {
    font-size: 12px;
    fill: currentColor;
}

@media only screen and (max-width: 959px) {
    .filter-categories .scroll a i {
        font-size: 14px;
    }
}


.filter-categories {
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}


.d-none {
    display: none;
}


.download-list-item .attrs-list {
    display: flex;
    flex-flow: wrap;
    margin: 12px;
    grid-gap: 12px 12px;
}

.download-list-item .rights .list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    line-height: 12px;
}

.download-list-item .rights>drb-collapse>drb-collapse-header>div {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.download-list-item .rights .list {
    font-size: 12px;
}

.download-list-item .title {
    margin: 12px;
    font-size: 18px;
}


.download-list-item .rights {
    margin: 12px;
    user-select: none;
    position: relative;
}


.download-list-item .rights .current-user {
    line-height: 32px;
}

drb-tab .tab-item {
    display: inline-flex;
    margin-right: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
}

drb-tab .tab-item {
    align-items: center;
}

drb-tab[active] .tab-item{
    background: white;
}



drb-tab .tab-item .thumb {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    margin-right: 12px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ls--color-back-font);
}


drb-tab .tab-item b {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    line-height: 25px;
    font-weight: normal;
}

.single-post #download-box {
    padding: 16px;
    border-radius: 1rem;
    background: var(--color-gray-100);
}

.download-list-item .title {
    margin: 12px;
    font-size: 18px;
}


.download-list-item .attrs-list .attr-item {
    width: calc(50% - 6px);
    font-size: 14px;
}



drb-collapse-panel:not(:defined) {
    display: none;
}

drb-tab-item:not(:defined):not([active]) {
    display: none;
}

.tabs-header {
    display: flex;
    align-items: center;
    overflow-x: auto;
}

drb-emoji-picker,
drb-autocomplete,
drb-dropdown,
drb-rich-text,
drb-infinite-scroll,
drb-tooltip {
    display: contents;
}


.download-page h1 {
    font-size: 20px;
    margin-bottom: 16px;
}


@media screen and (max-width: 768px) {
    .download-page {
        padding: 0;
        width: auto;
    }
}

.download-page .attr>div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.download-page .tab-header {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.download-page .attr {
    font-size: 14px;
}

.download-page .attrs {
    margin: 16px 0;
}


.download-page .btn2 {
    margin-top: 16px;
}

.download-page drb-tab {
    border-bottom: 2px solid transparent;
}

.download-page drb-tab[active] {
    border-bottom-color: var(--ls--color-primary);
}

.download-page .attrs .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
}

.download-page .attrs .item span:last-of-type {
    margin-left: 8px;
}

.download-page .attrs .item span:first-of-type {
    color: var(--color-gray-400);
}

.download-page .attrs .item+.item {
    margin-top: 8px;
}

.download-page .attr .bg-text {
    padding: 2px 12px;
    border-radius: 4px;
}

.download-page {
    padding: 24px;
    border-radius: 12px;
    margin-top: 50px;
    box-shadow: 4px 4px 24px 0 rgba(96, 101, 108, .12);
}




.pay-type ul {
    flex-wrap: wrap;
    gap: 16px 0;
    justify-content: flex-start;
    margin: 0 -8px;
    min-height: 47px;
}

.pay-type {
    padding: 16px 0;
}


.pay-type .balance {
    background: var(--ls--color-back-font);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 15px;
    margin-top: 10px;
    justify-content: space-between;
    color: var(--color-gray-500);
}

drb-dialog#recharge-dialog {
    --dialog-max-width: 400px;
    --dialog-remote-initial-height: 450px;
}


drb-dialog#vip-recharge-dialog {
    --dialog-max-width: 720px;
    --dialog-remote-initial-height: 530px;
}

.pay-type li {
    display: flex;
    align-items: center;
    border: 1px solid #f7f7f7;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    margin: 0 8px;
    padding: 10px 0;
    justify-content: center;
    width: calc(33.333% - 16px);
}

.pay-type i {
    font-size: 25px;
    line-height: 25px;
    margin-right: 5px;
}

.pay-type .title {
    margin-bottom: 12px;
    font-size: 15px;
}


.pay-type li.active {
    border-color: var(--color-gray-400);
}


@media (max-width: 767px) {
    .sticky-header__actions {
        --btn-padding: 14px;
        --btn-height: 32px;
        --btn-icon-size: 13px;
    }
}

.sticky-header__avatar {
    --avatar-size: 32px;
}

@media (min-width: 500px) {
    .sticky-header__avatar {
        --avatar-size: 48px;
    }
}

.avatar {
    width: var(--avatar-size, 32px);
    height: var(--avatar-size, 32px);
    flex-shrink: 0;
    border-radius: 50%;
}


.entry-content>.wp-block-image {
    border-radius: 1rem;
}

.entry-content>.wp-block-image {
    overflow: hidden;
}

.entry-content>.wp-block-image img {
    margin: 0 auto;
}

.entry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.entry-content>p {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

.entry-content>* {
    width: 100%;
}

.fill-current,
.fill-current svg {
    fill: currentColor;
}


.shot-statistic .icon {
    width: 16px;
    height: 16px;
    -webkit-transition: color 200ms ease;
    transition: color 200ms ease;
    color: #9e9ea7;
}

.shot-statistic drb-shot-like[liked] .icon {
    color: #ea64d9;
}




/********弹窗*********/
.lz-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
}

.lz-modal-dialog {
    width: 100%;
    transition: all .25s ease;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lz-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    transition: all .5s ease;
    box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
    max-width: 363px;
    /*min-height: 300px;*/
}

.lz-modal-content .close:hover {
    transform: translate(-2px,2px);
}

.lz-modal-content .close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: inherit;
    transition: all .25s ease;
    cursor: pointer;
    z-index: 10;
}

.lz-modal-content .close i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    font-size: 22px;
    opacity: .7;
}

.lz-modal-content .close:hover i {
    opacity: 1;
}

.lz-dialog-enter-active {
    /*-webkit-transition: all .25s ease;*/
    /*transition: all .25s ease;*/
    transition: all .5s ease;
}

.lz-dialog-enter-active .lz-modal-dialog {
    /*animation: rebound .4s;*/
    animation: rebound .5s cubic-bezier(.32,.85,.45,1.18),width .3s;
}

.lz-dialog-leave-active,.lz-dialog-leave-active .lz-modal-dialog {
    /*-webkit-transition: all .15s ease;*/
    /*transition: all .15s ease*/
    transition: all .5s ease
}

.lz-dialog-enter,.lz-dialog-leave-to {
    opacity: 0
}

.lz-dialog-enter .lz-modal-dialog,.lz-dialog-leave-to .lz-modal-dialog {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(0,0,0,.05)
}

@-webkit-keyframes rebound {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    /*40% {*/
    /*    -webkit-transform: scale(1.08);*/
    /*    transform: scale(1.08)*/
    /*}*/

    /*80% {*/
    /*    -webkit-transform: scale(.98);*/
    /*    transform: scale(.98)*/
    /*}*/

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes rebound {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    /*40% {*/
    /*    -webkit-transform: scale(1.08);*/
    /*    transform: scale(1.08)*/
    /*}*/

    /*80% {*/
    /*    -webkit-transform: scale(.98);*/
    /*    transform: scale(.98)*/
    /*}*/

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.vs-dialog__loading {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 50px;
    background: rgba(255,255,255,1);
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;--vs-color: 26,92,255;
}

.vs-dialog__loading:after {
    border-radius: inherit;
    border-left: 2px solid rgba(var(--vs-color),1);
    border-bottom: 2px solid rgba(var(--vs-color),1);
    border-top: 2px solid rgba(var(--vs-color),1);
    border: 2px solid rgba(var(--vs-color),0);
    border-right-color: rgba(var(--vs-color),1);
    -webkit-animation: loadingDialog .6s ease infinite;
    animation: loadingDialog .6s ease infinite
}

.vs-dialog__loading:after,.vs-dialog__loading:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    display: block;
    -webkit-box-shadow: 0 0 0 0 rgba(var(--vs-color),1);
    box-shadow: 0 0 0 0 rgba(var(--vs-color),1)
}

.vs-dialog__loading:before {
    border-radius: inherit;
    border-left: 2px dashed rgba(var(--vs-color),1);
    border-bottom: 2px dashed rgba(var(--vs-color),1);
    border-top: 2px dashed rgba(var(--vs-color),1);
    border: 2px solid rgba(var(--vs-color),0);
    border-right: 2px dashed rgba(var(--vs-color),1);
    -webkit-animation: loadingDialog .6s linear infinite;
    animation: loadingDialog .6s linear infinite
}

@-webkit-keyframes loadingDialog {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes loadingDialog {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}


/*********************余额充值与积分充值***************************/
.recharge-container {
    max-width: 370px;
    width: 100%;
}

.recharge-container > .title {
    padding: 16px;
}

.fast-amount-list {
    margin: 0 16px;
}

.recharge-container .fast-amount-list .list {
    display: flex;
    flex-wrap: wrap;
}

.fast-amount-list .item {
    cursor: pointer;
    width: calc(33.333% - 8px);
    background: var(--color-gray-100);
    margin: 4px;
    text-align: center;
    padding: 16px 0;
    position: relative;
    border-radius: 8px;
    border: 1px solid transparent;
}

.fast-amount-list .item.active {
    border: 1px solid #3a3546;
}

.fast-amount-list .price-icon {
    border-radius: 8px 0 8px 0;
    left: -1px;
    padding: 0 8px;
    position: absolute;
    top: -1px;
    background: #3a3546;
    color: #fff;
    font-size: 12px;
}

.fast-amount-list .price-num {
    margin-top: 2px;
    font-size: 18px;
    color: var(--color-primary);
    font-size: 16px;
}

.fast-amount-list .price-og-num {
    color: var(--color-text-secondary);
    text-decoration: line-through;
    padding-left: 2px;
    font-size: 12px;
    font-weight: 400;
}

.fast-amount-list .currency {
    padding-left: 2px;
    font-size: 13px;
}

.fast-amount-list .price-name {
    font-size: 18px;
}


.fast-amount-list .custom {
    border-bottom: 1px solid #bbbbbb;
    padding: 2px 0;
}

.fast-amount-list .custom input {
    padding: 0;
    width: 50%;
    font-size: 15px;
    text-align: center;
    background-color: rgba(255,214,48,0);
    outline: none;
}

.fast-amount-list .custom-text {
    font-size: 15px;
}

.recharge-container .card-code-warp {
    margin-top: 5px;
}

.recharge-container .card-code-warp .card-code-bottom {
    margin-top: 16px;
}


/*********************充值方式***************************/


.pay-type {
    padding: 16px;
}

.pay-type .title {
    margin-bottom: 12px;
    font-size: 15px;
}

.pay-type ul {
    flex-wrap: wrap;
    gap: 16px 0;
    justify-content: flex-start;
    margin: 0 -8px;
    min-height: 47px;
}

.pay-type li {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-gray-100);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    margin: 0 8px;
    padding: 10px 0;
    justify-content: center;
    width: calc(33.333% - 16px);
}

.pay-type li.active {
    border-color: var(--color-gray-400);
}

.pay-type i {
    font-size: 25px;
    line-height: 25px;
    margin-right: 5px;
}

.pay-type .balance {
    background: var(--border-color-base);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 15px;
    margin-top: 10px;
    justify-content: space-between;
    color: var(--color-text-secondary);
}

.pay-type .balance .rigth {
    color: #1a7af8;
    /* font-weight: 600; */
    font-size: 16px;
}

.pay-type .balance .rigth span {
    font-size: 12px;
}

i.ri-alipay-fill {
    color: #00a0e9;
    
}

i.ri-wechat-pay-fill {
    color: #00c800;
}

i.ri-wallet-3-fill {
    color: #ffab00;
}
.pay-button {
    padding-bottom: 16px;
    margin: 0 16px;
}


/****************vip会员弹窗*********************/
.pay-vip-container {
    position: relative;
    max-width: 720px;
    max-height: 582px;
    width: 100%;
    height: auto;
}


.pay-vip-header {
    position: relative;
    padding: 22px 30px;
    background-size: cover;
    background-position: center;
    justify-content: space-between;
    font-size: 16px;
    display: flex;
}

.pay-vip-header .user-avatar {
    width: 45px;
    height: 45px;
}

.pay-vip-header .user-info {
    margin-left: 10px;
}

.pay-vip-header .vip-info {
    font-size: 14px;
    color: var(--color-gray-400);
    margin-top: 2px;
}

.pay-vip-header .rigth {
    font-size: 14px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}

.pay-vip-header .rigth span {
    cursor: pointer;
}



.pay-vip-tabs {
    background: var(--color-gray-100);
}

.pay-vip-tabs .tab-item {
    flex: 1;
    text-align: center;
    padding: 20px 5px;
    cursor: pointer;
    color: var(--color-gray-600);
}

.pay-vip-tabs .tab-item.active {
    background: #fff;
    color: #3a3546;
}

.pay-vip-content {
    display: flex;
    flex-direction: row;
    padding: 0 16px 16px;
    min-height: 312px;
}

.vip-member-describe {
    background: var(--color-gray-100);
    width: 188px;
    padding: 12px 16px 0;
    margin-right: 8px;
    border-radius: 8px;
    margin-top: 16px;
    flex-shrink: 0;
}

.vip-member-describe .title {
    padding: 11px 0;
    border-bottom: 1px dashed rgba(3,9,17,.12);
}

.vip-member-describe ul {
    margin-top: 11px;
}

.vip-member-describe ul li {
    font-size: 13px;
    color: var(--color-gray-400);
    padding-bottom: 10px;
}

.vip-member-describe > a {
    font-size: 13px;
}

.vip-product-warp {
    overflow: hidden;
    flex: 1 1 0%;
}

.pay-vip-price-list {
    padding: 16px 0 16px 16px;
}

.pay-vip-price-list .list-item {
    position: relative;
    cursor: pointer;
    padding: 24px 0 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid transparent;
    margin-right: 16px;
    box-shadow: 0 1px 10px rgba(0,0,0,.1);
    font-size: 14px;
    width: 100px;
}

.pay-vip-price-list .list-item.active {
    border-color: var(--theme-color);
}

.pay-vip-price-list .price-icon {
    border-radius: 8px 0 8px 0;
    left: -1px;
    padding: 0 8px;
    position: absolute;
    top: -1px;
    background: #000;
    color: #fff;
    font-size: 12px;
}

.pay-vip-price-list .price-num {
    margin: 8px 0px 4px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color-primary);
    user-select: none;
}

.pay-vip-price-list .price-og-num {
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

#swiper-scroll, #bs-scroll {
    display: flex;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#bs-scroll > * {
    display: inline-flex;
    flex: 0 0 auto;
}


@media screen and (max-width: 768px) {
    .vip-member-describe {
        display: none;
    }
}


/********弹出消息***********/


.lz-message {
    position: fixed;
    top: 136px;
    -webkit-transition: opacity .3s,top .4s,-webkit-transform .4s;
    transition: opacity .3s,top .4s,-webkit-transform .4s;
    transition: opacity .3s,transform .4s,top .4s;
    transition: opacity .3s,transform .4s,top .4s,-webkit-transform .4s;
    z-index: 9999999;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.lz-message-wrapper {
    text-align: center;
}

.lz-message-wrapper > * {
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background-color: var(--theme-color);
    color: #fff;
}

.lz-message-success {
    background-color: #47d279;
}

.lz-message-warning {
    background-color: #ffb243;
}

.lz-message-error {
    background-color: #ff6464;
}

.lz-message-content {
    font-size: 13px;
    font-weight: normal;
}

.lz-message-fade-enter,.lz-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%,-100%)
}



/*******************确认支付***********************/
.confirm-pay-container {
    max-width: 356px;
    width: 100%;
}

.colorful-header {
    position: relative;
}

.colorful-header .title {
    display: flex;
    padding: 12px 16px 0;
    width: 100%;
    align-items: center;
}

.colorful-header .title i {
    font-size: 24px;
    line-height: 30px;
}

.colorful-header .title div {
    margin-left: 12px;
    font-size: 18px;
    line-height: 18px;
}

.confirm-pay-container .pay-info {
    padding: 16px;
    font-size: 15px;
    background: var(--color-gray-100);
    margin: 16px;
    border-radius: 8px;
}

.confirm-pay-container .pay-info-title {
    margin-bottom: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.confirm-pay-container .pay-info-price {
    justify-content: space-between;
    color: var(--color-gray-600);
    font-size: 14px;
}

.confirm-pay-container .pay-info-price .rigth span:last-of-type{
    color: var(--color-neutral-700);
}

.confirm-pay-container .pay-info-price .rigth span:last-of-type span {
    font-size: 12px;
}

.confirm-pay-container .pay-info-price .pay-tag {
    color: var(--color-white);
    background-color: var(--color-neutral-700);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
}



/********扫码支付组件************/
.qrcode-pay-container {
    max-width: 312px;
    width: 100%;
}

.qrcode-pay-container .qrcode-pay {
    padding: 24px 0 0;
    text-align: center;

}

.qrcode-pay-container .pay-logo {
    margin-bottom: 12px;
    justify-content: center;
}

.qrcode-pay-container .pay-logo img{
    height: 35px;
    display: none;
}

.qrcode-pay-container .alipay .pay-logo .alipay-logo,.qrcode-pay-container .wecatpay .pay-logo .wecatpay-logo{
    display: block;
}

.qrcode-pay-container .pay-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 24px;
}

.qrcode-pay-container .pay-price {
    font-size: 32px;
    margin: 12px auto;
    width: 100%;
    font-weight: bold;
}

.qrcode-pay-container .pay-qrcode {
    width: 164px;
    height: 164px;
    margin: auto;
}

.qrcode-pay-container .pay-countdown {
    padding: 12px 0;
    font-size: 14px;
}

.qrcode-pay-container .qrcode-pay-bottom {
    width: 100%;
    background: #00af1b;
    color: #fff;
    padding: 12px 0px;
    text-align: center;
    font-size: 14px;
}

.qrcode-pay-container .alipay + .qrcode-pay-bottom {
    background: #1677ff;
}



/**************支付检查组件**********************/
.pay-check-container {
    width: 100%;
    min-height: 270px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.pay-check-container > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pay-check-container > div p {
    margin-bottom: 16px;
    font-size: 18px;
}

.pay-check-container .icon i {
    font-size: 50px;
    line-height: 50px;
}

.pay-check-container .icon {
    border-radius: 100%;
    background: green;
    color: #fff;
    margin-bottom: 16px;
    padding: 12px;
}



/*************输入验证码组件******************/
.password-pay-container {
    max-width: 312px;
    width: 100%;
}

.password-pay-container .form-container {
    padding: 16px;
    padding-bottom: 0;
}

.password-pay-container .scan-info {
    text-align: center;
    margin-bottom: 16px;
}

.password-pay-container .scan-info .qrcode-img {
    width: 120px;
    height: 120px;
    margin: auto;
    padding: 8px;
}

.password-pay-container .scan-info .text {
    margin-top: 8px;
}
.password-pay-container .form-button {
    margin: 16px 0;
}


/***************验证码组件******************/
.password-input {
    display: flex;
    cursor: pointer;
    grid-gap: 8px;
    position: relative;
    justify-content: center;
    width: 100%;
}

.password-input .password-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: var(--color-gray-100);
    border-radius: 8px;
    max-width: 40px;
    width: 100%;
    height: 40px;
}

.password-input .password-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: .7;
}

.password-input .password-cursor {
    width: 2px;
    height: 20px;
    animation: blink 1s infinite;
    background-color: var(--color-text-regular);
}

.password-input .input {
    opacity: 0; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}




/******顶部用户信息** */
.menu-user-box {
    position: relative;
    margin-left: 24px!important;
}

.menu-user-box .menu-logun-btn {
    color: #fff;
    background-color: var(--theme-color);
}

.menu-user-box .user-avatar {
    cursor: pointer;
}

.user-menu-wrap, .check-in-menu-wrap,.publish-menu-wrap {
    visibility: hidden;
    position: absolute;
    min-width: 300px;
    padding-top: 7px;
    z-index: 99;
    opacity: 0;
    transform: translateY(-7px);
    transition: .3s;
    right: -10px;
}

.menu-user-box:hover .user-menu-wrap, .menu-check-in:hover .check-in-menu-wrap,.menu-publish-box:hover .publish-menu-wrap {
    opacity: 1;
    transform: translateY(0);
    visibility: unset;
}

.user-menu-wrap .user-menu-container {
    width: 100%;
    min-height: 100px;
    box-shadow: 4px 4px 24px 0 rgba(96,101,108,.12);
    user-select: none;
    border-radius: 1rem;
    background: var(--color-white);
}

.user-menu-wrap .user-menu-content {
    padding: 16px;
}

.user-menu-content > div {
    margin-bottom: 16px;
}

.user-menu-content .user-info-item {
    justify-content: space-between;
}

.user-menu-content .user-info > a {
    margin-right: 12px;
}

.user-menu-content .user-info .avatar {
    --avatar-size: 48px;
}

.user-menu-content .user-info .user-name {
    font-size: 16px;
}

.user-menu-content .user-info .desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.user-menu-content .user-info-btn {
    padding: 6px 12px;
    margin-left: 5px;
    background: var(--bg-muted-color);
    font-size: 14px;
    border-radius: var(--radius);
    color: var(--color-text-regular);
    flex-shrink: 0;
}

.user-menu-content .vip-panel-item {
    white-space: nowrap;
}

.user-menu-content .vip-panel-item > a {
    border-radius: 1rem;
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
    background: var(--color-gray-100);
    width: 100%;
}

.user-menu-content .vip-panel {
    justify-content: space-between;
}

.user-menu-content .vip-panel-info .vip-icon {
    /*background-image: url(//qhstaticssl.kujiale.com/image/png/1670311332761/ED659E904626EB42BFCC2E55169963E2.png?x-oss-process=image/resize,m_fill,w_20,h_20/format,webp);*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background-position: center center;*/
    margin: 0 8px 0 8px;
}

.user-menu-content .vip-panel-info .vip-icon i {
    font-size: 22px;
    line-height:21px;
}

.user-menu-content .vip-panel-info .vip-name {
    font-size: 14px;
}

.user-menu-content .vip-panel-info .divider {
    border-left: 1px solid var(--color-primary);
    height: 6px;
    margin: 0px 8px;
}

.user-menu-content .vip-btn {
    margin-left: 8px;
    background: var(--theme-color);
    font-size: 12px;
    padding: 4px 8px;
    line-height: 16px;
}

.user-assets-item .user-assets-title {
    margin-bottom: 12px;
}

.user-assets-item .user-assets {
    justify-content: space-between;
}

.user-assets-item .user-money-card,.user-assets-item .user-credit-card {
    background: var(--color-white);
    /* box-shadow: 4px 4px 24px 0 rgba(96,101,108,.12); */
    border-radius: 1rem;
    height: 65px;
    padding: 8px 16px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    width: calc(50% - 6px);
    border: 1px solid var(--border-color-base);
    overflow: hidden;
}

.user-assets-item .user-assets-name {
    margin-bottom: 5px;
}

.user-assets-item .user-assets-num {
    font-size: 18px;
    font-weight: 600;
    color: #ffab00;
    z-index: 1;
    position: relative;
}

.user-assets-item .user-money-card .user-assets-num {
    color: #1a7af8;
}

.user-assets-item .user-money-card .assets-icon {
    background-image: url(/wp-content/themes/qkua/Assets/fontend/images/balance-img.jpg);
}

.user-assets-item .user-credit-card .assets-icon {
    background-image: url(/wp-content/themes/qkua/Assets/fontend/images/credit-img.jpg);
}

.user-assets-item .assets-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 65px;
    border-bottom-right-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: background-image 300ms cubic-bezier(0, 0, 0.2, 1) 0s;
}


.user-menu-content .link-item,.user-menu-content .logout-item {
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 0 14px;
    height: 38px;
    border-radius: var(--radius);
    color: var(--color-text-regular);
    font-size: 14px;
    transition: background-color .3s;
    white-space: nowrap;
    cursor: pointer;
}

.user-menu-content .link-item:hover,.user-menu-content .logout-item:hover {
    background-color: var(--bg-muted-color);
}

.user-menu-content .link-title i ,.user-menu-content .logout-item i{
    margin-right: 16px;
    font-size: 18px;
    line-height: 18px;
}

.user-menu-content .logout-item{
    justify-content: normal;
    margin: 0;
}

.user-menu-content .split-line {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background: var(--border-color-base);
}