/* All rules are scoped to the public site; theme data and interactions stay intact. */
body.xx-site-design {
    --xx-surface: #ffffff;
    --xx-surface-soft: #f6f8fb;
    --xx-surface-raised: #ffffff;
    --xx-text: #334155;
    --xx-title: #243148;
    --xx-muted: #606e83;
    --xx-border: #e2e7ef;
    --xx-accent: #456fae;
    --xx-hover: #f0f5fd;
    --xx-pink-wash: rgba(253, 224, 236, .62);
    --xx-blue-wash: rgba(221, 235, 255, .68);
    --xx-decoration: rgba(129, 157, 197, .13);
    --xx-gold-bg: #fff4d9;
    --xx-gold-text: #8a6729;
    --xx-gold-border: #ead9b2;
    --xx-blue-bg: #edf3fc;
    --xx-blue-text: #446da7;
    --xx-green-bg: #eaf5ef;
    --xx-green-text: #39775e;
    --xx-purple-bg: #f0ecf8;
    --xx-purple-text: #75559c;
    --xx-red-bg: #fbeef0;
    --xx-red-text: #a45364;
    --xx-social-qq: #1c6eaa;
    --xx-social-weixin: #257b3d;
    --xx-social-baidu: #345cbc;
    --xx-social-alipay: #0f719f;
    --xx-social-xiaomi: #a54c14;
    --xx-shadow: 0 7px 24px rgba(45, 65, 100, .055);
}

body.xx-site-design.dark-theme,
body.xx-site-design .xiaoxin-dearlicy-widget[data-theme='dark'] {
    --xx-surface: #252b35;
    --xx-surface-soft: #20262f;
    --xx-surface-raised: #2c3440;
    --xx-text: #d6deea;
    --xx-title: #edf2fa;
    --xx-muted: #a9b5c7;
    --xx-border: #3b4656;
    --xx-accent: #a3c6fa;
    --xx-hover: #303c4e;
    --xx-pink-wash: rgba(116, 68, 96, .24);
    --xx-blue-wash: rgba(61, 103, 157, .25);
    --xx-decoration: rgba(157, 189, 232, .13);
    --xx-gold-bg: #443a27;
    --xx-gold-text: #f1d494;
    --xx-gold-border: #66563a;
    --xx-blue-bg: #2b3a50;
    --xx-blue-text: #b2cff6;
    --xx-green-bg: #293e36;
    --xx-green-text: #a3d5bb;
    --xx-purple-bg: #3b324c;
    --xx-purple-text: #ccb8ee;
    --xx-red-bg: #46323b;
    --xx-red-text: #efb5c2;
    --xx-social-qq: #75bef2;
    --xx-social-weixin: #7bd497;
    --xx-social-baidu: #a5b8ff;
    --xx-social-alipay: #6cc4ed;
    --xx-social-xiaomi: #ffc18b;
    --xx-shadow: 0 7px 24px rgba(0, 0, 0, .15);
}

/* The shortcut strip needs an opaque dark surface behind its light labels. */
body.xx-site-design.dark-theme .header-slider-card > .zib-widget {
    background: var(--xx-surface);
}

body.xx-site-design.dark-theme .header-slider-card .icon-cover-desc > .font-bold {
    color: var(--xx-title);
}

body.xx-site-design.dark-theme .header-slider-card .icon-cover-desc > .muted-color {
    color: var(--xx-muted);
}

/* Jiuyao's original card JPG is served locally, with its cover/center layout. */
body.xx-site-design .posts-item,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card {
    background-color: var(--xx-surface) !important;
    background-image: none;
    border: 1px solid var(--xx-border);
    border-radius: 15px;
    box-shadow: var(--xx-shadow) !important;
}

body.xx-site-design .posts-item.card,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card {
    background-image: url('../images/post_background.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The source has no dark image: this translucent tint preserves the original art. */
body.xx-site-design.dark-theme .posts-item.card,
body.xx-site-design.dark-theme .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card,
body.xx-site-design .xiaoxin-dearlicy-widget[data-theme='dark'] .xiaoxin-dearlicy-card {
    background-image:
        linear-gradient(rgba(16, 23, 35, .74), rgba(16, 23, 35, .74)),
        url('../images/post_background.jpg') !important;
}

body.xx-site-design .posts-item {
    animation: none;
}

body.xx-site-design .posts-item.ajax-item:hover {
    animation: none;
}

body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card:hover {
    border-color: var(--xx-accent);
    box-shadow: 0 10px 25px rgba(54, 88, 136, .12) !important;
}

body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-top,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-meta {
    color: var(--xx-muted);
}

body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-title {
    color: var(--xx-title);
}

/* Full zibll1 tag declarations; selectors also cover the homepage's custom cards. */
body.xx-site-design .posts-item.card .item-tags .but,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag,
body.xx-site-design .posts-item.card .meta-category a { 
                display: inline-block !important; 
                padding: 4px 10px !important; 
                margin: 0 6px 8px 0 !important; 
                font-size: 10px !important; 
                font-weight: normal !important; 
                text-decoration: none !important; 
            }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay),
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay),
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay) { 
                position: relative !important; 
                overflow: hidden !important; 
                z-index: 1 !important; 
                border-radius: 999px !important; 
                background-color: #f1f3f5 !important; 
                color: #5f6368 !important; 
                border: 1px solid #e9ecef !important; 
                transition: all .3s ease-out !important; 
                box-shadow: none !important; 
            }

body.xx-site-design.dark-theme .posts-item.card .item-tags .but:not(.meta-pay),
body.xx-site-design.dark-theme .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay),
body.xx-site-design .xiaoxin-dearlicy-widget[data-theme='dark'] .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay),
body.xx-site-design.dark-theme .posts-item.card .meta-category a:not(.meta-pay) { 
                background-color: #2d2d2d !important; 
                color: #bbb !important; 
                border-color: #3d3d3d !important; 
            }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay)::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay)::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay)::before { 
                content: "" !important; 
                position: absolute !important; 
                top: 50%; 
                left: 50%; 
                width: 150%; 
                padding-bottom: 150%; 
                border-radius: 50%; 
                transform: translate(-50%, -50%) scale(0); 
                opacity: 0; 
                transition: transform .6s cubic-bezier(.1,.7,.3,1), opacity .6s ease; 
                z-index: -1 !important; 
            }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay):hover,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay):hover,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay):hover { 
                transform: translateY(-2px); 
                color: #fff !important; 
                border-color: transparent !important; 
                box-shadow: 0 5px 12px -2px rgba(0,0,0,.2) !important; 
            }

body.xx-site-design.dark-theme .posts-item.card .item-tags .but:not(.meta-pay):hover,
body.xx-site-design.dark-theme .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay):hover,
body.xx-site-design .xiaoxin-dearlicy-widget[data-theme='dark'] .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay):hover,
body.xx-site-design.dark-theme .posts-item.card .meta-category a:not(.meta-pay):hover { 
                box-shadow: 0 5px 12px -2px rgba(0,0,0,.3) !important; 
            }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay):hover::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay):hover::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay):hover::before { 
                transform: translate(-50%, -50%) scale(1); 
                opacity: 1; 
            }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-1:hover,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-1:hover,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-1:hover { background-color: #8e44ad !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-1::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-1::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-1::before { background-image: radial-gradient(circle, #9b59b6, #8e44ad) !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-2:hover,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-2:hover,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-2:hover { background-color: #27ae60 !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-2::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-2::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-2::before { background-image: radial-gradient(circle, #2ecc71, #27ae60) !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-3:hover,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-3:hover,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-3:hover { background-color: #2980b9 !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-3::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-3::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-3::before { background-image: radial-gradient(circle, #3498db, #2980b9) !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-4:hover,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-4:hover,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-4:hover { background-color: #d35400 !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay).tag-color-4::before,
body.xx-site-design .posts-item.card .meta-category a:not(.meta-pay).tag-color-4::before,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay).tag-color-4::before { background-image: radial-gradient(circle, #e67e22, #d35400) !important; }

body.xx-site-design .posts-item.card .item-tags .but:not(.meta-pay) .fa,
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags .xiaoxin-dearlicy-card-tag:not(.meta-pay) .fa { 
                margin-right: 4px; 
                font-size: 10px; 
            }

/* The source tags provide their own spacing; the custom row adds no second gap. */
body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tags {
    gap: 0;
    margin-bottom: 2px;
    padding-top: 2px;
    padding-bottom: 0;
}

body.xx-site-design .xiaoxin-dearlicy-widget .xiaoxin-dearlicy-card-tag {
    min-height: 0;
    line-height: 1.44;
    vertical-align: middle;
}

body.xx-site-design .xiaoxin-dearlicy-tag-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-right: 4px;
    border-radius: 0;
    background: none;
}

body.xx-site-design .xiaoxin-dearlicy-tag-dot::before {
    content: '#';
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

/* Original resource-tag gradient; no legacy background/color override remains. */
body.xx-site-design .posts-item .meta-pay.but.jb-yellow { 
                --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%)!important; 
                padding: 4px 10px !important; 
                font-size: 10px !important; 
                color: #866127; 
            }

/* Bright accents are local to the three homepage ranking panels. */
body.xx-site-design #syphb {
    --xx-title: #000;
    --xx-muted: #4f66a0;
    --xx-accent: #0868dc;
    --xx-hover: #edf5ff;
    --xx-purple-bg: #f0e3ff;
    --xx-purple-text: #7b2fea;
    --xx-green-bg: #d6faeb;
    --xx-green-text: #00785c;
    --xx-gold-bg: #ffedcd;
    --xx-gold-text: #b54a00;
    --xx-blue-bg: #e1efff;
    --xx-blue-text: #0864d1;
    --xx-red-bg: #ffe1ed;
    --xx-red-text: #c51f65;
    --xx-rank-orange-border: #ffd092;
    --xx-rank-blue-border: #a7d0ff;
    --xx-rank-pink-border: #ffb4d1;
    --xx-rank-green-border: #8be8c8;
}

body.xx-site-design.dark-theme #syphb {
    --xx-title: #e5efff;
    --xx-muted: #b1c9f1;
    --xx-accent: #73c7ff;
    --xx-hover: #273952;
    --xx-purple-bg: #44305f;
    --xx-purple-text: #cba3ff;
    --xx-green-bg: #153e33;
    --xx-green-text: #55e4b5;
    --xx-gold-bg: #4a321e;
    --xx-gold-text: #ffc16b;
    --xx-blue-bg: #213c60;
    --xx-blue-text: #75bcff;
    --xx-red-bg: #492538;
    --xx-red-text: #ff83b7;
    --xx-rank-orange-border: #805525;
    --xx-rank-blue-border: #37689b;
    --xx-rank-pink-border: #824463;
    --xx-rank-green-border: #2a745b;
}

/* Ranking styles leave the existing queries, titles, links and counts intact. */
body.xx-site-design #syphb .ranking-item {
    border: 1px solid var(--xx-border) !important;
    background: var(--xx-surface);
    box-shadow: var(--xx-shadow);
}

body.xx-site-design #syphb .top-icon {
    color: var(--xx-purple-text);
    background: var(--xx-purple-bg);
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 3px 12px rgba(45, 65, 100, .07);
}

body.xx-site-design #syphb .js-rank-bottom2 {
    color: var(--xx-green-text);
    background: var(--xx-green-bg);
}

body.xx-site-design #syphb .js-rank-bottom3 {
    color: var(--xx-gold-text);
    background: var(--xx-gold-bg);
}

body.xx-site-design #syphb .class-item {
    min-width: 0;
    border: 1px solid transparent !important;
    background: var(--xx-surface);
    color: var(--xx-text);
}

body.xx-site-design #syphb .class-item:hover,
body.xx-site-design #syphb .class-item:focus-visible {
    border-color: var(--xx-accent) !important;
    background-color: var(--xx-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(55, 85, 125, .1);
}

body.xx-site-design #syphb .class-info {
    flex: 1;
    min-width: 0;
}

body.xx-site-design #syphb .name {
    color: var(--xx-title);
    font-weight: 600;
}

body.xx-site-design #syphb .class-item:hover .name,
body.xx-site-design #syphb .class-item:focus-visible .name {
    color: var(--xx-accent);
}

body.xx-site-design:not(.dark-theme) #syphb .class-item:hover .name,
body.xx-site-design:not(.dark-theme) #syphb .class-item:focus-visible .name {
    color: var(--xx-title);
}

body.xx-site-design #syphb .num-icon1 {
    background: linear-gradient(135deg, #8b42f5, #6727db);
    color: #fff;
}

body.xx-site-design #syphb .num-icon2 {
    background: linear-gradient(135deg, #20cfae, #72efd0);
    color: #004e41;
}

body.xx-site-design #syphb .num-icon3 {
    background: linear-gradient(135deg, #ffb536, #ffd76f);
    color: #6f3300;
}

body.xx-site-design #syphb .num-icon4,
body.xx-site-design #syphb .num-icon5 {
    background: var(--xx-surface-soft);
    color: var(--xx-muted);
}

/* The theme emits empty rank circles; do not duplicate existing rank text. */
body.xx-site-design #syphb :is(.num-icon1, .num-icon2, .num-icon3, .num-icon4, .num-icon5):empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

body.xx-site-design #syphb .num-icon1:empty::before { content: '1'; }
body.xx-site-design #syphb .num-icon2:empty::before { content: '2'; }
body.xx-site-design #syphb .num-icon3:empty::before { content: '3'; }
body.xx-site-design #syphb .num-icon4:empty::before { content: '4'; }
body.xx-site-design #syphb .num-icon5:empty::before { content: '5'; }

body.xx-site-design #syphb .badg {
    margin-top: 3px;
    border: 1px solid var(--xx-border) !important;
    border-radius: 5px;
    line-height: 1.6;
    font-weight: 600;
}

body.xx-site-design #syphb .b-yellow {
    background: var(--xx-gold-bg);
    color: var(--xx-gold-text);
    border-color: var(--xx-rank-orange-border) !important;
}

body.xx-site-design #syphb .b-blue {
    background: var(--xx-blue-bg);
    color: var(--xx-blue-text);
    border-color: var(--xx-rank-blue-border) !important;
}

body.xx-site-design #syphb .b-red {
    background: var(--xx-red-bg);
    color: var(--xx-red-text);
    border-color: var(--xx-rank-pink-border) !important;
}

body.xx-site-design #syphb .b-green {
    background: var(--xx-green-bg);
    color: var(--xx-green-text);
    border-color: var(--xx-rank-green-border) !important;
}

body.xx-site-design #syphb .bottom-link,
body.xx-site-design #syphb .bottom-link:hover {
    color: var(--xx-muted);
    border: 1px solid var(--xx-border);
    background: var(--xx-surface-soft);
}

/* Guest-only enhancement: the logged-in user card never receives these classes. */
body.xx-site-design .header .xx-guest-menu {
    width: 320px;
    max-width: calc(100vw - 28px);
    padding: 0;
    border: 1px solid var(--xx-border);
    border-radius: 18px;
    background: var(--xx-surface) !important;
    box-shadow: 0 12px 38px rgba(28, 44, 70, .15) !important;
}

body.xx-site-design .header .xx-guest-menu > .padding-10 {
    padding: 0;
    overflow: hidden;
    border-radius: inherit;
    background: transparent;
}

body.xx-site-design .xx-guest-card {
    padding: 22px 20px 18px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 0 0, var(--xx-pink-wash), transparent 45%),
        radial-gradient(ellipse at 100% 0, var(--xx-blue-wash), transparent 45%),
        var(--xx-surface);
    color: var(--xx-text);
}

body.xx-site-design .header .xx-guest-menu .xx-guest-card {
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body.xx-site-design .xx-guest-intro {
    margin: 0 0 18px;
    text-align: center;
}

body.xx-site-design .xx-guest-portrait {
    display: block;
    width: 136px;
    height: auto;
    aspect-ratio: 600 / 550;
    margin: 0 auto 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    box-shadow: none;
}

body.xx-site-design .xx-guest-title {
    margin: 0 0 5px;
    color: var(--xx-title);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

body.xx-site-design .xx-guest-description {
    margin: 0;
    color: var(--xx-muted);
    font-size: 12px;
    line-height: 1.8;
}

body.xx-site-design .xx-guest-card .payvip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 0 !important;
    padding: 8px;
    border: 1px solid var(--xx-gold-border);
    border-radius: 10px;
    background: var(--xx-gold-bg) !important;
    color: var(--xx-gold-text) !important;
    box-shadow: none;
    font-size: 12px;
}

body.xx-site-design .xx-guest-card .header-user-href {
    gap: 8px;
    margin: 14px 0 6px;
}

body.xx-site-design .xx-guest-card .header-user-href > a {
    --xx-action-color: var(--xx-purple-text);
    --xx-action-bg: var(--xx-purple-bg);
    flex: 1;
    min-width: 0;
    padding: 10px 3px 9px;
    border: 1px solid var(--xx-border);
    border-radius: 12px;
    background: var(--xx-surface-raised);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

body.xx-site-design .xx-guest-card .header-user-href > .signin-loader {
    --xx-action-color: var(--xx-blue-text);
    --xx-action-bg: var(--xx-blue-bg);
}

body.xx-site-design .xx-guest-card .header-user-href > .signup-loader {
    --xx-action-color: var(--xx-green-text);
    --xx-action-bg: var(--xx-green-bg);
}

body.xx-site-design .xx-guest-card .header-user-href > a > div {
    color: var(--xx-action-color);
}

body.xx-site-design .xx-guest-card .header-user-href > a .badg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--xx-action-bg);
    font-size: 16px;
}

body.xx-site-design .xx-guest-card .header-user-href > a:hover {
    border-color: var(--xx-action-color);
}

body.xx-site-design .xx-guest-card .social-separator {
    margin: 18px 0 12px;
    color: var(--xx-muted);
    font-size: 12px;
}

body.xx-site-design .xx-guest-card .social_loginbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.xx-site-design .xx-guest-card .social-login-item {
    --xx-social-color: var(--xx-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--xx-border);
    border-radius: 50%;
    background: var(--xx-surface-soft);
    color: var(--xx-social-color) !important;
    box-shadow: none;
}

body.xx-site-design .xx-guest-card .social-login-item.qq { --xx-social-color: var(--xx-social-qq); }
body.xx-site-design .xx-guest-card .social-login-item.weixin { --xx-social-color: var(--xx-social-weixin); }
body.xx-site-design .xx-guest-card .social-login-item.baidu { --xx-social-color: var(--xx-social-baidu); }
body.xx-site-design .xx-guest-card .social-login-item.alipay { --xx-social-color: var(--xx-social-alipay); }
body.xx-site-design .xx-guest-card .social-login-item.xiaomi { --xx-social-color: var(--xx-social-xiaomi); }

body.xx-site-design .xx-guest-card .social-login-item :is(i, svg) {
    color: var(--xx-social-color) !important;
}

body.xx-site-design .xx-guest-card .social-login-item svg,
body.xx-site-design .xx-guest-card .social-login-item svg use {
    fill: currentColor !important;
}

body.xx-site-design .xx-guest-card .social-login-item:hover {
    border-color: var(--xx-accent);
    transform: translateY(-2px);
}

/* Footer inherits the site's current palette and retains the player's anchor. */
body.xx-site-design #colophon {
    color-scheme: light;
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--xx-border);
    background: var(--xx-surface);
    color: var(--xx-text);
}

body.xx-site-design.dark-theme #colophon {
    color-scheme: dark;
}

body.xx-site-design #colophon .footer-navi {
    background: none;
}

body.xx-site-design #colophon #panda_title {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(300px, 1.4fr) minmax(180px, .8fr);
    align-items: start;
    gap: 28px;
    width: calc(100% - 48px);
    max-width: 1400px;
    padding: 32px 0 26px;
    margin: 0 auto;
}

body.xx-site-design #colophon #panda_title::before,
body.xx-site-design #colophon #panda_title::after,
body.xx-site-design #colophon .widget::after {
    display: none;
}

body.xx-site-design #colophon .about,
body.xx-site-design #colophon .navis,
body.xx-site-design #colophon .ewms {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

body.xx-site-design #colophon .about > .title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

body.xx-site-design #colophon .about h2 {
    margin: 0;
    color: var(--xx-title);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
}

body.xx-site-design #colophon .about p,
body.xx-site-design #colophon .like h3,
body.xx-site-design #colophon #panda_links ul {
    color: var(--xx-muted) !important;
}

body.xx-site-design #colophon .about p {
    font-size: 13px;
    line-height: 1.9;
}

body.xx-site-design #colophon .xx-footer-mascot {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    height: auto;
    aspect-ratio: 180 / 136;
    object-fit: contain;
}

body.xx-site-design #colophon .navis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.xx-site-design #colophon .navis .navi {
    margin: 0;
    text-align: left;
}

body.xx-site-design #colophon .navis .title {
    margin: 0 0 12px;
    color: var(--xx-title);
    font-size: 14px;
    font-weight: 600;
}

body.xx-site-design #colophon .navis ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.xx-site-design #colophon a {
    color: var(--xx-muted);
    font-size: 13px;
    font-weight: 400;
}

body.xx-site-design #colophon a:hover {
    color: var(--xx-accent);
}

body.xx-site-design #colophon .navis a {
    display: inline-block;
    padding: 3px 0;
}

body.xx-site-design #colophon .Onecad_footer_ico img {
    width: 36px;
    height: 36px;
}

body.xx-site-design #colophon .like strong {
    background: none;
    color: var(--xx-accent);
    -webkit-text-fill-color: currentColor;
    font-size: 32px;
}

body.xx-site-design #colophon .like strong::after {
    content: none;
}

body.xx-site-design #colophon .footer-colors {
    height: 2px;
    background: linear-gradient(90deg, #dce6f6, #efdce5, #f0e6d1, #dce9e1);
    animation: none;
}

body.xx-site-design.dark-theme #colophon .footer-colors {
    background: linear-gradient(90deg, #354961, #604658, #62563e, #365547);
}

body.xx-site-design #colophon .colors-shadow {
    display: none;
}

body.xx-site-design #colophon #panda_bg_box {
    width: calc(100% - 48px);
    max-width: 1400px;
    max-height: none;
    margin: 18px auto 0;
    overflow: visible;
    border: 1px solid var(--xx-border);
    border-radius: 12px;
    background: var(--xx-surface-soft);
}

body.xx-site-design #colophon #panda_links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    line-height: 1.8;
}

body.xx-site-design #colophon .xx-footer-friends {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 0;
    min-width: 0;
    color: var(--xx-muted);
}

body.xx-site-design #colophon .xx-footer-friends__label {
    flex-shrink: 0;
}

body.xx-site-design #colophon #panda_links ul {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.xx-site-design #colophon #panda_links li {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.xx-site-design #colophon .xx-footer-apply {
    justify-self: end;
    margin-left: auto;
    color: var(--xx-accent);
    white-space: nowrap;
}

body.xx-site-design #colophon .foot-copyright {
    padding: 0;
}

body.xx-site-design #colophon .xx-footer-legal {
    display: block;
    width: calc(100% - 48px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0 22px;
    text-align: center;
}

body.xx-site-design #colophon .xx-footer-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

/* Badge finish copied from fetl.studio's inline .github-badge rules. */
body.xx-site-design #colophon .xx-footer-badge {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    color: #f9f9f9;
    font-size: 11px;
    line-height: 15px;
    text-decoration: none;
    opacity: .9;
}

body.xx-site-design #colophon .xx-footer-badge:hover {
    color: #f9f9f9;
}

body.xx-site-design #colophon .xx-footer-badge__label,
body.xx-site-design #colophon .xx-footer-badge__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 23px;
}

body.xx-site-design #colophon .xx-footer-badge__label {
    flex-shrink: 0;
    padding: 4px 4px 4px 6px;
    border-radius: 4px 0 0 4px;
    color: #f9f9f9;
    background: #6b6b6b;
    opacity: .9;
    white-space: nowrap;
}

body.xx-site-design #colophon .xx-footer-badge__value {
    min-width: 0;
    padding: 4px 6px 4px 4px;
    border-radius: 0 4px 4px 0;
    color: #f9f9f9;
    background: linear-gradient(to right, #d5bc9d, #975fe0);
    overflow-wrap: anywhere;
}

body.xx-site-design #colophon .xx-footer-badge--copyright .xx-footer-badge__value {
    flex-wrap: wrap;
    background: linear-gradient(to right, #e78636, #6b03ca);
}

body.xx-site-design #colophon .xx-footer-badge__value a,
body.xx-site-design #colophon .xx-footer-badge__value a:hover {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.xx-site-design #colophon .xx-footer-badge--police .xx-footer-badge__value {
    background: linear-gradient(to right, #5381bd, #ee8ead);
}

body.xx-site-design #colophon .xx-footer-badge--moe .xx-footer-badge__value {
    background: linear-gradient(to right, #ee8ead, #a86af9);
}

body.xx-site-design #colophon .xx-footer-badge img {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0;
    object-fit: contain;
}

body.xx-site-design #colophon .xx-footer-badge--moe img {
    width: 20px;
    height: 20px;
}

/* Shared content-page vocabulary; both class spellings are supported. */
body.xx-site-design .xx-site-page {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    color: var(--xx-text);
    font-size: 15px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

body.xx-site-design .xx-site-page p {
    margin: 0 0 16px;
}

body.xx-site-design .xx-site-page a {
    color: var(--xx-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

body.xx-site-design .xx-site-page strong {
    color: var(--xx-title);
}

body.xx-site-design .xx-site-page :is(.xx-site-hero, .xx-site-page__hero) {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
    padding: 34px;
    border: 1px solid var(--xx-border);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 0 0, var(--xx-pink-wash), transparent 70%),
        radial-gradient(ellipse at 100% 0, var(--xx-blue-wash), transparent 70%),
        var(--xx-surface);
    box-shadow: var(--xx-shadow);
}

body.xx-site-design .xx-site-page :is(.xx-site-hero, .xx-site-page__hero) :is(h1, h2) {
    margin: 8px 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--xx-title);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.025em;
}

body.xx-site-design .xx-site-page :is(.xx-site-hero, .xx-site-page__hero) :is(h1, h2)::before,
body.xx-site-design .xx-site-page :is(.xx-site-section, .xx-site-page__section) > h2::before {
    content: none;
}

body.xx-site-design .xx-site-page :is(.xx-site-eyebrow, .xx-site-page__eyebrow) {
    margin: 0;
    color: var(--xx-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .1em;
}

body.xx-site-design .xx-site-page :is(.xx-site-lead, .xx-site-page__lead) {
    max-width: 64ch;
    margin: 0;
    color: var(--xx-muted);
    font-size: 16px;
    line-height: 1.9;
}

body.xx-site-design .xx-site-page :is(.xx-site-avatar, .xx-site-page__avatar) {
    float: right;
    width: 104px;
    height: 104px;
    margin: 0 0 16px 24px;
    border: 4px solid var(--xx-surface-raised);
    border-radius: 24px;
    object-fit: cover;
    box-shadow: var(--xx-shadow);
}

body.xx-site-design .xx-site-page :is(.xx-site-meta, .xx-site-page__meta) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--xx-muted);
    font-size: 12px;
}

body.xx-site-design .xx-site-page :is(.xx-site-meta, .xx-site-page__meta) > span {
    padding: 3px 10px;
    border: 1px solid var(--xx-border);
    border-radius: 999px;
    background: var(--xx-surface-raised);
    line-height: 1.8;
}

body.xx-site-design .xx-site-page :is(.xx-site-toc, .xx-site-page__toc) {
    margin: 24px 0;
    padding: 18px 22px;
    border: 1px solid var(--xx-border);
    border-radius: 14px;
    background: var(--xx-surface-soft);
    font-size: 14px;
}

body.xx-site-design .xx-site-page :is(ul, ol) {
    margin: 14px 0 20px;
    padding-left: 1.6em;
}

body.xx-site-design .xx-site-page li {
    margin: 6px 0;
}

body.xx-site-design .xx-site-page :is(.xx-site-toc, .xx-site-page__toc) :is(ul, ol) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

body.xx-site-design .xx-site-page :is(.xx-site-toc, .xx-site-page__toc) li {
    margin: 0;
}

body.xx-site-design .xx-site-page :is(.xx-site-toc, .xx-site-page__toc) a {
    display: inline-block;
    padding: 3px 0;
    margin-right: 12px;
}

body.xx-site-design .xx-site-page :is(.xx-site-section, .xx-site-page__section) {
    margin: 32px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--xx-border);
    scroll-margin-top: 100px;
}

body.xx-site-design .xx-site-page :is(.xx-site-section, .xx-site-page__section):last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

body.xx-site-design .xx-site-page :is(.xx-site-section, .xx-site-page__section) > h2 {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--xx-title);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
}

body.xx-site-design .xx-site-page h3 {
    margin: 24px 0 10px;
    color: var(--xx-title);
    font-size: 17px;
    line-height: 1.6;
}

body.xx-site-design .xx-site-page :is(.xx-site-grid, .xx-site-page__grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}

body.xx-site-design .xx-site-page :is(.xx-site-card, .xx-site-page__card) {
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid var(--xx-border);
    border-radius: 14px;
    background: var(--xx-surface);
}

body.xx-site-design .xx-site-page :is(.xx-site-card, .xx-site-page__card) h3 {
    margin: 0 0 10px;
}

body.xx-site-design .xx-site-page :is(.xx-site-card, .xx-site-page__card) > :last-child,
body.xx-site-design .xx-site-page :is(.xx-site-note, .xx-site-page__note) > :last-child {
    margin-bottom: 0;
}

body.xx-site-design .xx-site-page :is(.xx-site-note, .xx-site-page__note) {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--xx-accent);
    border-radius: 0 12px 12px 0;
    background: var(--xx-blue-bg);
    color: var(--xx-blue-text);
    font-size: 14px;
}

body.xx-site-design .xx-site-page .xx-site-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--xx-border);
    font-size: 13px;
}

body.xx-site-design .xx-site-page .xx-site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid var(--xx-border);
    border-radius: 9px;
    background: var(--xx-blue-bg);
    color: var(--xx-blue-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
    text-decoration: none;
}

body.xx-site-design .xx-site-page .xx-site-button:hover {
    border-color: var(--xx-accent);
}

body.xx-site-design :is(.xx-site-page, .xx-guest-card, .xx-footer-badges) a:focus-visible,
body.xx-site-design #syphb .class-item:focus-visible {
    outline: 2px solid var(--xx-accent);
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    body.xx-site-design #colophon #panda_title {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 767px) {
    body.xx-site-design .mobile-navbar > .xx-guest-card {
        margin: 0 10px 14px;
        padding: 20px 14px 18px;
        border: 1px solid var(--xx-border);
        border-radius: 16px;
    }

    body.xx-site-design .mobile-navbar .xx-guest-portrait {
        width: 116px;
        height: auto;
    }

    body.xx-site-design .footer-tabbar ~ #colophon {
        padding-bottom: calc(49px + constant(safe-area-inset-bottom));
        padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px));
    }

    body.xx-site-design #colophon #panda_title,
    body.xx-site-design #colophon #panda_bg_box,
    body.xx-site-design #colophon .xx-footer-legal {
        width: calc(100% - 28px);
    }

    body.xx-site-design #colophon #panda_title {
        padding: 24px 0 18px;
    }

    body.xx-site-design #colophon .xx-footer-legal {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body.xx-site-design #colophon .xx-footer-badges {
        gap: 7px;
    }

    body.xx-site-design .xx-site-page {
        font-size: 14px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-hero, .xx-site-page__hero) {
        padding: 24px 22px;
        border-radius: 16px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-avatar, .xx-site-page__avatar) {
        float: none;
        width: 84px;
        height: 84px;
        margin: 0 0 18px;
        border-radius: 20px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-lead, .xx-site-page__lead) {
        font-size: 15px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-section, .xx-site-page__section) {
        margin: 26px 0;
        padding-bottom: 20px;
        scroll-margin-top: 78px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-grid, .xx-site-page__grid) {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.xx-site-design .xx-site-page :is(.xx-site-toc, .xx-site-page__toc),
    body.xx-site-design .xx-site-page :is(.xx-site-card, .xx-site-page__card) {
        padding: 16px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.xx-site-design .posts-item,
    body.xx-site-design .xiaoxin-dearlicy-card,
    body.xx-site-design #syphb *,
    body.xx-site-design .xx-guest-card *,
    body.xx-site-design #colophon * {
        animation: none !important;
        transition: none !important;
    }

    body.xx-site-design #syphb .class-item:hover,
    body.xx-site-design #syphb .class-item:hover .syphimg img,
    body.xx-site-design .xx-guest-card .social-login-item:hover {
        transform: none !important;
    }
}