/* 主样式表,全站通用 */
/*@font-face {
    font-family: 'AdobeCleanHanSC';
    src: url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.eot');
    src:
        url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.eot') format('embedded-opentype'),
        url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.woff2') format('woff2'),
        url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.woff') format('woff'),
        url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.ttf') format('truetype'),
        url('https://testingcf.jsdelivr.net/gh/zhxiansen/font/OPPOSans-M.svg') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/
*:not([class*="icon"]):not(i) {
    font-family: "AdobeCleanHanSC" !important;
}
article,blockquote,body,dd,div,dl,figure,h1,h2,h3,h4,h5,h6,header,html,input,li,main,ol,p,section,span,td,textarea,th,tr,ul{margin:0;padding:0}
a{color:inherit;text-decoration:none!important;word-wrap:break-word;word-break:break-all}
a:active,a:hover,a:visited,a:link{text-decoration:none!important;background:0 0;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6{text-decoration:none!important}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none!important}
.header-menu a,.entry-title a,.post-title a{text-decoration:none!important}
li{list-style:none}
img{border:0;vertical-align:middle}
input,textarea{outline:0}
input,select,textarea{color:inherit;font-size:inherit;font-family:inherit}
textarea{resize:none}
input[type=button],input[type=reset],input[type=submit]{cursor:pointer}
audio,canvas,progress,video{display:block}
input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none}
input[type=search]::-o-clear{display:none}
input[type=search]::-webkit-search-cancel-button{display:none}
:root{--bgColor:#fff;--fontColor:#333;--headColor:#000;--headbg:#fff;--themeColor:#f1404b;--ButtonFontColor:#fff;--footerColor:#f8f8f8;--borderColor:rgba(135,150,165,.075);--entryConColor:rgba(0,0,0,.6);--termBarbg:#f4f5f9;--boxShowColor:rgb(0 0 0/10%);--submenuBg:#ebebeb;--webkit-scrollbar-thumb:#cbcbcb;--termBarPadding:24px;--headHeight:76px;--logoHeight:36px;--siteConMargin:48px;--hasThumbMargin:40px;--entryImgWidth:calc(994px*0.382);--headerMenuHeight:36px;--entryConSize:14px;--entryTitSize:20px;--postH1Size:22px;--postH2Size:20px;--postH3Size:18px;--postSize:16px;--postGlobalMargin:30px;--headSearchWidth:1024px}
.dark:root{--bgColor:#2a2a2b;--fontColor:#9d9d9d;--headColor:rgba(255,255,255,.7);--headbg:#17181a;--themeColor:#f1636b;--footerColor:#212121;--entryConColor:#888;--termBarbg:#212121;--boxShowColor:#17181a;--submenuBg:#2a2a2b;--webkit-scrollbar-thumb:#666666}
html{background:#e5e5e5 url(../img/body.jpg);color:var(--fontColor);font-size:16px;font-family:PingFang SC,Microsoft YaHei,sans-serif,OPPOSans2,Helvetica Neue,Helvetica,Tahoma,Arial;scroll-behavior:smooth}
body{cursor:default!important;background:#e5e5e5 url(../img/body.jpg)}
html.dark{background:#1a1a1a!important}
.dark body{background:#1a1a1a!important}
.site-wrapper{max-width:1200px;margin:40px auto;background:var(--bgColor);box-shadow:0 0 20px rgba(0,0,0,.1);border-radius:8px;overflow:hidden}
.dark .site-wrapper{box-shadow:0 0 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.flex,.header-menu .gore>li{display:flex}
.none{display:none}
.hidden{overflow:hidden}
.hoverColor:hover{color:var(--themeColor)}
.hoverBg:hover{background:var(--themeColor)!important}
.container{margin-right:auto;margin-left:auto;padding:0 14px;max-width:1024px}
.site-header{height:var(--headHeight);-webkit-box-shadow:0 10px 50px -15px var(--boxShowColor);box-shadow:0 10px 50px -15px var(--boxShowColor);align-items:center;background:var(--headbg)}
.header-container,.header-menu ul{align-items:center;width:100%}
.header-logo{display:flex;align-items:center}
.header-logo a{display:flex;align-items:center}
.header-logo img.logo-image{height:var(--logoHeight);max-width:200px;width:auto;display:inline-block;object-fit:contain;transition:opacity .3s ease}
.header-logo img.logo-image:hover{opacity:0.8}
.header-logo svg{height:var(--logoHeight);display:inline-block}
.header-logo svg path{fill:var(--headColor)}
.header-logo .logo.text{font-size:24px;font-weight:700;color:var(--headColor);line-height:var(--headerMenuHeight);transition:color .3s ease;display:flex;align-items:center;padding-bottom:8px}
.header-logo .logo.text:hover{color:var(--themeColor)}

/* 白天/暗黑模式 Logo 切换 */
.header-logo .logo-dark{display:none!important}
.header-logo .logo-light{display:inline-block}
.dark .header-logo .logo-light{display:none!important}
.dark .header-logo .logo-dark{display:inline-block!important}
.header-menu{margin-right:auto}
.header-menu .gore{color:var(--headColor);margin:0 16px}
.header-menu .gore>li{margin:0 16px;position:relative}
.header-menu .gore>li>a{line-height:var(--headerMenuHeight);display:flex;align-items:center;position:relative;padding-bottom:8px}
.header-menu .gore>li>a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:transparent;border-radius:2px;transition:all .3s ease}
.header-menu li.current-menu-item>a,.header-menu li.current-menu-parent>a,.header-menu li.current-menu-parent .menu-sign{color:var(--themeColor)}
.header-menu .gore>li:nth-child(1).current-menu-item>a::after{background:linear-gradient(90deg,#a855f7,#ec4899)}
.header-menu .gore>li:nth-child(2).current-menu-item>a::after{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
.header-menu .gore>li:nth-child(3).current-menu-item>a::after{background:linear-gradient(90deg,#10b981,#84cc16)}
.header-menu .gore>li:nth-child(4).current-menu-item>a::after{background:linear-gradient(90deg,#f59e0b,#f97316)}
.header-menu .gore>li:nth-child(5).current-menu-item>a::after{background:linear-gradient(90deg,#ef4444,#dc2626)}
.header-menu .gore>li:nth-child(n+6).current-menu-item>a::after{background:var(--themeColor)}
.header-menu .sub-menu{position:absolute;top:100%;left:-16px;z-index:80;visibility:hidden;width:130px;border-radius:5px;background:var(--bgColor);box-shadow:0 0 10px var(--boxShowColor);opacity:0;transition:all .5s cubic-bezier(.4,.01,.165,.99);-webkit-transform:translateY(5px);transform:translateY(5px);padding:0 16px;font-size:14px}
.header-menu .sub-menu li{padding:14px 0;border-bottom:1px solid var(--borderColor)}
.header-menu .sub-menu li:last-child{border-bottom:none}
.mobile{display:none}
.menu-sign{margin-left:5px;-webkit-transition:all .2s;transition:all .2s;display:flex;align-items:center;justify-content:center}
.menu-sign:after{content:"\e60d";font-family:iconfont}
.iconButton{padding:7px;width:22px;height:22px;margin-left:10px;color:var(--headColor)}
.dark .icon-lightbulb-flash-line{color:#ffc008}
.iconButton .iconfont{font-size:22px}
.site-content{margin-top:var(--siteConMargin);margin-bottom:var(--siteConMargin);min-height:calc(100vh - var(--headHeight))}
.term-bar{background:var(--termBarbg);color:var(--fontColor);padding:var(--termBarPadding) 0}
.term-illustrate,.trem-state{display:block;margin-top:10px;font-weight:400;font-size:24px}
.trem-info,.trem-state{text-align:center;margin-top:100px}
.trem-info{display:block;margin-top:150px;font-size:16px;margin-bottom:30px}
.site-search{position:absolute;width:var(--headSearchWidth);background:var(--headbg)}
.site-form{justify-content:space-between}
.site-search .field{background:0 0;color:var(--headColor);height:var(--logoHeight);width:calc(100% - 46px);border:none;line-height:var(--logoHeight)}
.vice-search{max-width:636px;height:46px;padding:0 10px 0 30px;margin:0 auto;border:2px solid var(--borderColor);border-radius:25px;display:flex}
.vice-search .field{background:0 0;color:var(--headColor);border:none;line-height:var(--logoHeight);height:100%;width:100%;padding:9px 0}
.search-submit{background:0 0;border:none;width:46px;height:46px}
.search-submit .iconfont{font-size:22px;color:var(--headColor)}
.article-content{position:relative;width:100%;min-height:86px}
.hasThumb{margin-bottom:var(--hasThumbMargin);padding:0 0 var(--hasThumbMargin);border-bottom:1px solid var(--borderColor)}
.hasThumb:last-child{border-bottom:none}
.entry-title{display:-webkit-box;margin:0 0 24px;font-size:var(--entryTitSize);line-height:2;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-weight:600}
.entry-content{display:-webkit-box;margin:0;color:var(--entryConColor);font-size:var(--entryConSize);line-height:2;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word;word-break:break-all}
.entry-info{position:absolute;bottom:0;color:var(--entryConColor);font-size:12px}
.entry-thumb{width:var(--entryImgWidth);padding-left:30px;flex:0 0 auto}
.entry-thumb .focus,.entry-thumb img{display:block;border-radius:5px}
.entry-thumb img{width:100%;height:calc(var(--entryImgWidth)*.618);transition:.5s;object-fit:cover}
.entry-info .iconfont{font-size:14px;margin-right:5px}
.entry-info .infoLeft{margin-right:20px}
.article-content:hover~.entry-thumb img,.entry-thumb img:hover{transform:scale(1.1)}
.pagenavi{justify-content:center}
.page-numbers{position:relative;display:inline-block;margin:0 16px 0 0;padding:8px 14px;border-radius:4px;background:var(--footerColor);font-size:12px}
.page-numbers.current,.page-numbers:hover{background:var(--themeColor);color:var(--ButtonFontColor)}
.page-numbers:last-child{margin:0}
.site-footer{background:var(--footerColor);padding:14px 0;font-size:12px;color:var(--entryConColor);line-height:2}
.footer-nav-list{flex-wrap:wrap}
.footer-nav-list li{margin-right:16px}
.link li:first-child,.site-footer li:last-child{margin-right:0}
.Copyright{justify-content:space-between}
.mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:none;overflow:hidden;background:rgb(0 0 0 / 40%)}
#goTop{position:fixed;right:75px;bottom:150px;z-index:88;display:none!important;overflow:hidden;padding:10px;width:30px;height:30px;border-radius:3px;background:#333;color:var(--ButtonFontColor);text-align:center}
#goTop i{font-size:26px;line-height:30px}
#goTop em{display:none}
#goTop:hover em{display:block;font-style:normal;font-size:12px;line-height:15px}
#goTop:hover i{display:none}
@media (max-width:1051px){:root{--entryImgWidth:calc((100vw - 58px)*0.382);--headSearchWidth:calc(100vw - 28px)}
}
@media (max-width:981px){:root{--entryConSize:12px;--entryTitSize:16px;--postH1Size:18px;--postH2Size:16px;--postH3Size:16px}
#goTop{right:14px}
}
@media (max-width:912px){:root{--siteConMargin:30px;--hasThumbMargin:30px}
.entry-title{margin:0 0 16px}
.entry-content{-webkit-line-clamp:2;line-clamp:2}
}
@media (min-width:767px){.mobile-float-buttons{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px;z-index:999;gap:10px}
.float-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--headColor);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;transition:all .3s ease;-webkit-tap-highlight-color:transparent;outline:none}
.float-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);background:rgba(255,255,255,.95)}
.float-btn:active{transform:none}
.float-btn .iconfont{font-size:22px;color:var(--headColor)}
.dark .float-btn{background:rgba(0,0,0,.6);box-shadow:0 2px 8px rgba(255,255,255,.1)}
.dark .float-btn:hover{background:rgba(0,0,0,.75);box-shadow:0 4px 12px rgba(255,255,255,.15)}
.dark .goDark-mobile .icon-lightbulb-flash-line{color:#ffc008}
.header-menu .gore a:hover,.menu-item-has-children:hover>a{color:var(--themeColor)}
.header-menu .gore>li:hover>a::after{background:rgba(241,64,75,.3)!important}
.header-menu .gore>li:nth-child(1):hover>a::after{background:linear-gradient(90deg,rgba(168,85,247,.3),rgba(236,72,153,.3))!important}
.header-menu .gore>li:nth-child(2):hover>a::after{background:linear-gradient(90deg,rgba(59,130,246,.3),rgba(6,182,212,.3))!important}
.header-menu .gore>li:nth-child(3):hover>a::after{background:linear-gradient(90deg,rgba(16,185,129,.3),rgba(132,204,22,.3))!important}
.header-menu .gore>li:nth-child(4):hover>a::after{background:linear-gradient(90deg,rgba(245,158,11,.3),rgba(249,115,22,.3))!important}
.header-menu .gore>li:nth-child(5):hover>a::after{background:linear-gradient(90deg,rgba(239,68,68,.3),rgba(220,38,38,.3))!important}
.header-menu .gore>li.current-menu-item:hover>a::after{opacity:.8}
.menu-item-has-children:hover .sub-menu{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.menu-item-has-children:hover .menu-sign{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);color:var(--themeColor)}
}
@media (max-width:766px){:root{--termBarPadding:24px;--headHeight:50px;--logoHeight:30px;--headerMenuHeight:30px;--postGlobalMargin:20px}
.site-wrapper{margin:0;border-radius:0;max-width:100%}
#qrcode,.opQrcode{display:none!important}
.iconButton{padding:6px;width:18px;height:18px}
.iconButton .iconfont{font-size:18px}
.header-logo a.text{font-size:18px;padding-bottom:0}
.Copyright span:last-child,.goDark,.goQrcode,.goTrain,.link,.site-footer p{display:none}
.closeFind,.goFind,.openMenu{margin-left:0}
.goDark,.goQrcode,.goFind{margin-left:10px}
.mobile{display:block}
#goTop{display:none}
.mobile-float-buttons{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px;z-index:999;gap:10px}
.float-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--headColor);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;transition:all .3s ease;-webkit-tap-highlight-color:transparent;outline:none}
.float-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);background:rgba(255,255,255,.95)}
.float-btn:active{transform:none}
.float-btn .iconfont{font-size:20px;color:var(--headColor)}
.dark .float-btn{background:rgba(0,0,0,.6);box-shadow:0 2px 8px rgba(255,255,255,.1)}
.dark .float-btn:hover{background:rgba(0,0,0,.75);box-shadow:0 4px 12px rgba(255,255,255,.15)}
.dark .goDark-mobile .icon-lightbulb-flash-line{color:#ffc008}
.Copyright,.footer-nav-list{justify-content:center}
.header-container{justify-content:space-between;position:relative}
.header-logo{position:absolute;left:50%;transform:translateX(-50%);order:2}
.openMenu{order:1}
.goQrcode,.goDark,.goFind{order:3}
.term-illustrate,.trem-state{font-size:18px}
.header-menu{position:fixed;left:-100%;top:0;bottom:0;padding:var(--headHeight) 20px 0;width:240px;font-size:14px;background:var(--headbg);z-index:100;transition:all .3s cubic-bezier(.4,.01,.165,.99)}
.open-header-menu{left:0}
.menuButton{position:absolute;top:10px;right:20px;margin:0;border-radius:5px;background:var(--footerColor)}
.goDarkm{right:60px}
.header-menu .gore{display:block;margin:0;background:var(--footerColor);border-radius:10px}
.header-menu .gore>li{margin:0;border-bottom:1px solid var(--borderColor);min-height:50px;display:flex;align-items:flex-start;flex-direction:column}
.header-menu .gore>li:last-child{border-bottom:none}
.header-menu .gore>li>a{line-height:50px;width:calc(100% - 32px);padding:0 16px}
.header-menu .sub-menu{position:inherit;top:0;left:0;opacity:1;background:var(--submenuBg);width:100%;padding:0;visibility:visible;-webkit-transform:none;transform:none;box-shadow:none;border-radius:0;font-size:12px}
.gore li:last-child .sub-menu{border-radius:0 0 10px 10px}
.header-menu .sub-menu li{padding:0 16px;height:44px}
.header-menu .sub-menu a{line-height:44px;height:100%;display:inline-block;width:100%}
.menu-sign{position:absolute;top:9px;right:16px;width:16px;height:16px;padding:8px;margin-left:0;background:var(--headbg);border-radius:50%}
.open-menu-sign{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);color:var(--themeColor)}
.menu-item-has-children{overflow:hidden;height:0}
.open-menu-item-has-children{height:100%}
}
@media (max-width:720px){:root{--entryImgWidth:calc((100vw - 42px)*0.382)}
.entry-content{line-height:1.5}
.entry-thumb{padding-left:14px}
}
@media (max-width:640px){:root{--entryTitSize:14px}
.down-icon,.down-img,.entry-content,.rtime{display:none}
.entry-info .infoLeft,.post-info .infoLeft{margin-right:10px!important}
.down-detail .down-con{margin-left:0!important}
.related-post ul li{width:100%!important}
}
@media (max-width:449px){.pagenavi{flex-wrap:wrap;gap:6px}
.pagenavi .page-numbers{display:inline-block;margin:0;padding:4px 8px;font-size:11px}
.pagenavi .next,.pagenavi .prev{display:flex;padding:4px 10px}
.post-info .infoLeft{font-size:12px}
.post-info .iconfont{font-size:14px}
}
::-webkit-scrollbar{margin-right:2px;width:8px;height:8px}
::-webkit-scrollbar-thumb{width:8px;border-radius:2em;background:var(--webkit-scrollbar-thumb)}
.qrcode-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9999;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease}
.qrcode-modal.active{opacity:1;visibility:visible}
.qrcode-content{position:relative;text-align:center;animation:qrcodeZoomIn .3s ease}
.qrcode-image{max-width:300px;width:100%;height:auto;background:#fff;padding:20px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.3);display:block}
.qrcode-text{color:#fff;font-size:16px;margin-top:20px;letter-spacing:1px}
.closeQrcode{position:absolute;top:-50px;right:-50px;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease}
.closeQrcode:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.closeQrcode .iconfont{color:#fff;font-size:24px}
@keyframes qrcodeZoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:449px){.qrcode-content{padding:0 20px}
.qrcode-image{max-width:250px;padding:15px}
.qrcode-text{font-size:14px}
.closeQrcode{top:-45px;right:50%;transform:translateX(50%);width:36px;height:36px}
.closeQrcode:hover{transform:translateX(50%) rotate(90deg)}
}

/* 置顶文章卡片式布局 */
.sticky-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}

.sticky-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: stickyFadeIn 0.6s ease;
}

.sticky-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.dark .sticky-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .sticky-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sticky-card-link {
    display: block;
    width: 100%;
    height: 100%;
}

.sticky-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.sticky-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.8) 100%
    );
    transition: all 0.3s ease;
}

.sticky-card:hover .sticky-card-image::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.sticky-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    z-index: 2;
}

.sticky-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #f1404b 0%, #ff6b6b 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(241, 64, 75, 0.3);
    animation: stickyBounce 0.6s ease;
    line-height: 1;
}

.sticky-badge .iconfont {
    font-size: 12px;
    margin-right: 3px;
    animation: stickyRotate 3s ease-in-out infinite;
}

.dark .sticky-badge {
    background: linear-gradient(135deg, #f1636b 0%, #ff7b7b 100%);
    box-shadow: 0 2px 12px rgba(241, 99, 107, 0.4);
}

.sticky-card-title {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sticky-card:hover .sticky-card-title {
    transform: translateY(-2px);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* 动画效果 */
@keyframes stickyBounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes stickyRotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}

@keyframes stickyFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式布局 */
@media (max-width: 1024px) {
    .sticky-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 40px;
    }
    
    .sticky-card-image {
        height: 180px;
    }
    
    .sticky-card-title {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .sticky-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 35px;
    }
    
    .sticky-card-image {
        height: 180px;
    }
    
    .sticky-card-overlay {
        padding: 15px;
    }
    
    .sticky-badge {
        font-size: 11px;
        padding: 3px 10px;
        margin-bottom: 8px;
    }
    
    .sticky-badge .iconfont {
        font-size: 12px;
        margin-right: 3px;
    }
    
    .sticky-card-title {
        font-size: 14px;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .sticky-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }
    
    .sticky-card-image {
        height: 160px;
    }
    
    .sticky-card-overlay {
        padding: 12px;
    }
    
    .sticky-badge {
        font-size: 10px;
        padding: 2px 8px;
        margin-bottom: 6px;
    }
    
    .sticky-badge .iconfont {
        font-size: 11px;
        margin-right: 2px;
    }
    
    .sticky-card-title {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* 桌面端悬浮按钮组 */
.desktop-float-buttons {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    gap: 10px;
}

/* 视图切换按钮样式 - 单按钮 */
.view-toggle-single,
.view-toggle-single-mobile {
    border: none;
}

.view-toggle-single.active,
.view-toggle-single-mobile.active {
    background: var(--themeColor);
    color: #fff;
}

.dark .view-toggle-single.active,
.dark .view-toggle-single-mobile.active {
    background: var(--themeColor);
    color: #fff;
}

/* 暗黑模式按钮激活状态 - 只保留图标颜色，不填充背景 */
.goDark.active .icon-lightbulb-flash-line,
.goDark-mobile.active .icon-lightbulb-flash-line,
.goDarkm.active .icon-lightbulb-flash-line {
    color: #ffc008;
}


/* 普通文章卡片视图样式 */
.posts-container[data-current-view="grid"],
.view-grid .posts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* 当通过 data-current-view=grid 时，控制子项显示/隐藏 */
.posts-container[data-current-view="grid"] .post-list-item { display: none !important; }
.posts-container[data-current-view="grid"] .post-grid-item { display: block !important; }

/* 预加载卡片视图时隐藏列表项 */
.view-grid .post-list-item {
    display: none !important;
}

/* 预加载卡片视图时显示卡片项 */
.view-grid .post-grid-item {
    display: block !important;
}

/* 预加载卡片视图时按钮高亮 */
.view-grid .view-toggle-single,
.view-grid .view-toggle-single-mobile {
    background: var(--themeColor);
    color: #fff;
}

.post-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.post-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.dark .post-grid-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .post-grid-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.post-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.post-card-image {
    position: relative;
    width: 100%;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.post-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.8) 100%
    );
    transition: all 0.3s ease;
}

/* 卡片分类标签 */
.post-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.post-card-category {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    /*border: 1px solid rgba(0,0,0,.3);*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-grid-item:hover .post-card-category { 
    background: rgba(0,0,0,.8); 
    border-color: rgba(0,0,0,.4);
}

.dark .post-card-category { 
    background: rgba(0,0,0,.55); 
    border: 1px solid rgba(0,0,0,.4);
}

.dark .post-grid-item:hover .post-card-category {
    background: rgba(0,0,0,.65);
    border-color: rgba(0,0,0,.5);
}

.post-grid-item:hover .post-card-image::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.post-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    z-index: 2;
}

.post-card-title {
    margin: 0 0 12px 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.post-grid-item:hover .post-card-title {
    transform: translateY(-2px);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.post-card-meta {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.post-card-meta .iconfont {
    font-size: 14px;
}


/* 响应式适配 */
@media (min-width: 767px) {
    .mobile-float-buttons {
        display: none;
    }
}

@media (max-width: 766px) {
    .desktop-float-buttons {
        display: none !important;
    }
    
    /* 移动端卡片视图改为单列 */
    .posts-container[data-current-view="grid"],
    .view-grid .posts-container {
        grid-template-columns: 1fr;
    }
    
    .post-card-image {
        height: 165px;
    }
    
    .post-card-overlay {
        padding: 18px;
    }
    
    .post-card-title {
        font-size: 18px;
    }
    
    .post-card-category { font-size: 11px; padding: 2px 8px; }
    .post-card-meta {
        gap: 8px;
    }
}