:root {
    --heo-maskbgdeep:#fff
}
#rightmenu-mask {
    pointer-events:none
}
.heoblogIcon {
    font-size:24px;
    color:var(--text_color);
    transition:color 0.3s
}
#rightMenu.kk-menu-anim {
    transition:transform 0.3s cubic-bezier(.28,.69,.38,.99),opacity 0.16s
}
.rightMenu-group {
    padding:1rem 0.3rem
}
.rightMenu-group:not(:nth-last-child(1)) {
    border-bottom:1px dashed var(--theme-color)
}
.rightMenu-item {
    border-radius:8px;
    transition:0.3s;
    cursor:pointer;
    line-height:2rem;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    user-select:none;
    position:relative;
    background:none;
    box-shadow:none !important;
    padding-left:0.5rem
}
.rightMenu-item:hover {
    background-color:var(--theme-color);
    color:#fff;
    box-shadow:none !important
}
.rightMenu-item:hover .heoblogIcon {
    color:#fff !important
}
.rightMenu-item i {
    display:inline-block;
    text-align:center;
    font-size:19px;
    margin-right:8px;
    margin-left:0;
    padding:0;
    color:#222 !important;
    transition:color 0.3s
}
.rightMenu-item span {
    display:inline-block;
    vertical-align:middle;
    font-size:15px
}
#rightMenu {
    display:none;
    position:fixed;
    padding:0 1rem;
    width:18rem;
    height:fit-content;
    top:10%;
    left:10%;
    border-radius:12px;
    z-index: 10010 !important;
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
    transition:border .3s;
    overflow:visible;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    left:0 !important;
    top:0 !important;
    transform:translate(0,0);
    transition:transform 0.26s cubic-bezier(.28,.69,.38,.99),opacity 0.2s,border 0.3s
}
#rightMenu:hover {
    border:1px solid var(--theme-color);
    box-shadow:0 10px 40px rgba(66,90,239,0.08);
    -webkit-box-shadow:0 10px 40px rgba(66,90,239,0.08);
    -moz-box-shadow:0 10px 40px rgba(66,90,239,0.08);
    transition:0.6s
}
#rightMenu .rightMenu-group.rightMenu-small {
    display:flex;
    justify-content:space-between;
    gap:0.5rem
}
#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item {
    flex:1 1 0;
    margin:0 0.2rem;
    padding:0.5rem 0;
    font-size:18px;
    justify-content:center
}
#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item i {
    margin:0;
    padding:0;
    font-size:22px;
    color:#222 !important
}
#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item:hover i {
    color:#fff !important
}
#rightMenu .rightMenu-line .rightMenu-item {
    margin:1rem 0;
    padding:0.8rem 0 0.8rem 0.5rem;
    display:flex;
    align-items:center;
    justify-content:flex-start
}
#rightMenu .rightMenu-line .rightMenu-item i {
    margin:0 8px 0 0
}
#rightmenu-mask {
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    display:none;
    z-index: 10009 !important; 
    margin:0 !important
}
#rightMenu .rightMenu-item,#rightMenu .rightMenu-item a,#rightMenu .rightMenu-item span {
    text-decoration:none !important
}
.rightMenu-item[heotip]:hover::after {
    content:attr(heotip);
    position:absolute;
    bottom:110%;
    left:50%;
    transform:translateX(-50%);
    background:rgba(60,60,60,0.95);
    color:#fff;
    padding:3px 10px;
    border-radius:5px;
    font-size:13px;
    white-space:nowrap;
    pointer-events:none;
    opacity:1;
    z-index:10000;
    box-shadow:0 2px 8px rgba(0,0,0,0.12)
}
@media (prefers-color-scheme:dark) {
    #rightMenu {
        background:rgba(30,30,30,0.85);
        border:1px solid rgba(255,255,255,0.1);
        color:#eee;
        box-shadow:0 8px 32px rgba(0,0,0,0.25);
        backdrop-filter:blur(10px)!important;
        -webkit-backdrop-filter:blur(10px)
    }
    #rightMenu .rightMenu-item,#rightMenu .rightMenu-item a,#rightMenu .rightMenu-item span {
        color:#eee !important
    }
}
svg#popup-link.icon {
    width:30px;
    height:30px
}
#wniui-popup-window {
    min-width:300px;
    max-width:500px;
    bottom:20px;
    right:20px;
    position:fixed;
    z-index:1002;
    color:#363636;
    padding:8px 16px;
    border-radius:12px;
    transition:opacity 0.3s ease,transform 0.3s ease;
    background-color:rgba(255,255,255,0.85);
    border:1px solid #e3e8f7;
    max-height:300px;
    opacity:0;
    transform:translateY(20px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    transition:.3s;
    cursor:pointer
}
#wniui-popup-window:hover {
    border:1px solid #425AEF;
    transition:.3s
}
#wniui-popup-window.wniui-show {
    opacity:1;
    transform:translateY(0)
}
.wniui-popup-header {
    position:relative;
    display:flex;
    align-items:center
}
.wniui-popup-title {
    font-size:14px;
    font-weight:bold;
    background:#363636;
    color:#fff;
    padding:4px 8px;
    border-radius:4px;
    margin-right:8px;
    transition:.3s
}
.wniui-popup-title:hover {
    background-color:#423AEF;
    transition:.3s
}
.wniui-popup-author {
    font-size:14px;
    font-weight:600;
    color:#363636;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer
}
.wniui-popup-avatar {
    width:25px;
    height:25px;
    border-radius:50%;
    margin-right:6px;
    background-color:#f5f6f7
}
.wniui-popup-window-divider {
    width:100%;
    height:1px;
    background:#e3e8f7;
    margin:5px 0
}
.wniui-popup-window-content {
    font-size:15px;
    word-wrap:break-word;
    max-width:450px;
    white-space:normal;
    text-overflow:ellipsis
}
.wniui-popup-window-content p {
    margin:0;
    padding:0;
    line-height:1.5;
    display:inline-block;
    vertical-align:middle
}
@media screen and (max-width:768px) {
    #wniui-popup-window {
        display:none !important
    }
}
.wniui-popup-author span:hover {
    color:#425AEF;
    transition:.3s
}
svg#popup-link:hover path {
    fill:#425AEF;
    transition:.3s
}



.qmsg.qmsg-wrapper {
    position:fixed;
    top:20px;
    left:0;
    z-index:12012;
    width:100%;
    pointer-events:none;
    color:rgba(0,0,0,0.55);
    font-size:1.375rem;
    font-weight:500;
    font-variant:tabular-nums;
    font-feature-settings:"tnum"
}
.qmsg .qmsg-item {
    padding:8px;
    text-align:center;
    animation-duration:.3s;
    will-change:transform
}
.qmsg .qmsg-item .qmsg-content {
    text-align:left;
    position:relative;
    display:inline-block;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    pointer-events:all;
    max-width:80%;
    min-width:80px
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] {
    display:flex;
    align-items:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:10px 12px;
    border-radius:8px
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] span {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    white-space:normal
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon {
    display:flex;
    align-items:center;
    height:16px
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child {
    margin-right:8px
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close {
    cursor:pointer;
    color:rgba(0,0,0,0.45);
    transition:color .3s;
    margin-left:6px
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover > svg path {
    stroke:#555
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-count {
    display:inline-block;
    position:absolute;
    left:-6px;
    top:-6px;
    color:#fff;
    font-size:12px;
    text-align:center;
    height:16px;
    line-height:16px;
    border-radius:99px;
    min-width:16px;
    animation-duration:.3s
}
.qmsg .qmsg-item .qmsg-content-info {
    color:#fff;
    background:linear-gradient(135deg,#635BFF,#539bff)
}
.qmsg .qmsg-item .qmsg-content-info .qmsg-count {
    background-color:#539bff
}
.qmsg .qmsg-item .qmsg-content-warning {
    color:#fff;
    background:linear-gradient(135deg,#f57f32,#eeac27)
}
.qmsg .qmsg-item .qmsg-content-warning .qmsg-count {
    background-color:#eeac27
}
.qmsg .qmsg-item .qmsg-content-error {
    color:#fff;
    background:linear-gradient(135deg,#ff4d49,#f85071)
}
.qmsg .qmsg-item .qmsg-content-error .qmsg-count {
    background-color:#f85071
}
.qmsg .qmsg-item .qmsg-content-success {
    color:#fff;
    background:linear-gradient(135deg,#0cd20f,#6ad22e)
}
.qmsg .qmsg-item .qmsg-content-success .qmsg-count {
    background-color:#09bb07
}
.qmsg .qmsg-item .qmsg-content-loading {
    color:#fff;
    background:linear-gradient(135deg,#6c66cc,#66ccb9)
}
.qmsg .qmsg-item .qmsg-content-loading .qmsg-count {
    background-color:#66ccb9
}
.qmsg .animate-turn {
    animation:MessageTurn 1s linear infinite
}
@keyframes MessageTurn {
    0% {
        transform:rotate(0deg)
    }
    25% {
        transform:rotate(90deg)
    }
    50% {
        transform:rotate(180deg)
    }
    75% {
        transform:rotate(270deg)
    }
    100% {
        transform:rotate(360deg)
    }
}
@keyframes MessageMoveOut {
    0% {
        max-height:150px;
        padding:8px;
        opacity:1
    }
    to {
        max-height:0;
        padding:0;
        opacity:0
    }
}
@keyframes MessageMoveIn {
    0% {
        transform:translateY(-100%);
        transform-origin:0 0;
        opacity:0
    }
    to {
        transform:translateY(0);
        transform-origin:0 0;
        opacity:1
    }
}
@keyframes MessageShake {
    0%,100% {
        transform:translateX(0px);
        opacity:1
    }
    25%,75% {
        transform:translateX(-4px);
        opacity:.75
    }
    50% {
        transform:translateX(4px);
        opacity:.25
    }
}