/* ***************************************************************颜色************************************************************** */
:root {
    --gavin-blue1: rgb(0, 150, 255);
    --gavin-blue2: rgb(0, 136, 255);
    --gavin-blue3: rgb(0, 100, 255);
    /* HarmonyOS */
    --hmos-white-snow: rgb(241, 243, 245);

    /* --gavin-theme-color: var(--gavin-blue2); */
    --gavin-highlight: rgb(var(--gavin-theme-color));
    --gavin-highlight-op: rgba(var(--gavin-theme-color), .18);
    --gavin-highlight-op-1: rgba(var(--gavin-theme-color), .1);
    --gavin-highlight-op-6: rgba(var(--gavin-theme-color), .6);
    --gavin-theme-color-light: 0,100,255;
    /* 129, 78, 250; */
    --gavin-theme-color-dark: 0,150,255;
    /* 0, 234, 208; */
    --gavin-background: var(--gavin-grey-1);
    /* --gavin-theme-color-dark: 26, 251, 255; 亮蓝 */

    --font-color: rgba(var(--font-color-rgb), .85);
    --font-color-blod: rgba(var(--font-color-rgb), 1);
    --rightside-bg: rgba(var(--op), .1);
    /* --card-box-shadow: 0 0px 1px 1px rgba(7, 17, 27, .25); */
    /* --card-box-shadow: 0 0px 1px 1px var(--gavin-border-color);
    --card-hover-box-shadow: 0 0 1px 1px var(--gavin-border-hover-color); */
    --vercel-btn-bg: var(--dis-f-0);
    --vercel-btn-hover-bg: var(--f-0);
    --vercel-btn-border: var(--dis-f-0);
    --hr-border: var(--gavin-blue2);
    --hr-before-color: var(--gavin-blue2);
    --article-card: var(--gavin-widget-bg1);



    --twitter-btn: rgb(29, 155, 240);
    --twitter-btn-hover: rgba(29, 155, 240, 0.1);
    --twitter-font-size0: 20px;
    --twitter-font-size1: 16px;
    --twitter-font-size2: 15px;
    --twitter-font-size3: 13px;



    /* 以下是安知鱼颜色 */
    --gavin-shadow-border: 0 8px 16px -4px #2c2d300c;
    --gavin-theme-op: #4259ef23;
    --gavin-shadow-theme: 0 0px 7px -3px var(--gavin-theme-op);
    --gavin-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
    --style-border: 1px solid var(--gavin-card-border);
    --style-border-hover: 1px solid var(--gavin-blue2);
    --style-border-dashed: 1px dashed var(--gavin-theme-op);
    --style-border-avatar: 4px solid var(--gavin-background);
    --style-border-always: 1px solid var(--gavin-card-border);
    /* --anzhiyu-white: #fff;
    --anzhiyu-black: #000;
    --anzhiyu-none: rgba(0, 0, 0, 0);
    --anzhiyu-gray: #999999;
    --anzhiyu-yellow: #ffc93e;
    --anzhiyu-border-radius: 8px;
    --anzhiyu-main: var(--anzhiyu-theme);
    --anzhiyu-main-op: var(--anzhiyu-theme-op);
    --anzhiyu-shadow-main: 0 0px 7px -3px var(--anzhiyu-main-op);
    --anzhiyu-shadow-blue: 0 4px 12px -3px rgba(40, 109, 234, 0.2);
    --anzhiyu-shadow-white: 0 4px 12px -3px rgba(255, 255, 255, 0.2);
    --anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
    --anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
    --anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
    --anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
    --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    --anzhiyu-blue-main: #3b70fc;
    --anzhiyu-white-acrylic1: #fefeff !important;
    --anzhiyu-white-acrylic2: #fcfdff !important;
    --anzhiyu-black-acrylic2: #08080a !important;
    --anzhiyu-black-acrylic1: #0b0b0e !important; */
}

[data-theme="light"] {
    --op: 255, 255, 255;
    --op-dis: 0, 0, 0;
    --gavin-bg: 246, 247, 249;
    --f-0: #fff;
    --dis-f-0: #000;
    --gavin-op-1: rgba(255, 255, 255, .1);
    --gavin-op-3: rgba(255, 255, 255, .3);
    --gavin-op-5: rgba(255, 255, 255, .5);
    --gavin-op-7: rgba(255, 255, 255, .7);
    --gavin-op-dis-05: rgba(0, 0, 0, .05);
    --gavin-op-dis-15: rgba(0, 0, 0, .15);
    --gavin-op-dis-1: rgba(0, 0, 0, .1);
    --gavin-op-dis-2: rgba(0, 0, 0, .2);
    --gavin-op-dis-3: rgba(0, 0, 0, .3);
    --gavin-op-dis-4: rgba(0, 0, 0, .4);
    --gavin-op-dis-5: rgba(0, 0, 0, .5);
    --gavin-op-dis-6: rgba(0, 0, 0, .6);
    --gavin-op-dis-7: rgba(0, 0, 0, .7);
    --gavin-nav-bg: rgba(255, 255, 255, .72);
    --gavin-nav-hover: var(--gavin-highlight);
    /* --gavin-nav-hover: #814EFA; */
    --gavin-mask: rgba(0, 0, 0, .18);
    --gavin-page-bg: var(--gavin-blue1);
    /*页码颜色*/
    --gavin-toc-bg: var(--gavin-highlight);
    /*目录颜色*/
    /*rgba(51, 144, 255, .9)*/
    --gavin-scrollbar-dark: rgba(73, 177, 245, 1);
    --gavin-scrollbar-light: rgba(255, 255, 255, .4);
    --gavin-item-bg: rgba(60, 175, 250, 0.2);
    --gavin-item-border: rgba(50, 150, 250, .9);
    /* --gavin-border-color: #ddd; */
    --gavin-border-color: var(--gavin-grey-4);
    --gavin-border-hover-color: var(--gavin-blue3);
    --gavin-note-font-color: rgb(102, 102, 102);
    --gavin-hover-font-color: rgba(0, 0, 0, 1);
    /* --gavin-background: rgb(241, 243, 245); */
    --gavin-widget-bg1: var(--gavin-grey-2);
    --gavin-widget-bg2: var(--gavin-grey-3);
    --gavin-widget-bg3: rgb(206, 207, 209);
    --gavin-widget-bg4: rgb(255, 255, 255);
    --gavin-grey-1: rgb(246, 248, 253);
    --gavin-grey-2: rgb(241, 243, 248);
    --gavin-grey-3: rgb(236, 238, 243);
    --gavin-grey-4: rgb(231, 233, 238);
    --gavin-grey-5: rgb(226, 228, 233);
    --gavin-grey-6: rgb(221, 223, 228);
    --gavin-grey-7: rgb(216, 218, 223);
    /* --gavin-grey-8: rgb(211, 213, 218); */
    --gavin-grey-op-1: 136, 139, 144;
    --gavin-grey-op-2: 136, 139, 143;
    --gavin-tag-bg-1: var(--gavin-grey-3);
    --gavin-tag-bg-2: var(--gavin-grey-4);
    /* --gavin-highlight: #0064FF; */
    /* --gavin-highlight: #814EFA; */
    /* --gavin-highlight-op: #0064FF50; */
    /* --gavin-highlight-op: #814EFA23; */
    --gavin-theme-color: var(--gavin-theme-color-light);
    --gavin-switch-off: rgb(233, 233, 234);
    --gavin-switch-on: rgb(52, 199, 89);
    --gavin-ripple: rgba(255, 255, 255, .7);
    --gavin-shadow-1: 0 8px 12px -4px #2c2d300c;
    --gavin-shadow-2: 0 12px 16px -4px #2c2d3026;
    --gavin-shadow-3: 0 0 16px -4px #2c2d3066;
    --gavin-shadow-4: 0 0 16px -4px #2c2d3036;
    --gavin-scroll-bg: #ACADB3;
    --vercel-background: rgb(250, 250, 250);
    --vercel-border-color: rgb(197, 202, 217);
    --vercel-hover-bg: rgba(234, 234, 234, 1);
    /* --font-color: #2e2e2e; */
    --font-color-rgb: 50, 50, 50;
    /* rgb(45, 45, 45); */
    --search-bg: rgba(255, 255, 255, .64);
    --text-bg-hover: var(--gavin-blue1);
    --card-bg: #fff;
    --card-link-bg: rgba(0, 150, 255, .1);
    --card-link-border: rgba(0, 150, 255, .3);
    --system-logo: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/f15BG.webp);
    --web-bg: rgba(241, 243, 245, 0);
    --hl-bg: rgb(44, 48, 54);
    --hlnumber-bg: rgb(44, 48, 54);



    /* HarmonyOS */
    --hmos-theme: #0A59F7;


    --twitter-border: rgb(239, 243, 244);
    --twitter-item-bg: rgb(247, 249, 249);
    --twitter-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
    --twitter-text-note: rgb(83, 100, 113);
    --twitter-text: rgb(15, 20, 25);
    --twitter-btn-bg: rgb(15, 20, 25);
    --twitter-btn-hover: rgba(15, 20, 25, 0.1);
    --twitter-item-hover: rgba(0, 0, 0, 0.03);
    --twitter-item-active: rgba(0, 0, 0, 0.07);


    /* 以下是安知鱼/Heo颜色 */
    --gavin-card-bg: #fff;
    --gavin-secondtext: rgba(60, 60, 67, 0.6);
    --gavin-maskbg: rgba(255, 255, 255, 0.6);
    --gavin-maskbgdeep: rgba(255, 255, 255, 0.45);
    --gavin-secondbg: #edf0f7;
    --gavin-card-border: #c0c6d8;
    /* --anzhiyu-theme: rgba(0, 136, 255, .9);
    --anzhiyu-theme-op: #000000;
    --anzhiyu-blue: #3b70fc;
    --anzhiyu-red: #d8213c;
    --anzhiyu-pink: #ff7c7c;
    --anzhiyu-green: #57bd6a;
    --anzhiyu-fontcolor: #363636;
    --anzhiyu-background: #f7f9fe;
    --anzhiyu-reverse: #000;
    --anzhiyu-hovertext: var(--anzhiyu-theme);
    --anzhiyu-ahoverbg: #f7f7fa;
    --anzhiyu-lighttext: var(--anzhiyu-main);
    --anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
    --anzhiyu-card-btn-bg: #edf0f7;
    --anzhiyu-post-blockquote-bg: #fafcff;
    --anzhiyu-post-tabs-bg: #f2f5f8;
    --anzhiyu-secondbg: #edf0f7;
    --anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0); */

}

[data-theme="dark"] {
    --op: 0, 0, 0;
    --op-dis: 255, 255, 255;
    --gavin-bg: 17, 18, 20;
    /* --gavin-background: rgb(0, 0, 0); */
    --f-0: #000;
    --dis-f-0: #fff;
    --gavin-op-1: rgba(0, 0, 0, .1);
    --gavin-op-3: rgba(0, 0, 0, .3);
    --gavin-op-5: rgba(0, 0, 0, .5);
    --gavin-op-7: rgba(0, 0, 0, .7);
    --gavin-op-dis-05: rgba(255, 255, 255, .05);
    --gavin-op-dis-15: rgba(255, 255, 255, .15);
    --gavin-op-dis-1: rgba(255, 255, 255, .1);
    --gavin-op-dis-2: rgba(255, 255, 255, .2);
    --gavin-op-dis-3: rgba(255, 255, 255, .3);
    --gavin-op-dis-4: rgba(255, 255, 255, .4);
    --gavin-op-dis-5: rgba(255, 255, 255, .5);
    --gavin-op-dis-6: rgba(255, 255, 255, .6);
    --gavin-op-dis-7: rgba(255, 255, 255, .7);
    --gavin-nav-bg: rgba(0, 0, 0, .56);
    --gavin-nav-hover: var(--gavin-highlight-op-6);
    /* --gavin-nav-hover: #00EAD0; */
    --gavin-mask: rgba(255, 255, 255, .18);
    --gavin-page-bg: rgba(255, 255, 255, 0.8);
    /*页码颜色*/
    --gavin-toc-bg: rgba(255, 255, 255, .15);
    /*目录颜色*/
    /*rgba(51, 144, 255, .3); */
    --gavin-scrollbar-dark: #242424;
    --gavin-scrollbar-light: rgba(180, 180, 180, .4);
    --gavin-item-bg: rgba(240, 240, 240, .2);
    --gavin-item-border: rgba(240, 240, 240, .5);
    --gavin-border-color: var(--gavin-grey-5);
    --gavin-border-hover-color: var(--gavin-blue3);
    --gavin-note-font-color: rgb(136, 136, 136);
    --gavin-hover-font-color: rgba(255, 255, 255, .9);
    /*17,17,17*/
    --gavin-widget-bg1: var(--gavin-grey-4);
    /*38, 38, 38; rgb(46, 48, 51)*/
    --gavin-widget-bg2: var(--gavin-grey-5);
    --gavin-widget-bg3: rgb(70, 71, 73);
    --gavin-widget-bg4: rgb(44, 44, 46);
    /* --gavin-grey-1: rgb(16, 19, 22);
    --gavin-grey-2: rgb(24, 27, 30);
    --gavin-grey-3: rgb(32, 35, 38);
    --gavin-grey-4: rgb(40, 43, 46);
    --gavin-grey-5: rgb(48, 51, 54);
    --gavin-grey-6: rgb(56, 59, 62);
    --gavin-grey-7: rgb(64, 67, 70);
    --gavin-grey-8: rgb(72, 75, 78); */
    --gavin-grey-1: rgb(15, 18, 21);
    --gavin-grey-2: rgb(25, 28, 31);
    --gavin-grey-3: rgb(35, 38, 41);
    --gavin-grey-4: rgb(45, 48, 51);
    --gavin-grey-5: rgb(55, 58, 61);
    --gavin-grey-6: rgb(65, 68, 71);
    --gavin-grey-7: rgb(75, 78, 81);
    --gavin-grey-op-1: 136, 139, 144;
    --gavin-grey-op-2: 136, 139, 143;
    /*60, 60, 60; rgb(66, 67, 70)*/
    /* --gavin-highlight: #0096FF; */
    /* --gavin-highlight: #00EAD0; */
    /* --gavin-highlight-op: #0096FF50; */
    /* --gavin-highlight-op: #00EAD023; */
    --gavin-theme-color: var(--gavin-theme-color-dark);
    --gavin-switch-off: rgb(57, 57, 61);
    --gavin-switch-on: rgb(48, 209, 88);
    --gavin-ripple: rgba(255, 255, 255, .3);
    --gavin-shadow-1: 0 8px 12px -4px #00000050;
    --gavin-shadow-2: 0 12px 16px -4px #00000050;
    --gavin-shadow-3: 0 0 16px -4px #66666699;
    --gavin-shadow-4: 0 0 16px -4px #000000;
    --gavin-scroll-bg: #5E5E6A;
    --vercel-background: rgb(17, 17, 17);
    --vercel-border-color: rgb(66, 68, 74);
    --vercel-hover-bg: rgba(51, 51, 51, 1);
    /* --card-bg: rgb(21,23,25); */
    --card-bg: var(--gavin-grey-2);
    /*rgba(29, 30, 34, 1);*/
    --text-bg-hover: rgba(240, 240, 240, .24);
    --btn-bg: rgba(100, 100, 100, .8);
    --btn-hover-color: rgb(80, 80, 80);
    --card-link-bg: rgba(240, 240, 240, .1);
    --card-link-border: rgba(240, 240, 240, .3);
    --font-color-rgb: 236, 236, 240;
    /* rgb(210, 210, 210); */
    --search-bg: rgba(0, 0, 0, .64);
    --system-logo: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/f1olM.webp);
    --web-bg: rgba(0, 0, 0, 0.25);
    --hl-bg: rgb(40, 44, 48);
    --hlnumber-bg: rgb(40, 44, 48);
    --hltools-bg: rgb(36, 37, 38);



    /* HarmonyOS */
    --hmos-theme: #317AF7;

    --twitter-border: rgb(47, 51, 54);
    --twitter-item-bg: rgb(22, 24, 28);
    --twitter-shadow: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
    --twitter-text-note: rgb(113, 118, 123);
    --twitter-text: rgb(231, 233, 234);
    --twitter-btn-bg: rgb(239, 243, 244);
    --twitter-btn-hover: rgba(231, 233, 234, 0.1);
    --twitter-item-hover: rgba(255, 255, 255, 0.03);
    --twitter-item-active: rgba(255, 255, 255, 0.07);


    --supb-border: #2e2e2e;
    --supb-bg: #1c1c1c;
    --supb-bg2: hsla(0, 0%, 100%, .026);



    --gh-bg-1: var(--light-grad-pink-blue, radial-gradient(ellipse at 40% 0%, #bf398910 0, transparent 75%), radial-gradient(ellipse at 60% 0%, #096bde10 0, transparent 75%));

    --gh-dark-1: rgb(1, 4, 9);
    --gh-dark-2: rgb(13, 17, 23);
    --gh-dark-3: rgb(22, 27, 34);
    --gh-dark-4: rgb(33, 38, 45);
    --gh-dark-5: rgb(41, 47, 54);
    --gh-dark-6: rgb(48, 54, 61);
    --gh-dark-7: rgb(63, 67, 75);

    --gh-text-1: rgb(230, 237, 243);
    --gh-text-2: rgb(110, 118, 129);
    --gh-text-3: rgb(125, 133, 144);



    /* 以下是安知鱼/Heo颜色 */
    --gavin-card-bg: #1d1b26;
    --gavin-secondtext: #a1a2b8;
    --gavin-maskbg: rgba(0, 0, 0, 0.6);
    --gavin-maskbgdeep: rgba(0, 0, 0, 0.45);
    --gavin-secondbg: #30343f;
    --gavin-card-border: #42444a;
    /* --anzhiyu-theme: rgba(240, 240, 240, .24);
    --anzhiyu-theme-op: #0084ff23;
    --anzhiyu-blue: #0084ff;
    --anzhiyu-red: #ff3842;
    --anzhiyu-pink: #ff7c7c;
    --anzhiyu-green: #57bd6a;
    --anzhiyu-fontcolor: #f7f7fa;
    --anzhiyu-background: #18171d;
    --anzhiyu-reverse: #fff;
    --anzhiyu-hovertext: #0a84ff;
    --anzhiyu-ahoverbg: #fff;
    --anzhiyu-lighttext: #f2b94b;
    --anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
    --anzhiyu-card-btn-bg: #30343f;
    --anzhiyu-post-blockquote-bg: #000;
    --anzhiyu-post-tabs-bg: #121212;
    --anzhiyu-secondbg: #30343f;
    --anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0); */


}

@media screen and (max-width: 768px) {
    :root {
        --article-card: var(--card-bg);
    }
}

/* border-radius: 0;
  mask-image: paint(smooth-corners);    
  -webkit-mask-image: paint(smooth-corners);
  --smooth-level: 24; */

/* 
    轮播动效，第一个246px指的是元素视窗宽度，主要是使得移入的起点在视窗最右侧，使得文本完全移出的同时随即开始移入，保证动效的连贯性；
    第二个100%指的是移出文本元素的宽度，也就是文本需要完全移出。
    这里translateX里的值都是相对于元素的左端点的相对位移。
 */
@keyframes marquee-1 {
    0% {
        transform: translateX(246px);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes rippleAnim {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes spinner {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes coverFlow {
    0% {
        object-position: calc(50% - 75px);
    }

    25% {
        object-position: 50%;
    }

    50% {
        object-position: calc(50% + 75px);
    }

    75% {
        object-position: 50%;
    }

    100% {
        object-position: calc(50% - 75px);
    }
}

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

.spinner {
    opacity: 0.8;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side,
            var(--dis-f-0) 100%,
            #0000) top/var(--spinner-w) var(--spinner-w) no-repeat,
        conic-gradient(#0000 0%,
            var(--dis-f-0));
    -webkit-mask: radial-gradient(farthest-side,
            #0000 calc(100% - var(--spinner-w)),
            #000 0);
    mask: radial-gradient(farthest-side,
            #0000 calc(100% - var(--spinner-w)),
            #000 0);
    animation: spinner 1.5s infinite linear;
}


@keyframes fadeIn {
    from { 
        opacity: 0;
        pointer-events: none;
    }
    to { 
        opacity: 1;
        pointer-events: all;
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in forwards;
    transform: translateZ(0)
}

.fade-out {
    animation: fadeOut 0.3s ease-in backwards;
}


/* ******************通用CSS库******************** */
.eject {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transition: 0.5s ease;
    flex-direction: column;
    pointer-events: none;
}

.eject.show {
    pointer-events: all;
}

.eject-mask {
    background: var(--gavin-mask);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    opacity: 0;
    transition: 0.5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.show .eject-mask {
    /* -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px); */
    opacity: 1;
    transform: translateZ(0);
}

.eject-head {
    position: absolute;
    top: 30px;
    left: 5%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(-15px);
    transition: .5s ease;
}

.show .eject-head {
    opacity: 1;
    transform: translateY(0);
}

.eject-head>span {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    transition: 0.5s;
}

.eject-head-btns {
    gap: 15px;
}

.eject-head .settings-btn,
.eject-head .close-btn {
    width: 35px;
    height: 35px;
    color: #fff;
    cursor: pointer;
    transition: color 0.5s;
}

.eject-head .settings-btn i,
.eject-head .close-btn i {
    line-height: 1;
    font-size: 35px;
}

#global-mask.show {
    z-index: 998;
    opacity: 1;
    transform: translateZ(0);
}

@media screen and (max-width: 768px) {
    .eject-head {
        top: 15px;
        left: 20px;
        width: calc(100% - 40px);
    }

    .eject-head>span {
        font-size: 22px;
    }

    .eject-head .settings-btn,
    .eject-head .close-btn {
        width: 32px;
        height: 32px;
    }

    .eject-head .settings-btn i,
    .eject-head .close-btn i {
        font-size: 32px;
    }
}

.c-c {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 密码输入框 */
/* 密码输入框 */
.inputBoxMain {
    z-index: 999;
    opacity: 0;
    pointer-events: none;
}

.inputBoxMain.show {
    opacity: 1;
    pointer-events: all;
}

.inputBoxMain .inputBox {
    width: 300px;
    height: auto;
    background: var(--gavin-bg-3);
    border: 1px solid var(--gavin-border-color);
    border-radius: 18px;
    overflow: hidden;
    position: absolute;
    user-select: none;
    opacity: 1;
    pointer-events: all;
    transition: .5s ease;
}

.inputBoxMain.loading .inputBox {
    opacity: 0;
    pointer-events: none;
}

.inputBoxMain .content-body {
    width: 100%;
    height: auto;
    padding: 20px 20px 15px;
    position: relative;
}

.inputBoxMain .content-body span.title {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 8px;
    color: var(--dis-f-0);
}

.inputBoxMain .content-body span.tips {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    color: var(--gavin-note-font-color);
}

.inputBoxMain .content-body input {
    display: block;
    line-height: 1.3;
    width: 260px;
    height: 35px;
    border-radius: 6px;
    margin: 10px 0 0;
    padding: 4px 8px;
    color: var(--font-color);
    background: var(--f-0);
    border: 1px solid var(--gavin-border-color);
}

.inputBoxMain .content-body input:focus {
    outline: none;
}

.inputBoxMain .content-body input::placeholder {
    color: var(--gavin-note-font-color);
}

.inputBoxMain .content-bottom {
    width: 100%;
    height: 55px;
    border-top: 1px solid var(--gavin-border-color);
    display: flex;
}

.inputBoxMain .content-bottom .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-size: 1.1rem;
    color: var(--gavin-blue2);
    cursor: pointer;
}

.inputBoxMain .content-bottom .btn:first-child {
    border-right: 1px solid var(--gavin-border-color);
}

.inputBoxMain .content-bottom .btn:hover {
    background-color: rgba(var(--op-dis), .1);
}

.inputBoxMain .noteBox {
    width: 150px;
    height: 150px;
    background: var(--gavin-bg-3);
    border: 1px solid var(--gavin-border-color);
    border-radius: 15px;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease;
}

.inputBoxMain.loading .noteBox {
    opacity: 1;
    transition: .5s ease;
}

.inputBoxMain .noteBox .icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    color: var(--dis-f-0);
    font-size: 48px;
}

.inputBoxMain .noteBox .icon .spinner {
    --spinner-w: 5px;
    width: 48px;
}

.inputBoxMain .noteBox .tips {
    position: absolute;
    bottom: 27px;
    line-height: 1.3;
    font-size: 1rem;
    color: var(--font-color);
    text-align: center;
}


a:hover {
    color: var(--gavin-highlight);
}

hr {
    /* border: 1px dashed var(--dis-f-0); */
    border-width: 0;
}
/* 
hr::before {
    content: "";
} */

#page-header #site-title {
    font-family: xiaozhuan;
    font-weight: 100;
    user-select: none;
    font-size: 5em;
}

#article-container {
    /* font-family: Jinbu; */
    font-size: 1.05em;
    display: flex;
    flex-direction: column;
}

/* 加密文章适配 */
.hbe-container {
    margin: 0!important;
}

.hbe-container > div {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    #page-header #site-title {
        font-size: 3.6em;
    }

    #article-container {
        font-size: 1em;
    }
}

/* #aside-content .card-info .card-info-data {
    font-family: Jinbu;
} */

.gc-180 {
    transform: rotate(180deg);
}

.gc-45 {
    transform: rotate(45deg);
}

.fs-1 {
    font-size: 1.05em;
    line-height: 1;
    font-weight: 200;
}

.fs-2 {
    font-size: 1.15em;
    line-height: 1;
    font-weight: 200;
}

.fs-3 {
    font-size: 1.25em;
    line-height: 1;
    font-weight: 200;
}

/* ************************************************************导航栏***************************************************************** */

/* 
#nav-totop:hover .totopbtn i {
    opacity: 1;
}

#nav-totop #percent {
    width: 25px;
    height: 25px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    font-weight: 700;
}

#nav-totop:hover #percent {
    opacity: 0;
    transform: scale(1.5);
    font-weight: 700;
}

.nav-fixed #nav-totop #percent,
.page #nav-totop #percent {
    background: var(--font-color);
    color: var(--card-bg);
    font-size: 13px;
}

#page-header:not(.is-top-bar) #percent {
    transition: 0.3s;
}

#page-header:not(.is-top-bar) #nav-totop {
    width: 0;
    opacity: 0;
    transition: width 0.3s, opacity 0.2s;
    margin-left: 0 !important;
}

#nav-totop {
    display: flex;
    width: 35px;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

@media screen and (max-width: 768px) {
    #nav-totop {
        display: none;
    }
} */

#page-header #nav #nav-right div {
    margin-left: 0.5rem;
    padding: 0;
}

#menus {
    display: flex;
    align-items: center;
}

/* 导航栏字体大小 */
#nav .site-page {
    font-size: 0.85em;
    padding-bottom: 0px;
    text-shadow: none;
}

#nav *::after {
    background-color: transparent !important;
}

#page-header.nav-fixed #nav .mask-name-container #name-container #page-name:hover {
    color: var(--dis-f-0) !important;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

/* #page-header:not(.nav-visible) #nav .menus_items .menus_item .menus_item_child {
    display: none;
} */

#site-name {
    height: 35px;
    line-height: 35px;
    padding: 0 5px;
    position: relative;
    transition: 0.3s;
}

#site-name .site-logo {
    font-size: 21px!important;
    opacity: 1;
    padding: 0 4px;
    transition: opacity 0.2s ease-out;
}

#site-name i:not(.site-logo) {
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s ease-out;
}

#site-name:hover .site-logo {
    opacity: 0;
}

#site-name:hover i:not(.site-logo) {
    opacity: 1;
    color: #fff;
}

/* #site-name .title {
    font-family: 'logo';
    font-size: 25px;
    letter-spacing: -1px;
    opacity: 1;
    padding: 0 4px;
    transition: opacity 0.2s ease-out;
}

#site-name:hover .title {
    opacity: 0;
}

#site-name:hover i {
    opacity: 1;
    color: #fff;
} */

/* 圆角隐藏 */
ul.menus_item_child {
    border-radius: 5px;
}

/* 隐藏图标 */
#menus .site-page.child i:first-child,
#menus .site-page.group i:first-child {
    display: none;
}

/* 一级菜单居中 */
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 60px;
}

#nav .menus_items .menus_item .menus_item_child {
    top: 44px;
    /* 弧度微调 */
    border-radius: 12px;
    border: 1px solid var(--gavin-border-color);
    display: flex;
    flex-direction: row;
    gap: 5px;
    box-sizing: content-box;
    /* -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: var(--gavin-nav-bg); */
    background: var(--card-bg);
    padding: 5px;
    transform: translateY(-10px) scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}


/* 加上.nav-visible, 修复上滑时菜单仍然显示的bug */
.nav-visible #nav .menus_items .menus_item:hover .menus_item_child {
    transform: translateX(-50%);
    /* right: auto;
    left: auto !important; */
    /* line-height: 35px; */
    transform: translateY(0px) scale(1);
    opacity: 1;
    pointer-events: all;
}

#nav .menus_items .menus_item .menus_item_child li:hover a {
    color: #fff !important;
}

#nav .menus_items .menus_item .menus_item_child li {
    /* border-radius: 9px;
    overflow: hidden; */
    transition: all 0.3s;
    display: inline-block;
}

#nav .menus_items .menus_item .menus_item_child:before {
    top: -19px;
}

/* 背景色重复了 */
#nav .menus_items .menus_item .menus_item_child li:hover {
    background: none !important;
}

@media screen and (min-width: 768px) {
    .menus_item:hover>a.site-page {
        color: #fff !important;
        background: var(--gavin-nav-hover);
        transition: 0.3s;
    }
}

/* 毛玻璃特效 */
#nav {
    /* top: 0; */
    padding: 0 4.5%;
    /* -webkit-backdrop-filter: saturate(180%) blur(20px); */
    /* Warning: Also define the standard property '' for compatibility */
    /* backdrop-filter: saturate(180%) blur(20px); */
    /* saturate饱和度 contrast对比度 blur高斯模糊 */
    /* 以下是导航栏新改的 */
    background-color: var(--card-bg) !important;
    /* background-color: var(--gavin-nav-bg) !important; */
    border-bottom: 1px solid var(--gavin-border-color);
    /* box-shadow: var(--card-box-shadow) !important; */
    box-shadow: unset !important;
    transform: translateZ(0);
}

/* #nav::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
} */

header a,
header span,
header time,
header nav,
header img,
#head-cover {
    user-select: none;
}

/* 导航栏新改的 */
.nav-fixed #nav {
    transform: translateY(100%) !important;
}

#nav a {
    border-radius: 8px;
    color: var(--dis-f-0);
}

#nav a:hover {
    background: var(--gavin-nav-hover);
    transition: 0.3s;
}

/* 右侧和导航标题（主页时）图标样式 */
.page #nav a:hover {
    color: #fff !important;
    background: var(--gavin-nav-hover);
    transition: 0.3s;
}

#menus>div.menus_items>div>a {
    letter-spacing: 0.3rem;
    font-weight: 700;
    padding: 0em 0.4em 0em 0.6em;
    height: 35px;
    line-height: 35px;
}

#nav .menus_items .menus_item {
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
}

#page-name {
    position: relative;
    /* padding: 10px 30px; */
    font-size: 18px;
    /* font-weight: 600; */
}

center#name-container {
    position: absolute;
    width: 100%;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.nav-fixed.nav-visible #name-container {
    transition: 0.3s;
    transform: translate(-50%, 60px);
}

.nav-fixed.nav-visible #menus .menus_items {
    transform: translate(-50%);
    transition: 0.3s;
    line-height: 35px;
}

.nav-fixed #menus .menus_items {
    transform: translate(-50%, -60px);
    transition: 0.3s;
}

.nav-fixed #name-container {
    top: 15%;
    transition: 0.3s;
}

.mask-name-container {
    max-width: 1200px;
    width: 50%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 992px) {
    .mask-name-container {
        width: 65%;
    }
}

@media screen and (max-width: 768px) {
    .mask-name-container {
        display: none;
    }
}

/* 导航栏箭头“>”去掉 */
#nav .menus_items .menus_item>a>i:last-child {
    display: none;
}

/* 左上角6点（菜单）按钮样式 */
.back-home-button:hover {
    background: var(--gavin-nav-hover);
    color: #fff !important;
}

.back-home-button {
    display: flex;
    color: var(--dis-f-0);
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border-radius: 8px;
    position: relative;
}

#nav.hide-menu .back-home-button {
    display: none;
}

#nav #blog_name {
    flex-wrap: nowrap;
    height: 60px;
    display: flex;
    align-items: center;
    /* z-index: 102; */
    transition: 0.3s;
}

/* @media screen and (min-width: 1300px) {
    #nav a:hover {
        transform: scale(1.03);
    }
} */

#page-header #nav .nav-button {
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
}

#page-header #nav .nav-button a {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-header #nav .nav-button i {
    font-size: 24px;
    line-height: 1;
    /* color: var(--dis-f-0); */
}

#page-header:not(.is-top-bar) #nav-totop a {
    display: none;
}

#search-button a.site-page.social-icon.search span {
    display: none;
}

/* #aside-content .sticky_layout {
    top: 80px;
} */

/* 导航栏置顶后透明 */
#body-wrap #page-header:not(.is-top-bar) #nav {
    background: rgb(0 0 0 / 0%) !important;
    /* box-shadow: none !important; */
    border-color: transparent;
    transform: translateZ(0);
}

#body-wrap #page-header:not(.is-top-bar) #nav::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* #body-wrap #page-header:not(.is-top-bar) #nav #he-plugin-simple,
#body-wrap #page-header:not(.is-top-bar) #nav .back-home-button,
#body-wrap #page-header:not(.is-top-bar) #nav .site-page.group,
#body-wrap #page-header:not(.is-top-bar) #nav #site-name,
#body-wrap #page-header:not(.is-top-bar) #nav #page-name,
#body-wrap #page-header:not(.is-top-bar) #nav #toggle-menu a,
#body-wrap #page-header:not(.is-top-bar) #nav .nav-button a {
    color: rgba(255, 255, 255, .8) !important;
} */

/* #body-wrap.home #page-header:not(.is-top-bar) #nav #he-plugin-simple div, */
#body-wrap.home #page-header:not(.is-top-bar) #nav .back-home-button,
#body-wrap.home #page-header:not(.is-top-bar) #nav .site-page.group,
#body-wrap.home #page-header:not(.is-top-bar) #nav #site-name,
#body-wrap.home #page-header:not(.is-top-bar) #nav #page-name,
#body-wrap.home #page-header:not(.is-top-bar) #nav #toggle-menu a,
#body-wrap.home #page-header:not(.is-top-bar) #nav .nav-button a,
/* #body-wrap.post #page-header:not(.is-top-bar) #nav #he-plugin-simple div, */
#body-wrap.post #page-header:not(.is-top-bar) #nav .back-home-button,
#body-wrap.post #page-header:not(.is-top-bar) #nav .site-page.group,
#body-wrap.post #page-header:not(.is-top-bar) #nav #site-name,
#body-wrap.post #page-header:not(.is-top-bar) #nav #page-name,
#body-wrap.post #page-header:not(.is-top-bar) #nav #toggle-menu a,
#body-wrap.post #page-header:not(.is-top-bar) #nav .nav-button a {
    color: #fff !important;
}

#body-wrap.home #page-header:not(.is-top-bar) #nav .back-home-button:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav .site-page.group:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav #site-name:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav #page-name:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav #toggle-menu a:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav .nav-button a:hover,
#body-wrap.home #page-header:not(.is-top-bar) #nav .menus_item:hover>a.site-page,
#body-wrap.post #page-header:not(.is-top-bar) #nav .back-home-button:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav .site-page.group:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav #site-name:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav #page-name:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav #toggle-menu a:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav .nav-button a:hover,
#body-wrap.post #page-header:not(.is-top-bar) #nav .menus_item:hover>a.site-page {
    background: rgba(255, 255, 255, .15) !important;
}

/* 导航栏标题样式（nav-fixed下） */
#page-header.nav-fixed #nav a:hover {
    color: #ffffff;
    /* box-shadow: var(--anzhiyu-shadow-main); */
}

#page-header.nav-fixed #nav a:hover,
#page-header.nav-fixed #nav #site-name:hover,
#page-header.nav-fixed #nav #toggle-menu:hover {
    box-shadow: none;
}

/* 导航栏帧率显示 */
#fps-box {
    position: absolute;
    left: 15px;
    display: none;
    flex-direction: column;
}

@media screen and (max-width: 850px) {
    #fps-box {
        left: calc(4.5% + 130px);
    }
}

#fps-box span {
    line-height: 1;
    font-size: 11px;
    color: rgba(var(--op-dis), .5);
    transition: .3s;
}

#fps-box .fps-text {
    color: var(--dis-f-0);
}

#body-wrap.home #page-header:not(.is-top-bar) #nav #fps-box span,
#body-wrap.post #page-header:not(.is-top-bar) #nav #fps-box span {
    color: rgba(255, 255, 255, .5);
}

#body-wrap.home #page-header:not(.is-top-bar) #nav #fps-box .fps-text,
#body-wrap.post #page-header:not(.is-top-bar) #nav #fps-box .fps-text {
    color: rgba(255, 255, 255, .8);
}

/* ************************************************************滚动条样式********************************************************** */
*::-webkit-scrollbar {
    width: 9px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background-color: var(--gavin-background);
}

*::-webkit-scrollbar-thumb {
    /* --gavin-scroll-bg */
    background-color: rgba(var(--gavin-theme-color), .4);
    border-radius: 2em;
    border: 2px solid var(--gavin-background); /* 可以留有空隙 */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--gavin-highlight) !important;
}

*::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ::-webkit-scrollbar-thumb {
    background-image: -webkit-linear-gradient(
        45deg,
        transparent 20%,
        var(--gavin-scrollbar-light) 20%,
        var(--gavin-scrollbar-light) 40%,
        transparent 40%,
        transparent 60%,
        var(--gavin-scrollbar-light) 60%,
        var(--gavin-scrollbar-light) 80%,
        transparent 80%,
        transparent
        );
} */

/* ********侧边栏添加滚动进度百分比*********** */

@media screen and (max-width: 900px) {
    #rightside {
        right: -78px;
    }

    #rightside>div>button,
    #rightside>div>a {
        width: 35px;
        height: 35px;
        font-size: 90%;
        margin-bottom: 5px;
    }
}

#go-up i {
    opacity: 0;
    position: absolute;
    transform: translateZ(-10px);
    transition: opacity .3s, transform .3s;
}

#percent {
    opacity: 1;
    transform: translateZ(10px) scale(1);
    transition: opacity .3s, transform .3s;
}

#go-up:hover i {
    opacity: 1;
    transform: translateZ(10px);
}

#go-up:hover #percent {
    opacity: 0;
    transform: translateZ(-10px) scale(0);
}

/* ******************************************************************微调************************************************************ */
a {
    color: var(--dis-f-0);
}

/* 
.page.home .layout {
    padding-top: 80px;
} */

/* 设置目录弧度和颜色 */
#aside-content #card-toc .toc-content .toc-link.active {
    background: var(--gavin-nav-hover);
    border-radius: 0.4em;
}

#aside-content #card-toc .toc-content .toc-link {
    border-radius: 0.4em;
}

#aside-content #card-toc .toc-content .toc-link:not(.active):hover {
    /* background-color: var(--gavin-nav-hover);
    color: #fff; */
    background-color: var(--gavin-highlight-op-1);
    color: var(--gavin-highlight);
}

/* Follow Me按钮弧度 */
#aside-content .card-info #card-info-btn {
    border-radius: 8px;
    background: var(--gavin-widget-bg1);
    color: var(--dis-f-0);
    border: 1px solid var(--gavin-border-color);
    margin: 10px 7% 0;
}

#aside-content .card-info #card-info-btn:hover {
    color: var(--f-0);
    background: var(--dis-f-0);
}

/* Tag页、Category页标签样式 */
.tag-cloud-list a::before {
    content: '\f292';
    position: relative;
    opacity: .4;
    margin-right: 0.15em;
    font-size: 70%;
    font-family: "Font Awesome 6 Free";
}

.tag-cloud-list a sup {
    opacity: .5;
    margin-left: 0.1em;
}

.tag-cloud-list a {
    font-size: 1.5rem !important;
    margin: 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--gavin-border-color);
    border-radius: 10px;
    color: var(--dis-f-0) !important;
}

.category-lists ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.category-lists ul li {
    border-radius: 10px;
    background-color: var(--card-bg);
    border: 1px solid var(--gavin-border-color);
    margin: 0;
    padding: 0.12em 0.67em 0.12em 2em !important;
    display: flex;
    align-items: center;
}

.category-lists ul li:before {
    left: 0.67em;
    top: calc(50% - 0.43em);
}

.category-lists .category-list a {
    font-size: 1.4rem
}

@media screen and (max-width: 768px) {
    .tag-cloud-list a {
        font-size: 1.3rem !important;
    }

    .category-lists .category-list a {
        font-size: 1.2rem;
    }
}

/* 搜索页面毛玻璃 */
#search-mask {
    background-color: rgba(var(--op-dis), .1);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transform: translateZ(0);
}

.search-dialog {
    /* border: 1px solid grey; */
    border-radius: 16px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 20;
    background: var(--search-bg);
    -webkit-backdrop-filter: blur(70px);
    backdrop-filter: blur(70px);
    transform: translateZ(0);
}

@media screen and (max-width: 768px) {
    .search-dialog {
        border-radius: 0;
        --smooth-level: 0;
    }
}

/* .search-dialog:hover {
    box-shadow: var(--card-hover-box-shadow);
} */


#algolia-search .search-dialog .ais-SearchBox input {
    border: 1px solid rgba(var(--op-dis), .05);
    background-color: rgba(var(--op-dis), .05);
    border-radius: 8px;
    padding: 5px 12px;
    color: var(--font-color);
    line-height: 1.3;
    height: 36px;
}

.search-dialog .search-nav .search-close-button {
    color: var(--dis-f-0);
}

#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link {
    border-radius: 4px;
}

#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item--selected a {
    background: var(--gavin-highlight);
    color: var(--f-0);
}

#algolia-search .search-dialog .ais-SearchBox input:focus {
    background-color: rgba(var(--op-dis), .08);
    outline: 6px solid var(--gavin-highlight-op);
    border-color: var(--gavin-highlight);
}

#algolia-search .search-dialog .ais-SearchBox input::placeholder {
    color: var(--gavin-note-font-color);
    /* font-size: 0.9rem; */
}

/* .search-dialog hr {
    border-color: var(--font-color);
    border-width: 0;
} */

.search-dialog-title {
    color: var(--dis-f-0);
    font-weight: bold;
}

#algolia-search .search-dialog .ais-Hits-list a:hover {
    color: var(--gavin-highlight);
}

#algolia-search .search-dialog .ais-Hits-list mark {
    color: var(--gavin-highlight);
}

#algolia-search .search-dialog .ais-Hits-list li {
    border-radius: 8px;
    background-color: rgba(var(--op-dis), .05);
    margin: 7px 0;
    padding: 0.12em 0.4em 0.12em 2em !important;
}

#algolia-search .search-dialog .ais-Hits-list li:before {
    left: 0.67em;
}

#algolia-hits>div::-webkit-scrollbar {
    display: none
}

#algolia-hits>div {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(0deg, transparent, #fff 7px, #fff calc(100% - 7px), transparent);
    mask-image: linear-gradient(0deg, transparent, #fff 7px, #fff calc(100% - 7px), transparent);
}

.algolia-poweredBy .ais-PoweredBy.ais-PoweredBy--light a svg path:first-child {
    fill: var(--gavin-highlight-op);
}

.algolia-poweredBy .ais-PoweredBy.ais-PoweredBy--light a svg path:last-child {
    fill: var(--gavin-highlight);
}

/* 部分box微调：弧度调整 */
/* 第一个是相关文章，第二个是上下篇*/
.relatedPosts>.relatedPosts-list>div,
#pagination.pagination-post {
    border-radius: 12px;
    /* mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 14; */
}

@media screen and (min-width: 768px) {
    .cardHover:hover,
    .error404 #error-wrap .error-content:hover,
    #recent-posts>.recent-post-item:hover,
    .layout>.recent-posts .pagination>*:not(.space):hover {
        box-shadow: 0 8px 12px -3px var(--gavin-highlight-op);
        border-color: var(--gavin-highlight);
    }
}

#aside-content .card-widget:hover,
.layout>div:first-child:not(.recent-posts):hover {
    box-shadow: var(--gavin-shadow-1);
}

#aside-content .aside-list>.aside-list-item {
    border-radius: 10px;
    /*0.5rem*/
    padding: 8px !important;
    transition: all 0.3s;
    position: relative;
}

a.aside-list-item-head {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
}

#aside-content .aside-list>.aside-list-item:hover {
    background-color: var(--gavin-nav-hover);
    /* cursor: pointer; */
    /* padding: 0.6rem 0.7rem!important; */
}

#aside-content .aside-list>.aside-list-item:hover .content .title,
#aside-content .aside-list>.aside-list-item:hover .content time {
    color: #ffffff;
}

#aside-content .aside-list>.aside-list-item:not(:last-child) {
    border-bottom: none !important;
}

#aside-content .aside-list>.aside-list-item .thumbnail,
#aside-content .aside-list>.aside-list-item .thumbnail>img {
    border-radius: 8px;
}

/* 侧边栏个人信息卡片 */
/* #aside-content .card-info .author-info__name {
    font-weight: bold;
    position: relative;
    z-index: 1;
}

#aside-content .card-info #card-info-btn,
#aside-content .card-info .card-info-data,
#aside-content .card-info .author-info__description {
    position: relative;
    z-index: 1;
}

.avatar-img img {
    border-radius: 50%;
    border: 3px solid #fff;
}

.avatar-img {
    height: 100px;
    width: 100px;
    position: relative;
    z-index: 1;
}

.ripples {
    position: absolute;
    top: 1rem;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    background-color: var(--gavin-ripple);
    animation: rippleAnim 5s infinite ease-out;
}

.ripple1 {
    animation-delay: 0s;
}

.ripple2 {
    animation-delay: 1s;
}

.ripple3 {
    animation-delay: 2s;
}

#aside-content>.card-info {
    background: #fff url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/SOTIX.webp) top center / 100% 60% no-repeat;
}

[data-theme=dark] #aside-content>.card-info {
    background: var(--card-bg);
} */

/*********** 侧边栏个人信息卡片（新版） **************/

#aside-content>.card-info {
    height: 200px;
}

.card-info .card-info-bg {
    height: 95px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.card-info .card-info-bg img {
    width: 100%;
    position: absolute;
    top: -64px;
}

.card-info .author-avatar {
    width: 80px;
    height: 80px;
    position: relative;
    top: 25px;
    left: 10px;
    background: var(--card-bg);
    border: 3px solid var(--card-bg);
    border-radius: 50%;
}

.card-info .author-avatar::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-image: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/202311060926243.webp);
    background-size: 100% 100%;
    border: 3px solid var(--card-bg);
    box-sizing: border-box;
    z-index: 1;
}

.card-info .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.card-info .author-info-name {
    font-size: 24px;
    line-height: 35px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.7);
    font-weight: bold;
    position: absolute;
    top: 55px;
    left: 120px;
}

.card-info .author-info-desc {
    font-size: 15px;
    line-height: 24px;
    color: grey;
    position: absolute;
    top: 120px;
    left: 20px;
}

.card-info .blog-info {
    position: absolute;
    top: 98px;
    left: 120px;
    gap: 15px;
}

.card-info .blog-info .blog-info-headline {
    font-size: 14px;
    line-height: 18px;
    margin-left: 2px;
    color: grey;
}

.card-info .blog-info .blog-info-num {
    font-size: 14px;
    line-height: 18px;
    color: var(--dis-f-0);
}

.card-info .card-btns {
    position: absolute;
    top: 150px;
    left: 20px;
    width: calc(100% - 40px);
    gap: 10px;
}

.card-info .card-btns .btn-left {
    border-radius: 5px;
    background-color: var(--gavin-blue2);
    color: #fff;
    height: 30px;
    width: 100%;
    font-size: 15px;
}

.card-info .card-btns .btn-right {
    border-radius: 5px;
    border: 1px solid var(--gavin-blue2);
    color: var(--gavin-blue2);
    height: 30px;
    width: 100%;
    font-size: 15px;
}

.card-info .card-btns .btn-left:hover {
    background-color: var(--gavin-blue3);
}

.card-info .card-btns .btn-right:hover {
    border-color: var(--gavin-blue3);
    color: var(--gavin-blue3);
}

.card-info .card-btns a span {
    margin-left: 6px;
}

.card-info .author-info-social {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 5px;
}

.card-info .more-info i {
    font-size: 18px;
}

.card-info .author-info-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.36);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
}

.card-info .author-info-social .social-icons {
    display: flex;
    gap: 5px;
}

.card-info .author-info-social .social-icons a {
    opacity: 0;
    pointer-events: none;
}

.card-info .author-info-social .social-icons.show a{
    opacity: 1;
    pointer-events: all;
}

/* 打赏 */
.post-reward .reward-main .reward-all .reward-item img {
    border-radius: 8px;
    border: 1px solid var(--gavin-border-color);
}

.post-reward .reward-main .reward-all {
    border-radius: 12px;
    box-shadow: var(--gavin-shadow-4);
    border: 1px solid var(--gavin-border-color);
}

/* 文章图片 */
#article-container img {
    border-radius: 8px;
    max-height: 300px;
}

/* 文章图片底部注释 */
.img-alt.is-center {
    font-size: 13px;
    line-height: 1;
    display: block;
}

#content-inner> :not(#post) .img-alt.is-center {
    display: none;
}

/* 公式 */
span.mathjax-overflow {
    padding: 0 3px;
    overflow: hidden;
}

mjx-mspace {
    display: block;
    height: 4px;
}

mjx-container[jax="CHTML"][display="true"] {
    margin: 0 0 0.5em;
}

mjx-container[jax="CHTML"] {
    font-size: 110% !important;
}

/* 文章页封面 */

/* #body-wrap.post #page-header {
    -webkit-box-shadow: inset 0 -13vh 100vh 0 var(--gavin-theme-color), inset 20vw 0 100vw 0 var(--gavin-theme-color), inset -11vw 0 100vh 0 var(--gavin-theme-color), inset 0 9vh 100vh 0 var(--gavin-theme-color);
    box-shadow: inset 0 -13vh 100vh 0 var(--gavin-theme-color), inset 20vw 0 100vw 0 var(--gavin-theme-color), inset -11vw 0 100vh 0 var(--gavin-theme-color), inset 0 9vh 100vh 0 var(--gavin-theme-color);
} */

/* #page-header {
    background-color: var(--gavin-background);
} */

img#post-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-theme='dark'] img#post-cover {
    filter: none;
}
/* 
.home img#post-cover {
    opacity: 0;
}

#page-header::before {
    background: transparent !important;
} */

#page-header #post-info {
    top: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% + 0px);
    justify-content: center;
    text-align: left;
    padding: 0 5%;
    animation: slide-in 0.6s 0s backwards;
}

#post-info .post-title {
    font-weight: bold;
    line-height: 1.3;
    margin: 1rem 0;
}

@media screen and (min-width: 1300px) {
    #post-info .post-title {
        font-size: 3em;
    }
}

@media screen and (max-width: 450px) {
    #post-info .post-title {
        font-size: 1.75em;
    }
}

/* @media screen and (min-width: 768px) {
    #post-info #post-meta > .meta-secondline > span:first-child {
        display: inline;
    }
}

#post-info #post-meta > .meta-firstline,
#post-info #post-meta > .meta-secondline {
    display: inline;
} */

a.post-meta-categories {
    border-radius: 8px;
    padding: 5px 10px;
    color: #000;
    font-weight: bold;
    margin-right: 8px;
    background: #fff;
}

span.post-meta-categories {
    margin-right: 1rem;
}

/* a.post-meta-categories:hover {
    color: var(--f-0);
    background: var(--gavin-highlight);
} */

#post-info #post-meta-top {
    font-size: 95%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.post-meta-tag-list,
#post-info #post-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.post-meta-tag-list a {
    margin-right: 10px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .7);
}

.post-meta-tag-list a::before {
    content: '\f292';
    position: relative;
    opacity: .4;
    margin-right: 0.15em;
    font-size: 70%;
    font-family: "Font Awesome 6 Free";
}

.post-meta-tag-list a:hover {
    color: #fff;
}

.post-meta-bottom {
    background-color: rgba(255, 255, 255, .12);
    padding: 7px;
    margin: 3px 6px 3px 0;
    border-radius: 8px;
    line-height: 1;
}

.post-meta-commentcount {
    cursor: pointer;
    transition: all .3s;
}

.post-meta-commentcount:hover {
    background-color: var(--gavin-nav-hover);
    color: #fff !important;
}

@media screen and (max-width: 768px) {
    .post-meta-tag-list {
        display: none;
    }

    a.post-meta-categories {
        font-size: 85%;
        border-radius: 7px;
    }

    .post-meta-bottom {
        border-radius: 7px;
    }
}

/* 修复全局字体带来的bug */
#aside-content #card-toc .toc-percentage {
    font-size: 130%;
}

/* 文章封面模糊 */
#page-header.post-bg::before {
    -webkit-backdrop-filter: saturate(180%) blur(50px);
    backdrop-filter: saturate(180%) blur(50px);
    background-color: rgba(0, 0, 0, .16);
    transform: translateZ(0);
}

[data-theme="dark"] #page-header.post-bg::before {
    background-color: rgba(0, 0, 0, .45);
}

#page-header.full_page #site-info {
    top: 30%;
}

body div {
    transition: background-color 0.5s;
}

/* 页码前进后退 */
a.extend.next {
    margin-right: 0px !important;
    right: 0;
    order: 3;
}

a.extend.prev {
    margin-left: 0px !important;
    left: 0;
    order: 1;
}

a.extend {
    position: absolute;
    color: var(--dis-f-0);
    background-color: var(--card-bg);
    border-radius: 8px;
    /* box-shadow: var(--card-box-shadow); */
    width: 5em !important;
    height: 2.5em !important;
    line-height: 2.5em !important;
}

#pagination a.extend.prev .pagination_tips_prev,
#pagination a.extend.next .pagination_tips_next {
    display: none;
}

#pagination a.extend i {
    display: inline-block;
}

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

    #pagination a.extend.prev .pagination_tips_prev,
    #pagination a.extend.next .pagination_tips_next {
        display: inline-block;
    }

    #pagination a.extend i,
    #pagination a.page-number,
    #pagination span.page-number.current,
    /* #pagination input.toPageInput, */
    #pagination span.space {
        display: none;
    }

    #pagination a.extend {
        width: 100% !important;
        margin: 0;
        position: relative;
    }

    input.toPageInput {
        width: 100% !important;
        margin: 0 !important;
    }

    #pagination .pagination {
        gap: 0.5rem;
    }
}

input.toPageInput {
    text-align: center;
    color: var(--dis-f-0) !important;
    order: 2;
}

input.toPageInput:focus {
    outline: none;
}

input.toPageInput::placeholder {
    /* color: var(--gavin-note-font-color); */
    color: var(--font-color);
    /* opacity: .7; */
}

input.toPageInput:focus::placeholder {
    opacity: 0;
}

input.toPageInput::-webkit-search-cancel-button {  
    display: none;  
}

#pagination .pagination {
    position: relative;
    display: flex;
    justify-content: center;
}

#pagination .pagination>*:not(.space) {
    color: var(--dis-f-0);
    min-width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    /* box-shadow: var(--card-box-shadow); */
    /* box-shadow: unset; */
    box-shadow: var(--gavin-shadow-1);
    border: 1px solid var(--gavin-border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
}

@media screen and (min-width: 768px) {
    #pagination .pagination>*:not(.space):hover {
        background-color: var(--card-bg);
        color: var(--gavin-highlight);
        /* box-shadow: var(--card-hover-box-shadow); */
        /* box-shadow: unset; */
        box-shadow: 0 4px 12px -3px var(--gavin-highlight-op);
        border-color: var(--gavin-highlight);
    }
}

#pagination .page-number.current {
    background: var(--gavin-nav-hover) !important;
    border-color: var(--gavin-highlight);
    color: #fff !important;
    box-shadow: 0 4px 12px -3px var(--gavin-highlight-op);
}

#pagination .pagination>* {
    display: inline-block;
    margin: 0 6px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
}

/* 文章页链接样式 */
#post #article-container a,
.tk-comment .tk-content a:not(.tk-ruser),
.timeline-item-content a {
    /* color: var(--dis-f-0); */
    /* font-weight: bold; */
    border-bottom: 2px dashed var(--gavin-highlight);
}

#post #article-container a:hover,
.tk-comment .tk-content a:not(.tk-ruser):hover,
.timeline-item-content a:hover {
    color: var(--gavin-highlight);
    text-decoration: none;
}

/* 文章引用和参考文献样式 */
/* #article-container .reference a {
    font-size: 75%;
    margin: 0 3px;
    border: none !important;
    color: var(--gavin-highlight) !important;
}

#article-container .reference-source {
    line-height: 1.5;
}

#article-container .reference-source a,
#article-container .reference-source span {
    font-size: 85%;
    font-weight: 500!important;
    border-bottom: unset!important;
    color: var(--gavin-note-font-color);
}

#article-container .reference-source a.reference-link {
    text-decoration: underline!important;
}

#article-container .reference-source .reference-anchor {
    margin-right: 5px;
}

.reference-title {
    display: none;
} */

/* 文本选中样式 */
*::selection {
    color: #fff;
    background: var(--gavin-blue2);
}

/* 文章各级标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    padding-left: 0 !important;
    color: var(--dis-f-0);
    transition: .3s;
}

#article-container.post-content h2 {
    line-height: 1.8em;
    font-size: 1.6em;
    /* padding-bottom: 0.4em; */
    border-bottom: 1px dashed var(--gavin-border-color);
    margin: 1.6em 0 .8em;
}

#article-container.post-content h3 {
    line-height: 1.4em;
    font-size: 1.3em;
    margin: 1em 0;
}

#article-container.post-content h4 {
    line-height: 1.2em;
    font-size: 1.1em;
    margin: 0.8em 0;
}

#article-container.post-content {
    counter-reset: h2-counter;
    /* 初始化计数器 */
}

#article-container.post-content h2 {
    counter-reset: h3-counter;
    /* 每个h2重置h3计数器 */
}

#article-container.post-content h3 {
    counter-reset: h4-counter;
    /* 每个h3重置h4计数器 */
}

#article-container.post-content h2::before {
    counter-increment: h2-counter;
    content: counter(h2-counter) ". ";
    /* 显示格式：1. */
}

#article-container.post-content h3::before {
    counter-increment: h3-counter;
    content: counter(h2-counter) "." counter(h3-counter) " ";
    /* 显示格式：1.1 */
}

#article-container.post-content h4::before {
    counter-increment: h4-counter;
    content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
    /* 显示格式：1.1.1 */
}

#article-container .headerlink::before {
    content: "\f0c1";
    font-family: "Font Awesome 5 Free";
}

#article-container .headerlink {
    float: right;
    border: none !important;
    text-decoration: none !important;
    font-size: 1.2rem;
    opacity: 0.1;
}

#article-container .headerlink:hover {
    opacity: 1;
}

#article-container .line-right {
    text-align: right;
}

/* 字间距 */
#article-container p,
#article-container li {
    /* letter-spacing: 0.5px; */
    line-height: 1.75rem;
    text-align: justify;
    word-break: break-all;
}

#article-container ol,
#article-container ul:not(.amap-ctrl-base-layer, .amap-ctrl-overlay-layer) {
    padding-inline-start: 1.6em;
    list-style: none;
    counter-reset: li 0;
    margin: 0.5em 0;
}

#article-container blockquote p {
    opacity: 0.7;
    font-size: 90%;
    line-height: 1.6rem;
    margin: 0.85rem 0 0.85rem;
}

#article-container p b,
#article-container p strong {
    color: var(--dis-f-0);
    margin: 0 .15em;
}

#article-container u {
    color: var(--font-color);
    text-decoration: none;
    border-bottom: 1px solid var(--dis-f-0);
}

#article-container highlight {
    color: var(--gavin-highlight)!important;
    font-weight: bold;
}

#article-container highlight * {
    color: var(--gavin-highlight)!important;
    font-weight: bold;
}

#article-container p em {
    opacity: .7;
    /* font-size: 90%; */
}

@media screen and (max-width: 768px) {
    #article-container p {
        margin: 0.85rem 0 0.85rem;
        line-height: 1.66rem;
    }

    #article-container li {
        line-height: 1.66rem;
    }
}

/* 序号 */
/* #article-container li::marker {
    color: var(--gavin-blue2);
} */

#article-container ol li:not(.tab),
#article-container ul li:not(.tab) {
    position: relative;
}

#article-container ol li::before,
#article-container ul li::before {
    position: absolute;
    background: var(--gavin-note-font-color);
    transition: all .3s ease-out 0s;
}

#article-container ol>li::before {
    /* content: counter(li);
    counter-increment: li 1;
    top: 0.32em;
    left: -2.3em;
    width: 1.36em;
    height: 1.36em;
    padding: 0.1em;
    border-radius: 50%;
    text-align: center;
    font-size: .75em;
    font-weight: bold;
    line-height: 1.36em;
    color: var(--gavin-highlight);
    background: var(--gavin-highlight-op); */
    content: counter(li) ".";
    counter-increment: li 1;
    left: -1.6em;
    width: 1.6em;
    border-radius: 50%;
    text-align: center;
    font-weight: 600;
    justify-content: center;
    flex-wrap: nowrap;
    display: flex;
    color: var(--gavin-note-font-color);
    background: unset;
}

#article-container ul>li:not(.tab)::before {
    content: "";
    top: 0.7em;
    left: -1em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    line-height: .8em;
}

/* 引用高亮 */
#article-container code {
    /* background: rgba(255, 136, 0, 1); */
    background: rgba(var(--gavin-grey-op-1),.2) !important;
    color: var(--gavin-highlight);
    border-radius: 6px;
    font-size: 85%;
    margin: 0 4px;
    padding: 0.2em 0.4em;
}

#article-container .note code {
    color: unset;
}

#article-container .hexopdf {
    margin: 1rem 0;
}

#article-container .hexopdf > embed {
    border: 1px solid var(--gavin-border-color);
    border-radius: 8px;
    box-shadow: var(--gavin-shadow-1);
}

/* #article-container p strong {
    color: var(--gavin-highlight);
} */

/* 主页侧边栏sticky的bug */
#aside-content .sticky_layout {
    margin-top: 20px;
    top: 80px;
}

#aside-content .sticky_layout> :first-child {
    margin-top: 0;
}

@media screen and (min-width: 900px) {
    #aside-content {
        padding-right: 0;
    }
}

/* 代码框的圆角弧度 */
#article-container figure.highlight {
    border-radius: 8px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 10;
}

/* note标签弧度 */
/* .note {
    border-radius: 8px;
} */

.hbe-input {
    min-width: unset !important;
    margin: 1em 0 !important;
    width: 100% !important;
}

.hbe-input-field-flip {
    border-radius: 10px !important;
    background: var(--gavin-widget-bg2) !important;
}

.hbe-input-label-flip {
    bottom: 3.8em !important;
}

/* 相册弧度 */
#article-container figure.gallery-group {
    border-radius: 13px;
    box-shadow: var(--gavin-shadow-1);
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 14;
}

/* 取消侧边栏标题 */
#aside-content .item-headline {
    display: none;
}

/* 侧边栏标签加 #  */
.card-tag-cloud a::before {
    content: '\f292';
    position: relative;
    opacity: .4;
    margin-right: 0.15em;
    font-size: 70%;
    font-family: "Font Awesome 6 Free";
}

.card-tag-cloud a sup {
    opacity: .5;
    margin-left: 0.1em;
}

.card-widget.card-recent-post {
    display: none;
}

#body-wrap.post .card-widget.card-recent-post {
    display: block;
}

/* 表格样式 */
.table-wrap table thead tr th {
    border-top-width: 0;
}

.table-wrap table thead tr th:first-child,
.table-wrap table tbody tr td:first-child {
    border-left-width: 0;
}

.table-wrap table thead tr th:last-child,
.table-wrap table tbody tr td:last-child {
    border-right-width: 0;
}

.table-wrap table tbody tr:last-child td {
    border-bottom-width: 0;
}


/* *****************************************************sidebar侧滑导航栏修改**************************************************************** */
/* 手机端 侧边导航颜色和圆弧 */
#sidebar #sidebar-menus .menus_items .site-page:hover {
    /* color:  */
    background: var(--gavin-widget-bg2);
    /* border-radius: 0.5rem; */
}

#sidebar #sidebar-menus .menus_item>.site-page:not(.hide) {
    background: var(--gavin-widget-bg2);
}

#sidebar #sidebar-menus .menus_items .site-page {
    margin: 2px 0;
}

/* 修复侧边导航图标不对齐问题 */
#nav #toggle-menu {
    padding: 0;
    margin-right: 4px;
    font-size: 1.5rem;
}

/* 侧边导航毛玻璃 */
/* #sidebar #sidebar-menus {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: saturate(180%) contrast(50%) blur(10px);
    backdrop-filter: saturate(180%) contrast(50%) blur(10px);
    transform: translateZ(0);
} */

/* [data-theme='dark'] #sidebar #sidebar-menus {
    background: rgba(0, 0, 0, 0.1);
} */

/* 侧滑菜单不显示滚动条 */
#sidebar-menus .menus_items::-webkit-scrollbar {
    display: none
}

#sidebar #sidebar-menus .menus_items {
    scrollbar-width: none;
    padding: 10px 0;
    max-height: calc(100% - 377px);
    overflow: scroll;
    -webkit-mask-image: linear-gradient(0deg, transparent, #fff 10px, #fff calc(100% - 10px), transparent);
    mask-image: linear-gradient(0deg, transparent, #fff 10px, #fff calc(100% - 10px), transparent);
}

#sidebar-menus .sidebar-head {
    padding: 25px 10px 10px;
    background-image: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/QEhcc.webp);
    background-size: cover;
    background-position: center;
    height: 200px;
}

.sidebar-head .site-data>a .headline,
.sidebar-head .site-data>a .length-num {
    color: #fff;
    font-weight: bold;
}

#sidebar-menus .avatar-img img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
}

#sidebar-menus .avatar-img span.author-name {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
}

#sidebar #sidebar-menus .avatar-img {
    margin: 0;
    width: 100%;
    height: 120px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.sidebar-foot {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background: var(--f-0);
    bottom: 0;
    padding: 5px 15px;
    font-size: 80%;
}

span.separator {
    margin: 0 5px;
}

/* .sidebar-foot .sidebar-weather {
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* **************************************************************音乐播放器***************************************************************** */
.global-music .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important;
    /* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

.global-music .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important;
    /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}

.global-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
    /* margin: 5px !important; */
    margin: 0.2rem !important;
    line-height: 1.3rem !important;
    /* height: auto !important;
    font-weight: 700; */
    font-size: 1.3rem !important;
    /* color: #48E3F6; */
    color: var(--dis-f-0) !important;
    /* overflow: visible; */
    opacity: .9 !important;
}

.global-music .aplayer .aplayer-lrc p {
    /* margin: 5px !important;
    padding: 0 !important; */
    line-height: 1.3rem !important;
    height: 1.4rem !important;
    font-weight: 700;
    font-size: 1.3rem !important;
    color: var(--dis-f-0) !important;
    /* transition: all .5s ease-out; */
    opacity: .3 !important;
    /* overflow: hidden; */
}

/* 歌词框的高度 */
.global-music .aplayer .aplayer-lrc {
    padding: 0 !important;
    height: calc(3rem + 20px) !important;
    border-radius: 21px;
    box-shadow: 0 0 36px -9px rgba(0, 0, 0, .25);
    border: 1px solid rgba(var(--op-dis), .05);
    /* mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 24; */
    /* border: 10px solid #00000000; */
    /* border-image: 0%; */
    /* -webkit-border-image: 0%; */
    background-color: rgba(var(--op), .3);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-backdrop-filter: saturate(180%) blur(50px);
    backdrop-filter: saturate(180%) blur(50px);
    /* transform: translateZ(0); */
}

.global-music .aplayer .aplayer-lrc .aplayer-lrc-box {
    margin: 10px;
    height: 3rem;
    overflow: hidden;
}

.global-music .aplayer.aplayer-fixed .aplayer-lrc {
    /* calc(10% - 105px): 百分比补上参数 */
    left: 5% !important;
    width: 90%;
    text-shadow: none !important;
}

.global-music .aplayer.aplayer-fixed .aplayer-list {
    position: relative;
    background-color: #ffffff;
    z-index: 99;
}

iframe #player .player {
    box-shadow: unset;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--gavin-widget-bg4);
}

/* ********************************************************新控制中心***************************************************************** */
/* 控制中心按钮样式 */
#console-switch {
    display: flex;
    width: 35px;
    height: 35px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    margin-left: 0.5em;
    font-size: 1.4rem;
}

/* 控制中心界面功能按钮样式 */
#console {
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
}

#console .eject-mask {
    min-height: 650px;
}

#console .console-btn-group {
    display: flex;
    position: absolute;
    top: 565px;
    justify-content: space-between;
    width: 290px;
    opacity: 0;
    transition: .5s ease;
}

#console.show .console-btn-group {
    opacity: 1;
}

#console .console-btn-group.hide {
    display: none;
}

/* #console .console-btn-group .console-btn-item:not(:last-child) {
    margin-right: 0.5rem;
} */

#console .console-btn-group .console-btn-item {
    width: 4rem;
    height: 4rem;
    transition: 0.5s ease;
    cursor: pointer;
    transform: scale(0.6) translateY(-100px);
}

#console.show .console-btn-group .console-btn-item {
    transform: scale(1) translateY(0px);
}

#console .console-btn-group .console-btn-item a {
    width: 100%;
    height: 100%;
    background: var(--f-0);
    /* border: var(--style-border); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-color-blod);
    transition: all .5s;
}

[data-theme=dark] a#darkSwitchBtn {
    background: var(--gavin-blue2) !important;
    color: #fff !important;
}

/* hover变色开关 */
/* #console .console-btn-group .console-btn-item a:hover {
    background: rgba(var(--op-dis), .3) !important;
  } */

#console .console-btn-group .console-btn-item.on a {
    background: var(--gavin-blue2);
    color: #fff;
    transition: 0.3s;
}

#console .console-btn-group i {
    font-size: 2rem;
    display: flex;
    align-items: center;
    /*图标大小*/
}

/* 控制中心音乐播放器样式 */

/* **********************************************8字符************************************************ */

.fas {
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    line-height: 1;
}

/* ******************************和风天气*************************** */
/* .s-sticker {
    font-weight: 600;
    margin-left: 10px;
}

@media screen and (max-width: 850px) {
    #he-plugin-simple .s-sticker {
        display: none!important;
    }
}

#he-plugin-simple {
    z-index: 1;
}

#he-plugin-simple a:hover {
    background: unset !important;
    background-color: unset !important;
}

#he-plugin-simple a.s-sticker:hover{
    color: var(--font-color)!important;
}

#he-plugin-simple>div:last-child>div {
    top: 57px !important;
}

.wv-top-select,
button.wv-top-button {
    border-radius: 6px !important;
    height: 2.5em !important;
} */

/* ******************************文章波浪*************************** */
.main-hero-waves-area {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -11px;
    z-index: 5;
    transition: all .5s;
}

.waves-area .waves-svg {
    width: 100%;
    height: 60px;
}

/* Animation */
.parallax>use {
    animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    transition: fill .5s;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
    fill: var(--gavin-background);
    opacity: .5;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
    fill: var(--gavin-background);
    opacity: .6;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
    fill: var(--gavin-background);
    opacity: .7;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
    /* fill: #f7f9fe; */
    fill: var(--gavin-background);
    opacity: 1;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves-area .waves-svg {
        height: 40px;
        min-height: 40px;
    }
}

/* ***************************************************页脚样式********************************************* */

/* 原装版 */
#footer {
    background: var(--card-bg);
    /* box-shadow: var(--card-box-shadow) !important; */
    border-top: 1px solid var(--gavin-border-color);
}

#footer-wrap,
#footer-wrap a {
    color: var(--gavin-note-font-color);
}

/* 隐藏底部foot */
/* .framework-info {
    display: none;
  } */

#footer-wrap a:hover {
    color: var(--gavin-highlight);
    text-decoration: none;
}

/* 自用版 */
#footer-wrap {
    padding: 20px 5%;
    font-size: 14px;
    display: flex;
}

#footer-left {
    width: 50%;
    text-align: left;
}

#footer-right {
    width: 50%;
    text-align: right;
}

@media screen and (max-width: 768px) {
    #footer-wrap {
        display: block;
        font-size: 12px;
    }

    #footer-left {
        width: 100%;
        text-align: left;
    }

    #footer-right {
        width: 100%;
        text-align: left;
    }
}

/* 猕猴桃版 */
/* #ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255 255 255 / 80%) !important;
    text-align: left;
    flex-wrap: wrap;
  }
  
  .ft-item-1,
  .ft-item-2 {
    display: flex;
    height: 100%;
    padding: 2px 14px;
  }
  
  .ft-item-1 {
    flex-direction: column;
    flex: 2;
  }
  
  .ft-item-2 {
    flex: 1;
    flex-direction: column;
  }
  
  .t-top {
    display: flex;
  }
  
  .t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
  }
  
  .t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
  }
  
  .btn-xz-box {
    margin-top: 10px;
  }
  
  .btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
  }
  
  .btn-xz:hover {
    text-decoration: none !important;
  }
  
  .btn-xz-box:hover .btn-xz {
    background-color: var(--text-bg-hover);
  }
  
  .t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
  }
  
  .ft-links li a {
    display: inline-block !important;
    width: 50%;
  }
  
  .ft-links li a:hover {
    text-decoration: none !important;
    color: var(--theme-color) !important;
  }
  
  .ft-item-2 .ft-img-group {
    width: 100%;
  }
  
  .ft-t {
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
  }
  
  .t-l-t {
    padding-left: 14px;
  }
  
  .ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
  }
  
  .ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  .ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
    border-radius: 10px;
  }
  
  .ft-item-2 .ft-img-group .img-group-item a img:hover {
    border: 2px solid var(--theme-color);
  }
  
  @media screen and (max-width: 768px) {
    .ft-item-1 {
      flex-basis: 100% !important;
    }
  
    .ft-item-2 {
      flex-basis: 100% !important;
    }
  
    .t-top .t-t-l .bg-ad {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 576px) {
    .t-top {
      flex-wrap: wrap;
    }
  
    .t-top .t-t-l {
      flex-basis: 100% !important;
    }
  
    .t-top .t-t-r {
      margin-top: 16px;
      flex-basis: 100% !important;
    }
  }
  #footer-wrap a {
    border-radius: 30px;
  }
  #footer-wrap {
    padding: 20px 20px;
  }
  
  #heartbeat {
    color: red;
    animation: iconAnimate 1s ease-in-out infinite;
  }
  @-moz-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @-webkit-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @-o-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  } */

/* *******************************************外挂标签样式********************************************** */
/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
/* h1::before,
  h2::before,
  h3::before,
  h4::before,
  h5::before,
  h6::before {
    -webkit-animation: ccc 4s linear infinite;
    animation: ccc 4s linear infinite;
  } */

/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
/* @-webkit-keyframes ccc {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(-1turn);
      transform: rotate(-1turn);
    }
  }
  
  @keyframes ccc {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(-1turn);
      transform: rotate(-1turn);
    }
  } */

/* 设置风车颜色 */
/* #content-inner.layout h1::before {
    color: #ef50a8;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
  }
  
  #content-inner.layout h2::before {
    color: #fb7061;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
  }
  
  #content-inner.layout h3::before {
    color: #ffbf00;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
  }
  
  #content-inner.layout h4::before {
    color: #a9e000;
    margin-left: -1.05rem;
    font-size: 1rem;
    margin-top: -0.09rem;
  }
  
  #content-inner.layout h5::before {
    color: #57c850;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0rem;
  }
  
  #content-inner.layout h6::before {
    color: #5ec1e0;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0rem;
  } */

/* s设置风车hover动效 6s那里可以自己调节快慢*/
/* #content-inner.layout h1:hover,
  #content-inner.layout h2:hover,
  #content-inner.layout h3:hover,
  #content-inner.layout h4:hover,
  #content-inner.layout h5:hover,
  #content-inner.layout h6:hover {
    color: var(--theme-color);
  }
  
  #content-inner.layout h1:hover::before,
  #content-inner.layout h2:hover::before,
  #content-inner.layout h3:hover::before,
  #content-inner.layout h4:hover::before,
  #content-inner.layout h5:hover::before,
  #content-inner.layout h6:hover::before {
    color: var(--theme-color);
    -webkit-animation: ccc 6s linear infinite;
    animation: ccc 6s linear infinite;
  } */

/* *************link链接样式修改，默认样式太单调了************* */
/* #article-container a.link-card {
    background-color: var(--gavin-widget-bg1) !important;
    border: 1px solid var(--gavin-border-color) !important;
    border-radius: 8px;
    line-height: normal;
    display: block;
    text-align: left;
    min-width: none;
    max-width: none;
    width: 100%;
    transition: all .3s;
} */

/* #article-container a.link-card div.left {
    margin: 0.8rem;
}

#article-container a.link-card div.right {
    margin-right: 1.6rem;
}

#article-container a.link-card div.left img {
    border-radius: 7px;
    border: 1px solid var(--gavin-border-color);
} */

/* #article-container a.link-card:hover {
    color: var(--dis-f-0) !important;
    background-color: var(--gavin-highlight-op-1) !important;
    box-shadow: none;
    border-color: var(--gavin-highlight-op-6)!important;
}

#article-container a.link-card:hover p {
    color: var(--dis-f-0) !important;
}

#article-container a.link-card p.url {
    color: var(--dis-f-0);
    font-weight: 500;
    opacity: .4;
}

#article-container a.link-card p {
    color: var(--font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} */

/* #article-container a.link-card .main {
    display: inline-flex;
    align-items: center;
    width: 100%;
    position: relative;
}

#article-container a.link-card .end {
    border-top: 1px solid var(--gavin-border-color);
    margin: 0 0.8rem;
    display: flex;
    transition: all .3s;
}

#article-container a.link-card:hover .end {
    border-color: var(--gavin-highlight-op-6);
}

#article-container a.link-card .end p {
    width: 50%;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2rem;
    color: var(--dis-f-0);
    opacity: .4;
    margin: 0 0 0.4rem 0;
}

#article-container a.link-card .end p:last-child {
    text-align: right;
} */

/* @media screen and (max-width: 550px) {
    #article-container a.link-card .end p:last-child {
        display: none;
    }

    #article-container a.link-card .end p:first-child {
        width: 100%;
    }
} */
/* 
#article-container a.link-card .main i {
    color: var(--dis-f-0);
    font-size: 0.9rem;
    position: absolute;
    right: 0.8rem;
    transition: all .3s;
}

#article-container a.link-card:hover .main i {
    color: var(--gavin-highlight-op-6);
} */
#article-container .checkbox {
    display: flex;
    flex-direction: row;
}

#article-container .checkbox input {
    margin-right: 8px;
}
/* ****************************顶部彩色加载条******************************** */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 8px;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 8px;
    width: 80px;
    background: var(--card-bg);
    border: 1px solid var(--gavin-background);
    overflow: hidden;
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: .3s ease-in;
}

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    /* linear-gradient(to right, #3494e6, #ec6ead) */
    background: linear-gradient(-45deg, #43cea2, #23a6d5, #0a52ef);
    animation: gradient 1s ease infinite;
    background-size: 200%;
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* **************************文章版权框样式************************** */
#post .post-copyright {
    /* background-color:rgba(70, 160, 250, 0.3); */
    /* background-color: rgba(0, 150, 255, 0.2); */
    background-color: var(--article-card);
    border-radius: 12px;
    /* border-color: rgba(5, 109, 232, 0.8); */
    /* border-color: var(--gavin-blue1); */
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* @media screen and (max-width: 768px) {
    #post .post-copyright,
    #post .tag_share .post-meta__tags,
    #pagination .prev-post a, #pagination .next-post a,
    .music-card {
        background-color: var(--card-bg);
    }
} */

.post-copyright > div {
    z-index: 1;
    line-height: 1.75;
    font-size: 16px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .post-copyright > div {
        font-size: 15px;
    }    
}

/* #post .post-copyright .post-copyright-meta {
    color: var(--dis-f-0);
} */

/* #post .post-copyright:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
} */

/* #post .post-copyright .post-copyright-info {
    color: var(--gavin-op-dis-6);
    word-break: break-all;
} */

/* #post .post-copyright .post-copyright-info a {
    color: var(--dis-f-0);
    font-weight: bold;
    word-break: break-all;
    text-decoration: none;
    border-bottom: 2px solid var(--gavin-highlight);
} */

/* #post .post-copyright .post-copyright-info a:hover {
    color: var(--gavin-highlight);
} */

/* #post .post-copyright:before {
    color: var(--gavin-highlight-op-1);
    top: -81px;
    right: -18px;
    font-size: 8.1em;
} */

/* 打赏 */
.post-reward .reward-button,
.post-reward .like-button {
    border-radius: 8px;
    width: 100px;
    user-select: none;
}

/* *********************************************Twikoo评论******************************************** */
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '输入QQ号会自动获取昵称和头像';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '收到回复将会发送到您的邮箱';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -60px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 14px 18px;
    background: #444;
    color: #fff;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
    我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -16px);
}

/* 评论样式 */
.twikoo .tk-content {
    line-height: 1.6;
    font-size: 1em;
    margin-top: 0;
}

/* 评论框 */
.twikoo .el-input__inner:focus,
.twikoo .el-textarea__inner:focus {
    border-color: var(--gavin-highlight);
    outline: 4px solid var(--gavin-highlight-op);
    /* border-color: rgba(144, 147, 153, 1); */
    /* background: rgba(144, 147, 153, 0.16); */
    /* background: rgba(var(--gavin-theme-color), 0.04); */
}

.tk-meta-input .el-input input:invalid {
    outline-color: rgba(245,108,108,.18);
}

.twikoo .el-input__inner::placeholder,
.twikoo .el-textarea__inner::placeholder {
    color: var(--gavin-note-font-color);
}

.twikoo .el-input__inner,
.twikoo .el-textarea__inner,
.tk-preview-container {
    background-color: var(--card-bg);
    box-shadow: var(--gavin-shadow-1);
    border-radius: 6px;
    transition: background-color .5s;
}

.tk-admin-container .el-input__inner,
.tk-admin-container .el-textarea__inner {
    background-color: rgba(144,147,153,.16);
}

.twikoo .el-button--mini,
.twikoo .el-button--small {
    border-radius: 6px;
}

.twikoo .el-input-group__prepend {
    position: absolute;
    left: 4px;
    top: 4px;
    height: calc(100% - 8px);
    border-radius: 5px 5px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    padding: unset;
}

.twikoo .tk-password .el-input-group__prepend {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: unset;
}

.twikoo .tk-meta-input .el-input__inner {
    padding: 0 8px 0 60px;
}

.twikoo .tk-password .el-input__inner {
    padding: 0 8px 0 70px;
}

.twikoo .el-input-group__append,
.twikoo .el-input-group__prepend {
    background-color: var(--gavin-widget-bg1);
    border-right: 1px solid rgba(144, 147, 153, 0.32);
}

.tk-admin-container .el-input-group__append,
.tk-admin-container .el-input-group__prepend {
    background-color: rgba(144, 147, 153, 0.64);
}

.twikoo .el-input-group {
    display: flex;
    gap: 5px;
}

.twikoo .el-input-group .el-input__suffix {
    right: 15px;
}

.twikoo .el-input-group .el-input-group__append {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.twikoo .el-input-group .el-input-group__append .el-button {
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.twikoo .tk-admin-config-input .el-input-group__append .el-button {
    width: unset;
    padding: 0 10px;
}

/* 官方已修复 */
/* .tk-admin-close {
    position: absolute;
} */

.twikoo input::placeholder {
    color: rgb(144, 147, 153) !important;
}

.tk-login,
.tk-regist {
    padding: 15px;
}

.tk-admin-comment-filter-type {
    border-radius: 6px;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.tk-admin-import select:hover .tk-admin-comment-filter-type:hover {
    border-color: rgba(144, 147, 153, 0.50);
}

.tk-admin-import select:focus-visible .tk-admin-comment-filter-type:focus-visible {
    border-color: rgba(144, 147, 153, 1);
}

.tk-admin-import select option,
.tk-admin-comment-filter-type option {
    border-radius: 5px;
    border: 1px solid var(--gavin-border-color);
    color: var(--font-color);
    background: var(--card-bg);
}

.tk-admin-import select {
    border-radius: 6px;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background: transparent;
    color: #fff;
    padding: 4px;
}

.tk-pagination-pager {
    border-radius: 5px;
}

/* 评论区 */
.tk-admin {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.tk-extra {
    /* border: 1px solid var(--gavin-border-color); */
    /* padding: 0 4px; */
    margin: 4px 10px 0 0;
    /* border-radius: 5px; */
    font-size: 11px;
}

@media screen and (max-width: 768px) {
    .twikoo .el-textarea__inner {
        min-height: 6.4rem !important;
    }

    .tk-extra:last-child {
        display: none;
    }
}

.tk-extras {
    margin: 5px 0 0;
}

.tk-icon.__comment {
    height: 10px;
    width: 10px;
    display: flex;
    align-items: center;
}

.tk-icon.__comments,
.tk-action-link,
.tk-action-icon {
    color: var(--gavin-highlight);
}

.tk-comment {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--gavin-border-color);
}

.tk-comments-title {
    color: var(--dis-f-0);
}

#body-wrap:not(.post) #twikoo .tk-comments-container>.tk-comment {
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--gavin-border-color);
    box-shadow: var(--gavin-shadow-1);
    border-radius: 13px;
}

@media screen and (max-width: 768px) {
    #twikoo .tk-comments-container>.tk-comment {
        padding: 12px!important;
        /* background: var(--vercel-background); */
        background: var(--card-bg);
        border: 1px solid var(--gavin-border-color);
        box-shadow: var(--gavin-shadow-1);
        border-radius: 13px;
    }
}

#twikoo .tk-comments-container>.tk-expand {
    margin-top: 12px;
}

.tk-expand {
    width: 100px;
    margin: 12px 0 0 calc(50% - 50px);
    padding: 0.25em 0.75em;
    border-radius: 8px;
    border: 1px solid var(--gavin-border-color);
    background-color: var(--card-bg);
    color: var(--gavin-note-font-color);
    box-shadow: var(--gavin-shadow-1);
    transition: 0.3s;
}

.tk-expand:hover {
    /* background-color: var(--card-bg) !important; */
    background-color: var(--gavin-highlight) !important;
    border-color: var(--gavin-highlight);
    box-shadow: 0 4px 12px -3px var(--gavin-highlight-op);
    /* color: var(--gavin-border-hover-color); */
    color: var(--f-0);
}

.tk-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tk-comment .tk-content a.tk-ruser {
    font-weight: bold;
    color: var(--gavin-highlight);
}

.tk-replies .tk-content span:first-child {
    font-size: 11px;
}

.tk-tag-purple {
    background-color: rgba(170, 118, 246, 0.2);
    border: 1px solid rgba(170, 118, 246, 0.50);
    color: #AA76F6;
}

.tk-tag-grey {
    background-color: rgba(144, 144, 144, 0.2);
    border: 1px solid rgba(144, 144, 144, 0.50);
    color: #909090;
}

.tk-tag-purple,
.tk-tag-grey,
.tk-tag-green,
.tk-tag-red,
.tk-tag-yellow,
.tk-tag-blue {
    border-radius: 5px;
    line-height: 1;
    padding: 4px;
    border: none;
}

@media screen and (max-width: 768px){
    .tk-tag {
        font-size: 11px;
        padding: 3px 4px;
    }

    .tk-nick{
        font-size: 1em!important;
    }
}

.tk-time {
    color: var(--gavin-note-font-color);
    font-size: 11px;
    line-height: 1;
    display: inline-block;
}

.tk-content p {
    margin: 0.5rem 0;
}

.tk-owo-emotion {
    height: 1.5rem;
    width: 1.5rem;
    margin: 0 2px;
}

.tk-comment .tk-submit .tk-avatar,
.tk-replies .tk-avatar {
    height: 2.5rem;
    width: 2.5rem;
}

.tk-comment .tk-submit .tk-avatar .tk-avatar-img,
.tk-replies .tk-avatar .tk-avatar-img {
    height: 2.5rem;
}

.tk-nick {
    line-height: 1.3;
    font-size: 1.1em;
    color: var(--gavin-highlight);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.tk-replies .tk-nick {
    font-size: 1.1em;
    line-height: 1.3;
}

.tk-main > .tk-row {
    height: 2.5rem;
    align-items: center;
}

.tk-row.actions {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.el-button+.el-button {
    margin-left: 0.5rem;
}

.tk-submit-action-icon {
    margin-right: 0.5rem;
}

.tk-replies:not(.tk-replies-expand) {
    -webkit-mask-image: linear-gradient(0deg, transparent, #fff 200px);
    mask-image: linear-gradient(0deg, transparent, #fff 200px);
}

.tk-avatar {
    position: relative;
    background-color: unset !important;
    margin-right: 12px;
    overflow: unset;
}

#body-wrap:not(.post) #twikoo .tk-comments-container > .tk-comment > .tk-avatar {
    position: absolute;
}

#body-wrap:not(.post) #twikoo .tk-comments-container > .tk-comment > .tk-main > .tk-row {
    margin: 0 0 0 50px;
}

#body-wrap:not(.post) #twikoo .tk-comments-container > .tk-comment > .tk-main > .tk-content {
    margin: 10px 0 5px;
}

@media screen and (max-width: 768px) {
    #body-wrap.post #twikoo .tk-comments-container > .tk-comment > .tk-avatar {
        position: absolute;
    }
    
    #body-wrap.post #twikoo .tk-comments-container > .tk-comment > .tk-main > .tk-row {
        margin: 0 0 0 50px;
    }
    
    #body-wrap.post #twikoo .tk-comments-container > .tk-comment > .tk-main > .tk-content {
        margin: 10px 0 5px;
    }

    .tk-submit-action-icon.__markdown {
        display: none;
    }
}

.tk-avatar .tk-avatar-img {
    border-radius: 50%;
    border: 1px solid var(--gavin-border-color);
}

.tk-master .tk-avatar::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-image: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/202311060926243.webp);
    background-size: 100% 100%;
    border: 1px solid var(--card-bg);
    box-sizing: border-box;
    z-index: 1;
}

.tk-avatar[nick='TeacherDu']::before,
.tk-avatar[nick='Leonus']::before,
.tk-avatar[nick='Heo']::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-image: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/202311051012837.webp);
    background-size: 100% 100%;
    z-index: 1;
}

.tk-admin.__show {
    z-index: 1;
}

.tk-actions {
    margin-left: 0;
    font-size: 11px;
    line-height: 1;
}

.twikoo .el-button--primary.is-disabled,
.twikoo .el-button--primary.is-disabled:active,
.twikoo .el-button--primary.is-disabled:focus,
.twikoo .el-button--primary.is-disabled:hover {
    color: rgba(var(--op-dis), .6);
    background-color: var(--gavin-highlight-op);
}

.el-button--primary {
    background-color: rgba(var(--gavin-theme-color), .6);
    border-color: rgba(var(--gavin-theme-color), .6);
}

.el-button--primary:focus,
.el-button--primary:hover {
    background: rgba(var(--gavin-theme-color), 1);
    border-color: rgba(var(--gavin-theme-color), 1);
}

.twikoo .el-button:not(.el-button--primary):not(.el-button--text):active,
.twikoo .el-button:not(.el-button--primary):not(.el-button--text):focus,
.twikoo .el-button:not(.el-button--primary):not(.el-button--text):hover {
    color: rgba(var(--gavin-theme-color), 1);
    background-color: rgba(var(--gavin-theme-color), .1);
    border-color: rgba(var(--gavin-theme-color), 1);
}

#post-comment pre {
    background-color: var(--gavin-background);
}

#post-comment blockquote {
    background-color: var(--article-card);
    border: 1px solid var(--gavin-border-color);
}

#post-comment pre,
#post-comment blockquote {
    /* width: fit-content; */
    overflow: auto;
    min-width: 100%;
    margin: 10px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    transition: 0.3s;
}

/* *******************星空背景**************** */
/* 背景宇宙星光  */
/* #universe {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
} */

#body-wrap {
    background: var(--gavin-background);
}

/* .layout>div:first-child:not(.recent-posts) {
    padding: 0 40px;
} */

/* ***************哔哩哔哩bilibili视频适配*************** */
.aspect-ratio {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 75%;
    margin: 3% auto;
    text-align: center;
}

.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 1rem;
    border: 1px solid var(--gavin-border-color);
}

/* ****************评论区表情放大预览（没用到）****************** */
#owo-big {
    position: fixed;
    align-items: center;
    background-color: var(--f-0);
    border: 1px var(--gavin-border-color) solid;
    border-radius: 10px;
    z-index: 9999;
    display: none;
    transform: translate(0, -105%);
    overflow: hidden;
    animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
}

#owo-big img {
    width: 100%;
}

/* 动画效果代码由 Heo：https://blog.zhheo.com/ 提供 */
@keyframes owoIn {
    0% {
        transform: translate(0, -95%);
        opacity: 0;
    }

    100% {
        transform: translate(0, -105%);
        opacity: 1;
    }
}

.OwO .OwO-body {
    top: unset;
    bottom: 2.2em;
    left: -10px;
    background-color: rgba(var(--op), .1) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 8px;
}

.OwO .OwO-body .OwO-items {
    margin: 8px;
}

.OwO .OwO-body .OwO-items::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

/* ***********************双栏显示 npm i hexo-butterfly-article-double-row --save********************** */
/* 翻页按钮居中 */
#pagination {
    width: 100%;
    margin: auto;
}

#recent-posts {
    margin-top: 0;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#recent-posts>.recent-post-item {
    margin-top: 1rem;
    position: relative;
    display: flex;
    height: auto;
    width: calc(50% - 10px);
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* animation: slide-in .6s .4s backwards; */
}

@media screen and (min-width: 900px) and (max-width: 1050px) {
    #recent-posts>.recent-post-item {
        width: 100% !important;
    }
}

@media screen and (max-width:768px) {
    #recent-posts>.recent-post-item {
        width: 100%
    }

    #recent-posts {
        padding: 0 1rem !important;
    }
}

#recent-posts>.recent-post-item .post_cover {
    width: calc(100% - 20px);
    height: 200px;
    margin: 10px 0 0;
    border-radius: 9px;
}

@media screen and (max-width:768px) {
    #recent-posts>.recent-post-item .post_cover {
        height: 160px;
    }
}

#recent-posts>.recent-post-item .post_cover img.post_bg {
    width: 100%;
    height: 100%
}

#recent-posts>.recent-post-item .left_radius {
    border-radius: 8px 8px 0 0
}

#recent-posts>.recent-post-item .right_radius {
    border-radius: 8px 8px 0 0
}

/* 主页文章卡片样式 */
a.article-meta__tags {
    margin-right: 0.8em;
    display: inline-block;
}

a.article-meta__tags::before {
    content: '\f292';
    position: relative;
    opacity: .4;
    margin-right: 0.15em;
    font-size: 70%;
    font-family: "Font Awesome 6 Free";
}

a.article-meta__tags:hover {
    color: var(--gavin-highlight) !important;
}

.article-meta-time {
    margin-right: 12px;
    display: inline-block;
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap>.post-meta-date {
    line-height: 1.2rem;
}

span.article-meta.tags {
    line-height: 1rem;
    position: absolute;
    bottom: 1.2rem;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.article-meta-wrap span {
    margin: 3px 0;
}

.recent-post-info,
.recent-post-info * {
    cursor: pointer;
}

.article-meta-time,
.article-meta-time * {
    cursor: default !important;
}

a.article-links {
    position: absolute;
    width: 100%;
    height: 226px;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: 13px;
}

#recent-posts>.recent-post-item>.recent-post-info {
    margin-top: 0;
    padding: 10px 7%;
    height: 180px;
    width: 100% !important;
}

.article-meta-categories {
    position: absolute;
    display: flex;
    z-index: 1;
    top: 20px;
    left: 20px;
}

a.article-meta__categories {
    /* -webkit-backdrop-filter: saturate(360%) contrast(70%) blur(20px);
    backdrop-filter: saturate(360%) contrast(70%) blur(20px); */
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1;
    /* color: #fff; */
    color: var(--dis-f-0);
    background: var(--card-bg);
    border-radius: 6px;
}

@media screen and (min-width: 768px) {
    a.article-meta__categories:hover {
        color: #fff;
        background: var(--gavin-highlight);
    }
}

/* 颜色更改（标签更改在themes\butterfly\layout\includes\mixins\post-ui.pug中改）rgba(5,109,232,0.8) */
.recent-post-item:hover .article-title {
    color: var(--gavin-highlight) !important;
}

.recent-post-item .article-title {
    color: var(--dis-f-0) !important;
}

/* #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
    color: var(--dis-f-0);
  } */

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
    color: var(--dis-f-0);
    display: flex;
    flex-direction: column;
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap a {
    color: var(--dis-f-0);
    display: flex;
    align-items: center;
}

.article-meta-middle {
    position: absolute;
    width: calc(100% - 20px);
    bottom: 180px;
    font-size: 13px;
    display: flex;
    align-items: center;
    padding: 16px calc(7% - 10px) 4px;
    border-end-end-radius: 9px;
    border-end-start-radius: 9px;
    color: #fff;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
}

/* 文章描述 */
.recent-post-item .content {
    line-height: 1.3;
    font-size: 0.9em;
    opacity: 0.56;
}

@media screen and (max-width: 768px) {
    .article-meta-middle {
        font-size: 11px;
    }

    .recent-post-item .content {
        font-size: 0.85em;
    }

    a.article-meta__categories {
        font-size: 13px;
        padding: 5px 6px;
        border-radius: 5px;
    }
}

.article-meta-middle i {
    margin-right: 4px;
}

/* 文章置顶 */
.article-meta-middle .sticky {
    color: #ff7242;
}

.article-meta-middle .article-meta {
    position: absolute;
    right: calc(7% - 10px);
}

/* ***************************宽屏适配************************ */
/* 全局宽度、左右padding */
@media screen and (min-width: 768px) {
    .layout {
        padding-left: 5%;
        padding-right: 5%;
        max-width: 1600px !important;
        gap: 20px;
    }
}

@media screen and (max-width: 1300px) {
    #body-wrap.post .layout,
    #body-wrap .layout.hide-aside {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    /* .layout>div:first-child:not(.recent-posts) { */
    /* padding: 1.5rem 1rem !important; */
    /* border: 1px solid var(--gavin-border-color); */
    /* background: var(--vercel-background); */
    /* } */

    #body-wrap.post .layout,
    #body-wrap .layout.hide-aside {
        padding-left: 5px;
        padding-right: 5px;
    }
}


/* 平板尺寸自适应(不启用侧边栏宽度限制) */
/* @media screen and (min-width: 900px) {
    .layout:not(.hide-aside) > div:first-child {
        max-width: calc(100% - 320px);
        min-width: calc(100% - 340px);
    }

    #aside-content {
        max-width: 320px;
        min-width: 300px;
    }
} */

/* 智能区分主页和分页，除了首页以外其他页面隐藏侧边栏，并采用宽屏显示 */
#archive, 
#page {
    width: 100%;
    padding: 0 40px;
}

#category,
#tag {
    /* width: 100%; */
    padding: 0;
}

/* 除了目录，其它都隐藏 */
@media screen and (max-width: 900px) {
    #aside-content .card-widget:not(#card-toc) {
        display: none;
    }
}

/* .page:not(.home) #aside-content {
    display: none;
}

.page .layout:has(.category_ui) #aside-content {
    display: unset;
} */

/* 无侧边栏页，无背景和边框 */
.page:not(.home) #page,
.page:not(.home) #category,
.page:not(.home) #tag,
.page:not(.home) #archive {
    background: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
}

/* .page:not(.home) #page:hover,
.page:not(.home) #archive:hover {
    background: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
} */

.flink-desc {
    margin: -1rem 0 1rem;
    line-height: 1;
    opacity: .6;
}

/* div#archive {
    border: 1px solid var(--gavin-border-color);
  } */

/* 友链bug微调 */
/* 已经在butterfly.styl文件里更改 */

/* .flink-list-item {
    width: calc(100% / 4 - 15px) !important;
}

@media screen and (max-width: 1200px) {
    .flink-list-item {
        width: calc(100% / 3 - 15px) !important;
    }
}

@media screen and (max-width: 900px) {
    #article-container .flink .flink-list > .flink-list-item {
        width: calc(50% - 15px) !important;
    }
} */

/* **************************友链样式************************* */
/* #article-container .flink .flink-list>.flink-list-item {
    border: 1px solid var(--vercel-border-color);
    margin: 7px;
    background: var(--card-bg);
    border-radius: 1rem;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 24;
} */

/* #article-container .flink .flink-list {
    padding: 0;
} */

/* #article-container .flink .flink-list > .flink-list-item a {
    display: flex;
    height: 100%;
} */

/* #article-container .flink .flink-list>.flink-list-item .flink-item-name {
    padding: 0 13px 0 0;
    height: fit-content;
    line-height: 1.1;
} */

/* #article-container .flink .flink-list>.flink-list-item:hover .flink-item-name {
    color: white;
    transition: all 0.3s;
} */

/* #article-container .flink .flink-list>.flink-list-item .flink-item-desc {
    padding: 0 13px 0 0;
    height: 37px;
    line-height: 1.1;
    font-size: 0.85em;
    display: -webkit-box;
    white-space: normal!important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
} */

/* #article-container .flink .flink-list>.flink-list-item:hover .flink-item-desc {
    color: white;
    opacity: .7;
    transition: all 0.3s;
} */

/* #article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
    margin: 13px;
    width: 64px;
    height: 64px;
} */

/* #article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    transition: all 0.6s;
    opacity: 0;
    width: 0;
    margin: 13px 7px 13px 13px;
    height: 0;
} */

/* .flink-item-info {
    width: calc(100% - 75px);
    transition: all .6s;
    display: flex;
    justify-content: center;
    flex-flow: column;
} */

/* .flink-list-item:hover .flink-item-info {
    width: 100%;
    transition: all .6s;
} */
/* *************************首页轮播图************************** */
#home_top {
    margin: 1rem auto 0;
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1600px;
    width: 100%;
    z-index: 0;
}

#home_top_swiper {
    height: auto;
    width: 100%;
    margin: 1rem auto 0;
    display: flex !important;
    justify-content: space-around;
    flex-direction: row !important;
}

/* 
div#swiper_container,
.topGroup .top-group-list-item,
.categoryItem {
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: var(--card-box-shadow) !important;
}

.blog-slider__img img {
    border-radius: 0.8rem !important;
}

#random {
    border-radius: 1rem !important;
    border: 1px solid var(--gavin-border-color) !important;
    background: var(--card-bg) !important;
}

#random-hover {
    border-radius: 1rem !important;
}

.blog-slider__img {
    width: 22rem !important;
}

div#swiper_container:hover,
.topGroup .top-group-list-item:hover {
    box-shadow: var(--card-hover-box-shadow) !important;
}

.layout {
    padding-top: 20px;
}

@media screen and (max-width: 768px) {
    #home_top_swiper {
        display: none !important;
    }
}

.top-group-info a {
    color: var(--font-color);
}

.topGroup .top-group-list-item {
    width: calc(100% / 4 - 0.5rem) !important;
    background: var(--card-bg) !important;
}

.topGroup .top-group-list-item:hover .article-title {
    color: var(--dis-f-0) !important;
} */

/* 轮播补充 */
/* div#bannerGroup {
    width: calc(43% - 15px) !important;
    margin-right: 15px !important;
}

#random #random-banner #skills-style-group-all {
    position: relative;
    top: -9rem;
}

@media screen and (max-width: 1300px) {
    #topGroup .topGroup .top-group-list-item {
        width: calc(100% / 4 - 0.5rem) !important;
    }
}

span.top-group-text {
    background: var(--gavin-nav-hover) !important;
    color: #fff !important;
}

a.categoryButton {
    color: #fff;
    background: var(--gavin-card-bg);
}

a.categoryButton:after {
    background: #fff;
} */

/* ********************首页标签分类条*********************** */
#category-bar {
    padding: 9px 13px 9px 10px;
    background: var(--card-bg);
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 0;
    width: 100%;
    box-shadow: var(--gavin-shadow-1);
    border: 1px solid var(--gavin-border-color);
    /* height: 3.2rem; */
    align-items: center;
    border-radius: 13px;
    transition: .3s;
    /* mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 20; */
}

/* #category a.category-bar-item.select a {
    display: none;
} */

.category-in-bar {
    display: flex;
    white-space: nowrap;
    /* padding: 0 0.5rem; */
}

/* .category-in-bar-tips {
    margin-right: 1rem;
    padding: 0.4rem;
} */

/* "更多 */
/* .category-bar-more {
    margin-right: 0 !important;
} */

.category-bar-items {
    white-space: nowrap;
    overflow-x: scroll;
    display: flex;
    width: 100%;
    border-radius: 8px;
    gap: 9px;
    scrollbar-width: none;
}

.category-bar-items::-webkit-scrollbar {
    display: none;
}

.category-bar-item a {
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--dis-f-0);
    line-height: 1;
    display: flex;
    background: var(--gavin-widget-bg1);
}

/* .category-bar-item:not(:last-child) a {
    margin: 0 7px 0 0;
} */

.category-bar-item:hover a {
    background: var(--gavin-widget-bg2);
    /* color: #fff; */
}

.category-bar-item.select {
    order: -1;
}

.category-bar-item.select a {
    background: var(--gavin-nav-hover);
    color: #fff;
    /* border-radius: 0.5rem; */
}

.category-bar-more {
    margin-left: 0.5rem;
    /* margin-right: 1rem; */
    font-weight: bold;
    color: var(--dis-f-0);
    cursor: pointer;
}

.category-bar-more:hover {
    color: var(--gavin-highlight);
}

/* #category-bar:hover {
    box-shadow: var(--card-hover-box-shadow);
} */

#tag-bar {
    border: 1px solid var(--gavin-border-color);
    box-shadow: var(--gavin-shadow-1);
    border-radius: 13px;
    background-color: var(--card-bg);
    padding: 10px;
    /* margin: 0 0 10px; */
}

#tag-bar-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 32px;
    overflow-y: scroll;
    scrollbar-width: none;
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    #category-bar {
        padding: 0;
        background: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        width: calc(100% + 20px);
        margin: -20px -10px -20px -10px;
    }

    .category-bar-items {
        border-radius: 0;
        padding: 20px 0;
    }

    .category-bar-items .category-bar-item:first-child {
        margin-left: 10px;
    }

    .category-bar-item a {
        background: var(--gavin-widget-bg4);
        box-shadow: var(--gavin-shadow-4);
        padding: 7px 8px;
        font-size: 14px;
        /* border: 1px solid var(--gavin-border-color); */
    }

    #tag-bar-items {
        max-height: 105px;
    }

    .category-bar-more {
        display: none;
    }
}

#tag-bar-items::-webkit-scrollbar {
    display: none;
}

#tag-bar-items .tag-bar-item {
    display: inline-block;
}

#tag-bar-items .tag-bar-item a {
    display: flex;
    align-items: center;
    padding: 8px 8px;
    border-radius: 8px;
    color: var(--dis-f-0);
    line-height: 1;
    background: var(--gavin-widget-bg1);
}

#tag-bar-items a:hover {
    background: var(--gavin-widget-bg2);
}

#tag-bar-items a::before {
    content: '\f292';
    position: relative;
    opacity: .4;
    margin-right: 0.15em;
    font-size: 70%;
    font-family: "Font Awesome 6 Free";
}

#tag-bar-items a sup {
    opacity: .5;
    margin-left: 0.1em;
}

#tag-bar-items .tag-bar-item.select {
    order: -1;
}

#tag-bar-items .tag-bar-item.select a {
    background: var(--gavin-nav-hover);
    color: #fff;
    border-radius: 8px;
}

.tag-bar-more {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0 0;
    background: var(--gavin-widget-bg1);
    border-radius: 8px;
    padding: 6px 0;
}

.tag-bar-more i {
    transition: all 0.3s ease-in-out;
}

.tag-bar-more:hover {
    background: var(--gavin-widget-bg2);
    color: var(--dis-f-0);
}

@media screen and (max-width: 768px) {
    #tag-bar-items .tag-bar-item a {
        font-size: 14px;
    }
}

.article-sort-title {
    margin: 10px 0 0;
    padding-left: 0;
    padding-bottom: 0;
    font-size: 1.7rem;
    font-weight: bold;
    display: flex;
    color: var(--dis-f-0);
}

.article-sort-title .sup {
    margin-left: 0.25em;
    font-size: 70%;
    opacity: 0.5;
}

/* 把时间轴去掉 */
.article-sort-title::before {
    display: none;
}

.article-sort-title::after {
    display: none;
}

.article-sort-item::before {
    display: none;
}

.article-sort {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 标题加粗 */
.article-sort-item-title {
    /* font-weight: bold; */
    line-height: 1.2;
}

.article-sort-item-img {
    width: 20%;
}

.article-sort .article-sort-item .article-sort-item-img {
    border-radius: 9px;
    min-width: 80px;
    max-width: 150px;
    min-height: 80px;
    background: var(--gavin-secondbg);
    -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
    mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
}

.article-sort-item {
    width: 100%;
}

.article-sort-item:not(.year) {
    padding: 10px;
    /* margin: 10px 0; */
    border-radius: 13px;
    background: var(--card-bg);
    border: 1px solid var(--gavin-border-color);
    box-shadow: var(--gavin-shadow-1);
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .article-sort-item:not(.year):hover {
        border-color: var(--gavin-highlight);
        box-shadow: 0 4px 12px -3px var(--gavin-highlight-op);
    }
}

.article-sort-item:not(.year):hover .article-sort-item-title {
    color: var(--gavin-highlight);
}

a.article-sort-item-head {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;
}

/* 归档页双栏显示 */
@media screen and (min-width: 768px) {
    .article-sort-item:not(.year) {
        width: calc(50% - 10px);
    }
}

/* 修复屏幕尺寸缩放bug */
html.hide-aside .layout>div:first-child {
    width: 100%;
}

/* ************************加载动画*************************** */
.loading-img {
    background: url(https://registry.npmmirror.com/cansin-blogdata/3.0.73/files/img/GZRKN.jpg) no-repeat center center;
    background-size: cover;
}

.loading-bg {
    background: rgba(var(--op), .64);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: 0.3s;
    transform: translateZ(0);
}

/* AdsBox隐藏 */
#adsbox {
    display: none !important;
}

/* 51LA隐藏 */
.la-widget {
    display: none !important;
}

/* 好物页面，我的装备 */
.goods_box {
    margin: 20px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* 影视页 */
.stars_box {
    --cardmovie-gap: 15px;
    margin: 20px 0;
    display: flex;
    gap: var(--cardmovie-gap);
    flex-wrap: wrap;
}

/* .card_mask span {
    scrollbar-width: none;
}

.card_mask span::-webkit-scrollbar {
    display: none
}

.stars_box .card_box {
    --w: calc(100% / 6 - 13px);
    width: var(--w) !important;
    height: auto !important;
    margin: 0px !important;
    box-shadow: var(--gavin-shadow-2);
    transition: 0.3s;
} */

/* @media screen and (max-width: 1300px) {
    .stars_box .card_box {
        --w: calc(100% / 5 - 12px);
    }
}

@media screen and (max-width: 1000px) {
    .stars_box .card_box {
        --w: calc(100% / 4 - 12px);
        padding: 13px;
    }
}

@media screen and (max-width: 810px) {
    .stars_box .card_box {
        --w: calc(100% / 3 - 10px);
        padding: 12px;
    }
}

@media screen and (max-width: 520px) {
    .stars_box .card_box {
        --w: calc(100% / 2 - 8px);
        padding: 10px;
    }
}

@media screen and (max-width: 350px) {
    .stars_box .card_box {
        --w: 100%;
        padding: 20px;
    }
} */

/* ******************导航栏音乐******************** */
#nav-music-ctrl {
    display: flex;
    margin-right: 8px;
    z-index: 1;
    /*修复可以显示但无法选中的bug*/
}

/* #music-Switch, #music-Forward, #music-Backward {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    z-index: 9;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    transform-origin: left bottom;
    border-radius: 10px;
    overflow: hidden;
  } */

/* 窄屏不显示音乐控制键 */
@media screen and (max-width: 850px) {

    #nav-travel,
    #music-Switch,
    #music-Forward,
    #music-Backward {
        display: none;
    }
}

/* *********************控制中心音乐********************* */
/* 隐藏原来的Aplayer */
.global-music .aplayer-body {
    display: none;
}

#console .console-mainbox {
    /* margin: 1rem auto 0 auto; */
    width: 290px;
    height: 485px;
    border-radius: 30px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 40;
    /*曲率连续圆角*/
    /* border: var(--style-border); */
    background: var(--f-0);
    position: absolute;
    overflow: hidden;
    top: 70px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}

#console .console-mainbox:not(#console-music-item-main) {
    background: var(--vercel-background);
}

#console-music-item-main {
    padding: 20px;
    transform: scale(0.9) translateY(-50px);
}

#console-music-item-main.item-show {
    transform: scale(1) translateY(0px);
}

#console-settings.item-show,
#console-setting-info1.item-show,
#console-setting-info2.item-show,
#console-setting-info3.item-show,
#console-music-item-main.item-show,
#console-music-item-list.item-show,
#console-music-item-lrc.item-show,
#console-songsheet-item-list.item-show {
    opacity: 1;
    pointer-events: all;
    transition: all 0.5s ease;
}

/* 封面 */
#console-music-cover {
    width: 250px;
    height: 250px;
    overflow: hidden;
    background-color: var(--gavin-widget-bg2);
    border-radius: 10px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 13;
    /*曲率连续圆角*/
}

#console-music-cover img {
    width: 100%;
    height: 100%;
}

#console-music-item-main .cover-shadow {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 30px;
    border-radius: 4px;
    -webkit-filter: blur(12px) opacity(.6);
    filter: blur(16px) opacity(.56);
    transform: scale(.92, .96);
    z-index: -1;
}

/* 曲名和作者 */
#console-music-title,
#console-music-author {
    width: 100%;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    align-items: center;
    line-height: 1.3;
}

#console-music-title {
    height: 44px;
    padding-top: 14px;
    margin-bottom: -4px;
}

#console-music-title-text {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--dis-f-0);
}

#console-music-author {
    height: 25px;
}

#console-music-author-text {
    font-size: 15px;
    color: rgba(var(--op-dis), .6);
}

/* 组件外框 */
.console-progressbar-div {
    width: 100%;
    height: 30px;
    display: flex;
}

#console-music-ctrl-btns {
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#music-ctrl-first,
#music-ctrl-left,
#music-ctrl-center,
#music-ctrl-right,
#music-ctrl-end {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.console-music-ctrl-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transform: scale(1.1);
    transition: .5s ease;
}

/* 字色和字号 */
.console-music-ctrl-btn i {
    line-height: 1;
}

.console-mainbox a {
    color: var(--font-color-blod);
    /*#99a9bf*/
}

#music-ctrl-btn-center i {
    color: var(--dis-f-0);
    font-size: 26px;
    transition: .5s ease;
}

#music-ctrl-btn-left i,
#music-ctrl-btn-right i {
    font-size: 26px;
}

#music-ctrl-btn-first i,
#music-ctrl-btn-end i {
    font-size: 21px;
    opacity: 0.72;
}

.console-music-ctrl-btn:hover {
    color: var(--dis-f-0);
}

.console-music-ctrl-btn:active {
    background: var(--gavin-widget-bg1);
}

@media screen and (min-width: 768px) {
    .console-music-ctrl-btn:hover {
        background: var(--gavin-widget-bg1);
    }
}

#progress-low-btn,
#progress-high-btn {
    font-size: 11px;
    color: rgba(136, 136, 136, 0.5);
}

/* 进度条和音量条 */
#progress-low,
#progress-high {
    width: 2.5rem;
}

#music-progressbar {
    width: 100%;
}

#volume-low,
#volume-high {
    width: 1.5rem;
}

#music-volumebar {
    width: 100%;
}

#progress-low,
#progress-high,
#music-progressbar,
#volume-low,
#volume-high,
#music-volumebar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#p_bar_bg,
#v_bar_bg {
    width: calc(100% - 1rem);
    height: 0.4rem;
    border-radius: 0.4rem;
    /* background-color: rgba(136, 136, 136, 0.5); */
    overflow: hidden;
    transition: height .3s;
}

[data-theme="dark"] #p_bar_bg,
[data-theme="dark"] #v_bar_bg {
    background-color: rgba(136, 136, 136, 0.36);
}

[data-theme="light"] #p_bar_bg,
[data-theme="light"] #v_bar_bg {
    background-color: rgba(136, 136, 136, 0.24);
}

#p_bar,
#v_bar {
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    border-radius: 0.4rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--font-color-blod);
    transition: background-color 0.5s;
}

/* 控制中心文本不可选中 */
#console a,
#console span {
    user-select: none;
}

/* *********************歌单显示********************** */
.console-list-head {
    width: 100%;
    height: 60px;
    /* border-bottom: 1px solid var(--vercel-border-color); */
    display: flex;
    align-items: center;
    flex-flow: column;
    transition: all 0.5s;
}

/* .console-list-foot {
    width: 100%;
    height: 1.8rem;
    border-top: 1px solid var(--vercel-border-color);
    transition: all 0.5s;
} */

.console-list-body {
    width: 100%;
    height: calc(100% - 90px);
    background: var(--f-0);
    overflow-y: scroll;
    padding: 0;
    border-top: 1px solid var(--vercel-border-color);
    border-bottom: 1px solid var(--vercel-border-color);
    scrollbar-width: none;
    transition: .5s;
}

.console-list-body::-webkit-scrollbar {
    display: none;
}

#console-settings-list,
#console-music-list,
#console-songsheet-list {
    width: 100%;
    height: 100%;
    margin: 0;
    list-style: none;
    /*消除序号*/
    padding-inline-start: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

/* 隐藏滚动条 */
#console-settings-list::-webkit-scrollbar,
#console-music-list::-webkit-scrollbar,
#console-songsheet-list::-webkit-scrollbar {
    display: none;
}

#console-music-list li {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#console-music-list li:hover {
    background-color: var(--vercel-hover-bg);
}

#console-music-list li:not(:first-child) div.list-music-info2 {
    border-top: 1px solid var(--vercel-border-color);
    transition: all .5s;
}

div.list-music-info1 {
    width: 35px;
}

div.list-music-info2 {
    width: calc(100% - 45px);
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    transition: all .5s;
}

a.list-music-title {
    font-size: 0.875em;
}

a.list-music-author {
    color: rgb(136, 136, 136);
    font-size: 0.7em;
}

a.list-music-id {
    text-align: center;
    font-size: 0.5em;
    color: rgb(136, 136, 136);
    display: block;
}

a.list-music-id.hide {
    display: none;
}

a.list-music-state {
    display: none;
    text-align: center;
    line-height: 1;
}

a.list-music-state.show {
    display: block;
}

li.music-list-item.current-play {
    background-color: var(--vercel-hover-bg);
    transition: .5s;
}

.console-list-head a.headline {
    display: block;
    /* height: 50%; */
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 15px;
    line-height: 1;
}

.console-list-head a.footline {
    display: block;
    margin-top: 5px;
    line-height: 1;
    font-size: 0.875rem;
}

/* a#music-list-title,
a#songsheet-title {
    display: block;
    height: 50%;
    font-size: 0.9rem;
} */

a#music-list-title {
    cursor: pointer;
}

/* *********************歌单列表*********************** */
#console-songsheet-list li {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#console-songsheet-list li:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 3rem;
}

#console-songsheet-list li:hover {
    background-color: var(--vercel-hover-bg);
}

.songsheet-info1 {
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.songsheet-info2 {
    width: calc(100% - 45px);
    padding: 12px 0;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--vercel-border-color);
    transition: all .5s;
}

.list-songsheet-cover {
    height: 60px;
    width: 60px;
    border-radius: 8px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 12;
    /*曲率连续圆角*/

}

.list-songsheet-title {
    margin-left: 1.5rem;
}

/* *************加载转圈************* */
#console-loading-icon {
    width: 48px;
    height: 48px;
    position: fixed;
    top: calc(70px + 60px + 395px/2 - 48px/2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s;
}

#console-loading-icon.show {
    opacity: 1;
    transition: all 0.1s;
}

#console-loading-icon i {
    --spinner-w: 5px;
    width: 48px;
    /* font-size: 1.8rem;
    display: inline-block; */
}

.gavin-textarea {
    margin: 5px 0 0;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border-radius: 6px;
    color: var(--font-color);
    border: 1px solid var(--gavin-border-color);
    background: var(--gavin-widget-bg1);
    resize: vertical;
    transition: background .5s, color .5s;
}

.gavin-textarea:focus {
    outline: 4px solid rgba(0, 136, 255, .3);
    border-color: var(--gavin-blue2);
}

/* .gavin-textarea.lock {
    background: var(--gavin-widget-bg2);
    cursor: no-drop;
} */

/* ***********侧边栏日历************ */

.card-widget {
    max-height: calc(100vh - 100px);
    /* animation: slide-in .6s .4s backwards; */
}

.card-times a,
.card-times div {
    color: var(--dis-f-0);
}

#card-widget-calendar .item-content {
    display: flex;
}

#calendar-area-left {
    width: 45%;
}

#calendar-area-right {
    width: 55%;
}

#calendar-area-left,
#calendar-area-right {
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#calendar-main {
    width: 100%;
}

#calendar-week {
    height: 1.2rem;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    align-items: center;
    display: flex;
}

#calendar-date {
    height: 3rem;
    line-height: 1.3;
    font-size: 64px;
    letter-spacing: 3px;
    color: var(--gavin-highlight);
    font-weight: bold;
    align-items: center;
    display: flex;
    position: absolute;
    top: calc(50% - 2.1rem);
}

#calendar-solar,
#calendar-lunar {
    height: 1rem;
    font-size: 12px;
    align-items: center;
    display: flex;
    position: absolute;
}

#calendar-solar {
    bottom: 2.1rem;
}

#calendar-lunar {
    bottom: 1rem;
    color: rgba(var(--op-dis),.4);
}

#calendar-main a {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calendar-main a.now {
    background: var(--gavin-highlight);
    color: var(--f-0);
}

#calendar-main .calendar-rh a {
    color: rgba(var(--op-dis),.4);
}

.calendar-rh,
.calendar-r0,
.calendar-r1,
.calendar-r2,
.calendar-r3,
.calendar-r4,
.calendar-r5 {
    height: 1.2rem;
    display: flex;
}

.calendar-d0,
.calendar-d1,
.calendar-d2,
.calendar-d3,
.calendar-d4,
.calendar-d5,
.calendar-d6 {
    width: calc(100% / 7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#card-widget-schedule .item-content {
    display: flex;
}

#schedule-area-left,
#schedule-area-right {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#schedule-area-left {
    width: 30%;
}

#schedule-area-right {
    width: 70%;
    padding: 0 5px;
}

.schedule-r0,
.schedule-r1,
.schedule-r2 {
    height: 2rem;
    width: 100%;
    align-items: center;
    display: flex;
}

.schedule-d0 {
    width: 30px;
    margin-right: 5px;
    text-align: center;
    font-size: 12px;
}

.schedule-d1 {
    width: calc(100% - 35px);
    height: 1.5rem;
    align-items: center;
    display: flex;
}

progress::-webkit-progress-bar {
    /* background-color: rgba(0,0,0,0); */
    /* background-color: rgba(var(--op-dis),.03); */
    background: linear-gradient(to right, rgba(var(--gavin-theme-color), .03), rgba(var(--gavin-theme-color), .05), rgba(var(--gavin-theme-color), .12));
    border-radius: 5px;
    overflow: hidden;
}

progress::-webkit-progress-value {
    background: rgba(var(--gavin-theme-color), .24);
    border-radius: 5px;
}

.aside-span1,
.aside-span2 {
    height: 1rem;
    font-size: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    position: absolute;
}

.aside-span1 {
    margin-left: 5px;
}

.aside-span2 {
    right: 20px;
    color: rgba(var(--op-dis),.5);
}

.aside-span2 a {
    margin: 0 3px;
}

#pBar_year,
#pBar_month,
#pBar_week {
    width: 100%;
    border-radius: 5px;
    height: 100%;
}

#schedule-title,
#schedule-days,
#schedule-date {
    display: flex;
    align-items: center;
}

#schedule-title {
    height: 25px;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
}

#schedule-days {
    height: 40px;
    line-height: 1;
    font-size: 30px;
    font-weight: 900;
    color: var(--gavin-highlight);
}

#schedule-date {
    height: 20px;
    line-height: 1;
    font-size: 12px;
    color: rgba(var(--op-dis),.5);
}

/* *************侧边栏归档日历************** */

.card-archive-calendar-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.card-archive-calendar-head button {
    height: 30px;
    width: 30px;
    color: var(--dis-f-0);
    transition: .3s;
}

.card-archive-calendar-head button,
.card-archive-calendar-center {
    background: var(--gavin-widget-bg1);
    border-radius: 8px;
}

.card-archive-calendar-head button:hover,
.card-archive-calendar-year-item:hover {
    background: var(--gavin-widget-bg2);
    color: var(--dis-f-0);
}

.card-archive-calendar-year-item span,
.card-archive-calendar-month-item span {
    line-height: 1.3;
}

.card-archive-calendar-center {
    height: 30px;
    width: 100px;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
}

.card-archive-calendar-years {
    display: flex;
    flex-direction: row;
    transition: .3s ease;
}

.card-archive-calendar-year-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-size: 14px;
}

/* .card-archive-calendar-year {
    font-weight: bold;
} */

.card-archive-calendar-year-count {
    margin-left: 5px;
}

.card-archive-calendar-year-count,
.card-archive-calendar-month-count {
    /* font-size: 85%; */
    /* font-weight: bold; */
    opacity: .4;
}

.card-archive-calendar-body {
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    padding: 5px 0;
}

.card-archive-calendar-pages {
    display: flex;
    flex-direction: row;
    transition: .3s ease;
}

.card-archive-calendar-page {
    height: 100%;
    width: calc(298px - 10px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 2px;
    margin: 0 5px;
}

.card-archive-calendar-month-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - 10px) / 6);
    height: 45px;
    cursor: pointer;
    /* background: var(--gavin-widget-bg1); */
    border-radius: 8px;
    font-size: 14px;
    /* font-weight: bold; */
}

.card-archive-calendar-month-item:hover {
    background: var(--gavin-nav-hover);
    color: #fff;
}

.card-archive-calendar-head button.no-event,
.card-archive-calendar-month-item.no-link {
    opacity: 0.3;
    pointer-events: none;
}

#sidebar-menus .card-archives {
    padding: 5px;
    position: absolute;
    bottom: 40px;
    width: 100%;
}

#sidebar-menus .card-archive-calendar-head button {
    height: 25px;
    width: 25px;
    border-radius: 6px;
}

#sidebar-menus .card-archive-calendar-center {
    height: 25px;
    border-radius: 6px;
}

#sidebar-menus .card-archive-calendar-year-item {
    font-size: 12px;
}

#sidebar-menus .card-archive-calendar-month-item {
    /* width: calc((100% - 6px) / 4); */
    font-size: 12px;
    border-radius: 6px;
}

#sidebar-menus .card-archive-calendar-page {
    width: calc(270px - 10px);
    gap: 2px;
}

#sidebar-menus .card-archive-calendar-month-item {
    height: 40px;
}

/* ********通知样式********* */
.el-notification {
    /* border: none!important;
    background-color: var(--gavin-background)!important; */
    border-radius: 8px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 12;
}

@media screen and (max-width: 362px) {
    .el-notification {
        min-width: unset;
        width: calc(100% - 32px);
    }
}

@media screen and (max-width: 475px) {
    .el-message {
        min-width: unset;
        width: 80vw;
    }
}

/* .el-notification__title, .el-notification__content, .el-notification__closeBtn {
    color: var(--font-color)!important;
  } */

/* .element-note-bg-success {
    background-color: rgb(210, 255, 200)!important;
  }
  .element-note-bg-warning {
    background-color: rgb(255,235,215)!important;
  }
  .element-note-bg-info {
    background-color: rgb(200, 225, 255)!important;
  }
  .element-note-bg-error {
    background-color: rgb(255,225,225)!important;
  } */

/* *******************按钮样式******************** */
.gavin-switch {
    width: 50px;
    height: 26px;
    background: var(--gavin-switch-off);
    border-radius: 13px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}

.gavin-switch input {
    visibility: hidden;
}

.gavin-switch input::after {
    visibility: visible;
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all .2s;
}

.gavin-switch input:checked::after {
    transform: translateX(24px);
}

.gavin-switch input::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    visibility: visible;
    transition: all .2s;
}

.gavin-switch input:checked::before {
    background: var(--gavin-switch-on);
}

/* ********************设置界面******************** */
#console-settings-list li {
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#li-set-display:hover,
#li-set-tools:hover,
#li-set-about:hover {
    cursor: pointer;
    background: var(--vercel-hover-bg);
}

.setting-info1 {
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setting-info2 {
    height: 100%;
    width: calc(100% - 75px);
    /* padding: 1rem 0; */
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--vercel-border-color);
    transition: .5s;
}

#console-settings-list .setting-icon {
    border-radius: 6px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#li-set-music .setting-icon {
    background-color: rgb(0, 122, 255);
}

#li-set-notice .setting-icon {
    background-color: rgb(88, 86, 214);
}

#li-set-display .setting-icon {
    background-color: rgb(90, 168, 85);
}

#li-set-tools .setting-icon {
    background-color: rgb(255, 149, 0);
}

#li-set-about .setting-icon {
    background-color: rgb(142, 141, 146);
}

#console-settings-list .setting-icon i {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .9);
}

.setting-name,
.setting-name-1,
.setting-name-2 {
    font-size: 1.1rem;
}

.setting-name-1 {
    height: 2.1rem;
    line-height: 1.5rem;
}

.setting-name-1,
.setting-name-2,
.setting-switch,
.setting-next,
.setting-right {
    display: flex;
    align-items: center;
}

.setting-right {
    justify-content: space-between;
    gap: 9px;
}

.setting-next i {
    font-size: 1.5rem;
}

.set-box-normal {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 15px;
    border-bottom: 1px solid var(--vercel-border-color);
    transition: all .5s;
}

.set-box-medium {
    height: fit-content;
    display: block;
    align-items: center;
    margin: 0 15px;
    /* border-bottom: 1px solid var(--vercel-border-color); */
}

.set-box-large {
    height: fit-content;
    display: flex;
    align-items: center;
    margin: 0 15px;
    border-bottom: 1px solid var(--vercel-border-color);
    transition: all .5s;
}

#set-theme-light,
#set-theme-dark {
    width: 30%;
    margin: 10px 10%;
    display: flex;
    flex-flow: column;
    cursor: pointer;
    align-items: center;
}

#set-theme-light img,
#set-theme-dark img {
    width: 100%;
    border-radius: 6px;
}

#set-theme-light text,
#set-theme-dark text {
    font-size: 15px;
}

.gavin-slider {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gavin-slider a:first-child {
    width: 15%;
    font-size: 0.88rem;
    display: flex;
    justify-content: center;
}

.gavin-slider a:last-child {
    width: 15%;
    font-size: 1.12rem;
    display: flex;
    justify-content: center;
}

.gavin-slider input {
    width: 70%;
}

#set-sys-logo {
    margin: 10px 15px 0;
    width: calc(100% - 30px);
    height: 180px;
    border-radius: 12px;
    background-position: center;
    background-size: cover;
    background-image: var(--system-logo);
}

/* 
#set-sys-logo img {
    width: 100%;
} */

.setting-detail {
    color: var(--gavin-note-font-color) !important;
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
    max-width: 180px;
    text-align: right;
}

/* 设置 - 主题色 */
.theme-color-1,
.theme-color-2,
.theme-color-3 {
    height: 24px;
    width: 24px;
    border: 1px solid var(--vercel-border-color);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.theme-color-1:hover,
.theme-color-2:hover,
.theme-color-3:hover,
.theme-color-1.checked,
.theme-color-2.checked,
.theme-color-3.checked {
    outline: 4px solid rgba(0, 136, 255, .36);
}

.theme-color-1 .theme-color-top {
    height: 50%;
    background: var(--gavin-blue3);
}

.theme-color-1 .theme-color-bottom {
    height: 50%;
    background: var(--gavin-blue1);
}

.theme-color-2 .theme-color-top {
    height: 50%;
    background: rgb(129, 78, 250);
}

.theme-color-2 .theme-color-bottom {
    height: 50%;
    background: rgb(0, 234, 208);
}

.theme-color-3 .theme-color-top {
    height: 50%;
    background: rgb(66, 90, 239);
}

.theme-color-3 .theme-color-bottom {
    height: 50%;
    background: rgb(255, 190, 0);
}

/* 设置 - 侧边栏位置 */
.setting-select-bar {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: var(--gavin-switch-off);
    height: 28px;
    width: 96px;
}

.label-select {
    width: 50%;
    height: 100%;
    line-height: 1;
    z-index: 1;
    font-size: 14px;
    transition: .2s ease;
}

.console-mainbox.item-show .label-select {
    pointer-events: all;
    cursor: pointer;
}

.console-mainbox.item-show .label-select.active {
    color: #000;
    pointer-events: none;
    cursor: default;
}

.label-active {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 45px;
    height: 22px;
    background: #fff;
    border-radius: 6px;
    transition: .2s ease;
}

#li-set-login {
    height: 4rem !important;
    background: var(--gavin-widget-bg1);
    margin: 10px 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: .5s;
}

#li-set-login .login-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(var(--op-dis), .1);
    margin-left: 0.8rem;
}

#li-set-login .login-info {
    height: 3rem;
    padding: 0 0.8rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#li-set-login .login-info .name {
    font-size: 18px;
    transition: .5s;
}

#li-set-login .login-info .desc {
    font-size: 13px;
    color: rgba(var(--op-dis), .6);
    margin-top: 4px;
    transition: .5s;
}

#li-set-login .quit {
    position: absolute;
    right: 1.6rem;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--op-dis), .1);
    opacity: 0;
    pointer-events: none;
}

#li-set-login .quit:hover {
    background: rgba(var(--op-dis), .2);
}

/* ****************************************************一图流设计********************************************************* */
#page-site-info {
    display: none;
}

#page-header.not-home-page {
    height: 60px;
}

#page-header.not-home-page:not(.not-top-img)::before {
    /* background-color: transparent; */
    background-color: var(--gavin-background);
}

#head-cover {
    width: 100%;
    height: 350px;
    margin: 0 0 20px;
    border: 1px solid var(--gavin-border-color);
    box-shadow: var(--gavin-shadow-2);
    border-radius: 20px;
    /* mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 30; */
    overflow: hidden;
    position: relative;
}

#head-cover::after {
    box-shadow: 0 0 160px 10px rgba(0, 0, 0, .25) inset;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.head-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.head-cover-title {
    position: absolute;
    top: 40px;
    left: 40px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.head-cover-descr {
    position: absolute;
    bottom: 40px;
    left: 40px;
    line-height: 1.3;
    font-size: 1.15rem;
    color: #f5f5f5;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    /* background-color: rgba(var(--op-dis), .1); */
    /* padding: 4px 8px; */
    /* border-radius: 8px; */
    /* -webkit-backdrop-filter: saturate(360%) contrast(50%) blur(12px);
    backdrop-filter: saturate(360%) contrast(50%) blur(12px); */
    max-width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

@media screen and (max-width: 1000px) {
    #head-cover {
        height: 300px;
        border-radius: 18px;
        /* --smooth-level: 27; */
    }

    .head-cover-title {
        font-size: 2.2rem;
        top: 35px;
        left: 35px;
    }

    .head-cover-descr {
        font-size: 1.1rem;
        left: 35px;
        bottom: 35px;
    }
}

@media screen and (max-width: 768px) {
    #head-cover {
        height: 250px;
        border-radius: 16px;
        /* --smooth-level: 24; */
    }

    #head-cover::after {
        box-shadow: 0 0 80px 5px rgba(0, 0, 0, .25) inset;
    }

    .head-cover-title {
        font-size: 2rem;
        top: 30px;
        left: 30px;
    }

    .head-cover-descr {
        font-size: 1.05rem;
        left: 30px;
        bottom: 30px;
    }
}

@media screen and (max-width: 500px) {
    #head-cover {
        height: 200px;
        /* --smooth-level: 20; */
    }

    .head-cover-title {
        font-size: 1.8rem;
        top: 25px;
        left: 25px;
    }

    .head-cover-descr {
        font-size: 1rem;
        left: 25px;
        bottom: 25px;
    }
}

@media screen and (max-width: 350px) {
    #head-cover {
        height: 170px;
    }

    .head-cover-title {
        top: 20px;
        left: 20px;
    }

    .head-cover-descr {
        left: 20px;
        bottom: 20px;
    }
}

#post-comment .comment-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#post-comment .apply-for-flink {
    border: 1px dashed var(--gavin-note-font-color);
    padding: 0 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .3s;
}

#post-comment .apply-for-flink:hover {
    border-color: var(--gavin-highlight);
    color: var(--gavin-highlight);
}

/* 主页背景 */
/* .page.home #post-cover {
    display: none;
}

.page.home #page-header::before {
    background: transparent !important;
}

#web_bg::before {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0,0,0,0.15);
    content: '';
} */

/* **************************************应用软件******************************** */

#apps {
    z-index: 979;
}

#apps .apps-content {
    width: 70vw;
    /* height: 50vh; */
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: calc((70vw - 70px * 8) / 7);
    transform: scale(1.3);
    transition: .5s ease;
}

#apps.show .apps-content {
    opacity: 1;
    transform: scale(1);
}

#apps .app-box {
    width: 70px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: transform .3s ease;
}

#apps .app-box:hover {
    transform: scale(0.92);
}

#apps .app-icon {
    width: 60px;
    height: 60px;
    position: relative;
    background-color: #fff;
    border-radius: 9px;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-level: 13;
}

#apps .app-name {
    font-size: 13px;
    line-height: 15px;
    color: #fff;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
}

#apps .app-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

#apps span {
    user-select: none;
}

#apps .app-mark {
    position: absolute;
    right: -4px;
    top: -8px;
    padding: 5px;
    border-radius: 50%;
    color: #fff;
    background-color: var(--gavin-blue3);
    box-shadow: 0 4px 12px -4px var(--gavin-blue3);
    display: flex;
    align-items: center;
    justify-content: center;
}

#apps .app-mark i {
    line-height: 1;
    font-size: 14px;
}

@media screen and (max-width: 1100px) {
    #apps .apps-content {
        column-gap: calc((70vw - 70px * 7) / 6);
    }
}

@media screen and (max-width: 900px) {
    #apps .apps-content {
        column-gap: calc((70vw - 70px * 6) / 5);
    }
}

@media screen and (max-width: 768px) {
    #apps .apps-content {
        width: 75vw;
        row-gap: 25px;
        column-gap: calc((75vw - 70px * 5) / 4);
    }
}

@media screen and (max-width: 600px) {
    #apps .apps-content {
        column-gap: calc((75vw - 70px * 4) / 3);
    }
}

@media screen and (max-width: 450px) {
    #apps .apps-content {
        column-gap: calc((75vw - 70px * 3) / 2);
    }
}

.winbox {
    border-radius: 8px;
    overflow: hidden;
    outline: 2px solid #29516C;
}

.wb-full {
    display: none;
}

.wb-body {
    padding: 20px;
    border-radius: 8px;
    background: var(--card-bg);
}

#winboxForApps textarea {
    margin: 20px 0 0;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border-radius: 6px;
    color: var(--font-color);
    border: 1px solid var(--gavin-border-color);
    background: var(--gavin-widget-bg1);
    resize: vertical;
    transition: background .5s, color .5s;
}

#winboxForApps .outer {
    margin: 10px 0 0;
}

#winboxForApps .outer.lock {
    background: var(--gavin-widget-bg2);
    cursor: no-drop;
}

#winboxForApps textarea:focus {
    outline: 6px solid var(--gavin-highlight-op);
    border-color: var(--gavin-highlight);
}

#winboxForApps .select-items {
    width: 100%;
    gap: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#winboxForApps .select-item {
    border-radius: 6px;
    height: 35px;
    padding: 0 6px;
    line-height: 1.3;
    font-size: 14px;
    color: var(--font-color);
    border: 1px solid var(--gavin-border-color);
    background: var(--gavin-widget-bg1);
    transition: background .5s, color .5s;
}

#winboxForApps .select-item.hide {
    display: none;
}

#winboxForApps .select-item.lock {
    cursor: no-drop;
    background: var(--gavin-widget-bg2);
}

#winboxForApps .select-item:focus {
    outline: 6px solid var(--gavin-highlight-op);
    border-color: var(--gavin-highlight);
}

#winboxForApps input::placeholder {
    color: var(--gavin-note-font-color);
}

#winboxForApps .btns {
    margin: 10px 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 0;
    filter: brightness(1) !important;
}

#winboxForApps .btns .btn {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    height: 35px;
    transition: .5s;
}

#winboxForApps .btns .btn.blue {
    color: var(--gavin-blue2);
    background: rgba(0, 136, 255, .24);
}

#winboxForApps .btns .btn.blue:active {
    color: #fff;
    background: var(--gavin-blue2);
}

#winboxForApps .btns .btn.green {
    color: rgba(103, 194, 58, 1);
    background: rgba(103, 194, 58, .24);
}

#winboxForApps .btns .btn.green:active {
    color: #fff;
    background: rgba(103, 194, 58, 1);
}

#winboxForApps .btns .btn.red {
    color: rgba(245, 108, 108, 1);
    background: rgba(245, 108, 108, .24);
}

#winboxForApps .btns .btn.red:active {
    color: #fff;
    background: rgba(245, 108, 108, 1);
}

@media screen and (min-width: 768px) {
    #winboxForApps .btns .btn.blue:hover {
        color: #fff;
        background: var(--gavin-blue2);
    }

    #winboxForApps .btns .btn.green:hover {
        color: #fff;
        background: rgba(103, 194, 58, 1);
    }

    #winboxForApps .btns .btn.red:hover {
        color: #fff;
        background: rgba(245, 108, 108, 1);
    }
}

.sidebar-apps {
    right: 10px;
}

.sidebar-travel {
    left: 10px;
}

.sidebar-travel,
.sidebar-apps {
    position: absolute;
    top: 10px;
    z-index: 2;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    transition: .3s;
}

.sidebar-travel:hover,
.sidebar-apps:hover {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

/* .sidebar-weather {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
}

.sidebar-weather .top,
.sidebar-weather .bottom {
    display: flex;
    align-items: center;
}

.sidebar-weather .temperature {
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.sidebar-weather .condition {
    line-height: 1;
}

.sidebar-weather i,
.sidebar-weather .city {
    line-height: 1.3;
    font-size: 12px;
    color: #fff;
    margin-left: 4px;
}

.sidebar-weather i {
    padding-bottom: 2px;
} */


#amap-container {
    height: 500px;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--gavin-border-color);
    margin: 1rem 0 0;
}

@media screen and (max-width: 768px) {
    #amap-container {
        height: 400px;
    }
}

.amap-marker-label {
    border: 0;
    background: transparent;
}

.amap-marker {
    scale: 0.75;
}

.amap-point-info {
    position: relative;
    margin: 0;
    top: 0;
    right: 0;
    min-width: 0;
    background-color: #000;
    border-radius: 9px;
    padding: 4px 9px;
    line-height: 1.3;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.amap-ctrl-list-layer {
    background-color: var(--card-bg);
    border-radius: 6px;
}

.amap-ctrl-list-layer ul p {
    margin: 0 10px!important;
    line-height: 20px !important;
    color: var(--dis-f-0);
}

.amap-control.amap-scalecontrol {
    background: var(--gavin-op-5);
    padding: 5px;
    border-radius: 6px;
}