.aside-card {
    background: #fff !important;
    box-shadow: none !important
}

.single-sites .ioui-aside:not(.container-fluid) .aside-card {
    box-shadow: 0 0 20px -5px var(--main-shadow) !important
}

.container.home-content .bulletin-big {
    max-width: var(--main-max-width);
    margin-top: 0 !important;
    box-shadow: none
}

.full-container .home-content .bulletin-big {
    max-width: var(--home-max-width)
}

.navbar-header li.current-menu-item>a,
.navbar-header li>a:hover {
    color: inherit !important
}

.io-black-mode .aside-card {
    background: #2d2e2f !important
}

.show-card .posts-item {
    box-shadow: none
}

.posts-item:not(.book-item) {
    border: 1px solid #f1f1f196;
    overflow: hidden !important
}

.posts-item:not(.book-item):hover {
    box-shadow: 0 3px 10px 0 var(--main-shadow);
    border: 1px solid var(--theme-color)
}

.star-icon-border .posts-item.sites-item:not(.book-item):hover {
    border-color: var(--site-icon-color, var(--theme-color))
}

.star-icon-border.star-icon-border-scrolling .posts-item.sites-item:not(.book-item):hover {
    border-color: var(--theme-color)
}

.io-black-mode .posts-item {
    border-color: hsl(216deg 3% 66% / 10%)
}

.io-black-mode .posts-item:hover {
    border-color: hsl(216deg 3% 66% / 50%)
}

.io-black-mode.star-icon-border .posts-item.sites-item:not(.book-item):hover {
    border-color: var(--site-icon-color, hsl(216deg 3% 66% / 50%))
}

.io-black-mode.star-icon-border.star-icon-border-scrolling .posts-item.sites-item:not(.book-item):hover {
    border-color: hsl(216deg 3% 66% / 50%)
}

.posts-item .item-media {
    background: transparent
}

.posts-item.sites-item:hover .blur-img-bg {
    transform: scale(2)
}

.sites-item:not(.style-sites-max):hover .togo {
    opacity: 1;
    transform: translate(12px, -50%) rotate(45deg)
}

.module-sidebar-widget+.module-sidebar-widget {
    margin-top: 1.25rem
}

.taxonomy-head-title.h3 {
    position: relative;
    font-size: 1.8rem;
    font-weight: 700
}

.taxonomy-head-title .taxonomy-head-title-text {
    position: relative;
    z-index: 1
}

.taxonomy-head-title .taxonomy-head-icon {
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    pointer-events: none
}

.taxonomy-head-title .taxonomy-head-icon svg {
    width: 100%;
    height: 100%;
    display: block
}

@media (max-width:750px) {
    .taxonomy-head-title .taxonomy-head-icon {
        width: 140px;
        height: 140px
    }
}

.table-div .site-favicon-main .badge.vc-l-red {
    display: none
}

.slider-tab {
    background-color: var(--body-bg-color)
}

.posts-item.sites-item .item-media {
    width: 30px
}

.io-widget-single-posts-list .sites-tags {
    display: none
}

.content-card.friendlink-moved {
    padding: 15px 20px 10px 20px;
    margin-top: 1.25rem
}

.friend-link a {
    margin-right: 10px
}

.friendlink-moved-list a:before {
    content: '\2022';
    display: inline-block;
    position: relative;
    margin-right: 5px
}

.posts-item.style-sites-big .item-title {
    margin-bottom: 0
}

@media (min-width:768px) {
    .footer-stick .footer-links {
        text-align: center
    }

    .justify-content-md-start {
        justify-content: center !important
    }
}

.tooltip.fade {
    pointer-events: none
}

.posts-item.style-app-default {
    padding: 15px 10px
}

.posts-item.style-app-default .item-media {
    width: 60%;
    min-width: 60px;
    padding-bottom: 60%
}

.posts-item.app-item.style-app-card .item-body {
    justify-content: center !important
}

.posts-item.app-item.style-app-card .item-body .app-content {
    margin-top: 0 !important
}

.posts-item.app-item.style-app-card .item-header {
    margin-right: 10px
}

.app-item.style-app-card .meta-ico {
    margin-right: auto;
    margin-left: 0;
    margin-top: 10px
}

.header-big.no-bg:not(.post-top) {
    margin-bottom: 0 !important
}

.header-big.no-bg .bulletin-big {
    box-shadow: none
}

.main-header.header-fixed.scroll .header-nav {
    background: #fff !important
}

.io-black-mode .main-header.header-fixed.scroll .header-nav {
    background: #2d2e2f !important
}

.auto-ad-url.my-3.my-md-5,
.header-banner .bulletin-big {
    margin-bottom: 0 !important;
    margin-top: 1.5rem !important
}

.tab-nobar .tab-to-more::before {
    content: none;
    width: 0;
    height: 0;
    background: none
}

.star-tab-beautify .slider-tab {
    background: transparent
}

.star-tab-beautify .slider-tab .tab-item:not(.active):hover {
    background: transparent
}

@media (min-width:769px) {
    .star-tab-beautify:not(.tab-r-align) .content-card .tab-title {
        display: inline-flex;
        align-items: center
    }

    .star-tab-beautify:not(.tab-r-align) .content-card .tab-title::after {
        content: "";
        display: block;
        width: 2px;
        height: .7em;
        background: var(--muted-color);
        margin-left: 1rem;
        border-radius: var(--theme-border-radius-xs);
        flex-shrink: 0
    }

    .tab-r-align .content-card .io-slider-tab>.tab-title {
        order: 1;
        flex-shrink: 0;
        max-width: none
    }

    .tab-r-align .content-card .io-slider-tab>.tab-to-more {
        order: 2;
        flex: 1 1 auto !important;
        min-width: 0;
        display: block !important;
        margin: 0;
        padding: 0;
        overflow: hidden
    }

    .tab-r-align .content-card .io-slider-tab>.slider-tab {
        order: 3;
        flex: 0 1 auto !important;
        min-width: 0;
        margin: 0 !important;
        max-width: 65%
    }

    .tab-r-align .content-card .io-slider-tab>:is(.star-tab-expand, .tab-more, .star-customize-edit-wrapper) {
        order: 4;
        flex-shrink: 0;
        position: static !important;
        transform: none
    }
}

@media (max-width:768px) {
    .tab-m-row .content-card:not(.star-customize-nav) .io-slider-tab {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center !important
    }

    .tab-m-row .content-card:not(.star-customize-nav) .io-slider-tab>.tab-title {
        flex-shrink: 0;
        max-width: 42%
    }

    .tab-m-row .content-card:not(.star-customize-nav) .io-slider-tab>.slider-tab {
        flex: 1;
        min-width: 0;
        margin: 0 !important
    }

    .tab-m-row .content-card:not(.star-customize-nav) .io-slider-tab>:is(.star-tab-expand, .tab-more) {
        flex-shrink: 0;
        position: static !important;
        transform: none
    }

    .star-tab-beautify.tab-m-row .content-card:not(.star-customize-nav) .tab-title {
        display: inline-flex;
        align-items: center
    }

    .star-tab-beautify.tab-m-row .content-card:not(.star-customize-nav) .tab-title::after {
        content: "";
        display: block;
        width: 2px;
        height: .7em;
        background: var(--muted-color);
        margin-left: 1rem;
        border-radius: var(--theme-border-radius-xs);
        flex-shrink: 0
    }

    .slider-tab,
    .star-tab-beautify.tab-bf-3 .slider-tab {
        margin-top: 8px !important
    }

    .star-tab-beautify.tab-bf-1 .slider-tab,
    .star-tab-beautify.tab-bf-2 .slider-tab {
        margin-top: 0 !important;
        padding: 6px 0
    }
}

.tab-bf-1 .slider-tab .tab-item.active,
.tab-bf-2 .slider-tab .tab-item.active {
    color: var(--main-color);
    transform: scale(1.1)
}

.tab-bf-1 .slider-tab .anchor {
    height: 12px !important;
    bottom: 8px;
    top: auto;
    border-radius: var(--theme-border-radius-xs);
    transform: skewX(-15deg);
    background: linear-gradient(to right, transparent, rgba(var(--theme-color-rgb), 0.3))
}

.io-black-mode .tab-bf-1 .slider-tab .anchor {
    background: linear-gradient(to right, transparent, rgba(var(--theme-color-rgb), 0.7))
}

.tab-bf-2 .slider-tab .anchor {
    height: 3px !important;
    bottom: 2px;
    top: auto;
    border-radius: 3px;
    transform: scaleX(0.45);
    transform-origin: center bottom;
    background: var(--theme-color)
}

.io-black-mode .tab-bf-2 .slider-tab .anchor {
    background: var(--main-color)
}

.tab-bf-3 .slider-tab {
    background-color: var(--body-bg-color)
}

.tab-bf-3 .slider-li.tab-item:hover {
    color: #fff
}

.tab-bf-3 .slider-tab.tab-anchor-preview .tab-item.active {
    color: var(--muted-color)
}

.io-slider-tab .tab-more.tab-parent-desc {
    min-width: 200px;
    max-width: 350px
}

@media (max-width:768px) {
    .tab-more.tab-parent-desc {
        top: 4px
    }

    .io-slider-tab .tab-more.tab-parent-desc {
        min-width: 20px;
        max-width: 200px
    }

    .tab-m-row .tab-more.tab-parent-desc {
        display: none !important
    }
}

.content-wrap .preview-body {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06)
}

.preview-body .text-xs.site-breadcrumb {
    padding: 5px 10px;
    width: 100%
}

.theme-star.single-sites .content-layout>.site-content .sites-preview .site-img {
    position: relative;
    width: 100% !important;
    max-width: 100%
}

.theme-star.single-sites .content-layout>.site-content .sites-preview .site-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover
}

.site-content .sites-preview .preview-btn {
    position: absolute;
    bottom: 50%;
    z-index: 2
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-header-top {
    gap: 15px;
    margin-top: -50px;
    margin-left: 25px;
    margin-right: 25px;
    padding: 12px 14px;
    border-radius: var(--main-radius);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgb(255 255 255);
    -webkit-backdrop-filter: saturate(2) blur(15px);
    backdrop-filter: saturate(2) blur(15px);
    position: relative;
    z-index: 2;
    align-items: center;
    flex-wrap: nowrap !important
}

.io-black-mode .site-content .site-body .site-header-top {
    background: rgba(44, 46, 47, .72) !important;
    border-color: rgba(85, 90, 97, .25) !important
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-name {
    line-height: 1.25
}

.site-content.no-preview .site-header-top {
    margin: 0 0 24px 0 !important;
    background: rgb(255 255 255) !important;
    box-shadow: 0 5px 20px var(--main-shadow)
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-header-top>a,
.theme-star.single-sites .content-layout>.site-content .site-body .site-header-top>img {
    flex: 0 0 auto;
    flex-shrink: 0;
    border-radius: calc(var(--main-radius) - 6px)
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-header-top .site-name-box {
    flex: 1 1 0% !important;
    width: 0;
    min-width: 0
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-header-top .site-name-box>p.mb-2 {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sites-template-default .site-name-box .site-name {
    margin-bottom: 0;
    padding-top: 10px
}

.theme-star.single-sites .content-layout>.site-content .site-body>.mt-2 {
    border-radius: 14px;
    padding: 16px 18px
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-go {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.theme-star.single-sites .content-layout>.site-content .site-body .site-go>* {
    margin-right: 0 !important
}

@media (max-width:768px) {
    .theme-star.single-sites .content-layout>.site-content .sites-preview .site-img.img-sites {
        height: 180px
    }

    .theme-star.single-sites .content-layout>.site-content .sites-preview .site-img.img-sites img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover
    }

    .theme-star.single-sites .content-layout>.site-content .sites-preview .site-favicon {
        flex-wrap: wrap
    }

    .theme-star.single-sites .content-layout>.site-content .sites-preview .site-favicon>.d-flex {
        width: 100%;
        margin-left: 0
    }

    .theme-star.single-sites .content-layout>.site-content .site-body .site-header-top {
        flex-wrap: wrap !important;
        margin-top: -30px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px
    }

    .theme-star.single-sites .content-layout>.site-content .site-body .site-header-top>img {
        flex: 0 0 auto !important;
        width: 48px;
        height: 48px;
        max-width: 48px;
        margin: 0
    }

    .theme-star.single-sites .content-layout>.site-content .site-body .site-header-top .site-name-box {
        flex: 1 1 0% !important;
        width: 0 !important;
        min-width: 0;
        text-align: left
    }

    .theme-star.single-sites .content-layout>.site-content .site-body .site-header-top>a.btn {
        flex: 0 0 100% !important;
        width: 100%;
        justify-content: center
    }

    .theme-star.single-sites .content-layout>.site-content .site-body>.mt-2 {
        margin: 10px 0 0;
        padding: 14px 14px;
        border-radius: 12px
    }

    .theme-star.single-sites .content-layout>.site-content .site-body .site-go>* {
        flex: 1 1 auto !important;
        min-width: 0
    }
}

@media (min-width:768px) {
    .theme-star.single-sites .content-layout>.site-content .sites-preview .site-img {
        width: 100% !important;
        max-width: 100% !important
    }
}

.preview-body .site-img.img-sites::after {
    content: "";
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    opacity: .1;
    top: 0;
    z-index: 1;
    transition: opacity .2s ease
}

.preview-body .site-img.img-sites:hover::after {
    opacity: 0
}

.site-name.h3 {
    font-size: 1.3rem;
    font-weight: 600
}

.text-preview-box {
    background: #f3f5f8;
    padding: 5px;
    border-radius: 8px
}

.text-preview-img {
    border-radius: 6px
}

.terms-list {
    padding-top: 10px;
    border-top: 1px dashed rgba(125, 125, 125, .2)
}

.table-div {
    background: #f2f4f7;
    padding: 8px 10px;
    border-radius: var(--main-radius)
}

.io-black-mode .table-div {
    background: rgba(44, 46, 47, .6)
}

.search-style1 .simple-group-list {
    position: relative;
    margin-left: 15px
}

.search-style1 .simple-group-list::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 30%;
    background: var(--theme-color);
    pointer-events: none
}

.search-style1 .dropdown .btn {
    background: var(--theme-color);
    border-radius: 50rem;
    color: #ffffff !important
}

.search-style1 .search-term {
    background: var(--form-bg);
    color: var(--main-color);
    backdrop-filter: blur(10px);
    margin: 0 3px
}

.search-style1 .simple-group-list {
    align-items: flex-start
}

.search-style1 .search-group li {
    padding: 5px 12px;
    border-radius: 50rem
}

.search-style1 .search-term.active {
    opacity: 1 !important;
    color: var(--main-color)
}

.dropdown.hover:hover>a>i {
    transform: rotate(90deg)
}

@media (max-width:480px) {
    .search-style1 .search-group {
        margin: 0 10px !important;
        border-radius: 50rem
    }

    .search-style1 #search-list {
        padding-right: 0 !important
    }

    .search-style1 .dropdown .btn,
    .search-style1 .search-group li {
        font-size: 14px;
        padding: 4px 10px
    }
}

.search-box-big,
.simple-group-list {
    text-align: center
}

.search-style2 .search-list-menu {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border-radius: 50rem;
    padding: 4px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto 8px;
    border: 1px solid rgb(255 255 255 / 15%);
    gap: 5px;
    white-space: nowrap
}

.search-style2 .search-menu.slider-li {
    padding: 8px 15px;
    text-shadow: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    line-height: 1.5;
    color: var(--font-color)
}

.search-style2 .search-menu.slider-li.active {
    background: var(--form-bg);
    color: var(--main-color);
    border-radius: 50rem;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transform: translateY(0)
}

.search-style2 .search-menu:hover {
    background: rgb(255 255 255 / 50%);
    color: #000;
    border-radius: 50rem
}

.search-style2 .search-term {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 50rem;
    margin: 5px;
    cursor: pointer;
    transition: all .3s ease
}

.search-style2 .search-group li {
    padding: 6px 10px;
    text-shadow: none
}

.search-term:hover {
    background: var(--form-bg);
    color: var(--main-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.search-style2 .search-term.active {
    background: var(--form-bg);
    color: var(--main-color)
}

.search-list-menu .anchor {
    display: none
}

@media (max-width:480px) {
    .search-style2 .search-term {
        font-size: 12px !important
    }
}

#refresh-related-sites {
    transition: all .3s ease
}

#refresh-related-sites:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

#refresh-related-sites:disabled {
    opacity: .6;
    cursor: not-allowed
}

#refresh-related-sites .icon-refresh.refresh-spinning {
    animation: refresh-spin 1s linear infinite;
    display: inline-block
}

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

    to {
        transform: rotate(360deg)
    }
}

.icon-spin {
    animation: star-icon-spin 1s linear infinite;
    display: inline-block
}

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

    to {
        transform: rotate(360deg)
    }
}

.sites-template-default .modal-body {
    padding-top: 0
}

.star-aside-highlight-style1 .aside-item>.aside-btn,
.star-aside-highlight-style1 .aside-item>.aside-accordion-row>.aside-btn,
.star-aside-highlight-style2 .aside-item>.aside-btn,
.star-aside-highlight-style2 .aside-item>.aside-accordion-row>.aside-btn,
.star-aside-highlight-style3 .aside-item>.aside-btn,
.star-aside-highlight-style3 .aside-item>.aside-accordion-row>.aside-btn {
    position: relative
}

.aside-body .aside-card {
    padding: 10px 0
}

.aside-body .aside-bottom,
.aside-body .aside-item {
    padding: 0 10px
}

.star-aside-highlight-style1 .aside-item-active>.aside-btn::before,
.star-aside-highlight-style1 .aside-item-active>.aside-accordion-row>.aside-btn::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 50%;
    background: var(--theme-color);
    box-shadow: 4px 0 14px 1px var(--theme-color);
    border-radius: 0 2px 2px 0;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    opacity: 1
}

.star-aside-highlight-style1 .aside-item:hover>.aside-btn::before,
.star-aside-highlight-style1 .aside-item:hover>.aside-accordion-row>.aside-btn::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 50%;
    background: var(--theme-color);
    box-shadow: 4px 0 14px 1px var(--theme-color);
    border-radius: 0 2px 2px 0;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    opacity: 1
}

.star-aside-highlight-style2 .aside-item-active>.aside-btn::before,
.star-aside-highlight-style2 .aside-item-active>.aside-accordion-row>.aside-btn::before {
    content: '';
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--focus-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.567 117.099'%3E%3Cpath d='m0,58.549v58.549c7.678-18.927,14.408-29.809,26.769-42.139,9.065-9.042,9.065-23.779,0-32.821C14.408,29.809,7.678,18.927,0,0,0,0,0,58.549,0,58.549Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.567 117.099'%3E%3Cpath d='m0,58.549v58.549c7.678-18.927,14.408-29.809,26.769-42.139,9.065-9.042,9.065-23.779,0-32.821C14.408,29.809,7.678,18.927,0,0,0,0,0,58.549,0,58.549Z'/%3E%3C/svg%3E");
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.star-aside-highlight-style2 .aside-item:hover>.aside-btn::before,
.star-aside-highlight-style2 .aside-item:hover>.aside-accordion-row>.aside-btn::before {
    content: '';
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--focus-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.567 117.099'%3E%3Cpath d='m0,58.549v58.549c7.678-18.927,14.408-29.809,26.769-42.139,9.065-9.042,9.065-23.779,0-32.821C14.408,29.809,7.678,18.927,0,0,0,0,0,58.549,0,58.549Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.567 117.099'%3E%3Cpath d='m0,58.549v58.549c7.678-18.927,14.408-29.809,26.769-42.139,9.065-9.042,9.065-23.779,0-32.821C14.408,29.809,7.678,18.927,0,0,0,0,0,58.549,0,58.549Z'/%3E%3C/svg%3E");
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.star-aside-highlight-style3 .aside-item-active>.aside-btn,
.star-aside-highlight-style3 .aside-item-active>.aside-accordion-row>.aside-btn {
    background: var(--focus-color);
    color: #fff
}

.star-aside-highlight-style3 .aside-item:not(.aside-item-active):hover>.aside-btn,
.star-aside-highlight-style3 .aside-item:not(.aside-item-active):hover>.aside-accordion-row>.aside-btn {
    background: var(--theme-color-bg);
    color: var(--theme-color)
}

.star-aside-highlight-style3 .aside-btn {
    transition: none
}

.star-aside-highlight-style3 .aside-item-active .aside-accordion-arrow {
    color: #fff !important
}

.star-aside-highlight-style1 .aside-item>.aside-btn:hover,
.star-aside-highlight-style1 .aside-item>.aside-accordion-row>.aside-btn:hover,
.star-aside-highlight-style2 .aside-item>.aside-btn:hover,
.star-aside-highlight-style2 .aside-item>.aside-accordion-row>.aside-btn:hover {
    background: transparent !important
}

.badge.badge-title.vc-j-red.mr-1,
.badge.badge-title.vc-j-purple.mr-1,
.tar-custom-badge.mr-1 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-28%, 24%) rotate(-45deg);
    transform-origin: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 18px;
    font-size: 10px;
    line-height: 1.8;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    border: none !important;
    border-radius: 0
}

.style-sites-min .badge.badge-title.vc-j-red.mr-1,
.style-sites-min .badge.badge-title.vc-j-purple.mr-1,
.style-sites-min .tar-custom-badge.mr-1 {
    transform: translate(-32%, 22%) rotate(-45deg);
    font-size: 8px
}

.sticky-border .site-is-sticky.posts-item,
.sticky-border .post-item:has(.badge.badge-title.vc-j-red),
.sticky-border .app-item:has(.badge.badge-title.vc-j-red) {
    border: 1px solid #f89250
}

.posts-item.sites-item.site-star-custom-border {
    border: 1px solid var(--site-star-border-color, #f89250)
}

.posts-item.sites-item.site-star-border-theme {
    border-color: var(--theme-color)
}

.posts-item.sites-item:has(.site-sticky-orb-bg) {
    position: relative
}

.posts-item.sites-item .site-sticky-orb-bg {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) rotate(-35deg);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .1;
    transition: transform .3s ease
}

.posts-item.sites-item:hover .site-sticky-orb-bg {
    transform: translateY(-50%) rotate(0)
}

.tar-custom-badge.mr-1 {
    background: linear-gradient(45deg, var(--star-badge-color, var(--theme-color)), color-mix(in srgb, var(--star-badge-color, var(--theme-color)) 70%, transparent))
}

.badge.badge-title.vc-j-red.mr-1.star-badge-theme {
    background: var(--theme-color)
}

.badge.badge-title.vc-j-red.mr-1.star-badge-has-color {
    background: var(--star-badge-color)
}

.badge.badge-title.vc-j-purple.mr-1 {
    background: var(--this-bg)
}

.navbar-header .sub-menu .menu-item-image {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 2px;
    flex-shrink: 0
}

.navbar-header .sub-menu .menu-item a {
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar-logo.star-navbar-logo-has-tip {
    position: relative
}

.star-favorite-tip-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 12px);
    z-index: 1050;
    width: max-content;
    max-width: min(90vw, 480px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.82) translateY(6px);
    transform-origin: 20px 0;
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.34, 1.25, .64, 1), visibility 0s linear .36s
}

.star-favorite-tip-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.34, 1.25, .64, 1), visibility 0s
}

.star-favorite-tip-arrow {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--focus-color);
    transform: rotate(45deg)
}

.star-favorite-tip-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: #fff;
    background: var(--focus-color);
    border-radius: var(--theme-border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.star-favorite-tip-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5
}

.star-favorite-tip-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: none;
    color: inherit;
    background: transparent;
    opacity: .6;
    cursor: pointer;
    border-radius: var(--theme-border-radius-md);
    transition: opacity .2s, background .2s
}

.star-favorite-tip-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .06)
}

.star-favorite-tip-close .iconfont {
    font-size: 16px;
    line-height: 1
}

@media (prefers-reduced-motion:reduce) {
    .star-favorite-tip-popover {
        transition: none !important
    }
}

.header-icon-btn a {
    display: flex;
    align-items: center;
    justify-content: center
}

:is(.header-history, .header-favorites) {
    position: relative
}

:is(.header-history, .header-favorites)>a i {
    font-size: 19px
}

@font-face {
    font-family: 'StarPanelTitle';
    src: url('../font/ZiHunBianTaoTi.woff2') format('woff2');
    font-display: swap
}

:is(.header-history, .header-favorites) .history-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 340px;
    z-index: 999;
    visibility: hidden;
    transform: translateY(-50px);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    overflow: hidden
}

:is(.header-history, .header-favorites) .history-panel.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s
}

@media (max-width:768px) {
    :is(.header-history, .header-favorites) .history-panel {
        top: 70px;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50px);
        width: min(360px, calc(100vw - 16px));
        max-width: calc(100vw - 16px)
    }

    :is(.header-history, .header-favorites) .history-panel.show {
        transform: translate(-50%, 0)
    }

    .header-icon-btn>a {
        margin: 0;
        padding: 8px
    }
}

:is(.header-history, .header-favorites) .history-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between
}

:is(.header-history, .header-favorites) .history-header h3 {
    margin: 0
}

:is(.header-history, .header-favorites) .history-body {
    max-height: 340px;
    overflow-x: hidden;
    overflow-y: auto
}

:is(.header-history, .header-favorites) .history-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

:is(.header-history, .header-favorites) .history-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 76px 10px 10px;
    color: inherit;
    transition: background .15s ease
}

.header-favorites .history-item {
    padding-right: 10px
}

:is(.header-history, .header-favorites) .history-item-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none
}

:is(.header-history, .header-favorites) .history-item-icon {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    flex: 0 0 30px;
    background-color: rgba(0, 0, 0, .04)
}

:is(.header-history, .header-favorites) .history-item-content {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px
}

:is(.header-history, .header-favorites) .history-item-title {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header-history .history-item-duration {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 2px 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .18s ease
}

.header-history .history-item-duration i {
    font-size: 14px
}

.header-history .history-item-delete {
    border: none;
    background: 0 0;
    padding: 0;
    cursor: pointer;
    color: var(--main-color);
    position: absolute;
    right: 10px;
    top: 50%;
    border-radius: var(--theme-border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, color .15s ease
}

.header-history .history-item-delete i {
    line-height: 1;
    display: block
}

.header-history .history-item:hover .history-item-duration {
    transform: translateY(-50%) translateX(-30px)
}

.header-history .history-item:hover .history-item-delete {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto
}

:is(.header-history, .header-favorites) .history-empty {
    padding: 12px;
    text-align: center
}

:is(.header-history, .header-favorites) .btn-clear-history {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.header-favorites .favorites-login-wrap {
    padding: 0 4px 8px
}

:is(.header-history, .header-favorites) .star-simple-panel {
    padding: 0;
    background: var(--main-bg-color);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    border-radius: var(--theme-border-radius);
    border: 1px solid rgba(0, 0, 0, .06)
}

:is(.header-history, .header-favorites) .star-simple-panel .history-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06)
}

:is(.header-history, .header-favorites) .star-simple-panel .history-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: inherit
}

:is(.header-history, .header-favorites) .star-simple-panel .history-shell {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible
}

:is(.header-history, .header-favorites) .star-simple-panel .history-body {
    padding: 12px;
    background-color: var(--body-bg-color)
}

:is(.header-history, .header-favorites) .star-simple-panel .history-item {
    border-radius: var(--theme-border-radius-sm);
    background: var(--main-bg-color)
}

:is(.header-history, .header-favorites) .star-simple-panel .history-item-icon {
    border-radius: var(--main-radius)
}

.header-history .star-simple-panel .history-item-duration {
    background: var(--theme-color-bg);
    color: var(--theme-color);
    border-radius: var(--theme-border-radius-sm)
}

:is(.header-history, .header-favorites) .star-simple-panel .history-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, .06)
}

:is(.header-history, .header-favorites) .star-simple-panel .btn-clear-history {
    border: none;
    border-radius: var(--theme-border-radius-md);
    background: var(--theme-color-bg);
    color: var(--theme-color)
}

:is(.header-history, .header-favorites) .star-simple-panel .btn-clear-history:hover {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .2)
}

.io-black-mode:is(.header-history, .header-favorites) .star-simple-panel {
    border: 1px solid rgb(58 58 59)
}

.io-black-mode:is(.header-history, .header-favorites) .star-simple-panel .btn-clear-history,
.io-black-mode .header-history .star-simple-panel .history-item-duration {
    background: rgb(45 46 47);
    border: 1px solid rgb(58 58 59);
    color: var(--main-color)
}

:is(.header-history, .header-favorites) .star-vivid-panel {
    --hp-grad-from: #FAFFE0;
    --hp-grad-to: #DAFFE8;
    width: 360px;
    padding: 16px 12px 12px;
    background: linear-gradient(275deg, var(--hp-grad-from) 0%, var(--hp-grad-to) 100%);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
    border-radius: var(--theme-border-radius-xxl);
    border: none;
    overflow: visible
}

:is(.header-history, .header-favorites) .star-vivid-panel.solid {
    background: var(--main-bg-color)
}

@media (max-width:768px) {
    :is(.header-history, .header-favorites) .star-vivid-panel {
        padding: 16px 14px 14px;
        border-radius: var(--theme-border-radius-xl)
    }
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-header {
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 0 15px;
    border-bottom: none
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-header h3 {
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'StarPanelTitle', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .02em;
    color: var(--main-color)
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-panel-action {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--main-color);
    font-family: 'StarPanelTitle', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-14px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease
}

:is(.header-history, .header-favorites) .star-vivid-panel:hover .history-panel-action {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-footer {
    display: none
}

@media (max-width:768px) {
    :is(.header-history, .header-favorites) .star-vivid-panel .history-panel-action {
        display: none !important
    }

    :is(.header-history, .header-favorites) .star-vivid-panel .history-footer {
        display: block;
        margin-top: 10px
    }

    :is(.header-history, .header-favorites) .star-vivid-panel .history-header {
        padding: 6px 0 10px
    }
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-deco {
    position: absolute;
    top: 15px;
    right: 25px;
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: .6;
    transform: rotate(15deg);
    pointer-events: none;
    user-select: none
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-deco-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    line-height: 1;
    color: var(--main-color);
    object-fit: unset
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-shell {
    position: relative;
    z-index: 1;
    background: var(--main-bg-color);
    border-radius: var(--theme-border-radius-xl);
    padding: 12px;
    overflow: hidden
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-list {
    gap: 8px
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-item {
    border-radius: var(--theme-border-radius-md);
    background-color: var(--body-bg-color)
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-item-icon {
    border-radius: 50%;
    background-color: #d9dbe0
}

.header-history .star-vivid-panel .history-item-duration {
    background: var(--main-bg-color);
    border-radius: var(--theme-border-radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06)
}

.header-history .star-vivid-panel .history-item-delete {
    background: var(--main-bg-color);
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06)
}

:is(.header-history, .header-favorites) .star-vivid-panel .history-empty {
    padding: 28px 12px;
    color: #888
}

:is(.header-history, .header-favorites) .star-vivid-panel .btn-clear-history {
    border: none;
    background: #f3f4f6;
    border-radius: var(--theme-border-radius-md);
    padding: 10px 12px;
    color: #444
}

:is(.header-history, .header-favorites) .star-vivid-panel .btn-clear-history:hover {
    background: #e9ebef;
    color: #111;
    border-color: transparent
}

.navbar-header .menu-item-has-children>.sub-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-2px) !important
}

.navbar-header .sub-menu .sub-menu {
    left: 110% !important;
    transform: translateY(0) !important
}

.nav.header-tools {
    margin-bottom: 1px
}

.io-black-mode:is(.header-history, .header-favorites) .star-vivid-panel:not(.solid) {
    --hp-grad-from: #717479;
    --hp-grad-to: #444444;
    background: linear-gradient(10deg, var(--hp-grad-from) 0%, var(--hp-grad-to) 100%)
}

.star-vivid-panel.solid .history-shell {
    background-color: var(--body-bg-color)
}

.star-vivid-panel.solid .history-item {
    background: var(--main-bg-color)
}

.star-float-login-modal,
.star-float-bulletin-modal {
    --star-float-anim: 0.3s;
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgb(0 0 0 / 40%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity var(--star-float-anim) ease-in-out, visibility 0s linear var(--star-float-anim)
}

.star-float-login-modal.show,
.star-float-bulletin-modal.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--star-float-anim) ease-in-out, visibility 0s linear 0s
}

.star-float-login-stack,
.star-float-bulletin-stack {
    position: relative;
    max-width: 100%;
    transform: translateY(-50px);
    transition: transform .3s ease
}

.star-float-login-stack {
    width: min(420px, calc(100vw - 32px))
}

.star-float-bulletin-stack {
    width: min(560px, calc(100vw - 32px))
}

.star-float-login-modal.show .star-float-login-stack,
.star-float-bulletin-modal.show .star-float-bulletin-stack {
    transform: translateY(0)
}

body.star-float-login-open,
body.star-float-bulletin-open {
    overflow: hidden
}

.star-login-charm {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin: 0 auto -17px;
    min-height: 38px;
    pointer-events: none;
    position: relative;
    z-index: 2
}

.star-login-charm .face {
    background: linear-gradient(135deg, #ffd166, #ff7a90);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px 18px 10px 10px;
    box-shadow: 0 8px 18px rgba(255, 122, 144, .2);
    display: block;
    height: 24px;
    position: relative;
    width: 58px;
    z-index: 3
}

.star-login-charm .eye {
    background: #fff;
    border-radius: 50%;
    display: block;
    height: 8px;
    overflow: hidden;
    position: absolute;
    top: 7px;
    width: 8px
}

.star-login-charm .eye-l {
    left: 16px
}

.star-login-charm .eye-r {
    right: 16px
}

.star-login-charm .eye span {
    background: #27364f;
    border-radius: 50%;
    display: block;
    height: 4px;
    left: 2px;
    position: absolute;
    top: 2px;
    transform: translate(var(--star-login-eye-x, 0), var(--star-login-eye-y, 0));
    transition: transform .08s linear;
    width: 4px
}

.star-login-charm .mouth {
    border-bottom: 2px solid rgba(39, 54, 79, .58);
    border-radius: 0 0 10px 10px;
    display: block;
    height: 5px;
    left: 24px;
    position: absolute;
    top: 14px;
    width: 10px
}

.star-login-charm .hand {
    background: linear-gradient(135deg, #ffd166, #ff7a90);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    box-shadow: 0 5px 10px rgba(255, 122, 144, .18);
    display: block;
    height: 14px;
    position: relative;
    top: 15px;
    width: 18px;
    z-index: 4
}

.star-login-charm .hand:after {
    background: rgba(39, 54, 79, .16);
    border-radius: 999px;
    content: "";
    display: block;
    height: 2px;
    left: 4px;
    position: absolute;
    top: 8px;
    width: 10px
}

.star-login-charm .hand-l {
    transform: rotate(-12deg)
}

.star-login-charm .hand-r {
    transform: rotate(12deg)
}

.star-float-login-dialog {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    background: var(--main-bg-color);
    border-radius: var(--theme-border-radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
    box-sizing: border-box;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.star-float-login-dialog .login-forms {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 30px 30px 25px
}

.star-float-login-dialog .sign-header {
    padding-right: 0;
    padding-left: 0
}

.star-float-login-dialog .login-forms .d-flex.mb-3>a.btn-outline,
.star-float-login-dialog .login-forms .d-flex.my-3>a.btn-outline {
    display: none
}

.star-float-login-loading,
.star-float-bulletin-loading,
.star-float-login-loading-overlay,
.star-float-bulletin-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color);
    font-size: 28px
}

.star-float-login-loading {
    min-height: 220px
}

.star-float-login-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--main-bg-color) 90%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.star-float-login-trigger.nav-user-box {
    cursor: pointer
}

.star-float-bulletin-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(72vh, 620px);
    overflow: hidden;
    padding: 16px;
    gap: 18px;
    background: var(--main-bg-color);
    border-radius: var(--theme-border-radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.star-float-bulletin-dialog>.post-cover {
    flex-shrink: 0;
    margin-bottom: 0
}

.star-float-bulletin-dialog>.post-cover .media {
    margin-bottom: 0
}

.star-float-bulletin-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.star-float-bulletin-footer {
    flex-shrink: 0
}

.star-float-bulletin-body .bulletin-card {
    box-shadow: none;
    background: var(--body-bg-color)
}

.star-float-bulletin-body .bulletin-card:last-child {
    margin-bottom: 0 !important
}

.star-float-bulletin-body .scrolltext-title {
    color: inherit
}

.star-float-bulletin-body .scrolltext-title:hover {
    color: var(--theme-color)
}

.star-float-bulletin-loading {
    min-height: 180px
}

.star-float-bulletin-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.star-float-bulletin-trigger .star-float-bulletin-icon {
    width: 20px;
    height: 20px;
    display: block
}

@media (max-width:767.98px) {

    .star-float-login-modal,
    .star-float-bulletin-modal {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0
    }

    .star-float-login-stack,
    .star-float-bulletin-stack {
        width: 100%;
        transform: translateY(100%)
    }

    .star-float-login-modal.show .star-float-login-stack,
    .star-float-bulletin-modal.show .star-float-bulletin-stack {
        transform: translateY(0)
    }

    .star-float-login-dialog {
        max-height: min(92vh, calc(100dvh - 12px));
        border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, .18);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .star-float-login-loading {
        min-height: 180px;
        padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    .star-float-bulletin-dialog {
        max-height: min(85vh, calc(100dvh - 48px));
        padding: 12px;
        gap: 12px;
        border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, .18)
    }

    .star-float-bulletin-dialog>.post-cover .h4.text-white {
        margin: 0;
        font-size: 1.2rem
    }

    .star-float-bulletin-footer {
        padding-bottom: env(safe-area-inset-bottom, 0px)
    }
}

.detail-floating-bar {
    position: fixed;
    left: 50%;
    z-index: 99;
    max-width: var(--dfb-max-width, calc(var(--main-max-width) - 250px));
    width: calc(100% - 20px);
    padding: 16px;
    border-radius: var(--main-radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease-out, transform .24s ease-out;
    background: var(--main-blur-bg-color);
    -webkit-backdrop-filter: saturate(2) blur(15px);
    backdrop-filter: saturate(2) blur(15px);
    border: 1px solid #fff
}

.detail-floating-bar.dfb-position-top {
    top: 80px;
    bottom: auto;
    transform: translate(-50%, -50px)
}

.detail-floating-bar.dfb-position-bottom {
    top: auto;
    bottom: 50px;
    transform: translate(-50%, 50px)
}

@media (max-width:767.98px) {
    .detail-floating-bar.dfb-position-bottom {
        bottom: 50px
    }

    body:has(.footer-tabbar) .detail-floating-bar.dfb-position-bottom {
        bottom: calc(60px + constant(safe-area-inset-bottom) + 10px);
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 10px)
    }

    body:has(.footer-tabbar.tabbar-type-round) .detail-floating-bar.dfb-position-bottom {
        bottom: calc(76px + constant(safe-area-inset-bottom) + 10px);
        bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 10px)
    }
}

.detail-floating-bar.dfb-position-top.dfb-show,
.detail-floating-bar.dfb-position-bottom.dfb-show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto
}

.detail-floating-bar.dfb-anchor-layout {
    left: 0;
    right: auto;
    width: auto;
    max-width: none
}

.detail-floating-bar.dfb-anchor-layout.dfb-position-top {
    transform: translateY(-50px)
}

.detail-floating-bar.dfb-anchor-layout.dfb-position-bottom {
    transform: translateY(50px)
}

.detail-floating-bar.dfb-anchor-layout.dfb-position-top.dfb-show,
.detail-floating-bar.dfb-anchor-layout.dfb-position-bottom.dfb-show {
    transform: translateY(0)
}

.detail-floating-bar .dfb-inner {
    width: 100%;
    gap: 15px
}

.detail-floating-bar .dfb-left {
    gap: 10px
}

.detail-floating-bar .dfb-icon-img {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    object-fit: cover
}

.detail-floating-bar .dfb-info {
    gap: 4px;
    flex: 1;
    min-width: 0
}

.detail-floating-bar .dfb-title {
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4
}

.detail-floating-bar .dfb-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal
}

.detail-floating-bar .dfb-right .btn {
    margin: 0;
    border-radius: var(--theme-border-radius-sm);
    white-space: nowrap
}

@media (max-width:768px) {
    .detail-floating-bar {
        padding: 15px;
        max-width: 100%;
        width: calc(100% - 20px);
        box-shadow: none
    }

    .detail-floating-bar .dfb-title {
        max-width: 160px;
        font-size: 14px
    }

    .detail-floating-bar .dfb-desc {
        max-width: 160px;
        font-size: 10px
    }

    .detail-floating-bar .site-open-direct {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    .detail-floating-bar .iconfont.icon-arrow-r-m {
        display: none
    }
}

.io-black-mode .detail-floating-bar {
    background: rgba(23, 23, 23, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .7);
    color: #f9fafb;
    border: 1px solid #2d2e2f
}

.io-black-mode .detail-floating-bar .dfb-title {
    color: #f9fafb
}

.io-black-mode .detail-floating-bar .dfb-desc {
    color: #9ca3af
}

@media (max-width:767.98px) {

    .star-mobile-footerbar,
    .star-mobile-footerbar-placeholder {
        --smfb-padding-y: 12px;
        --smfb-btn-height: 44px;
        --smfb-bar-height: calc(var(--smfb-padding-y) * 2 + var(--smfb-btn-height));
        --smfb-float-offset: 10px
    }

    .star-mobile-footerbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 98;
        transition: transform .3s ease-out .15s
    }

    .star-mobile-footerbar.smfb-type-fixed {
        bottom: 0
    }

    .star-mobile-footerbar .smfb-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px
    }

    .star-mobile-footerbar.smfb-type-float {
        left: var(--smfb-float-offset);
        right: var(--smfb-float-offset);
        width: auto;
        bottom: var(--smfb-float-offset)
    }

    .star-mobile-footerbar.smfb-type-float .smfb-inner {
        border-radius: var(--theme-border-radius-xl);
        box-shadow: 0 6px 20px var(--main-shadow)
    }

    .star-mobile-footerbar .smfb-primary {
        flex: 1 1 auto;
        min-width: 0
    }

    .star-mobile-footerbar .smfb-open-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--smfb-btn-height);
        padding: 0 18px;
        border-radius: var(--main-radius);
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        background: var(--theme-color);
        transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease
    }

    .star-mobile-footerbar .smfb-open-btn:active:not(.disabled) {
        transform: scale(.98)
    }

    .star-mobile-footerbar .smfb-open-btn.disabled {
        opacity: .55;
        box-shadow: none;
        pointer-events: none
    }

    .star-mobile-footerbar .smfb-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto
    }

    .star-mobile-footerbar .smfb-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--smfb-btn-height);
        height: var(--smfb-btn-height);
        min-width: var(--smfb-btn-height);
        padding: 0;
        border-radius: var(--main-radius);
        color: #5f6368;
        background: rgb(255 255 255 / 50%);
        text-decoration: none;
        transition: background .15s ease, color .15s ease, transform .15s ease
    }

    .star-mobile-footerbar .smfb-action-btn .iconfont {
        font-size: 20px;
        line-height: 1
    }

    .star-mobile-footerbar .smfb-action-btn:active {
        transform: scale(.94)
    }

    .star-mobile-footerbar .smfb-action-btn.liked {
        color: var(--theme-color);
        background: var(--theme-color-bg)
    }

    .scroll-ing .scrolling-hide.star-mobile-footerbar {
        transform: translateY(120%)
    }

    .star-mobile-footerbar-placeholder {
        height: var(--smfb-bar-height)
    }

    .star-mobile-footerbar-placeholder.smfb-type-float {
        height: calc(var(--smfb-bar-height) + var(--smfb-float-offset))
    }

    .io-black-mode .star-mobile-footerbar.smfb-type-float .smfb-inner {
        border-color: #2d2e2f
    }

    .io-black-mode .star-mobile-footerbar .smfb-action-btn {
        color: #b0b3b8;
        background: rgba(255, 255, 255, .08)
    }

    .io-black-mode .star-mobile-footerbar .smfb-action-btn.liked {
        color: var(--theme-color);
        background: rgba(var(--theme-color-rgb), .15)
    }
}

.star-nav-width {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    z-index: 99;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px
}

.header-banner.post-top .star-nav-width {
    margin-bottom: 0
}

.header-banner .star-nav-width {
    margin-bottom: 10px
}

.star-nav-width .nav-btn.btn {
    background: #ffffff14;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--main-radius);
    border: 1px solid #ffffff2e;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    transition: all .2s ease
}

.star-nav-width .nav-btn.btn:first-child {
    margin-left: 0
}

.star-nav-width .nav-btn.btn:last-child {
    margin-right: 0
}

.star-nav-width .nav-btn.btn {
    color: #fff
}

@media screen and (max-width:768px) {
    .star-nav-width {
        display: flex;
        justify-content: flex-start;
        padding-left: 2px
    }

    .star-nav-width .nav-btn.btn {
        font-size: 13px
    }

    .star-nav-width .nav-btn.btn:first-child {
        margin-left: -1px
    }
}

.io-black-mode .star-nav-width .nav-btn.btn {
    background: rgba(45, 46, 47, .3);
    border-color: rgba(255, 255, 255, .15);
    color: #b4b8bf
}

.io-black-mode .star-nav-width .nav-btn.btn:hover {
    background: rgba(65, 66, 67, .5);
    color: #f9fafb
}

.popup-ad-sites,
.popup-related-sites {
    background-color: var(--body-bg-color);
    padding: 12px;
    border-radius: var(--theme-border-radius-md)
}

.popup-ad-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(223 223 223)
}

.popup-ad-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--main-color)
}

.popup-ad-content {
    margin-top: 10px
}

.confirm.modal .posts-item {
    box-shadow: none;
    border: 1px solid #f1f1f196;
    overflow: hidden
}

.popup-ad-sites .btn-right {
    transition: all .3s ease
}

.popup-ad-sites .btn-right:hover {
    opacity: .8;
    transform: translateY(-1px)
}

.io-black-mode .confirm.modal .posts-item {
    border: 1px solid #484848
}

.io-black-mode .popup-ad-header {
    border-bottom-color: rgb(72 72 72)
}

.io-black-mode .popup-ad-title {
    color: var(--main-color, #fff)
}

@media (max-width:768px) {
    .popup-ad-content .posts-row {
        --this-card-padding: calc(0.5 * var(--home-card-padding))
    }
}

body.has-top-banner {
    padding-top: 0 !important
}

body.has-top-banner .main-header.header-fixed {
    position: sticky;
    top: 0
}

.star-top-banner-slot {
    position: relative;
    width: 100%;
    line-height: 0;
    z-index: 108
}

.star-top-banner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.star-top-banner-container {
    position: relative;
    width: 100%;
    overflow: hidden
}

.star-top-banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    z-index: 1;
    display: none
}

.star-top-banner-item.desktop {
    display: block
}

@media (max-width:768px) {
    .star-top-banner-item.desktop {
        display: none !important
    }

    .star-top-banner-item.mobile {
        display: block !important
    }

    .star-top-banner-item img {
        max-height: 120px;
        object-fit: cover
    }

    .star-top-banner-close {
        width: 24px;
        height: 24px
    }

    .star-top-banner-close i {
        font-size: 12px
    }
}

.star-top-banner-item.active {
    position: relative;
    opacity: 1;
    z-index: 2
}

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

.star-top-banner-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ffffff80;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    backdrop-filter: blur(4px)
}

.star-top-banner-close i {
    font-size: 14px
}

@media (min-width:768px) {
    .full-container.star-aside-stick:not(.star-hide-aside).has-top-banner .star-top-banner-slot {
        margin-left: var(--star-aside-inset, var(--main-aside-width));
        width: auto
    }
}

.logo-search-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%
}

.logo-search-up {
    text-align: center;
    flex-shrink: 0
}

.logo-search-wrapper:has(.search-style2)>.logo-search-up {
    margin-top: 12px
}

.logo-search-wrapper:has(.search-style1)>.logo-search-up {
    margin-top: 45px
}

.logo-search-up a {
    display: inline-block;
    text-decoration: none;
    transition: opacity .3s ease
}

.logo-search-up a:hover {
    opacity: .8
}

.star-search-logo {
    display: inline-block;
    vertical-align: middle;
    transition: opacity .3s ease
}

.star-search-logo-dark {
    display: none
}

.io-black-mode .star-search-logo-dark {
    display: inline-block
}

.io-black-mode .star-search-logo-light {
    display: none
}

.logo-search-wrapper .big-search,
.logo-search-wrapper .search-style-star,
.logo-search-wrapper .search-style1,
.logo-search-wrapper .search-style2 {
    flex-shrink: 0;
    margin: 0 !important;
    width: 100%
}

@media (max-width:1200px) {
    .logo-search-wrapper .logo-search-up {
        display: none
    }
}

body.header-Welt {
    --main-nav-hight: 75px
}

.header-Welt .main-header.header-fixed {
    padding: 0;
    padding-bottom: 10px;
    height: var(--main-nav-hight)
}

.header-Welt .header-fixed .header-nav {
    border-radius: 0
}

.header-Welt:not(.full-container) .header-fixed .switch-container {
    padding: 0 15px;
    max-width: calc(var(--main-max-width) + 250px)
}

@media (max-width:768px) {
    .header-Welt:not(.full-container) .header-fixed .switch-container {
        padding: 0 10px
    }
}

.wp-child-theme-onenav-star:not(.full-container) .main-footer.footer-stick.Welt .switch-container {
    max-width: calc(var(--main-max-width) - 20px)
}

.full-container .footer-stick.Welt .switch-container {
    padding: 0 10px
}

.app-template-default.wp-child-theme-onenav-star:not(.full-container) .Welt .container-footer .footer,
.post-template-default.wp-child-theme-onenav-star:not(.full-container) .Welt .container-footer .footer,
.sites-template-default.wp-child-theme-onenav-star:not(.full-container) .Welt .container-footer .footer {
    box-shadow: 0 5px 20px var(--main-shadow)
}

.main-footer.footer-stick.Fullwidth {
    padding: 10px 0 0 0
}

.Fullwidth .footer-fullwidth-wrap {
    background: var(--main-bg-color)
}

.Fullwidth .switch-container.container-footer.container {
    max-width: calc(var(--main-max-width) + 40px)
}

.Fullwidth .footer {
    background-color: transparent
}

.starsearch-box {
    padding-right: 10px;
    padding-left: 10px
}

.starsearch-box .header-banner.header-big,
.starsearch-box .star-hero-banner {
    border-radius: var(--main-radius);
    overflow: hidden;
    padding-top: 0;
    margin: 0 auto
}

.wp-child-theme-onenav-star:not(.full-container) .starsearch-box .header-banner.header-big,
.wp-child-theme-onenav-star:not(.full-container) .starsearch-box .star-hero-banner {
    max-width: calc(var(--main-max-width) - 20px)
}

.full-container .starsearch-box {
    max-width: var(--home-max-width);
    margin: 0 auto
}

.starsearch-box .star-hero-banner .star-hero-rail {
    padding: 25px
}

.starsearch-box .star-hero-rail-nav {
    padding-top: var(--main-nav-hight)
}

@media screen and (min-width:768px) {
    .full-container:not(.star-aside-stick) .starsearch-box .header-banner {
        margin-left: calc(15px + var(--main-aside-width)) !important;
        padding: 0
    }
}

@media screen and (max-width:768px) {

    .starsearch-box .header-banner.header-big,
    .starsearch-box .star-hero-banner {
        margin-top: calc(72px - var(--main-nav-hight))
    }
}

.io-star-tabs-box .card {
    box-shadow: none
}

.io-star-tabs-box .tab-widget-nav .nav-pills .nav-link.active {
    background-color: rgb(245 247 250);
    border: 1px solid rgb(237 241 249)
}

.io-star-tabs-box .tab-widget-content .widget-item.item-favorites,
.io-star-tabs-box .tab-widget-content .widget-item.item-apps {
    display: grid;
    gap: 10px;
    justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    min-height: auto
}

.io-star-tabs-box .tab-card.type-favorites,
.io-star-tabs-box .tab-card.type-apps {
    background: #fff;
    border-radius: calc(var(--theme-border-radius) - 4px);
    box-shadow: 2px 2px 10px 0 rgb(112 113 116 / 5%);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    text-align: center;
    min-width: 0
}

.io-star-tabs-box .tab-card.type-favorites .icon-btn,
.io-star-tabs-box .tab-card.type-apps .icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    color: inherit
}

.io-star-tabs-box .tab-card.type-favorites .img-bg,
.io-star-tabs-box .tab-card.type-favorites .img-bg>div,
.io-star-tabs-box .tab-card.type-apps .media {
    display: flex;
    align-items: center;
    justify-content: center
}

.io-star-tabs-box .tab-card.type-favorites .img-bg {
    width: 55px !important;
    height: 55px !important;
    padding: 8px;
    box-shadow: none;
    flex-shrink: 0;
    overflow: hidden
}

.io-star-tabs-box .tab-card.type-apps .media {
    width: 47px !important;
    height: 47px !important
}

.io-star-tabs-box .tab-card.type-favorites .img-bg .rounded-circle {
    width: 100%;
    height: 100%
}

.io-star-tabs-box .tab-card.type-apps .media-content {
    width: 100%;
    height: 100%;
    background-color: transparent
}

.io-star-tabs-box .tab-card .icon-title {
    width: 100%;
    overflow: hidden
}

.io-star-tabs-box .tab-card .icon-title span {
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 2px
}

.io-star-tabs-box .icon-btn .icon-title::before {
    display: none
}

.io-star-tabs-box .tab-card.type-books {
    flex: 1 1 120px;
    max-width: 124px
}

.io-star-tabs-box .tab-card.type-category {
    flex: 1 1 160px;
    max-width: 172px
}

.io-star-tabs-box .tab-widget-content .widget-item.item-books,
.io-star-tabs-box .tab-widget-content .widget-item.item-category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: stretch;
    min-height: auto;
    margin-left: 0;
    margin-right: 0
}

@media (max-width:768px) {
    .io-star-tabs-box .tab-widget-nav .nav-link {
        width: 55px;
        height: 55px;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .io-star-tabs-box .tab-widget-nav .nav-link .text-xs {
        display: block !important;
        font-size: .75rem !important;
        margin-top: 4px
    }

    .io-star-tabs-box .tab-widget-nav .nav-link i {
        font-size: 1.3rem
    }

    .io-star-tabs-box .tab-card.type-favorites .img-bg,
    .io-star-tabs-box .tab-card.type-apps .media {
        width: 50px !important;
        height: 50px !important
    }

    .io-star-tabs-box .tab-card.type-favorites,
    .io-star-tabs-box .tab-card.type-apps {
        padding: 10px 6px
    }
}

@media (max-width:480px) {
    .io-star-tabs-box .tab-card.type-books {
        flex: 0 0 50%;
        max-width: 50%
    }

    .io-star-tabs-box .tab-card.type-category {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media screen and (min-width:768px) {
    .io-star-tabs-box .tab-widget-nav .nav-link {
        border-radius: var(--theme-border-radius);
        height: 50px;
        width: 90px;
        flex-direction: row;
        gap: 5px;
        align-items: center;
        justify-content: center
    }

    .io-star-tabs-box .tab-widget-nav .nav-link i {
        font-size: 1.5rem
    }

    .io-star-tabs-box .tab-widget-content .widget-item.item-favorites,
    .io-star-tabs-box .tab-widget-content .widget-item.item-apps {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr))
    }
}

.io-black-mode .io-star-tabs-box .tab-widget-nav .nav-pills .nav-link.active {
    background-color: rgb(27 29 31);
    border: none
}

.io-black-mode .io-star-tabs-box .tab-widget-content .tab-pane.active {
    background-color: rgb(27 29 31)
}

.io-star-tabs-box .tab-card.type-favorites:hover,
.io-star-tabs-box .tab-card.type-apps:hover {
    transform: translateY(-2px);
    box-shadow: 2px 4px 16px 0 rgb(112 113 116 / 12%)
}

.io-black-mode .io-star-tabs-box .tab-card.type-favorites,
.io-black-mode .io-star-tabs-box .tab-card.type-apps {
    background: linear-gradient(to top, #2c2e2f, #1b1d1f)
}

.star-customize-nav .add_new_sites_modal .addsite-modal-header {
    padding: 16px 18px;
    border-radius: var(--theme-border-radius-md);
    background: linear-gradient(135deg, rgba(0, 123, 255, .06), rgba(111, 66, 193, .05));
    border: 1px solid rgba(0, 0, 0, .03)
}

.io-black-mode .star-customize-nav .add_new_sites_modal .addsite-modal-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    border-color: rgba(255, 255, 255, .08)
}

.star-customize-nav .add_new_sites_modal .addsite-modal-title {
    font-weight: 600
}

.star-customize-nav .add_new_sites_modal .addsite-modal-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.star-customize-nav .add_new_sites_modal .addsite-modal-link {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 123, 255, .06);
    color: var(--theme-color);
    font-size: 11px;
    text-decoration: none
}

.star-customize-nav .add_new_sites_modal .addsite-modal-link:hover {
    background: rgba(0, 123, 255, .12);
    text-decoration: none
}

.io-black-mode .star-customize-nav .add_new_sites_modal .addsite-modal-link {
    background: rgba(255, 255, 255, .06)
}

.star-customize-no-categories {
    margin: 0 auto
}

.star-customize-nav .add_new_sites_modal .star-customize-categories .star-customize-cat-select {
    display: block;
    width: 100%;
    height: 42px;
    border-radius: var(--theme-border-radius-md);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none
}

.star-customize-nav .add_new_sites_modal .star-customize-categories .star-customize-cat-select:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 .15rem rgb(0 123 255 / 15%);
    outline: 0
}

.io-black-mode .star-customize-nav .add_new_sites_modal .star-customize-categories .star-customize-cat-select {
    border-color: rgba(255, 255, 255, .12);
    background-color: #2b2d31;
    color: #d6d9de;
    background-image: linear-gradient(45deg, transparent 50%, #a6acb6 50%), linear-gradient(135deg, #a6acb6 50%, transparent 50%)
}

.io-black-mode .star-customize-nav .add_new_sites_modal .star-customize-categories .star-customize-cat-select:focus {
    box-shadow: 0 0 0 .15rem rgb(88 166 255 / 22%)
}

.star-customize-nav .add_new_sites_modal .posts-cover-img.sites-cover-preview .cover-edit {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 10
}

.star-customize-nav .add_new_sites_modal .posts-cover-img.sites-cover-preview:hover .cover-edit {
    opacity: 1;
    transform: translateY(0)
}

.star-customize-nav .add_new_sites_modal .star-customize-ico-pop {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .06);
    background: rgba(0, 0, 0, .02)
}

.io-black-mode .star-customize-nav .add_new_sites_modal .star-customize-ico-pop {
    border-color: rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .03)
}

.star-customize-nav .star-customize-edit-menu.dropdown-menu {
    position: absolute;
    left: auto;
    right: 0;
    margin-top: 6px;
    z-index: 20;
    text-align: right
}

.dropdown-menu.star-customize-edit-menu a {
    font-size: 1rem !important
}

.star-customize-nav .sites-item .star-customize-card-action {
    width: 22px;
    height: 100%;
    border: 0;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 6px
}

.star-customize-nav .sites-item,
.star-customize-nav .sites-item *,
html.star-ios-longpress-global .sites-item,
html.star-ios-longpress-global .sites-item * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none
}

.star-customize-nav .sites-item a,
.star-customize-nav .sites-item img,
html.star-ios-longpress-global .sites-item a,
html.star-ios-longpress-global .sites-item img {
    -webkit-user-drag: none
}

.star-customize-nav .sites-item .star-customize-card-action i {
    font-size: 16px;
    line-height: 1
}

.star-customize-nav.star-customize-editing .sites-item .star-customize-card-action {
    display: inline-flex
}

.star-customize-card-context-menu {
    position: absolute;
    z-index: 10000;
    background: var(--main-bg-color);
    backdrop-filter: saturate(2) blur(15px);
    border: 1px solid #fff;
    border-radius: var(--theme-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 4px
}

.star-customize-context-add-panel {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 300px;
    box-sizing: border-box;
    padding: 4px
}

.star-customize-context-add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--theme-color);
    background: rgba(var(--theme-color-rgb), 0.1);
    padding: 6px 10px;
    border-radius: var(--theme-border-radius-md);
    font-size: 15px
}

.star-customize-context-add-header .star-customize-context-label {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-right: 12px;
    font-weight: 500
}

.star-customize-card-context-menu .star-customize-context-term.is-disabled {
    opacity: .42;
    pointer-events: none
}

.star-customize-card-context-menu .star-customize-context-term.is-saving {
    pointer-events: none;
    cursor: default
}

.star-customize-context-saving {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px
}

.star-customize-context-saving .icon-loading {
    font-size: 14px
}

.star-customize-context-add-chevron {
    flex-shrink: 0;
    opacity: .65;
    font-size: 12px !important
}

.star-customize-context-add-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: start;
    max-height: min(240px, 44vh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box
}

.star-customize-card-context-menu .star-customize-context-add-list .star-customize-context-term {
    display: flex;
    flex: 1 1 auto;
    min-width: calc((100% - 6px) / 2);
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: var(--theme-border-radius-md);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-height: 36px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .06)
}

.star-customize-card-context-menu .star-customize-context-add-list .star-customize-context-empty {
    flex: 0 0 100%;
    display: block;
    padding: 10px 6px;
    font-size: 12px;
    color: #8a8f98;
    text-align: center;
    white-space: normal;
    line-height: 1.4
}

.star-customize-card-context-menu .star-customize-context-enter-edit,
.star-customize-card-context-menu .star-customize-context-edit-card,
.star-customize-card-context-menu .star-customize-context-delete-card {
    display: block;
    padding: 6px 10px;
    border-radius: var(--theme-border-radius-md);
    color: inherit;
    text-decoration: none;
    white-space: nowrap
}

.star-customize-card-context-menu .star-customize-context-add-list .star-customize-context-term:hover {
    background: rgba(0, 0, 0, .1)
}

.star-customize-card-context-menu .star-customize-context-enter-edit:hover,
.star-customize-card-context-menu .star-customize-context-edit-card:hover,
.star-customize-card-context-menu .star-customize-context-delete-card:hover {
    background: rgba(0, 0, 0, .05)
}

.star-customize-card-context-menu .star-customize-context-delete-card {
    color: #e55353
}

.io-black-mode .star-customize-card-context-menu {
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4)
}

.io-black-mode .star-customize-context-add-header {
    border-bottom-color: rgba(255, 255, 255, .1)
}

.io-black-mode .star-customize-card-context-menu .star-customize-context-empty {
    color: #b8bcc5
}

.io-black-mode .star-customize-card-context-menu .star-customize-context-delete-card {
    color: #ff7b7b
}

.io-black-mode .star-customize-card-context-menu .star-customize-context-edit-card+.star-customize-context-delete-card {
    border-top-color: rgba(255, 255, 255, .12)
}

.star-customize-nav .sites-item .star-customize-drag-handle {
    display: none;
    height: 100%;
    margin-right: 6px;
    color: inherit;
    cursor: grab;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    z-index: 999
}

.star-customize-nav.star-customize-editing .sites-item .star-customize-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.star-customize-nav.star-customize-editing .sites-item .star-customize-drag-handle:active {
    cursor: grabbing
}

.star-customize-nav.star-customize-no-drag .sites-item .star-customize-drag-handle {
    display: none !important
}

@keyframes starCustomizeAnchorShakeX {
    0% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-2px)
    }

    40% {
        transform: translateX(2px)
    }

    60% {
        transform: translateX(-1.5px)
    }

    80% {
        transform: translateX(1.5px)
    }

    100% {
        transform: translateX(0)
    }
}

@media (min-width:768px) {
    .star-customize-nav.star-customize-editing #star-customize-nav-tabs>li.anchor {
        animation: starCustomizeAnchorShakeX .42s ease-in-out 1;
        will-change: transform
    }
}

@media (prefers-reduced-motion:reduce) {
    .star-customize-nav.star-customize-editing #star-customize-nav-tabs>li.anchor {
        animation: none !important
    }
}

.star-customize-sort-ghost {
    opacity: .65;
    transform: scale(.98)
}

.star-customize-sort-chosen {
    opacity: .9;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14)
}

.star-customize-sort-drag,
.star-customize-sort-fallback {
    opacity: .95;
    transform: scale(1.02);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
    border-radius: 12px;
    border: 1px solid rgb(from var(--focus-color) r g b / .45);
    background: var(--main-bg-color);
    cursor: grabbing !important
}

.io-black-mode .star-customize-sort-drag,
.io-black-mode .star-customize-sort-fallback {
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
    border-color: rgba(255, 255, 255, .28)
}

.content-card.star-customize-nav.star-customize-editing {
    border: 1px dashed rgb(from var(--focus-color) r g b / .5)
}

.io-black-mode .content-card.star-customize-nav.star-customize-editing {
    border-color: rgba(255, 255, 255, .2)
}

#star-customize-import-bookmarks-list {
    max-height: 500px;
    overflow-y: auto;
    padding: 10px
}

.import-folder-item .card {
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: all .2s ease
}

.import-bookmarks-list {
    max-height: 300px;
    overflow-y: auto
}

@media (max-width:767.98px) {

    .star-customize-nav .star-customize-edit-wrapper .star-customize-delete-term,
    .star-customize-nav .star-customize-edit-wrapper .star-customize-edit,
    .star-customize-nav .star-customize-edit-wrapper .star-customize-done,
    .star-customize-nav .star-customize-edit-wrapper .star-customize-rename-term {
        padding: 4px 8px;
        margin-left: 2px !important
    }

    .dropdown-menu.star-customize-edit-menu a {
        font-size: .9rem !important
    }

    #star-customize-import-bookmarks-list {
        max-height: 400px
    }

    .import-bookmarks-list {
        max-height: 200px
    }
}

:root {
    --star-tab-bar-action-size: 36px
}

.io-slider-tab>.tab-title.text-gray.text-md {
    display: inline-flex;
    align-items: center;
    min-height: var(--star-tab-bar-action-size)
}

.io-slider-tab .star-tab-expand,
.io-slider-tab>.star-customize-edit-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.star-tab-expand .star-filter-btn,
.star-tab-expand .star-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.io-black-mode .star-tab-expand .star-filter-btn.vc-l-theme,
.io-black-mode .star-tab-expand .star-more-btn.vc-l-theme,
.io-black-mode .star-customize-nav .star-customize-edit-wrapper .btn.vc-l-theme {
    --this-color: #eee;
    --this-hover-color: #ffffff;
    --this-bg: #343a40;
    --this-hover-bg: #25272a;
    --this-shadow-bg: rgba(40, 45, 50, 0.7)
}

.star-tab-expand .star-filter-btn.filter-active {
    background: var(--focus-color);
    color: #fff
}

.io-black-mode .star-tab-expand .star-filter-btn.filter-active {
    background: linear-gradient(135deg, #5b8fff 0%, #274eee 100%);
    color: #fff
}

.filter-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 15px;
    align-items: center;
    justify-content: flex-end
}

.filter-tags-divider {
    width: 1px;
    height: 20px;
    background: #e0e4f0;
    margin: 0 4px;
    flex-shrink: 0
}

.io-black-mode .filter-tags-divider {
    background: #4a4d50
}

.filter-tag-btn {
    padding: 6px 14px;
    background: var(--main-bg-color);
    color: var(--muted-color);
    border: 1px solid #e6e8ea;
    border-radius: var(--theme-border-radius-md);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
    white-space: nowrap
}

.filter-tag-btn:hover {
    border-color: #d0d8e8;
    color: var(--muted-color2)
}

.filter-tag-btn.active {
    background: var(--focus-color);
    color: #fff
}

.io-black-mode .filter-tag-btn {
    background: #3a3d40;
    color: #ccc;
    border-color: #4a4d50
}

.io-black-mode .filter-tag-btn:hover {
    background: #454850;
    border-color: #555a60;
    color: #fff
}

.io-black-mode .filter-tag-btn.active {
    background: linear-gradient(135deg, #5b8fff 0%, #274eee 100%);
    color: #fff;
    border-color: #5b8fff;
    box-shadow: 0 2px 8px rgba(91, 143, 255, 0.2)
}

.slider-li.tab-item {
    position: relative
}

.slider-li.tab-item .filter-badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background-color: var(--theme-color);
    border-radius: 10px;
    animation: filterBadgeFloat 2s ease-in-out infinite
}

@keyframes filterBadgeFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0)
    }

    50% {
        transform: translateX(-50%) translateY(-2px)
    }
}

@media (max-width:768px) {
    :root {
        --star-tab-bar-action-size: 30px
    }

    .star-tab-expand .star-filter-btn,
    .star-tab-expand .star-more-btn {
        padding: 4px 8px
    }

    body:not(.tab-m-row) .io-slider-tab>.star-tab-expand,
    body:not(.tab-m-row) .io-slider-tab>.star-customize-edit-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2
    }

    .filter-tags-container {
        justify-content: center;
        gap: 6px
    }

    .filter-tag-btn {
        padding: 5px 12px;
        font-size: 12px
    }
}

.sites-item.site-card-dead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(128 128 128 / 5%);
    backdrop-filter: blur(1px);
    pointer-events: none
}

.sites-item.site-card-dead .site-card-dead-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgb(255 255 255 / 90%);
    font-size: 12px;
    border-radius: 100px;
    pointer-events: none;
    border: 1px solid #ffffff;
    box-shadow: 0 0 1px #19191a14, 0 2px 8px #19191a1f;
    white-space: nowrap
}

.sites-item.site-card-dead.style-sites-min .site-card-dead-hint {
    padding: 4px 10px
}

.sites-item.site-card-dead .site-card-dead-hint .iconfont {
    font-size: 15px
}

.site-card-dead .sites-tags {
    display: none
}

.io-black-mode .sites-item.site-card-dead .site-card-dead-hint {
    background: rgb(27 29 31);
    border: 1px solid #3a3a3b
}

.star-tax-popular.tax-popular {
    padding: 20px;
    box-shadow: none;
    --stp-h: 150px;
    --stp-gap: 12px;
    --stp-title-w: 180px;
    --stp-card-min: 150px;
    --stp-img: 50px
}

.star-tax-popular .popular-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.star-tax-popular .popular-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box
}

.star-tax-popular .popular-title .popular-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.star-tax-popular .popular-title .p-img {
    width: var(--stp-img);
    height: var(--stp-img);
    flex-shrink: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden
}

.star-tax-popular .popular-title .p-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.star-tax-popular .popular-title .p-title {
    min-width: 0;
    margin: 0;
    text-align: left;
    color: #efbf5f
}

.star-tax-popular .popular-title .p-title .txt1 {
    display: block;
    font-size: 15px
}

.star-tax-popular .popular-title .p-title .txt2 {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px
}

.star-tax-popular .popular-title .p-btns.mt-2 {
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .06)
}

.star-tax-popular .popular-title .p-btns.mt-2 .btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 32px;
    padding: 0 12px;
    font-size: .8rem;
    box-sizing: border-box
}

@media (hover:hover) and (pointer:fine) {
    .star-tax-popular .popular-title .p-btns.mt-2 .btn:hover {
        background: #efbf5f;
        color: #5c390b
    }
}

.star-tax-popular .popular-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px
}

.star-tax-popular .popular-content::-webkit-scrollbar {
    width: 4px
}

.star-tax-popular .popular-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .04);
    border-radius: 999px
}

.star-tax-popular .popular-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .22);
    border-radius: 999px
}

.star-tax-popular .popular-item-a {
    display: block;
    position: relative;
    padding: 1.2em;
    border-radius: var(--theme-border-radius-md);
    text-decoration: none;
    border: 1px solid rgb(241 241 241);
    overflow: hidden
}

@media (hover:hover) and (pointer:fine) {
    .star-tax-popular .popular-item-a:hover {
        border-color: rgb(207 207 207)
    }
}

.star-tax-popular .item-logo {
    width: 45px;
    height: 45px;
    margin: 0 auto 10px;
    border-radius: var(--theme-border-radius-md);
    overflow: hidden
}

.star-tax-popular .item-logo .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.star-tax-popular .item-title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.05rem;
    text-align: center
}

.star-tax-popular .item-btns {
    margin-top: 10px;
    text-align: center
}

.star-tax-popular .item-btns .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(224, 192, 139, .18);
    border-radius: 10px;
    line-height: 20px;
    padding: 0 8px;
    color: rgba(59, 39, 10, .88);
    font-size: 12px
}

.star-tax-popular .item-index {
    position: absolute;
    right: -10px;
    bottom: -40px;
    z-index: 0;
    font-weight: 800;
    font-style: italic;
    font-size: 100px;
    color: #f1f1f1;
    pointer-events: none;
    user-select: none
}

.star-tax-popular .item-title,
.star-tax-popular .item-btns {
    position: relative;
    z-index: 1
}

@media (max-width:749.5px) {
    .star-tax-popular .popular-item-a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px
    }

    .star-tax-popular .item-logo {
        width: 35px;
        height: 35px;
        margin: 0;
        flex-shrink: 0
    }

    .star-tax-popular .item-title {
        flex: 1;
        min-width: 0;
        text-align: left;
        font-size: .95rem
    }

    .star-tax-popular .item-btns {
        margin-top: 0 !important
    }

    .star-tax-popular .item-index {
        display: none
    }
}

@media (min-width:750px) {
    .star-tax-popular .popular-wrap {
        flex-direction: row;
        gap: var(--stp-gap);
        align-items: stretch
    }

    .star-tax-popular .popular-title {
        flex: 0 0 var(--stp-title-w);
        max-width: var(--stp-title-w);
        height: var(--stp-h);
        justify-content: space-between;
        text-align: center
    }

    .star-tax-popular .popular-title .popular-title-row {
        flex: 1;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        gap: 8px
    }

    .star-tax-popular .popular-title .p-title {
        text-align: center
    }

    .star-tax-popular .popular-title .p-img {
        width: 80px;
        height: var(--stp-img);
        margin: 0 auto;
        border-radius: 10px
    }

    .star-tax-popular .popular-title .p-btns.mt-2 {
        border-top: 0;
        padding-top: 0
    }

    .star-tax-popular .popular-content {
        flex: 1;
        min-width: 0;
        height: var(--stp-h);
        display: grid;
        gap: var(--stp-gap);
        overflow-y: auto;
        overflow-x: hidden
    }

    .star-tax-popular .popular-content .popular-item .popular-item-a {
        height: 100%;
        box-sizing: border-box
    }

    .star-tax-popular .popular-content {
        grid-template-columns: repeat(auto-fit, minmax(var(--stp-card-min), 1fr));
        grid-auto-rows: var(--stp-h)
    }
}

.io-black-mode .star-tax-popular .popular-item-a {
    border: 1px solid rgb(58 58 59)
}

.io-black-mode .star-tax-popular .item-index {
    color: #3a3a3b
}

.io-black-mode .star-tax-popular .item-btns .btn {
    background: rgb(54 55 56);
    color: rgb(153 153 153)
}

.star-article-nav .star-nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    border-radius: var(--theme-border-radius);
    background-color: var(--main-bg-color);
    box-shadow: 0 5px 20px var(--main-shadow);
    padding: 0 15px;
    scrollbar-width: none
}

.star-article-nav .star-nav-tabs .nav-item {
    flex: 0 0 auto
}

.star-article-nav .star-nav-tabs .nav-item .nav-link {
    border: none;
    color: var(--muted-color2, #66686b);
    padding: 15px 16px 12px 16px;
    border-radius: 0
}

.star-article-nav .star-nav-tabs .nav-item .nav-link:hover {
    color: var(--theme-color)
}

.star-article-nav .star-nav-tabs .nav-item .nav-link.active {
    color: var(--theme-color);
    font-weight: 500;
    border-bottom: 3px solid var(--theme-color)
}

.io-black-mode .star-article-nav .star-nav-tabs .nav-link {
    color: rgba(255, 255, 255, .7)
}

@media (max-width:750px) {
    .star-article-nav .star-nav-tabs .nav-item .nav-link {
        padding: 15px 10px 12px 10px
    }
}

.faq-item {
    transition: box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background-color: var(--main-bg-color);
    box-shadow: 0 5px 20px var(--main-shadow)
}

.faq-item:last-child {
    margin-bottom: 0
}

.faq-question {
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, border-radius 0.2s ease;
    position: relative;
    border-radius: 10px
}

.faq-item.active .faq-question {
    border-radius: 10px 10px 0 0
}

.faq-icon {
    margin-right: 8px;
    transition: transform 0.3s ease;
    flex-shrink: 0
}

.faq-question span {
    flex-grow: 1
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    border-radius: 0 0 10px 10px
}

.faq-answer-content {
    padding: 16px;
    color: #555;
    font-size: 15px;
    line-height: 1.8
}

.faq-answer-content p {
    margin-bottom: 12px
}

.faq-answer-content p:last-child {
    margin-bottom: 0
}

.faq-answer-content a {
    color: var(--theme-color);
    text-decoration: none
}

.faq-answer-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0
}

.faq-question.active .faq-icon {
    transform: rotate(90deg);
    color: var(--theme-color)
}

.faq-question.active {
    color: var(--theme-color)
}

.io-black-mode .faq-question {
    color: #eee
}

.io-black-mode .faq-answer-content {
    color: #ddd
}

.io-black-mode .faq-question.active .faq-icon {
    color: #fff
}

.site-screenshots-waterfall {
    column-count: 3;
    column-gap: 16px
}

@media (max-width:991.98px) {
    .site-screenshots-waterfall {
        column-count: 2
    }
}

@media (max-width:575.98px) {
    .site-screenshots-waterfall {
        column-count: 1
    }
}

.site-screenshot-item {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding-bottom: 8px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    text-decoration: none
}

.site-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    background: #f5f5f5
}

.site-screenshot-caption {
    display: block;
    margin-top: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: center
}

.style-sites-min .sites-actions.ml-auto,
.style-sites-max .sites-actions.ml-auto,
.style-sites-default .sites-actions.ml-auto {
    position: absolute;
    right: 10px;
    transition: opacity 0.3s, transform 0.3s ease;
    transform: translate(0, -50%);
    display: flex;
    gap: 5px;
    z-index: 1
}

.style-sites-default .sites-actions.ml-auto {
    top: 25%
}

.style-sites-min .sites-actions.ml-auto,
.style-sites-max .sites-actions.ml-auto {
    top: 50%
}

.posts-item.extra-icon .sites-actions.ml-auto,
.posts-item.jihe .sites-actions.ml-auto {
    transform: translate(20px, -50%)
}

.posts-item.extra-icon:hover .sites-actions.ml-auto,
.posts-item.jihe:hover .sites-actions.ml-auto {
    transform: translate(0, -50%)
}

.style-sites-max .item-tags {
    margin-right: 25px !important
}

.sites-item:not(.style-sites-max) .togo {
    position: static !important;
    transform: translate(-20px, 0)
}

.sites-item:not(.style-sites-max):hover .togo {
    opacity: 1;
    transform: translate(0, 0) rotate(45deg)
}

.star-extra-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.star-extra-icons .star-extra-icon,
.posts-item.sites-item.jihe .star-collection-badge i {
    font-size: 14px;
    opacity: 0.3
}

.sites-item:not(.style-sites-max):hover .star-extra-icons .star-extra-icon,
.sites-item:not(.style-sites-max):hover .star-collection-badge i {
    opacity: 0.6
}

@media (max-width:480px) {
    .star-extra-icons .star-extra-icon:nth-child(n+3) {
        display: none
    }
}

.jihe-collection-panel {
    background: #ffffffe3;
    backdrop-filter: saturate(2) blur(15px);
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    padding: 15px;
    pointer-events: none;
    container-type: inline-size;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s
}

.jihe-collection-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

@media (min-width:769px) {
    .jihe-card-host {
        position: relative;
        margin: calc(0.5 * var(--home-card-padding))
    }

    .jihe-card-host>.posts-item.sites-item {
        margin: 0
    }

    .jihe-card-host.expanded {
        z-index: 20
    }

    .jihe-collection-panel {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 1
    }

    .jihe-collection-panel.panel-above {
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateY(10px)
    }

    .jihe-collection-panel.panel-above.show {
        transform: translateY(0)
    }
}

.jihe-collection-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dce3fb;
    display: flex;
    align-items: center
}

.jihe-collection-title i {
    margin-right: 4px;
    font-size: 16px;
    color: var(--focus-color)
}

.jihe-collection-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

@container (max-width:129px) {
    .jihe-collection-items {
        grid-template-columns: 1fr
    }
}

.jihe-collection-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: #666;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    border: 1px solid #00000014;
    background: #ffffff;
    min-width: 0;
    width: 100%
}

.jihe-collection-item:hover {
    background-color: #f8f9fa;
    border-color: #e5e5e5;
    color: #333;
    text-decoration: none
}

.jihe-collection-item .item-name {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0
}

.jihe-collection-item.main-item {
    background: #f0f4ff;
    border-color: #dce3fb;
    grid-column: 1 / -1;
    margin-bottom: 4px
}

.jihe-collection-item.main-item .item-note {
    color: #4f46e5;
    font-weight: 500
}

.io-black-mode .jihe-collection-panel {
    background: #3b3b3b;
    border-color: #4c4c4c
}

.io-black-mode .jihe-collection-title {
    color: #e2e8f0;
    border-bottom-color: #4c4c4c
}

.io-black-mode .jihe-collection-item {
    background-color: #464646;
    color: #fff
}

@media (max-width:768px) {
    .jihe-collection-panel {
        position: fixed;
        z-index: 9999;
        width: calc(100vw - 40px) !important;
        min-width: unset !important;
        max-width: 350px;
        left: 20px !important;
        right: 20px
    }

    .jihe-collection-items {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .jihe-collection-item.main-item {
        grid-column: 1 / -1;
        margin-bottom: 8px
    }

    .jihe-collection-item {
        padding: 12px;
        min-height: 44px
    }

    .jihe-collection-item .item-name {
        font-size: 12px
    }

    .jihe-collection-item.main-item .item-note {
        font-size: 12px;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.ranking-title-term::before {
    content: '\e63d';
    font-family: "iconfont"
}

.ranking-title-term::after {
    content: '\e63e';
    font-family: "iconfont"
}

.ranking-title-term {
    background: linear-gradient(to bottom, #fff, #ffbda5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.page-template-template-rankings-php .container {
    max-width: 1200px
}

@media screen and (min-width:768px) {
    .ranking-panel {
        align-items: flex-start
    }

    .ranking-range-nav {
        position: sticky;
        top: 80px
    }
}

.sites-item .remarks.sites-remarks {
    position: absolute;
    right: 0px;
    top: -3px;
    background: var(--theme-color-bg);
    border-radius: 0 8px;
    padding: 0px 8px
}

.sites-item .remarks.sites-remarks span {
    display: inline-block;
    font-size: 10px;
    color: var(--theme-color);
    word-break: break-all;
    margin-right: 3px
}

.sites-item .remarks.sites-remarks span:last-child {
    margin-right: 0
}

.style-sites-default:has(.sites-body .remarks.sites-remarks) .sites-actions.ml-auto {
    top: auto;
    bottom: -10%
}

.style-sites-default:has(.sites-body .remarks.sites-remarks) .item-body .line1 {
    margin-right: 10px
}

@media (max-width:768px) {
    .sites-item .remarks.sites-remarks {
        top: -4px;
        padding: 0px 4px
    }

    .sites-item .remarks.sites-remarks span {
        font-size: 8px
    }
}

@keyframes starSiteLikeSprite {
    from {
        background-position: 0 0
    }

    to {
        background-position: -1890px 0
    }
}

@keyframes starSiteLikeThumbHover {

    0%,
    100% {
        transform: rotate(-6deg)
    }

    50% {
        transform: rotate(6deg)
    }
}

@keyframes starSiteLikeAjaxJitter {

    0%,
    100% {
        transform: rotate(0deg) translate(0, 0)
    }

    20% {
        transform: rotate(-2deg) translate(0.5px, -0.5px)
    }

    40% {
        transform: rotate(2deg) translate(-0.5px, 0.5px)
    }

    60% {
        transform: rotate(-1deg) translate(-0.5px, -0.5px)
    }

    80% {
        transform: rotate(1deg) translate(0.5px, 0.5px)
    }
}

.star-site-like-wrap {
    text-align: center;
    margin-top: 15px
}

.star-site-like-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    overflow: visible
}

.star-site-like-btn:focus {
    outline: none
}

.star-site-like-btn:focus-visible .star-site-like-icon-wrap {
    box-shadow: 0 0 0 2px var(--theme-color-bg), 0 0 0 4px var(--theme-color)
}

.star-site-like-icon-wrap {
    width: 40px;
    height: 45px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease;
    transform-origin: 12% 92%
}

.star-site-like-sprite {
    z-index: 1;
    background: url(../images/like-sprite.webp) 0 0 / auto 70px no-repeat;
    width: 70px;
    height: 70px;
    margin: -1px 0;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: -16px
}

.star-site-like-btn:hover:not(.liked):not(.disabled):not(.star-site-like-sprite-animate) .star-site-like-icon-wrap {
    animation: starSiteLikeThumbHover 0.95s ease-in-out infinite
}

.star-site-like-btn:active:not(.disabled):not(.star-site-like-sprite-animate) .star-site-like-icon-wrap {
    animation: none;
    transform: scale(0.94);
    transform-origin: 12% 92%
}

.star-site-like-btn.disabled .star-site-like-icon-wrap {
    opacity: 0.88;
    animation: starSiteLikeAjaxJitter 0.38s ease-in-out infinite;
    transform-origin: 12% 92%
}

@media (prefers-reduced-motion:reduce) {
    .star-site-like-btn:hover .star-site-like-icon-wrap {
        animation: none !important
    }

    .star-site-like-btn.disabled .star-site-like-icon-wrap {
        animation: none !important;
        opacity: 0.75
    }
}

.star-site-like-btn.liked:not(.star-site-like-sprite-animate) .star-site-like-sprite {
    background-position: -1890px 0
}

.star-site-like-btn.liked.star-site-like-sprite-animate .star-site-like-sprite {
    animation: starSiteLikeSprite 0.9s steps(27, end) forwards
}

.star-site-like-tip.text-muted {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.45;
    box-sizing: border-box
}

.star-site-like-tip.text-muted::before,
.star-site-like-tip.text-muted::after {
    content: '';
    flex: 1 1 auto;
    min-width: 8px;
    height: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.14)
}

.io-black-mode .star-site-like-tip.text-muted::before,
.io-black-mode .star-site-like-tip.text-muted::after {
    border-bottom-color: rgba(255, 255, 255, 0.14)
}

.star-site-like-tip.text-muted>span {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0 10px;
    background: var(--main-bg-color, #fff)
}

.io-black-mode .star-site-like-tip.text-muted>span {
    background: var(--main-bg-color, #2d2e2f)
}

.posts-item.app-item.style-app-star {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    padding: 30px 10px
}

.app-item.style-app-star .app-star-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .25s ease;
    background: url(../images/appbg.webp), linear-gradient(-45deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 60%, transparent));
    background-size: cover;
    pointer-events: none
}

.app-item.style-app-star:hover .app-star-bg {
    opacity: 1
}

.app-item.style-app-star .app-star-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
    z-index: auto;
    transition: opacity .25s ease;
    justify-content: center
}

.app-item.style-app-star .app-star-normal {
    opacity: 1
}

.app-item.style-app-star .app-star-hover {
    position: absolute;
    inset: 0;
    opacity: 0
}

.app-item.style-app-star:hover .app-star-normal {
    opacity: 0
}

.app-item.style-app-star:hover .app-star-hover {
    opacity: 1
}

.app-item.style-app-star .app-star-media {
    width: 60px;
    margin-bottom: 10px;
    position: relative;
    border-radius: var(--main-radius);
    overflow: hidden
}

.app-item.style-app-star .app-star-normal .app-star-media {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .2s ease, transform .2s ease
}

.app-item.style-app-star .app-star-normal .item-title,
.app-item.style-app-star .app-star-normal .app-star-desc {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
    transition-delay: 0s;
    max-width: 100%
}

.app-item.style-app-star .app-star-normal .app-star-desc {
    transition-delay: .04s
}

.app-item.style-app-star .app-star-hover .app-star-media {
    opacity: 0;
    transform: translateY(50px) scale(.5);
    transition: opacity .3s ease, transform .3s ease
}

.app-item.style-app-star:hover .app-star-normal .app-star-media {
    opacity: 0;
    transform: translateY(-50px) scale(.5)
}

.app-item.style-app-star:hover .app-star-normal .item-title,
.app-item.style-app-star:hover .app-star-normal .app-star-desc {
    opacity: 0;
    transform: translateY(-14px)
}

.app-item.style-app-star:hover .app-star-normal .item-title {
    transition-delay: .03s
}

.app-item.style-app-star:hover .app-star-normal .app-star-desc {
    transition-delay: .08s
}

.app-item.style-app-star:hover .app-star-hover .app-star-media {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.app-item.style-app-star .app-star-hover-icon {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto
}

.app-item.style-app-star .app-star-desc {
    width: 100%;
    text-align: center
}

.app-item.style-app-star .item-header {
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 15px
}

.app-item.style-app-star:hover .app-star-hover .meta-ico span,
.app-item.style-app-star:hover .app-star-hover .meta-ico i {
    color: rgba(255, 255, 255, .85) !important
}

.app-item.style-app-star .app-star-hover .meta-ico,
.app-item.style-app-star .app-star-hover .item-title {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .32s ease, transform .32s ease;
    transition-delay: 0s;
    max-width: 100%;
    padding: 0 10px
}

.app-item.style-app-star .app-star-hover .meta-ico {
    position: absolute;
    bottom: 5px
}

.app-item.style-app-star:hover .app-star-hover .item-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .05s
}

.app-item.style-app-star:hover .app-star-hover .meta-ico {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .11s
}

.app-item.style-app-star .app-meta {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    width: auto;
    justify-content: flex-end
}

.app-item.style-app-star .app-meta .item-tags {
    max-width: 100%
}

.app-item.style-app-star .app-meta .badge:nth-child(n+4) {
    display: none
}

.style-app-star:hover {
    border-color: transparent !important
}

.style-app-star .app-star-hover .app-star-link {
    color: #fff
}

.star-ajax-page-post {
    position: relative;
    color: var(--muted-color);
    font-size: 14px;
    padding: 4px 25px;
    border-radius: 20px;
    background: transparent;
    transition: 0.4s ease 0.1s !important
}

.star-ajax-page-post:hover {
    color: var(--main-color);
    padding: 4px 20px;
    background: var(--muted-bg-color)
}

.star-ajax-page-post::after,
.star-ajax-page-post::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background: var(--muted-color);
    opacity: .3;
    transition: 0.4s ease-out
}

.star-ajax-page-post::before {
    left: -100%
}

.star-ajax-page-post::after {
    right: -100%
}

.star-ajax-page-post:hover::before {
    width: 1%;
    left: 0;
    opacity: .1
}

.star-ajax-page-post:hover::after {
    width: 1%;
    right: 0;
    opacity: .1
}

@media (max-width:480px) {

    .star-ajax-page-post::after,
    .star-ajax-page-post::before {
        width: 70%
    }

    .star-ajax-page-post::before {
        left: -70%
    }

    .star-ajax-page-post::after {
        right: -70%
    }
}

.posts-item.style-sites-star-simple {
    border-radius: 0;
    border: none !important;
    border-bottom: 1px solid var(--body-bg-color) !important;
    box-shadow: none
}

.posts-item.style-sites-star-simple:last-child,
.posts-item.style-sites-star-simple:last-child:hover {
    border-bottom: none !important
}

.posts-item.style-sites-star-simple:hover {
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--body-bg-color)
}

.style-sites-star-simple .star-simple-card.sites-body {
    gap: 8px;
    padding: 8px 10px;
    min-height: 0;
    align-items: center !important
}

.style-sites-star-simple .star-simple-card__ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%
}

.style-sites-star-simple .star-simple-card__img {
    display: block;
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--body-bg-color)
}

.style-sites-star-simple .item-body {
    min-width: 0
}

.style-sites-star-simple .item-title {
    font-size: 14px;
    line-height: 1.35;
    margin: 0
}

.style-sites-star-simple .item-title b {
    font-weight: 600
}

.style-sites-star-simple .item-body>.line1.text-muted.text-xs {
    line-height: 1.35;
    margin-top: 2px
}

.star-menu-tab-column-card {
    background: radial-gradient(92.81% 48.44% at -24.53% -16.02%, rgba(var(--theme-color-rgb), 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(75.78% 68.16% at 56.74% -24.02%, rgba(var(--theme-color-rgb), 0.1) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(160.86% 46.39% at 177.14% -15.62%, rgba(var(--theme-color-rgb), 0.2) 9.06% 9.06%, rgba(255, 255, 255, 0) 100%), #f2f4f7
}

.io-black-mode .star-menu-tab-column-card {
    background: #1b1d1f
}

.star-menu-tab-column-card .card-body {
    background: var(--main-bg-color);
    border-radius: var(--theme-border-radius-md);
    padding-top: 15px !important;
    padding-bottom: 15px !important
}

.star-menu-tab-column-card .posts-item {
    margin-top: 0;
    margin-bottom: 0
}

.star-menu-tab-column-card>.star-menu-tab-load-more {
    margin: 10px 0 0;
    border-radius: var(--theme-border-radius-md);
    text-align: center;
    background: var(--main-bg-color)
}

.star-menu-tab-load-more__link {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none
}

.star-menu-tab-column .highlight-02 {
    position: relative;
    display: inline-block
}

.star-menu-tab-column .highlight-02::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: 2px;
    background: rgba(var(--theme-color-rgb), 0.3)
}

.star-menu-tab-column .sitetag-group-title-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0
}

.star-menu-tab-column .sitetag-group-title-inner>.highlight-02 {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%
}

.star-menu-tab-column .sitetag-group-desc {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 50%;
    text-align: right
}

.star-menu-tab-columns {
    margin-top: -8px !important
}

.star-aside-logo-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box
}

.full-container.star-aside-stick .star-aside-logo-head {
    height: calc(var(--main-nav-hight) - 10px)
}

.aside-min.full-container.star-aside-stick.star-aside-updown .star-aside-logo-head {
    height: calc(var(--main-nav-hight) + 10px)
}

body:not(.full-container.star-aside-stick) .aside-card .star-aside-logo-head {
    margin: 10px 0
}

.star-aside-logo-head img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    margin: 0 auto;
    object-fit: contain
}

.star-aside-logo-head .logo-collapsed {
    display: none
}

@media (min-width:768px) {
    .full-container.star-aside-stick:not(.star-hide-aside) {
        --star-aside-inset: var(--main-aside-width)
    }

    .full-container.star-aside-stick .aside-card {
        padding-top: 0;
        border-radius: 0
    }

    .full-container.star-aside-stick .aside-body {
        top: 0 !important;
        bottom: 0 !important;
        left: 0;
        z-index: 110
    }

    .full-container.star-aside-stick:not(.star-hide-aside) .main-header.header-fixed {
        margin-left: var(--star-aside-inset)
    }

    .full-container.star-aside-stick:not(.star-hide-aside):is(.main-footer, .home-content > *, .apd-body, .ioui-main) {
        margin-left: var(--star-aside-inset) !important
    }

    .full-container.star-aside-stick:not(.star-hide-aside) .header-banner {
        padding-left: var(--star-aside-inset)
    }

    .full-container.star-aside-stick:not(.star-hide-aside) .starsearch-box .header-banner {
        margin-left: var(--star-aside-inset) !important;
        padding-left: 0
    }

    .full-container.star-aside-stick:not(.star-hide-aside) .search-modal {
        left: var(--star-aside-inset);
        right: 0
    }

    .full-container.star-hide-aside .header-banner {
        padding-left: 0
    }

    .full-container.star-hide-aside .star-hero-rail {
        max-width: var(--home-max-width)
    }

    .single-sites.aside-show:not(.star-hide-aside) .content-layout,
    .single-sites.aside-show:not(.star-hide-aside) .auto-ad-url.mb-3 {
        margin-left: calc(15px + var(--main-aside-width))
    }

    .full-container.star-aside-stick.single-sites.aside-show:not(.star-hide-aside) .content-layout,
    .full-container.star-aside-stick.single-sites.aside-show:not(.star-hide-aside) .auto-ad-url.mb-3 {
        margin-left: var(--star-aside-inset)
    }

    .single-sites.aside-show .container.my-2 {
        margin-top: 0 !important
    }

    .aside-min.star-aside-updown {
        --main-aside-width: 100px
    }

    .aside-min .star-aside-logo-head .logo-expanded {
        display: none
    }

    .aside-min .star-aside-logo-head .logo-collapsed {
        display: block
    }

    .aside-min.star-aside-updown .star-aside-logo-head .logo-collapsed img {
        max-height: 60px;
        max-width: 100%
    }

    :is(.aside-min.aside-nohover.star-aside-updown .aside-body, .aside-min.star-aside-updown:not(.aside-nohover) .aside-body:not(.hover-show)):is(.aside-ul > .aside-item > .aside-btn, .aside-ul > .aside-item > .aside-accordion-row > .aside-btn, .aside-bottom .aside-btn) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 10px 4px;
        white-space: normal;
        text-align: center
    }

    :is(.aside-min.aside-nohover.star-aside-updown .aside-body, .aside-min.star-aside-updown:not(.aside-nohover) .aside-body:not(.hover-show)):is(.aside-ul, .aside-bottom) span.ml-2 {
        visibility: visible !important;
        opacity: 1 !important;
        display: block;
        margin-left: 0 !important;
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        word-break: break-all;
        max-width: 88px;
        text-align: center
    }

    :is(.aside-min.aside-nohover.star-aside-updown .aside-body, .aside-min.star-aside-updown:not(.aside-nohover) .aside-body:not(.hover-show)):is(.aside-ul, .aside-bottom) .icon-fw {
        font-size: 22px;
        line-height: 1;
        vertical-align: middle
    }
}

.ioui-aside .aside-accordion-row {
    position: relative
}

.ioui-aside .aside-accordion-row .aside-accordion-arrow {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    color: var(--muted-color, rgba(0, 0, 0, 0.45));
    transition: transform 0.2s ease, color 0.15s ease
}

.ioui-aside .aside-accordion-row:hover .aside-accordion-arrow {
    color: var(--this-color, var(--main-color))
}

.ioui-aside .aside-accordion-row .aside-accordion-arrow.open {
    transform: translateY(-50%) rotate(90deg)
}

.ioui-aside .aside-sub-accordion .aside-btn {
    margin-left: 30px;
    position: relative;
    cursor: pointer
}

.ioui-aside .aside-sub-accordion:before {
    position: absolute;
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--muted-blur-bg-color);
    left: 20px
}

.ioui-aside .aside-sub-accordion .aside-btn:after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background-color: var(--muted-blur-bg-color);
    top: 0;
    bottom: 0;
    margin: auto;
    left: -10px
}

.io-black-mode .ioui-aside .aside-sub-accordion:before {
    background-color: #b1b5bc
}

.io-black-mode .ioui-aside .aside-sub-accordion .aside-btn:after {
    background-color: #b1b5bc
}

.ioui-aside .aside-sub-accordion .aside-btn:hover {
    background-color: transparent
}

.aside-min .aside-accordion-arrow {
    display: none !important
}

.aside-nohover:not(.aside-min) .aside-popup.text-sm {
    display: none !important
}

.aside-nohover.aside-min .aside-body.hover-show {
    width: var(--main-aside-width) !important;
    max-width: var(--main-aside-width) !important
}

.aside-nohover.aside-min:not(.star-aside-updown) .aside-body.hover-show:is(.aside-more, span) {
    visibility: hidden !important;
    opacity: 0 !important
}

body.star-iframe-no-minimize .star-iframe-minimize {
    display: none !important
}

.star-iframe-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    background: linear-gradient(135deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 50%));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.star-iframe-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 1280px;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}

.star-iframe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: none
}

.star-iframe-progress {
    height: 2px;
    background: #e8eaed;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease
}

.star-iframe-progress.is-active {
    opacity: 1
}

.star-iframe-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(var(--theme-color-rgb), 0.5), rgba(var(--theme-color-rgb), 1));
    transition: width 0.22s ease
}

.star-iframe-progress-bar.is-complete {
    transition: width 0.12s ease
}

.star-iframe-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    min-width: 0
}

.star-iframe-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.star-iframe-favicon {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    flex-shrink: 0;
    object-fit: cover
}

.star-iframe-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.star-iframe-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer
}

.star-iframe-btn svg {
    width: 16px;
    height: 16px;
    color: #000;
    transition: color 0.2s
}

.star-iframe-external:hover {
    background: #22c55e
}

.star-iframe-fullscreen:hover {
    background: #4667f0
}

.star-iframe-minimize:hover {
    background: #ffa500
}

.star-iframe-close:hover {
    background: #e74c3c
}

.star-iframe-external:hover svg,
.star-iframe-fullscreen:hover svg,
.star-iframe-minimize:hover svg,
.star-iframe-close:hover svg {
    color: #fff
}

.star-iframe-wrapper.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column
}

.star-iframe-wrapper.fullscreen .star-iframe-body {
    flex: 1;
    height: auto;
    min-height: 0;
    padding-top: 0
}

.star-iframe-wrapper.fullscreen .star-iframe-body iframe {
    position: relative;
    height: 100%
}

.star-iframe-body {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-top: 1px solid #eee
}

.star-iframe-body iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

.star-iframe-notice {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 6;
    max-width: min(92%, 520px);
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8eaed;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-50%) translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease
}

.star-iframe-wrapper.has-iframe-notice .star-iframe-notice {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto
}

.star-iframe-notice-text {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #484b4f
}

.star-iframe-notice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.star-iframe-notice-link {
    font-size: 13px;
    color: var(--theme-color, #4667f0);
    text-decoration: none
}

.star-iframe-notice-link:hover {
    text-decoration: underline
}

.star-iframe-notice-dismiss {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #93959a;
    cursor: pointer
}

.star-iframe-notice-dismiss:hover {
    color: #484b4f
}

.io-black-mode .star-iframe-notice {
    background: rgba(40, 42, 48, 0.96);
    border-color: #3a3d45
}

.io-black-mode .star-iframe-notice-text {
    color: #e8e8f0
}

.io-black-mode .star-iframe-notice-dismiss {
    color: #a5a8aa
}

.io-black-mode .star-iframe-notice-dismiss:hover {
    color: #e8e8f0
}

.io-black-mode .star-iframe-progress {
    background: #3a3d45
}

@media (min-width:981px) {
    body.star-site-card-iframe {
        --star-card-iframe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M240.32 128l543.264 0.032a112.416 112.416 0 0 1 112.192 105.024l0.224 7.424v543.136a112.416 112.416 0 0 1-105.056 112.16l-7.36 0.224h-253.824a28.864 28.864 0 0 1-4.256-57.408l4.256-0.32h253.824c28.288 0 51.584-21.536 54.4-49.088l0.256-5.6V240.48c0-28.32-21.536-51.616-49.088-54.4l-5.632-0.32L240.32 185.696a54.592 54.592 0 0 0-54.624 54.752l0.224 257.024a28.832 28.832 0 1 1-57.696 0.096L128 240.544a112.32 112.32 0 0 1 104.896-112.288L240.32 128z m116.288 428.384a88.832 88.832 0 0 1 88.8 88.8v133.152a88.768 88.768 0 0 1-88.8 88.8H223.456a88.768 88.768 0 0 1-88.8-88.8v-133.12a88.8 88.8 0 0 1 88.8-88.832H356.608z m0 57.728H223.456a31.072 31.072 0 0 0-30.848 26.88l-0.288 4.224v133.184a31.072 31.072 0 0 0 26.88 30.784l4.224 0.288h133.12a31.104 31.104 0 0 0 30.848-26.848l0.256-4.224v-133.184a31.104 31.104 0 0 0-26.848-30.816l-4.224-0.256 0.032-0.032zM702.912 261.184l2.4 0.096 2.176 0.256-4.576-0.384a28.896 28.896 0 0 1 28.512 24.64l0.32 4.256v211.136a28.864 28.864 0 0 1-57.408 4.224l-0.288-4.224-0.064-140.8-182.624 185.28a28.864 28.864 0 0 1-44.096-36.832l3.04-3.648 183.68-186.4-140.64 0.128a28.864 28.864 0 0 1-28.512-24.64l-0.384-4.224a28.8 28.8 0 0 1 24.64-28.512l4.224-0.384h209.568v0.032z'/%3E%3C/svg%3E")
    }

    body.star-site-card-iframe .posts-item.sites-item .item-image {
        cursor: pointer
    }

    body.star-site-card-iframe .posts-item.sites-item .item-image::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        background-color: var(--main-color, #484b4f);
        -webkit-mask-image: var(--star-card-iframe-icon-mask);
        mask-image: var(--star-card-iframe-icon-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 58%;
        mask-size: 70%;
        transition: opacity 0.32s ease
    }

    body.star-site-card-iframe .posts-item.sites-item:hover .item-image::after {
        opacity: 1
    }

    body.star-site-card-iframe .posts-item.sites-item .item-image .sites-icon {
        position: relative;
        transition: opacity 0.32s ease, transform 0.32s ease
    }

    body.star-site-card-iframe .posts-item.sites-item:hover .item-image .sites-icon {
        opacity: 0;
        transform: scale(0.9)
    }

    body.io-black-mode.star-site-card-iframe .posts-item.sites-item .item-image::after,
    .io-black-mode body.star-site-card-iframe .posts-item.sites-item .item-image::after {
        background-color: #e8e8f0
    }

    body.star-site-card-iframe .posts-item.sites-item.star-load-more-item .item-image::after {
        display: none !important
    }

    body.star-site-card-iframe .posts-item.sites-item.star-load-more-item .item-image .sites-icon,
    body.star-site-card-iframe .posts-item.sites-item.star-load-more-item:hover .item-image .sites-icon {
        opacity: 1;
        transform: none
    }

    body.star-site-card-iframe .sidebar.sidebar-tools .posts-item.sites-item .item-image {
        cursor: default
    }

    body.star-site-card-iframe .sidebar.sidebar-tools .posts-item.sites-item .item-image::after {
        display: none !important
    }

    body.star-site-card-iframe .sidebar.sidebar-tools .posts-item.sites-item:hover .item-image .sites-icon {
        opacity: 1;
        transform: none
    }
}

.star-fav-card-widget.group .star-fav-card-group {
    --star-fav-card-gap: 16px;
    --star-fav-card-cols: 5;
    --star-fav-card-col-width: calc((100% - (var(--star-fav-card-cols) - 1) * var(--star-fav-card-gap)) / var(--star-fav-card-cols));
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--star-fav-card-gap);
    width: 100%
}

.star-fav-card-widget.fx-header-bg::after,
.star-fav-card-widget .fx-header-bg::after {
    content: none
}

.star-fav-card-widget.group .btn.vc-l-theme {
    margin: 0 1.25rem 1rem !important
}

.star-fav-card-widget.group .star-fav-card-group>.star-fav-card-item {
    flex: 1 1 var(--star-fav-card-col-width);
    min-width: var(--star-fav-card-col-width);
    max-width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: none
}

.star-fav-card-widget.group .star-fav-card-group>.star-fav-card-item>.card-body {
    flex: 1
}

.star-fav-card-widget.group.io-sidebar-widget .star-fav-card-group>.star-fav-card-item {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%
}

.star-fav-card-widget.narrow {
    overflow: hidden
}

.star-fav-card-widget.fx-header-bg .posts-item,
.star-fav-card-widget .fx-header-bg .posts-item {
    background: var(--muted-shadow)
}

@media (max-width:768px) {
    .star-fav-card-widget.group .star-fav-card-group>.star-fav-card-item {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important
    }
}

.star-fav-card-header-has-btn .card-header.widget-header {
    position: relative;
    padding-right: 4.5rem
}

.star-fav-card-header-has-btn .card-header.widget-header h3 {
    position: relative;
    padding-right: 0
}

.star-fav-card-contribute-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-7deg);
    z-index: 2;
    white-space: nowrap;
    line-height: 1.2;
    box-sizing: border-box;
    transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease, padding 0.3s ease
}

@media (hover:hover) {
    .show-card.io-widget-ranking-list .star-fav-card-contribute-btn {
        max-width: 0;
        width: auto;
        opacity: 0;
        overflow: hidden;
        margin-right: 1.25rem
    }

    .show-card.io-widget-ranking-list:hover .star-fav-card-contribute-btn {
        max-width: 4.5rem;
        opacity: 1
    }
}

.io-multiple-dropdown.star-category-locked .star-category-locked-input {
    pointer-events: none;
    cursor: default;
    opacity: 0.92
}

.io-multiple-dropdown.star-category-locked .multiple-dropdown {
    display: none !important
}

.io-multiple-dropdown.star-category-locked .star-category-locked-item {
    pointer-events: none
}

.star-card-imgtop .sites-body {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 15px 8px 12px !important
}

.star-card-imgtop .item-header {
    margin: 0 !important
}

.star-card-imgtop .item-body {
    min-width: 0;
    max-width: 100%
}

.star-fav-card-widget.fx-header-bg.nobefore::before,
.star-fav-card-widget .fx-header-bg.nobefore::before {
    content: none
}

.star-fav-card-widget.noall {
    background: transparent;
    box-shadow: none;
    border-radius: 0
}

.star-fav-card-widget.noall .card-body {
    padding: 0
}

.star-fav-card-widget.noall .btn {
    margin: 10px 0 !important
}

.star-fav-card-widget.noshadow {
    box-shadow: none
}

.star-post-toc-widget .star-post-toc-body {
    padding: 0.65rem 0.75rem 0.85rem
}

.star-post-toc-widget .card-header.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}

.star-post-toc-widget .card-header.widget-header h3 {
    flex: 1;
    min-width: 0;
    margin-bottom: 0
}

.star-post-toc-nav-count {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: var(--theme-color);
    background: var(--theme-color-bg);
    border: 1px solid rgba(var(--theme-color-rgb), 0.15)
}

.star-post-toc-tree {
    margin: 0;
    padding: 0.15rem 0 0.1rem;
    max-height: min(62vh, 400px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--muted-bg-color) transparent
}

.star-post-toc-tree::-webkit-scrollbar {
    width: 4px
}

.star-post-toc-tree::-webkit-scrollbar-thumb {
    background: var(--muted-bg-color);
    border-radius: 4px
}

.star-post-toc-tree::-webkit-scrollbar-thumb:hover {
    background: var(--muted-color3)
}

.star-post-toc-item {
    margin: 0;
    padding: 0;
    list-style: none
}

.star-post-toc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: .45rem .45rem .45rem .7rem;
    margin: 0.12rem 0;
    border-radius: 8px;
    color: var(--muted-color2);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    word-break: break-word
}

.star-post-toc-marker {
    --toc-dot: 8px;
    flex: 0 0 var(--toc-dot);
    width: var(--toc-dot);
    height: var(--toc-dot);
    border-radius: 50%;
    background: var(--main-bg-color);
    border: 2px solid var(--muted-color3);
    box-sizing: border-box;
    box-shadow: 0 0 0 2px var(--main-bg-color);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
}

.star-post-toc-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.5
}

.star-post-toc-item.level-1 .star-post-toc-text {
    font-size: 0.875rem;
    font-weight: 600
}

.star-post-toc-item.level-1 .star-post-toc-marker {
    --toc-dot: 10px;
    border-color: var(--theme-color)
}

.star-post-toc-item.level-2 .star-post-toc-text {
    font-weight: 500
}

.star-post-toc-item.level-2 .star-post-toc-marker {
    border-color: rgba(var(--theme-color-rgb), 0.55)
}

.star-post-toc-item.line1.level-2>.star-post-toc-link {
    word-break: normal
}

.star-post-toc-item.line1.level-2 .star-post-toc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.star-post-toc-item.level-3 .star-post-toc-marker {
    --toc-dot: 7px
}

.star-post-toc-item.level-4 .star-post-toc-text,
.star-post-toc-item.level-5 .star-post-toc-text,
.star-post-toc-item.level-6 .star-post-toc-text {
    font-size: 0.75rem;
    color: var(--muted-color)
}

.star-post-toc-item.level-4 .star-post-toc-marker,
.star-post-toc-item.level-5 .star-post-toc-marker,
.star-post-toc-item.level-6 .star-post-toc-marker {
    --toc-dot: 6px;
    border-width: 1.5px
}

.star-post-toc-link:hover {
    color: var(--theme-color);
    background: var(--theme-color-bg);
    border-color: rgba(var(--theme-color-rgb), 0.12)
}

.star-post-toc-link:hover .star-post-toc-marker {
    border-color: var(--theme-color);
    transform: scale(1.08)
}

.star-post-toc-item.is-active>.star-post-toc-link {
    color: var(--theme-color);
    font-weight: 600;
    background: linear-gradient(90deg, var(--theme-color-bg) 0%, rgba(var(--theme-color-rgb), 0.04) 100%);
    border-color: rgba(var(--theme-color-rgb), 0.18)
}

.star-post-toc-item.is-active>.star-post-toc-link .star-post-toc-marker {
    border-color: var(--theme-color);
    background: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), 0.15)
}

.star-header-banner-widget .star-header-banner-wrap {
    position: relative
}

.star-header-banner-widget .star-header-banner-wrap.is-post-top {
    margin-top: 25px
}

body:has(.star-header-banner-wrap.is-post-top) .header-banner.post-top .switch-container.search-container.content {
    margin-top: calc(25px + var(--ss-search-center-offset, 0px))
}

@media (min-width:768px) {
    body:has(.starsearch-box .post-top) .star-header-banner-wrap.is-post-top .star-header-banner {
        margin: 0 50px
    }
}

.star-header-banner-widget .star-header-banner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 5px;
    padding: 22px;
    border-radius: var(--main-radius);
    background-color: var(--main-bg-color, #fff)
}

.star-header-banner-widget .star-header-banner-item {
    flex: 1;
    min-width: 0
}

.star-header-banner-widget .star-header-banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--main-color, #333);
    text-decoration: none;
    transition: transform 0.3s ease
}

.star-header-banner-widget .star-header-banner-link:hover {
    transform: translateY(-5px);
    color: var(--main-color, #333)
}

.star-header-banner-widget .star-header-banner-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    padding: 5px;
    border-radius: var(--star-dock-icon-radius, var(--main-radius));
    background: var(--muted-bg-color-l, #f5f7fa);
    object-fit: contain;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease
}

.star-header-banner-widget .star-header-banner-link:hover .star-header-banner-icon {
    background: linear-gradient(-45deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 60%, transparent));
    box-shadow: 0 3px 10px var(--main-shadow);
    transform: rotate(5deg)
}

.star-header-banner-widget .star-header-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    text-align: left
}

.star-header-banner-widget .star-header-banner-title {
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.star-header-banner-widget .star-header-banner-title em {
    color: var(--focus-color);
    margin-left: 5px;
    font-style: normal
}

.star-header-banner-widget .star-header-banner-subtitle {
    margin-top: 1px;
    font-size: 15px;
    line-height: 15px;
    color: var(--muted-color2, #8c8d9e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.io-black-mode .star-header-banner-widget .star-header-banner {
    background-color: var(--main-bg-color, #2c2e2f)
}

.io-black-mode .star-header-banner-widget .star-header-banner-title em {
    color: #fdd347
}

.io-black-mode .star-header-banner-widget .star-header-banner-icon {
    background: #1b1d1f
}

@media (max-width:1666px) {
    .star-header-banner-widget .star-header-banner-link {
        justify-content: flex-start
    }
}

@media (max-width:991.98px) {
    .star-header-banner-widget .star-header-banner-wrap.is-post-top {
        margin-top: 35px
    }

    body:has(.star-header-banner-wrap.is-post-top) .header-banner.post-top .switch-container.search-container.content {
        margin-top: calc(30px + var(--ss-search-center-offset, 0px))
    }

    .star-header-banner-widget .star-header-banner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 1px;
        scrollbar-width: none;
        padding: 12px
    }

    .star-header-banner-widget .star-header-banner::-webkit-scrollbar {
        display: none
    }

    .star-header-banner-widget .star-header-banner-item {
        flex: 0 0 auto
    }

    .star-header-banner-widget .star-header-banner-link {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 60px;
        padding: 8px 10px;
        text-align: left
    }

    .star-header-banner-widget .star-header-banner-link:hover {
        transform: none
    }

    .star-header-banner-widget .star-header-banner-icon {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        margin-bottom: 0;
        padding: 3px;
        flex-shrink: 0
    }

    .star-header-banner-widget .star-header-banner-text {
        align-items: flex-start;
        text-align: left;
        min-width: 0
    }

    .star-header-banner-widget .star-header-banner-title {
        font-size: 16px
    }

    .star-header-banner-widget .star-header-banner-subtitle {
        font-size: 11px;
        line-height: 1.2;
        margin-top: 2px
    }
}

.io-widget-about-website-style2 .widget-author-cover {
    position: relative;
    border-radius: var(--main-radius, 12px) var(--main-radius, 12px) 0 0
}

.io-widget-about-website-style2 .widget-author-cover .media {
    border-radius: inherit;
    overflow: hidden
}

.io-widget-about-website-style2 .widget-author-cover .media-content {
    background-size: cover;
    background-position: center;
    border-radius: var(--theme-border-radius)
}

.io-widget-about-website-style2 .media-content {
    top: 10px;
    left: 10px;
    right: 10px
}

.io-widget-about-website-style2 .widget-author-avatar {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 1
}

.io-widget-about-website-style2 .flex-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 5px;
    line-height: 1;
    border-radius: 100%;
    background: var(--main-bg-color, #fff)
}

.io-widget-about-website-style2 .flex-avatar img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: inherit
}

.io-widget-about-website-style2 .widget-author-meta {
    margin-top: 3rem
}

.io-widget-about-website-style2 .widget-author-meta .col i {
    cursor: pointer
}

.io-widget-new-bulletin .star-bulletin-widget {
    --sb-pad-x: 15px;
    --sb-track: 16px;
    --sb-gap: 12px;
    --sb-line: 2px;
    --sb-node: 18px;
    padding: 10px var(--sb-pad-x) 15px
}

.io-widget-new-bulletin .star-bulletin-list {
    position: relative;
    margin: 0;
    padding: 5px 0
}

.io-widget-new-bulletin .star-bulletin-list::before {
    content: '';
    position: absolute;
    top: calc(var(--sb-node) / 2);
    bottom: calc(var(--sb-node) / 2);
    left: calc((var(--sb-track) - var(--sb-line)) / 2);
    width: var(--sb-line);
    background: rgba(130, 130, 130, 0.2);
    border-radius: 1px;
    pointer-events: none
}

.io-widget-new-bulletin .star-bulletin-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--sb-track) minmax(0, 1fr);
    column-gap: var(--sb-gap);
    align-items: start;
    margin: 0;
    padding: 0 0 16px;
    border: 0
}

.io-widget-new-bulletin .star-bulletin-item:last-child {
    padding-bottom: 0
}

.io-widget-new-bulletin .star-bulletin-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sb-track);
    height: var(--sb-node);
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: var(--muted-color, #888);
    background: var(--main-bg-color, #fff);
    border-radius: 0;
    transition: color 0.2s
}

.io-widget-new-bulletin .star-bulletin-item:hover .star-bulletin-node {
    color: var(--theme-color)
}

.io-widget-new-bulletin .star-bulletin-body {
    min-width: 0;
    padding-top: 0
}

.io-widget-new-bulletin .star-bulletin-title {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: var(--sb-node);
    font-weight: 500;
    color: inherit;
    transition: color 0.2s
}

.io-widget-new-bulletin .star-bulletin-item:hover .star-bulletin-title {
    color: var(--theme-color)
}

.io-widget-new-bulletin .star-bulletin-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--muted-color, #999)
}

.io-widget-new-bulletin .star-bulletin-meta time {
    min-width: 0
}

.io-widget-new-bulletin .star-bulletin-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap
}

.io-widget-new-bulletin .star-bulletin-views .iconfont {
    font-size: 12px;
    line-height: 1;
    opacity: 0.85
}

.io-widget-new-bulletin .star-bulletin-empty {
    padding: 16px 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted-color, #999)
}

.io-widget-new-bulletin .star-bulletin-more {
    display: flex;
    margin: 12px 0 0;
    padding: 0
}

.io-widget-new-bulletin .star-bulletin-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    border-radius: 10px;
    color: inherit;
    background: var(--body-bg-color);
    transition: color 0.2s, background 0.2s
}

.io-widget-new-bulletin .star-bulletin-more__btn .iconfont {
    font-size: 12px;
    opacity: 0.85;
    transition: transform 0.2s
}

.io-widget-new-bulletin .star-bulletin-more__btn:hover {
    color: var(--theme-color);
    background: rgba(var(--theme-color-rgb, 241, 64, 75), 0.08)
}

.io-widget-new-bulletin .star-bulletin-more__btn:hover .iconfont {
    transform: translateX(2px)
}

.io-black-mode .io-widget-new-bulletin .star-bulletin-list::before {
    background: rgba(255, 255, 255, 0.14)
}

.io-black-mode .io-widget-new-bulletin .star-bulletin-node {
    background: var(--main-bg-color, #2c2e2f);
    color: #9aa0a6
}

.io-black-mode .io-widget-new-bulletin .star-bulletin-more__btn {
    color: var(--muted-color);
    background: rgba(255, 255, 255, 0.06)
}

.io-widget-star-sites-posts .star-sites-posts {
    position: relative;
    padding: 10px
}

.io-widget-star-sites-posts .star-sites-posts-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0
}

.io-widget-star-sites-posts .star-sites-posts-header h3 {
    margin: 0;
    font-family: 'StarPanelTitle', sans-serif;
    font-size: 26px;
    letter-spacing: .02em
}

.io-widget-star-sites-posts .star-sites-posts-deco {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 80px;
    opacity: .22;
    transform: rotate(12deg);
    pointer-events: none;
    user-select: none
}

.io-widget-star-sites-posts .io-slider-tab {
    margin: 0 0 8px
}

.io-widget-star-sites-posts .ajax-list-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--body-bg-color)
}

.io-widget-star-sites-posts .posts-item.style-sites-star-simple {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    overflow: hidden
}

.io-widget-star-sites-posts .style-sites-star-simple .star-simple-card.sites-body {
    background: var(--main-bg-color, #fff);
    transition: background-color 0.2s
}

.io-widget-star-sites-posts .star-sites-posts.is-title-only .style-sites-star-simple .item-body>.line1.text-muted.text-xs {
    display: none
}

.io-black-mode .io-widget-star-sites-posts .style-sites-star-simple .star-simple-card.sites-body {
    background: #363738
}

.io-widget-star-sites-posts .placeholder-posts {
    max-width: 100%;
    margin: 0
}

.io-widget-star-sites-posts .star-sites-posts-more {
    display: flex;
    justify-content: center;
    padding: 10px 0 0;
    margin: 0
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    font-size: 13px;
    line-height: 1;
    border-radius: 10px;
    background: var(--body-bg-color);
    transition: color 0.2s, background 0.2s, border-color 0.2s
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post::before,
.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post::after {
    content: none !important;
    display: none !important
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post .iconfont {
    font-size: 12px;
    opacity: 0.85;
    transition: transform 0.2s
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post:hover {
    color: var(--theme-color);
    padding: 0 20px;
    border-color: rgba(var(--theme-color-rgb, 241, 64, 75), 0.22);
    background: rgba(var(--theme-color-rgb, 241, 64, 75), 0.08)
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post:hover .iconfont {
    transform: translateY(1px)
}

.io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post.loading {
    opacity: 0.65;
    pointer-events: none
}

.io-black-mode .io-widget-star-sites-posts .star-sites-posts-more__btn.ajax-page-post {
    color: var(--muted-color);
    background: rgba(255, 255, 255, 0.06)
}