* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局链接样式 */
        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        body {
            margin: 0;
            padding: 0;
            color: #333;
            line-height: 1.5;
            font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
            font-size: 14px;
            background: #f5f6f7;
            overflow-x: hidden;
            overflow-y: auto
        }

        header {
            background: #fff;
            border-bottom: 1px solid #e5e5e5;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nsk-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            height: 56px;
        }

        /* Logo 样式 */
        .site-title {
            font-weight: 600;
            font-size: 18px;
        }

        .site-title a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
        }

        .site-title img {
            max-height: 36px;
            vertical-align: middle;
            margin-right: 8px;
        }

        .title-text {
            vertical-align: middle;
        }

        .beta-icon {
            background: #ff6b6b;
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            margin-left: 6px;
            font-weight: 500;
        }

        /* PC端导航菜单 */
        .nav-menu {
            list-style: none;
            display: flex;
            gap: 0;
            margin: 0 auto 0 30px;
        }

        .nav-menu li a {
            display: block;
            padding: 18px 15px;
            color: #666;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
        }

        .nav-menu li a:hover {
            color: #333;
        }

        /* 搜索框 */
        .search-box {
            position: relative;
            margin-left: 20px;
        }

        .search-box input[type="text"]#search-site2 {
            width: 200px;
            height: 32px;
            padding: 0 35px 0 12px;
            border: 1px solid #e5e5e5;
            border-radius: 16px;
            font-size: 14px;
            outline: none;
            transition: all 0.2s;
        }

        .search-box input[type="text"]#search-site2:focus {
            width: 250px;
            border-color: #4a90e2;
        }

        .search-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 17px;
            height: 17px;
            color: #666;
            pointer-events: none;
        }

        .search-hint {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 8px;
            display: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .search-box:focus-within .search-hint {
            display: block;
        }

        .search-hint a {
            display: block;
            padding: 6px 10px;
            color: #666;
            text-decoration: none;
            font-size: 12px;
            border-radius: 4px;
        }

        .search-hint a:hover {
            background: #f5f5f5;
            color: #333;
        }

        /* 主题切换按钮 */
        .color-theme-switcher {
            margin-left: 15px;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .color-theme-switcher:hover {
            background: #f5f5f5;
        }

    
        /* PC端专用元素 */
        .pc-only {
            display: block;
        }

        /* 移动端专用元素 - 默认隐藏 */
        .mobile-nav-menu,
        .meta-button,
        .right-button-group,
        .mobile-logo {
            display: none;
        }

        /* 移动端样式 */
        @media (max-width: 768px) {
            .nsk-container {
                height: 50px;
                padding: 0 12px;
            }

            /* 隐藏PC端元素 */
            .site-title,
            .nav-menu,
            .search-box,
            .pc-only {
                display: none !important;
            }

            /* 显示移动端元素 */
            .mobile-nav-menu {
                display: flex;
                align-items: center;
                list-style: none;
                width: 100%;
                gap: 4px;
            }

            .meta-button,
            .right-button-group {
                display: flex;
                align-items: center;
                flex-shrink: 0;
            }

            .meta-button a,
            .right-button-group a,
            .right-button-group {
                padding: 6px 6px;
                color: #666;
                text-decoration: none;
                display: flex;
                align-items: center;
                cursor: pointer;
            }
            
            .meta-button a .iconpark-icon,
            .right-button-group a .iconpark-icon {
                color: #666 !important;
            }

            .meta-button a:hover,
            .right-button-group a:hover {
                color: #333;
            }
            
            .meta-button a:hover .iconpark-icon,
            .right-button-group a:hover .iconpark-icon {
                color: #333 !important;
            }

            .mobile-nav-menu .iconpark-icon {
                width: 16px;
                height: 16px;
            }

            .mobile-logo {
                display: flex;
                align-items: center;
                margin-right: auto;
                flex: 1;
            }

            .mobile-logo img {
                max-height: 28px;
                vertical-align: middle;
                margin-right: 6px;
            }

            .mobile-logo a {
                display: flex;
                align-items: center;
                text-decoration: none;
                color: #333;
                font-weight: 600;
                font-size: 16px;
            }

            /* 移动端搜索框 - PC端隐藏 */
            .mobile-search-box {
                display: none;
            }
        }

        @media (max-width: 768px) {
            /* 移动端搜索框 */
            .mobile-search-box {
                position: fixed;
                top: 50px;
                left: 0;
                right: 0;
                background: #fff;
                padding: 12px;
                border-bottom: 1px solid #e5e5e5;
                z-index: 999;
            }

            .mobile-search-box input[type="text"]:not([style*="display: none"]) {
                width: 100%;
                height: 36px;
                padding: 0 12px;
                border: 1px solid #e5e5e5;
                border-radius: 4px;
                font-size: 14px;
                outline: none;
            }
        }

        /* SVG图标 */
        .iconpark-icon {
            display: inline-block;
        }
        
        .iconpark-icon use {
            fill: currentColor;
        }


/* 顶部快速导航 */
#fast-nav-button-group {
    bottom: 40px;
    position: fixed;
    right: 50px;
    right: calc(50% - 590px);
    z-index: 99
}

@media screen and (max-width: 500px) {
    #fast-nav-button-group {
        right:30px
    }
}

#fast-nav-button-group .nav-item-btn {
    position: absolute;
    right: 0
}

#fast-nav-button-group .nav-item-btn:last-child {
    bottom: 0
}

#fast-nav-button-group .nav-item-btn:nth-last-child(2) {
    bottom: 40px
}

#fast-nav-button-group .nav-item-btn:nth-last-child(3) {
    bottom: 80px
}

.nav-item-btn {
    align-items: center;
    background-color: var(--bg-main-color);
    border: 1px solid var(--glass-color);
    border-radius: 20%;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-sizing: border-box;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
    cursor: pointer
}

@media screen and (max-width: 500px) {
    .nav-item-btn {
        border:1px solid rgba(0,0,0,.15);
        box-shadow: none
    }
}

.nav-item-btn .iconpark-icon {
    color: #999;
    cursor: pointer;
    height: 26px;
    width: 26px
}

@media screen and (min-width: 500px) {
    .nav-item-btn .iconpark-icon:hover {
        color:var(--link-hover-color)
    }
}

#back-to-parent {
    display: flex
}


/* 底部 */
footer {
    background-color: #333;
    height: auto;
    position: relative;
    width: 100%
}

.contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px
}

.contain,footer .col {
    box-sizing: border-box
}

footer .col {
    height: auto;
    padding-bottom: 20px
}

footer .col .group-head-link {
    color: #edd6ac;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .25em;
    line-height: 17px;
    margin: 0;
    padding: 20px 0 5px;
    text-transform: uppercase
}

footer .col ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

footer .col ul li {
    color: #999;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 0;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s
}

.social ul li {
    display: inline-block;
    padding-right: 5px
}

footer .col ul li:hover {
    color: #fff;
    transition: .1s;
    -webkit-transition: .1s;
    -moz-transition: .1s
}

.clearfix {
    clear: both
}

.foot,.footer-sep {
    width: 100%
}

.foot {
    border-top: 1px solid hsla(0,0%,100%,.1);
    text-align: center
}

@media only screen and (min-width: 1280px) {
    .contain {
        margin:0 auto;
        width: 1200px
    }
}

@media only screen and (max-width: 1139px) {
    .contain .social {
        display:block
    }

    .social .group-head-link {
        margin: 0
    }
}

@media only screen and (max-width: 950px) {
    footer .col {
        width:33%
    }

    footer .col .group-head-link {
        font-size: 14px
    }

    footer .col ul li {
        font-size: 13px
    }

    .col.pc {
        display: none
    }
}


/* 左侧边栏 */
#nsk-left-panel-container {
    left: calc(50% - 710px);
    position: fixed;
    top: 87px;
    width: 150px
}

@media screen and (min-width: 769px) and (max-width: 1360px) {
    #nsk-left-panel-container {
        display:none
    }
}

#nsk-left-panel-container .category-list {
    background-color: var(--bg-main-color);
    border-radius: 12px;
    box-shadow: 2px 0 8px rgba(0,0,0,.08);
    font-size: 14px;
    margin-left: auto;
    overflow: hidden;
    transition: left .3s ease;
    width: 100px;
    z-index: 100
}

#nsk-left-panel-container .category-list h4 {
    background-color: rgba(0,0,0,.05);
    display: none;
    height: 30px;
    line-height: 30px;
    margin: 0;
    text-align: center
}

#nsk-left-panel-container .category-list h4 svg {
    height: 18px;
    width: 18px
}

#nsk-left-panel-container .category-list ul {
    list-style: none;
    margin: 0;
    text-align: center
}

#nsk-left-panel-container .category-list li:first-child>a {
    padding-top: 8px
}

#nsk-left-panel-container .category-list li:last-child>a {
    padding-bottom: 8px
}

#nsk-left-panel-container .category-list a {
    align-items: center;
    color: #666;
    display: flex;
    justify-content: center;
    padding: 6px 0;
    text-decoration: none;
    transition: background .2s,color .2s
}

.dark-layout #nsk-left-panel-container .category-list a {
    color: #999
}

#nsk-left-panel-container .category-list a svg {
    margin-right: 6px
}

#nsk-left-panel-container .category-list .current-category a,#nsk-left-panel-container .category-list a:hover {
    background: #f1f3f5;
    color: #0dbc79
}

.dark-layout #nsk-left-panel-container .category-list .current-category a,.dark-layout #nsk-left-panel-container .category-list a:hover {
    background-color: rgba(0,0,0,.15)
}

#nsk-left-panel-container .category-list a svg {
    fill: currentColor;
    height: 16px;
    vertical-align: middle;
    width: 16px
}

#nsk-left-panel-container .category-list li:not(.current-category) {
    opacity: .5;
    transition: opacity .3s ease
}

#nsk-left-panel-container .category-list li:hover:not(.current-category) {
    opacity: 1
}

/* 移动端侧边栏样式 - 覆盖PC端样式 */
@media (max-width: 768px) {
    #nsk-left-panel-container {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        padding-top: 60px !important;
        padding-bottom: 20px !important;
        display: block !important;
    }
    
    #nsk-left-panel-container.mobile-sidebar-open {
        left: 0 !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .dark-layout #nsk-left-panel-container {
        background: #1a1a1a !important;
    }
    
    .dark-layout #nsk-left-panel-container.mobile-sidebar-open {
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5) !important;
    }
    
    #nsk-left-panel-container .category-list {
        width: 100% !important;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }
    
    #nsk-left-panel-container .category-list h4 {
        display: flex !important;
    }
    
    #nsk-left-panel-container .category-list a {
        justify-content: flex-start !important;
        padding: 12px 20px !important;
    }
    
    #nsk-left-panel-container .category-list a span {
        display: inline !important;
    }
    
    /* 移动端专属:用户信息卡片 */
    .mobile-only-sidebar-section {
        display: block !important;
        padding: 0 12px;
    }
    
    .mobile-only-sidebar-section .user-card {
        margin-bottom: 20px;
    }
    
    .mobile-only-sidebar-section .nsk-panel {
        margin-bottom: 20px;
    }
}

/* PC端隐藏移动端专属内容 */
@media (min-width: 769px) {
    .mobile-only-sidebar-section {
        display: none !important;
    }
}


@-webkit-keyframes scale-fade {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8) rotateX(-40deg);
        transform: scale(.8) rotateX(-40deg)
    }

    50% {
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1.05) rotateX(0);
        transform: scale(1.05) rotateX(0)
    }

    to {
        -webkit-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0)
    }
}

@keyframes scale-fade {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8) rotateX(-40deg);
        transform: scale(.8) rotateX(-40deg)
    }

    50% {
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1.05) rotateX(0);
        transform: scale(1.05) rotateX(0)
    }

    to {
        -webkit-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0)
    }
}

.msc-confirm--animate {
    -webkit-animation: scale-fade .3s cubic-bezier(.8,.02,.45,-1.09) forwards;
    animation: scale-fade .3s cubic-bezier(.8,.02,.45,.91) forwards;
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    transform-origin: bottom center
}

.msc-confirm {
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    display: none
}

.msc-confirm,.msc-overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10020
}

.msc-overlay {
    background-color: var(--bg-main-color);
    opacity: .9
}

.msc-confirm button {
    background: none;
    border: none;
    cursor: pointer;
    transition: all .2s ease-in
}

.msc-confirm button:focus {
    outline: none
}

.msc-close {
    border-radius: 20px;
    font-size: 1.2em;
    height: 40px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    vertical-align: middle;
    width: 40px
}

.msc-close:hover,.msc-content {
    background: var(--bg-main-color)
}

.msc-content {
    margin: 10% auto;
    max-width: 480px;
    opacity: 1;
    padding: 40px;
    position: relative;
    text-align: center;
    z-index: 10021
}

@media (max-width: 600px) {
    .msc-content {
        padding:10px 0
    }
}

.msc-title {
    font-size: 2em;
    line-height: 1.3;
    margin: 0 0 .1em
}

.msc-body {
    color: 666;
    font-size: 1.2em;
    margin-bottom: 1em
}

.msc-body p {
    margin: 0 0 10px
}

.msc-input {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.15);
    box-sizing: border-box;
    font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 38px;
    letter-spacing: .02em;
    padding: 0 15px;
    text-align: center;
    width: 100%
}

.msc-input:focus {
    border-color: #0f985a;
    outline: none
}

.msc-action button {
    background: var(--bg-main-color);
    border: 1px solid #ccc;
    border-radius: 25px;
    min-width: 80px;
    padding: 10px 20px
}

.msc-action button:focus {
    outline: none
}

.msc-ok {
    margin-right: 10px
}

button.msc-ok:focus,button.msc-ok:hover {
    border: 1px solid #0f985a;
    color: #0f985a
}

button.msc-cancel:focus,button.msc-cancel:hover {
    border: 1px solid var(--text-color);
    color: var(--text-color)
}

.msc-sub {
    white-space: pre-line
}

:root {
    --dark-color: #333;
    --fade-color: #555;
    --gray-color: #888;
    --main-color: #2ea44f;
    --sub-color: #45ca6b;
    --text-color: #333;
    --link-color: #555;
    --link-hover-color: #333;
    --bg-main-color: #fff;
    --bg-sub-color: #fbfbfb;
    --glass-color: rgba(0,0,0,.05)
}

a,abbr,acronym,address,applet,big,caption,cite,dd,del,dfn,div,dl,dt,em,fieldset,font,form,html,iframe,img,ins,kbd,label,legend,li,object,ol,q,s,samp,small,span,strike,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
    border: 0;
    font-size: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline
}

@font-face {
    font-family: EmojiSubset;
    src: local("Segoe UI Emoji"),url(data:font/woff2;base64,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) format("woff2");
    unicode-range: u+1f30c,u+1f4ab,u+2728
}

body {
    background-color: #fff;
    border: 0;
    color: var(--text-color);
    font-family: EmojiSubset,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: small;
    line-height: 1.5em;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto
}

@media screen and (max-width: 500px) {
    body {
        -webkit-text-size-adjust:100%
    }
}

a {
    color: var(--link-color);
    text-decoration: none
}

a:hover {
    color: var(--link-hover-color)
}

ol,ul {
    list-style: none
}

input,textarea {
    outline: none
}

textarea {
    line-height: 128%
}

table {
    border-collapse: separate;
    border-spacing: 0
}

blockquote,h1,h2,h3,h5,h6,p {
    border: 0;
    padding: 0
}

blockquote,p {
    font-family: inherit
}

blockquote,body,code,h1,h2,h3,h4,h5,h6,p,pre {
    font-style: inherit;
    outline: 0;
    vertical-align: baseline
}

blockquote,code,p,pre {
    font-size: 100%;
    font-weight: inherit
}

body,code {
    margin: 0
}

blockquote:after,blockquote:before,q:after,q:before {
    content: ""
}

blockquote,q {
    quotes: "" ""
}

[disabled] {
    opacity: .5;
    pointer-events: none
}

p {
    margin: 5px 0
}

select {
    color: #222;
    font-family: arial;
    font-size: 14px;
    margin: 0;
    padding: 3px
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
    margin: 5px 0
}

h2 {
    font-size: 120%
}

h3,h4 {
    font-size: 110%
}

h5 {
    font-size: 100%
}

@media screen and (max-width: 500px) {
    html {
        width:100%
    }
}

.bg1 {
    background-color: #fffcf8
}

@media screen and (max-width: 500px) {
    .bg1 {
        background-color:#f8f8f8
    }
}

@media only screen and (min-width: 500px) {
    .bg1 {
        background-image:linear-gradient(#d4d4d4 1px,transparent 0),linear-gradient(90deg,#d4d4d4 1px,transparent 0);
        background-size: 32px 32px
    }

    .bg1,.bg2 {
        transition: background-color 1s;
        transition: background-image 1s
    }

    .bg2 {
        background-color: #fff;
        background: linear-gradient(135deg,hsla(0,0%,81%,.333) 25%,transparent 0) -40px 0 /80px 80px,linear-gradient(225deg,#cfcfcf 25%,transparent 0) -40px 0 /80px 80px,linear-gradient(315deg,hsla(0,0%,81%,.333) 25%,transparent 0) 0 0 /80px 80px,linear-gradient(45deg,#cfcfcf 25%,#f5f5f5 0) 0 0 /80px 80px
    }

    .bg3 {
        background-color: #fff;
        background-image: linear-gradient(135deg,#d9d9d9 25%,transparent 0),linear-gradient(225deg,#d9d9d9 25%,transparent 0),linear-gradient(45deg,#d9d9d9 25%,transparent 0),linear-gradient(315deg,#d9d9d9 25%,#fefefe 0);
        background-position: 80px 0,80px 0,0 0,0 0;
        background-repeat: repeat;
        background-size: 80px 80px
    }
}

.avatar-normal {
    border-radius: 15%;
    box-shadow: 0 0 3px rgba(0,0,0,.1);
    color: transparent;
    display: inline-block;
    height: 40px;
    width: 40px
}

.iconpark-icon {
    height: 14px;
    vertical-align: middle;
    width: 14px
}

.nsk-badge {
    white-space: nowrap
}

.nsk-badge.read-only {
    border: 1px solid;
    color: #c71e1e;
    font-size: 12px;
    padding: 0 2px
}

.small-margin {
    margin: 5px 0
}

.nsk-container {
    box-sizing: border-box;
    margin: auto;
    width: 1080px
}

/* 三栏布局父容器最小高度 */
.nsk-container.body {
    min-height: calc(100vh - 180px);
    display: flex;
    gap: 20px;
    align-items: flex-start
}

@media screen and (max-width: 1200px) {
    .nsk-container {
        margin:0 20px;
        width: auto
    }
}

@media screen and (max-width: 500px) {
    .nsk-container {
        margin:0
    }
}

.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #2ea44f;
    border: 1px solid rgba(27,31,35,.15);
    border-radius: 6px;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(27,31,35,.1);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 14px;
    font-weight: 600;
    height: 27px;
    line-height: 20px;
    line-height: 25px;
    padding: 0 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap
}

.btn:hover {
    background-color: #45ca6b
}

.category-description {
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px
}

.circle-icon {
    border-radius: 50%;
    height: 15px;
    padding: 1px;
    width: 15px
}

.pined {
    background-color: #303030;
    color: #fff
}

.award {
    color: #ef740a;
    position: relative;
    top: -1px
}

.pined.payed {
    background-color: #fddea9;
    color: #774b00
}

.loading-img {
    max-height: 10px;
    max-width: 10px
}

.logo-link:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

[id$=mount] {
    line-height: 80px;
    text-align: center
}

.skeleton {
    animation: loading 2s ease infinite
}

.avatar-normal.skeleton {
    animation-iteration-count: 2
}

@keyframes loading {
    0% {
        background: #aaa;
        background-image: linear-gradient(100deg,#eee 40%,#fff 50%,#eee 60%);
        background-position: 100% 50%;
        background-size: 300% 100%
    }

    to {
        background: #aaa;
        background-image: linear-gradient(100deg,#eee 40%,#fff 50%,#eee 60%);
        background-position: 0 50%;
        background-size: 300% 100%
    }
}

@keyframes opacity {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

.blocked-comment,.blocked-post {
    display: none!important
}

.new-discussion {
    margin-bottom: 1rem;
    width: 100%
}

a.new-discussion {
    color: #fff
}

.grecaptcha-badge {
    visibility: hidden
}

.msc-body,.msc-cancel,.msc-ok {
    color: var(--text-color)
}

.triangle-left,.triangle-right {
    border-color: transparent transparent gray;
    border-style: solid;
    border-width: 0 6px 10px;
    display: inline-block;
    height: 0;
    width: 0
}

.triangle-right {
    transform: rotate(90deg)
}

.triangle-left {
    transform: rotate(270deg)
}

.post-content {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    margin-top: 14px;
    overflow: hidden
}

.post-content i:not([class]) {
    display: none
}

.post-content img {
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    margin: 1rem 2.5%;
    max-width: 95%
}

.post-content img.sticker {
    box-shadow: none;
    margin: 0;
    max-width: 90px;
    vertical-align: middle
}

.post-content img[src$=noshadow] {
    box-shadow: none
}

.post-content video.sticker {
    vertical-align: middle
}

.post-content p {
    margin: 10px 0
}

.post-content h2 {
    color: #2ea44f;
    line-height: 1.5
}

.post-content h2,.post-content hr {
    border-bottom: 1px solid #e9e9e9;
    border-top: none
}

.post-content a {
    color: #0dbc79
}

.post-content h3,.post-content h4,.post-content h5,.post-content h6 {
    color: #555a62;
    line-height: 1.25
}

.post-content a,.post-content div,.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.post-content p,.post-content span,.post-content td,.post-content th {
    text-overflow: ellipsis;
    word-break: break-word
}

.post-content h2 {
    font-size: 17px
}

.post-content h3 {
    font-size: 16px
}

.post-content blockquote {
    background: rgba(0,0,0,.05);
    border-left: 4px solid rgba(0,0,0,.1);
    margin: 1em;
    min-width: 200px;
    overflow-y: auto;
    padding: 1ex 10px
}

.post-content code,.post-content pre {
    background: #ffff9954;
    border: 1px solid #eec;
    border-radius: 2px;
    font-family: monospace;
    overflow: auto;
    padding: 4px 8px
}

.post-content pre>code {
    background-color: unset
}

.post-content code {
    white-space: pre-wrap
}

.post-content pre,.post-content pre code {
    white-space: pre
}

.post-content pre {
    box-sizing: border-box;
    margin: 1em 0;
    max-width: 724px
}

.post-content pre code {
    border: 0;
    padding: 0
}

.post-content ol,.post-content ul {
    margin: 1em 0 1em 2em
}

.post-content ol li,.post-content ol ol ol ol li,.post-content ol ol ol ol ol ol ol li {
    list-style: decimal!important
}

.post-content ol ol li,.post-content ol ol ol ol ol li {
    list-style: lower-alpha!important
}

.post-content ol ol ol li,.post-content ol ol ol ol ol ol li {
    list-style: lower-roman!important
}

.post-content ol ol,.post-content ol ul,.post-content ul ol,.post-content ul ul {
    margin: 0 0 0 1em
}

.post-content ul li {
    list-style: none!important;
    position: relative
}

.post-content ul li:before {
    content: "\2022";
    font-family: arial,serif!important;
    left: -1em;
    position: absolute
}

.post-content li,.post-content.post-content ul li {
    margin: 5px 0
}

.post-content table {
    background: #f2f6fc;
    border: 1px solid #dcdcdc;
    border-collapse: unset;
    border-radius: 4px;
    border-spacing: 0;
    box-sizing: border-box;
    font-size: 13px;
    margin-bottom: 18px;
    max-width: 100%;
    outline: 0;
    overflow: hidden;
    text-align: center
}

.post-content table thead th {
    background: #ebeef5;
    font-weight: 500
}

.post-content table td,.post-content table th {
    border-bottom: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    padding: 8px
}

.post-content>div {
    padding: 3px
}

.post-content .img-error,.post-content .img-loading {
    min-height: 60px;
    min-width: 80px
}

.post-content .img-error {
    background-image: url(/static/image/img-load-error.svg),linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);
    background-position: 50%,0 0,0 10px,10px -10px,-10px 0;
    background-repeat: no-repeat,repeat,repeat,repeat,repeat;
    background-size: contain,20px 20px,20px 20px,20px 20px,20px 20px
}

.post-content a[href^="/member?t="] {
    color: #0f8055;
    font-style: italic
}

.dark-layout .post-content a[href^="/member?t="] {
    color: #1c9165
}

.dark-layout .post-content details {
    background: #3b3b3b
}

.post-content details {
    background: #f9fafe;
    border-radius: 16px;
    margin: 1em 0;
    padding: 1em 2em
}

.post-content summary {
    cursor: pointer;
    padding: 0;
    position: relative
}

.dark-layout .post-content details[open]>summary {
    border-bottom: 1px solid #2a2b2d
}

.post-content details[open]>summary {
    border-bottom: 1px solid #e3e8f4;
    margin: 0 0 1em;
    padding: 0 0 1em
}

.post-content .card {
    border-radius: 16px;
    margin: 1em 0;
    padding: 1em 2em
}

.post-content .card.note {
    background-color: #d5f0c3
}

.dark-layout .post-content .card.note {
    background-color: #d5f0c343
}

.post-content .card.warning {
    background-color: #ffbab5
}

.dark-layout .post-content .card.warning {
    background-color: #ffbab543
}

.post-content .card.info {
    background-color: #c6e3ff
}

.dark-layout .post-content .card.info {
    background-color: #c6e3ff43
}

.post-content .card.draft {
    background-color: #ebbfeb
}

.dark-layout .post-content .card.draft {
    background-color: #ebbfeb43
}
 
 
@media screen and (min-width: 500px) {
    body>header {
        left:0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10
    }

    section#nsk-frame {
        margin-top: 72px
    }
}

#nsk-frame {
    background-color: unset;
    border-radius: 0;
    box-shadow: unset;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    overflow: visible;
    position: relative;
    width: 100%
}

#nsk-body {
    background-color: var(--bg-main-color);
    border-radius: 1rem;
    box-shadow: 0 3px 8px rgba(0,0,0,.24);
    box-sizing: border-box;
    display: flex;
    margin-bottom: 20px;
    margin-top: 15px;
    padding: 25px 30px;
    position: relative;
    transition: background-color .5s;
    overflow: visible;
    height: auto;
    min-height: auto;
    max-height: none
}

@media screen and (max-width: 500px) {
    #nsk-body {
        border-radius:4px;
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 9px;
        padding: 20px 3px;
        position: relative
    }
}

#nsk-body-left {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    padding-right: 20px;
    min-height: 500px
}

@media screen and (max-width: 500px) {
    #nsk-body-left {
        padding-right:0
    }
}

#nsk-body-left .post-list-controler {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    margin-top: 0
}

#nsk-body-left .post-list .post-list-item {
    border-bottom: 1px solid rgba(0,0,0,.05);
    display: flex;
    padding: 8px;
    position: relative
}

@media screen and (max-width: 500px) {
    #nsk-body-left .post-list .post-list-item {
        padding:4px 8px
    }
}

#nsk-body-left .post-list .post-list-item .post-list-content {
    margin-left: 10px
}

#nsk-body-left .post-list .post-list-item .post-title {
    font-size: 14px;
    font-weight: 700
}

#nsk-body-left .post-list .post-list-item .post-info {
    color: var(--link-color);
    font-size: 11px
}

#nsk-body-left .post-list .post-list-item .post-info .info-item:first-child {
    margin-left: 0
}

#nsk-body-left .post-list .post-list-item .post-info .info-item {
    margin-left: 4px;
    margin-right: 4px;
    white-space: nowrap
}

#nsk-body-left .post-list .post-list-item .post-info .info-item * {
    vertical-align: middle
}

#nsk-body-left .post-list .post-list-item .post-category {
    background: var(--bg-sub-color);
    border: none;
    border-radius: 2px;
    bottom: 8px;
    box-shadow: 0 0 2px rgba(0,0,0,.5);
    color: unset;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    position: absolute;
    right: 13px
}

#nsk-body-left #content {
    overflow: hidden;
    padding-top: 1rem
}

#nsk-body-left .sorter {
    background-color: #888;
    border: 1px solid #737373;
    border-radius: 3px;
    display: inline-flex;
    margin: 0 8px;
    overflow: hidden
}

#nsk-body-left .sorter>a {
    background-color: var(--bg-main-color);
    cursor: pointer;
    display: block;
    padding: 0 5px;
    text-decoration: none;
    transition: background-color 0.2s
}

#nsk-body-left .sorter>a.selected {
    background-color: #888;
    color: var(--bg-main-color);
    font-weight: 600
}

#nsk-body-left .sorter>a:hover:not(.selected) {
    background-color: rgba(0,0,0,.05)
}

#nsk-right-panel-container {
    flex: 0 0 260px;
    overflow: visible;
    height: auto;
    max-height: none;
    align-self: flex-start
}

@media screen and (max-width: 1200px) {
    #nsk-right-panel-container {
        flex:0 0 200px
    }
}

@media screen and (max-width: 800px) {
    #nsk-right-panel-container {
        display:none
    }
}

/* 用户卡片样式 */
#usercard-me {
    margin-bottom: 10px
}

.user-card {
    background-color: var(--bg-main-color);
    border-radius: 8px; 
    padding: 6px;
    margin-bottom: 10px
}

.user-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px
}

.user-head .avatar-normal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 3px rgba(0,0,0,.1);
    flex-shrink: 0
}

.user-head .menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.user-head .menu .Username {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.2
}

.user-head .menu .Username:hover {
    color: var(--link-hover-color)
}

.user-head .menu > div {
    display: flex;
    gap: 8px;
    align-items: center
}

.user-head .menu > div > span,
.user-head .menu > div > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer
}

.user-head .menu > div > span:hover,
.user-head .menu > div > a:hover {
    color: var(--link-hover-color)
}
 
.user-stat {
    display: flex;
    gap: 12px
}

.user-stat .stat-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.user-stat .stat-block > div {
    display: flex;
    align-items: center
}

.user-stat .stat-block > div > a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    width: 100%
}

.user-stat .stat-block > div > a:hover {
    color: var(--link-hover-color)
}

.user-stat .stat-block .iconpark-icon {
    width: 14px;
    height: 14px;
    color: #888;
    flex-shrink: 0
}

.user-stat .stat-block > div > a:hover .iconpark-icon {
    color: var(--link-hover-color)
}

.user-stat .stat-block .notify-count {
    color: #ff4444;
    font-weight: 600;
    margin-left: 2px
}

/* 有消息时的提醒样式 */
.user-stat .stat-block a.has-notice {
    color: #c41d7f !important;
}

.user-stat .stat-block a.has-notice .iconpark-icon {
    color: #c41d7f !important;
}

.user-stat .stat-block a.has-notice:hover {
    color: #ff4d4f !important;
}

.user-stat .stat-block a.has-notice:hover .iconpark-icon {
    color: #ff4d4f !important;
}

/* 暗色模式 */
.dark-layout .user-stat .stat-block a.has-notice {
    color: #ff4d4f !important;
}

.dark-layout .user-stat .stat-block a.has-notice .iconpark-icon {
    color: #ff4d4f !important;
}

.dark-layout .user-stat .stat-block a.has-notice:hover {
    color: #ff7875 !important;
}

.dark-layout .user-stat .stat-block a.has-notice:hover .iconpark-icon {
    color: #ff7875 !important;
}

/* 确保帖子列表完整显示 */
.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    height: auto;
    max-height: none;
    margin-top: 0 !important;
    padding-top: 0 !important
}

#nsk-body-left .post-list .post-list-item:last-child {
    border-bottom: none
}

#nsk-body-left {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto
}

/* 确保帖子列表容器完整显示 */
#nsk-body-left .post-list {
    display: block;
    overflow: visible;
    height: auto;
    max-height: none
}

/* 确保每个帖子项都能显示 */
#nsk-body-left .post-list .post-list-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important
}

@media screen and (min-width: 1360px) {
    #nsk-right-panel-container .category-list {
        display:none
    }
}

#nsk-right-panel-container .nsk-panel {
    border-radius: 1px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 0 1px 0 rgba(0,0,0,.1);
    color: #888;
    margin: 0 0 10px;
    padding: 6px 10px;
    overflow: visible;
    height: auto;
    max-height: none
}

/* 确保右侧边栏所有内容可见 */
#nsk-right-panel-container * {
    overflow: visible
}

#nsk-right-panel-container .nsk-new-member-board {
    overflow: visible;
    height: auto;
    max-height: none
}

#nsk-right-panel-container .nsk-panel h4 {
    color: var(--text-color);
    margin: 0
}

#nsk-right-panel-container .nsk-panel h4>* {
    vertical-align: middle
}

#nsk-right-panel-container .nsk-panel ul {
    padding-left: 10px
}

#nsk-right-panel-container .nsk-panel ul li {
    height: 24px;
    line-height: 24px;
    padding-left: 10px
}

#nsk-right-panel-container .nsk-panel ul li:nth-last-child(n+2) {
    border-bottom: 1px solid rgba(0,0,0,.06)
}

#nsk-right-panel-container .nsk-panel ul .iconpark-icon {
    margin-right: 5px
}

.nsk-new-member-board {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0
}

.nsk-new-member-board .new-member-item {
    font-size: 12px;
    overflow: hidden;
    text-align: center;
    width: 60px
}

@media screen and (max-width: 1200px) {
    .nsk-new-member-board .new-member-item {
        overflow:hidden;
        text-align: center;
        width: 44px
    }
}

#nsk-left-panel-container {
    left: calc(50% - 710px);
    position: fixed;
    top: 87px;
    width: 150px
}

@media screen and (max-width: 1360px) {
    #nsk-left-panel-container {
        display:none
    }
}

#nsk-left-panel-container .category-list {
    background-color: var(--bg-main-color);
    border-radius: 12px;
    box-shadow: 2px 0 8px rgba(0,0,0,.08);
    font-size: 14px;
    margin-left: auto;
    overflow: hidden;
    transition: left .3s ease;
    width: 100px;
    z-index: 100
}

#nsk-left-panel-container .category-list h4 {
    background-color: rgba(0,0,0,.05);
    display: none;
    height: 30px;
    line-height: 30px;
    margin: 0;
    text-align: center
}

#nsk-left-panel-container .category-list h4 svg {
    height: 18px;
    width: 18px
}

#nsk-left-panel-container .category-list ul {
    list-style: none;
    margin: 0;
    text-align: center
}

#nsk-left-panel-container .category-list li:first-child>a {
    padding-top: 8px
}

#nsk-left-panel-container .category-list li:last-child>a {
    padding-bottom: 8px
}

#nsk-left-panel-container .category-list a {
    align-items: center;
    color: #666;
    display: flex;
    justify-content: center;
    padding: 6px 0;
    text-decoration: none;
    transition: background .2s,color .2s
}

.dark-layout #nsk-left-panel-container .category-list a {
    color: #999
}

#nsk-left-panel-container .category-list a svg {
    margin-right: 6px
}

#nsk-left-panel-container .category-list .current-category a,#nsk-left-panel-container .category-list a:hover {
    background: #f1f3f5;
    color: #0dbc79
}

.dark-layout #nsk-left-panel-container .category-list .current-category a,.dark-layout #nsk-left-panel-container .category-list a:hover {
    background-color: rgba(0,0,0,.15)
}

#nsk-left-panel-container .category-list a svg {
    fill: currentColor;
    height: 16px;
    vertical-align: middle;
    width: 16px
}

#nsk-left-panel-container .category-list li:not(.current-category) {
    opacity: .5;
    transition: opacity .3s ease
}

#nsk-left-panel-container .category-list li:hover:not(.current-category) {
    opacity: 1
}

footer {
    background-color: #333;
    height: auto;
    position: relative;
    width: 100%
}

.contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px
}

.contain,footer .col {
    box-sizing: border-box
}

footer .col {
    height: auto;
    padding-bottom: 20px
}

footer .col .group-head-link {
    color: #edd6ac;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .25em;
    line-height: 17px;
    margin: 0;
    padding: 20px 0 5px;
    text-transform: uppercase
}

footer .col ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

footer .col ul li {
    color: #999;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 0;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s
}

.social ul li {
    display: inline-block;
    padding-right: 5px
}

footer .col ul li:hover {
    color: #fff;
    transition: .1s;
    -webkit-transition: .1s;
    -moz-transition: .1s
}

.clearfix {
    clear: both
}

.foot,.footer-sep {
    width: 100%
}

.foot {
    border-top: 1px solid hsla(0,0%,100%,.1);
    text-align: center
}

@media only screen and (min-width: 1280px) {
    .contain {
        margin:0 auto;
        width: 1200px
    }
}

@media only screen and (max-width: 1139px) {
    .contain .social {
        display:block
    }

    .social .group-head-link {
        margin: 0
    }
}

@media only screen and (max-width: 950px) {
    footer .col {
        width:33%
    }

    footer .col .group-head-link {
        font-size: 14px
    }

    footer .col ul li {
        font-size: 13px
    }

    .col.pc {
        display: none
    }
}

@media only screen and (max-width: 500px) {
    .head {
        height:30%
    }

    .rool {
        font-size: 60px
    }

    footer .col {
        width: 50%
    }

    footer .col .group-head-link {
        font-size: 14px
    }

    footer .col ul li {
        font-size: 13px
    }
}

@media only screen and (max-width: 340px) {
    footer .col {
        width:100%
    }
}

@keyframes drop {
    0% {
        opacity: 0;
        transform: translateY(-80px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.nsk-pager a,.nsk-pager span {
    border: 1px solid rgba(0,0,0,.01);
    margin: 0 2px
}

.nsk-pager.pager-bottom {
    margin-top: 10px
}

.nsk-pager .pager-next,.nsk-pager .pager-prev {
    color: #888
}

.nsk-pager span.pager-next,.nsk-pager span.pager-prev {
    cursor: not-allowed;
    opacity: .3
}

.nsk-pager .pager-next,.nsk-pager .pager-pos,.nsk-pager .pager-prev {
    border-radius: 3px;
    box-sizing: border-box;
    color: #888;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    height: 18px;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
    vertical-align: middle
}

@media screen and (min-width: 500px) {
    .nsk-pager .pager-next:hover,.nsk-pager .pager-pos:hover,.nsk-pager .pager-prev:hover {
        background-color:rgba(0,0,0,.1)
    }

    .dark-layout .nsk-pager .pager-next:hover,.dark-layout .nsk-pager .pager-pos:hover,.dark-layout .nsk-pager .pager-prev:hover {
        background-color: hsla(0,0%,100%,.1)
    }
}

.nsk-pager .pager-pos.pager-cur {
    background-color: var(--bg-sub-color)!important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24),0 0 0 1px rgba(27,31,35,.15);
    color: #888;
    cursor: not-allowed
}

.nsk-pager .ellipsis {
    font-family: Arial,Helvetica,sans-serif
}

.role-tag {
    border: 1px solid var(--text-color);
    border-radius: 3px;
    color: var(--text-color);
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    margin-left: 4px;
    margin-right: 4px;
    padding: 0 3px
}

.role-tag.role-admin {
    background-color: #2ea44f;
    border: 1px solid #2ea44f;
    color: #fafafa
}

.role-tag.role-dev {
    background: linear-gradient(45deg,#ef00ff,#001fff);
    border: 1px solid #920f9b;
    color: #fafafa
}

.role-tag.role-creater {
    background-color: #222;
    border: 1px solid #222;
    color: #fafafa
}

.role-tag.role-provider {
    background-color: #fbd38d;
    border: 1px solid #fbd38d;
    color: #c05621
}

.role-tag.role-agency {
    background-color: #bb551d;
    border: 1px solid #bb551d;
    color: #fff
}

.role-tag.role-partner {
    background-color: #338fc6;
    border-color: #338fc6;
    color: #fff
}

.role-tag.role-blog-owner,.role-tag.role-channel-owner {
    background-color: #00a7ff;
    border: 1px solid #00a7ff;
    color: #fff
}

.role-tag.role-banned,.role-tag.role-fraud,.role-tag.role-suspend {
    border: 1px solid #d74c4c;
    color: #d74c4c
}

.role-tag.role-arrange {
    background-color: #4158d0;
    background-image: linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70);
    border: 1px solid #ffcc70;
    color: #fff
}

.role-partner {
    background-color: #338fc6;
    border-color: #338fc6;
    color: #fff
}

.role-recycler {
    background: linear-gradient(135deg,#3e4e3e,#2f3a2f);
    border: none;
    border-radius: 25px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding-left: 26px;
    padding-right: 10px;
    position: relative
}

.role-recycler span:before {
    color: #76ff03;
    content: "\267B";
    font-size: 16px;
    left: 6px;
    opacity: .7;
    position: absolute;
    top: 50%;
    transform: translateY(-55%);
    vertical-align: middle
}

.provider-grid-container {
    align-items: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    flex-wrap: wrap
}

.provider-grid-container .provider {
    align-items: center;
    background-color: rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.3);
    box-sizing: border-box;
    display: flex;
    height: 100px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 10px;
    transition: all .5s;
    width: 20%
}

.provider-grid-container .provider:nth-child(5n) {
    border-right: none
}

.provider-grid-container .provider:hover {
    background-color: rgba(0,0,0,.2)
}

@media screen and (max-width: 500px) {
    .provider-grid-container .provider {
        width:33.3%
    }

    .provider-grid-container .provider:nth-child(3n) {
        border-right: none
    }

    .provider-grid-container .provider:nth-child(5n) {
        border-right: 1px solid rgba(0,0,0,.3)
    }
}

.nsk-post-wrapper .content-item {
    border-bottom: 1px solid rgba(0,0,0,.05);
    padding: 8px;
    position: relative
}

.nsk-post-wrapper .floor-link-wrapper {
    position: absolute;
    right: 0
}

@media screen and (max-width: 500px) {
    .nsk-post-wrapper .floor-link {
        right:5px
    }
}

.nsk-post-wrapper .pined-comment-badge {
    background-color: #2ea44f;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgba(24,68,20,.45);
    color: #fff;
    height: 16px;
    padding: 3px;
    vertical-align: -5px;
    width: 16px
}

.nsk-post-wrapper .hot-badge {
    background-image: url(/static/image/hot.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 30px;
    overflow: visible;
    vertical-align: middle;
    width: 30px
}

.nsk-post-wrapper .award-corner .corner-triangle {
    background-color: #efb20a;
    background: linear-gradient(#ffa001,#ff0);
    clip-path: polygon(100% 0,0 0,0 100%);
    height: 45px;
    left: 0;
    position: absolute;
    top: 0;
    width: 45px
}

@media screen and (max-width: 500px) {
    .nsk-post-wrapper .award-corner .corner-triangle {
        height:30px;
        width: 30px
    }
}

.nsk-post-wrapper .award-corner svg {
    left: 5px;
    position: absolute;
    top: 5px
}

.nsk-post .post-title h1 {
    font-size: 18px;
    margin: 0 0 10px;
    padding: 0 8px
}

.nsk-post .post-title h1>* {
    vertical-align: middle
}

.nsk-post .post-title-link {
    color: var(--text-color)
}

.nsk-post .post-title-link:hover {
    color: var(--link-color)
}

.nsk-content-meta-info {
    display: flex
}

.nsk-content-meta-info .avatar-wrapper {
    margin: 0 10px 4px 0
}

.nsk-content-meta-info .author-info,.nsk-content-meta-info .content-info {
    font-size: 11px
}

.nsk-content-meta-info .author-info>*,.nsk-content-meta-info .content-info>* {
    vertical-align: middle
}

.nsk-content-meta-info .content-info {
    color: #858585
}

.nsk-content-meta-info .author-name {
    font-size: 15px;
    font-weight: 700
}

.nsk-content-meta-info .is-poster {
    border: 1px solid #00eaff;
    border-radius: 3px;
    color: #00eaff;
    padding: 0 3px
}

.nsk-content-meta-info .content-category,.nsk-content-meta-info .date-updated {
    margin-left: 4px
}

.signature {
    border-top: 1px dashed #e2e2e2;
    color: #787878;
    padding-top: 5px
}

.signature a {
    color: #55b786
}

.signature a:hover {
    color: #23dc7f
}

.signature strong {
    font-weight: 400
}

.signature>* {
    opacity: .5;
    transition: opacity .2s
}

.signature:hover>* {
    opacity: .7
}

.signature {
    max-height: 44px;
    overflow: hidden
}

#fast-nav-button-group {
    bottom: 40px;
    position: fixed;
    right: 50px;
    right: calc(50% - 590px);
    z-index: 99
}

@media screen and (max-width: 500px) {
    #fast-nav-button-group {
        right:30px
    }
}

#fast-nav-button-group .nav-item-btn {
    position: absolute;
    right: 0
}

#fast-nav-button-group .nav-item-btn:last-child {
    bottom: 0
}

#fast-nav-button-group .nav-item-btn:nth-last-child(2) {
    bottom: 40px
}

#fast-nav-button-group .nav-item-btn:nth-last-child(3) {
    bottom: 80px
}

.nav-item-btn {
    align-items: center;
    background-color: var(--bg-main-color);
    border: 1px solid var(--glass-color);
    border-radius: 20%;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-sizing: border-box;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
    cursor: pointer
}

@media screen and (max-width: 500px) {
    .nav-item-btn {
        border:1px solid rgba(0,0,0,.15);
        box-shadow: none
    }
}

.nav-item-btn .iconpark-icon {
    color: #999;
    cursor: pointer;
    height: 26px;
    width: 26px
}

@media screen and (min-width: 500px) {
    .nav-item-btn .iconpark-icon:hover {
        color:var(--link-hover-color)
    }
}

#back-to-parent {
    display: flex
}

.image-box,.post-content img {
    cursor: pointer
}

.image-box {
    background-color: rgba(0,0,0,.8);
    box-sizing: border-box;
    height: 100%;
    left: 50%;
    line-height: 100vh;
    overflow: auto;
    padding: 0 10%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 100%;
    z-index: 9999
}

@media screen and (max-width: 500px) {
    .image-box {
        padding:0
    }
}

.image-box img {
    margin: auto;
    max-width: 100%;
    vertical-align: middle
}

.image-box::-webkit-scrollbar {
    background: hsla(0,0%,100%,.1);
    height: 5px;
    width: 5px
}

.image-box::-webkit-scrollbar-thumb {
    background: hsla(0,0%,100%,.2);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0 1px 2px hsla(0,0%,100%,.75)
}

.image-box::-webkit-scrollbar-corner {
    background: hsla(0,0%,100%,.1)
}

body.dark-layout {
    --dark-color: #333;
    --fade-color: #555;
    --gray-color: #888;
    --main-color: #2ea44f;
    --sub-color: #45ca6b;
    --text-color: #aaa;
    --link-color: #c5c5c5;
    --link-hover-color: #fcfcfc;
    --bg-main-color: #272727;
    --bg-sub-color: #3b3b3b;
    --glass-color: hsla(0,0%,100%,.05)
}

.dark-layout.bg1,.dark-layout.bg2 {
    background-color: #8c8f95
}

@media only screen and (max-width: 500px) {
    .dark-layout.bg1,.dark-layout.bg2 {
        background-color:#555659
    }
}

@media only screen and (min-width: 500px) {
    .dark-layout.bg1 {
        background-image:linear-gradient(var(--fade-color) 1px,transparent 1px),linear-gradient(to right,var(--fade-color) 1px,transparent 1px);
        background-size: 32px 32px
    }

    .dark-layout.bg2 {
        background: linear-gradient(135deg,hsla(0,0%,40%,.333) 25%,transparent 0) -40px 0 /80px 80px,linear-gradient(225deg,#656565 25%,transparent 0) -40px 0 /80px 80px,linear-gradient(315deg,hsla(0,0%,40%,.333) 25%,transparent 0) 0 0 /80px 80px,linear-gradient(45deg,#656565 25%,#3b3b3b 0) 0 0 /80px 80px
    }
}

.dark-layout #nsk-body {
    box-shadow: 0 0 8px rgba(0,0,0,.7)
}

@media only screen and (max-width: 500px) {
    .dark-layout #nsk-body {
        box-shadow:0 0 8px rgba(0,0,0,.45)
    }
}

.dark-layout .user-card .user-stat { 
    color: var(--text-color)!important
}

.dark-layout .user-card .user-stat a {
    color: var(--link-color)!important
}

.dark-layout .user-card .user-stat a:hover {
    color: var(--link-hover-color)!important
}

.dark-layout .hover-user-card {
    background-color: #333!important
}

.dark-layout .avatar-normal {
    box-shadow: 0 0 2px rgba(0,0,0,.5)
}

.dark-layout .btn {
    background-color: #158736!important
}

.dark-layout .btn:hover {
    background-color: #23af4a!important
}

.dark-layout .md-editor {
    background-color: var(--bg-sub-color);
    color: #ddd
}

.dark-layout .md-editor .content-area #markdown-input:hover,.dark-layout .md-editor .title-input:hover {
    outline: 1px solid #1f1f1f!important
}

.dark-layout .md-editor #mde-title,.dark-layout .md-editor .tab-select,.dark-layout .md-editor .title-input,.dark-layout .md-editor textarea {
    background-color: var(--bg-sub-color);
    color: #ddd
}

.dark-layout .md-editor #mde-title,.dark-layout .md-editor textarea {
    color: #ddd
}

.dark-layout .md-editor #mde-title::-moz-placeholder {
    color: #bbb!important
}

.dark-layout .md-editor #mde-title::placeholder {
    color: #bbb!important
}

.dark-layout .md-editor ::-moz-placeholder {
    color: #575757!important
}

.dark-layout .md-editor ::placeholder {
    color: #575757!important
}

.dark-layout .md-editor .expression {
    background-color: #515151!important
}

.dark-layout header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    box-shadow: 0 0 6px rgba(0,0,0,.8)
}

@media screen and (max-width: 500px) {
    .dark-layout header {
        box-shadow:none
    }
}

.dark-layout #nsk-head {
    align-items: center;
    display: flex
}

.dark-layout .site-title a {
    color: #e5e5e5
}

.dark-layout .nav-menu li a {
    color: #b0b0b0
}

.dark-layout .nav-menu li a:hover {
    color: #e5e5e5
}

.dark-layout .color-theme-switcher:hover {
    background: #2a2a2a
}

.dark-layout header .iconpark-icon {
    color: #b0b0b0
}

.dark-layout .meta-button a,
.dark-layout .right-button-group a {
    color: #b0b0b0
}

.dark-layout .meta-button a:hover,
.dark-layout .right-button-group a:hover {
    color: #e5e5e5
}

@media screen and (max-width: 500px) {
    .dark-layout #nsk-head {
        box-shadow:0 0 5px rgba(0,0,0,.45)
    }
}

.dark-layout .mobile-nav {
    box-shadow: 0 0 3px rgba(0,0,0,.45)
}

@media screen and (max-width: 500px) {
    .dark-layout .nav-menu .right-button-group {
        border-left:1px solid rgba(0,0,0,.3)!important
    }

    .dark-layout .nav-menu .meta-button {
        background-color: #074d26
    }
}

.dark-layout #nsk-body-left .post-list .post-list-item {
    border-bottom: 1px solid rgba(0,0,0,.3)
}

.dark-layout #nsk-right-panel-container .nsk-panel ul li:nth-last-child(n+2) {
    border-bottom: 1px solid rgba(0,0,0,.15)
}

.dark-layout .nsk-panel {
    box-shadow: 0 0 5px rgba(0,0,0,.4)!important
}

.dark-layout .post-content {
    color: var(--text-color)
}

.dark-layout .post-content h2,.dark-layout .post-content hr {
    border-bottom: 1px solid rgba(0,0,0,.3)
}

.dark-layout .post-content h3,.dark-layout .post-content h4,.dark-layout .post-content h5,.dark-layout .post-content h6 {
    color: #a4a8ae
}

.dark-layout .post-content code,.dark-layout .post-content pre {
    background: #2e2e04;
    border: 1px solid #56560b
}

.dark-layout .post-content pre code {
    border: 0;
    padding: 0
}

.dark-layout .post-content blockquote {
    background: hsla(0,0%,100%,.05);
    border-left: 4px solid hsla(0,0%,100%,.1)
}

.dark-layout .post-content table {
    background: #323232;
    border: 1px solid #1e1d1d
}

.dark-layout .post-content table thead th {
    background: #333435
}

.dark-layout .post-content table table th,.dark-layout .post-content table td,.dark-layout .post-content table thead th {
    border-bottom: 1px solid #1e1d1d;
    border-right: 1px solid #1e1d1d
}

.dark-layout .signature {
    border-top: 1px dashed rgba(0,0,0,.3)
}

.dark-layout #left-slide-panel {
    background-color: #0a3228!important
}

.dark-layout .skeleton {
    animation: loading2 2s ease infinite;
    background: #444
}

@keyframes loading2 {
    0% {
        background-image: linear-gradient(100deg,#3f3f3f 40%,#2f2f2f 50%,#3f3f3f 60%);
        background-position: 100% 50%;
        background-size: 300% 100%
    }

    to {
        background-image: linear-gradient(100deg,#3f3f3f 40%,#2f2f2f 50%,#3f3f3f 60%);
        background-position: 0 50%;
        background-size: 300% 100%
    }
}

.dark-layout .block-list table tr,.dark-layout .credit-table table tr,.dark-layout .invite-panel table tr,.dark-layout .ruling-log table tr {
    border: 1px solid #505050
}

.dark-layout .nsk-friends,.dark-layout .nsk-providers {
    color: #ddd
}

.dark-layout .nsk-friends a,.dark-layout .nsk-providers a {
    color: #ddd;
    font-weight: 700
}

.dark-layout .head-info,.dark-layout .nsk-friends a:hover,.dark-layout .nsk-providers a:hover {
    color: #fff
}

.dark-layout .pure-form legend {
    border-bottom: 1px solid rgba(0,0,0,.4);
    color: var(--text-color)
}

.dark-layout .pure-form input[type=email],.dark-layout .pure-form input[type=number],.dark-layout .pure-form input[type=password],.dark-layout .pure-form input[type=text],.dark-layout .pure-form textarea {
    background-color: var(--bg-sub-color);
    border: 1px solid var(--bg-sub-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
    color: #eee
}

.dark-layout .pure-form .pure-button {
    background-color: #858585;
    color: #eee
}

.dark-layout .pure-form .iconpark-icon {
    color: #eee!important
}

.dark-layout #search-site2 {
    background-color: #555;
    border: 1px solid #666
}

.dark-layout .nsk-notification .app-title {
    color: #d5d5d5
}

.dark-layout .message-item .content-column .content {
    background-color: #2d3730!important
}

.dark-layout .message-input textarea {
    background-color: var(--bg-sub-color)!important;
    color: var(--text-color)
}

.dark-layout .comment-menu .menu-item:hover {
    color: #ccc!important
}

/* 评论框样式 */
.comment-editor-wrapper {
    background: var(--bg-main-color, #fff);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comment-editor-header h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #333);
}

.comment-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.3s;
}

.comment-input:focus {
    outline: none;
    border-color: #0dbc79;
}

.comment-editor-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.submit-btn {
    background: #0dbc79;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #0aa968;
}

.submit-btn:active {
    background: #098f57;
}

/* 暗色模式 */
.dark-layout .comment-editor-wrapper {
    background: #2a2a2a;
}

.dark-layout .comment-input {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

.dark-layout .comment-input:focus {
    border-color: #0dbc79;
}

/* 发布帖子页面样式 */
.post-editor-wrapper {
    background: var(--bg-main-color, #fff);
    border-radius: 8px; 
    width: 100%;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color, #333);
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #0dbc79;
}

.form-textarea {
    min-height: 300px;
    resize: vertical;
    line-height: 1.6;
}

.form-select {
    width: 200px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.form-select:focus {
    outline: none;
    border-color: #0dbc79;
}

.editor-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
    flex-wrap: wrap;
}

.toolbar-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: #e9e9e9;
    border-color: #bbb;
}

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.btn-primary {
    background: #0dbc79;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #0aa968;
}

.btn-secondary {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: #e9e9e9;
}

.notice-box {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
}

.notice-title {
    color: #d46b08;
    font-weight: 600;
    margin-bottom: 8px;
}

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-list li {
    color: #ad6800;
    font-size: 13px;
    margin-bottom: 5px;
    padding-left: 16px;
    position: relative;
}

.notice-list li:before {
    content: '•';
    position: absolute;
    left: 0;
}

/* 暗色模式 */
.dark-layout .post-editor-wrapper {
    background: #2a2a2a;
}

.dark-layout .form-input,
.dark-layout .form-textarea,
.dark-layout .form-select {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

.dark-layout .editor-toolbar {
    background: #333;
}

.dark-layout .toolbar-btn {
    background: #444;
    border-color: #555;
    color: #e5e5e5;
}

.dark-layout .toolbar-btn:hover {
    background: #555;
}

.dark-layout .notice-box {
    background: #2a2416;
    border-color: #4d3800;
}

/* 发帖页面标题输入框 */
.topic-title-input {
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    width: 100%;
}

.dark-layout .topic-title-input {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

/* 编辑器容器 */
.editor-container {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.dark-layout .editor-container {
    border-color: #444;
}

/* 编辑器顶部标签 */
.editor-tabs {
    display: flex;
    align-items: center;
    background: var(--bg-main-color, #f5f5f5);
    border-bottom: 1px solid #e5e5e5;
    padding: 0 16px;
}

.dark-layout .editor-tabs {
    background: #2a2a2a;
    border-bottom-color: #444;
}

.editor-tabs .tab {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-color, #666);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.dark-layout .editor-tabs .tab {
    color: #999;
}

.editor-tabs .tab.active {
    color: var(--text-color, #333);
    border-bottom-color: #0dbc79;
    font-weight: 500;
}

.dark-layout .editor-tabs .tab.active {
    color: #e5e5e5;
}

.editor-tabs .tab:hover {
    color: var(--text-color, #333);
}

.dark-layout .editor-tabs .tab:hover {
    color: #e5e5e5;
}

.editor-tabs .editor-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-color, #999);
}

.dark-layout .editor-tabs .editor-hint {
    color: #666;
}

.editor-tabs .editor-hint strong {
    color: #0dbc79;
}

/* 编辑器内容区 */
.editor-content {
    border: none !important;
    border-radius: 0 !important;
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    resize: vertical;
    min-height: 300px;
}

.dark-layout .editor-content {
    background: #1a1a1a;
    color: #e5e5e5;
}

/* 底部工具栏 */
.editor-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #e5e5e5;
    margin-top: 16px;
}

.dark-layout .editor-bottom-bar {
    border-top-color: #444;
}

.editor-bottom-bar .bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.editor-bottom-bar .bar-item {
    font-size: 13px;
    color: var(--text-color, #666);
    cursor: pointer;
    transition: color 0.3s;
}

.dark-layout .editor-bottom-bar .bar-item {
    color: #999;
}

.editor-bottom-bar .bar-item:hover {
    color: #0dbc79;
}

.editor-bottom-bar .bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-bottom-bar .bar-label {
    font-size: 13px;
    color: var(--text-color, #666);
}

.dark-layout .editor-bottom-bar .bar-label {
    color: #999;
}

.bar-select {
    padding: 6px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-main-color, #fff);
    color: var(--text-color, #333);
    cursor: pointer;
    min-width: 100px;
}

.dark-layout .bar-select {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

.bar-select:focus {
    outline: none;
    border-color: #0dbc79;
}

.btn-publish-new {
    background: #0dbc79;
    color: #fff;
    border: none;
    padding: 6px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-publish-new:hover {
    background: #0aa968;
}

/* 重要提醒框 */
.notice-box-new {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 4px;
    padding: 16px 20px;
    margin-top: 20px;
}

.dark-layout .notice-box-new {
    background: #2a2416;
    border-color: #4d3800;
}

.notice-title-new {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #854d0e);
    margin-bottom: 12px;
}

.dark-layout .notice-title-new {
    color: #fbbf24;
}

.notice-list-new {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.notice-list-new li {
    font-size: 13px;
    color: var(--text-color, #92400e);
    line-height: 1.8;
    margin-bottom: 4px;
}

.dark-layout .notice-list-new li {
    color: #fcd34d;
}

.notice-footer {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-color, #a16207);
    font-weight: 500;
}

.dark-layout .notice-footer {
    color: #f59e0b;
}

/* 登录注册页面样式 */
#login-panel,
#signup-panel {
    background: var(--bg-main-color, #fff);
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
}

.dark-layout #login-panel,
.dark-layout #signup-panel {
    background: #2a2a2a;
}

#login-panel form,
#signup-panel form {
    margin: 0;
}

#login-panel fieldset,
#signup-panel fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#login-panel legend,
#signup-panel legend {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color, #333);
    margin-bottom: 24px;
    padding: 0;
    text-align: center;
    width: 100%;
}

.dark-layout #login-panel legend,
.dark-layout #signup-panel legend {
    color: #e5e5e5;
}

#login-panel label,
#signup-panel label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #333);
    margin-bottom: 8px;
    margin-top: 16px;
}

.dark-layout #login-panel label,
.dark-layout #signup-panel label {
    color: #e5e5e5;
}

#login-panel input[type="text"],
#login-panel input[type="email"],
#login-panel input[type="password"],
#signup-panel input[type="text"],
#signup-panel input[type="email"],
#signup-panel input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.dark-layout #login-panel input[type="text"],
.dark-layout #login-panel input[type="email"],
.dark-layout #login-panel input[type="password"],
.dark-layout #signup-panel input[type="text"],
.dark-layout #signup-panel input[type="email"],
.dark-layout #signup-panel input[type="password"] {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

#login-panel input:focus,
#signup-panel input:focus {
    outline: none;
    border-color: #0dbc79;
}

#login-panel .checkbox,
#signup-panel .checkbox {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

#login-panel .checkbox input[type="checkbox"],
#signup-panel .checkbox input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.login-btn-group,
.signup-btn-group {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-btn-group button,
.signup-btn-group button {
    width: 100%;
    background: #0dbc79;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.login-btn-group button:hover,
.signup-btn-group button:hover {
    background: #0aa968;
}

.login-btn-group span,
.signup-btn-group span {
    text-align: center;
    font-size: 13px;
    color: var(--text-color, #666);
}

.dark-layout .login-btn-group span,
.dark-layout .signup-btn-group span {
    color: #999;
}

.login-btn-group span a,
.signup-btn-group span a {
    color: #0dbc79;
    text-decoration: none;
    margin: 0 8px;
}

.login-btn-group span a:hover,
.signup-btn-group span a:hover {
    text-decoration: none;
}

#captcha-container {
    margin: 16px 0;
}

/* 登录注册页面提示信息 */
.auth-hint {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    padding: 12px;
    margin: 16px 0;
    font-size: 13px;
    color: #0369a1;
    line-height: 1.6;
}

.dark-layout .auth-hint {
    background: #1e3a4a;
    border-color: #2d5a6e;
    color: #7dd3fc;
}

/* 第三方登录 */
.third-party-login-msg {
    margin: 24px 0 16px;
    text-align: center;
    color: var(--text-color, #666);
    font-size: 14px;
    border-top: 1px solid #e5e5e5;
    padding-top: 24px;
}

.dark-layout .third-party-login-msg {
    border-color: #444;
    color: #999;
}

.third-party-login {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.third-party-login .col {
    flex: 1;
    min-width: 120px;
}

.third-party-login .auth-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s;
    background: #f5f5f5;
    color: #333;
}

.dark-layout .third-party-login .auth-link {
    background: #333;
    color: #e5e5e5;
}

.third-party-login .auth-link:hover {
    opacity: 0.8;
}

.third-party-login .auth-link i {
    margin-right: 8px;
    font-size: 18px;
}

/* ========================================
   设置页面样式 (Settings Page)
======================================== */

/* 覆盖默认的nsk-container样式(仅设置页面) */
.nsk-container.settings-page {
    display: block;
    height: auto;
    padding: 0 20px;
}

/* 顶部头像区域 */
.head-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.nsk-container.settings-page .avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
}

.avatar-wrapper .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-wrapper .setting-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 50px;
    height: 50px;
    fill: #666;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.head-container .word {
    flex: 1;
}

.head-container .word .username {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
}

.head-container .word p {
    color: #666;
    margin: 0;
    font-size: 14px;
}

/* 选择器布局 */
.selector {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* 左侧选项卡菜单 */
.selector-left-side {
    width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    flex-shrink: 0;
}

.selector-item-wrapper {
    display: flex;
    flex-direction: column;
}

.select-item {
    display: block;
    padding: 14px 20px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.select-item:hover {
    background: #f5f5f5;
    color: #333;
}

.select-item.selected {
    background: #f0f9f4;
    color: #0dbc79;
    border-left-color: #0dbc79;
    font-weight: 600;
}

.expend-left {
    display: none;
}

/* 右侧表单内容区 */
.selector-right-side {
    flex: 1;
    min-width: 0;
}

.personal-info {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.personal-info fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.personal-info h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.personal-info h3 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 20px 0 12px 0;
}

.personal-info input[type="text"],
.personal-info input[type="email"],
.personal-info input[type="password"],
.personal-info textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.3s;
    margin-bottom: 16px;
}

.personal-info input:focus,
.personal-info textarea:focus {
    outline: none;
    border-color: #0dbc79;
}

.personal-info textarea {
    resize: vertical;
    min-height: 100px;
}

.personal-info .btn {
    background: #0dbc79;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.personal-info .btn:hover {
    background: #0aa968;
}

.personal-info .alert {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.personal-info .alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.personal-info .alert-success {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

/* 头像设置 */
.set-avatar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 16px 0;
}

.set-avatar .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* 暗色模式 */
.dark-layout .head-container {
    border-bottom-color: #444;
}

.dark-layout .head-container .word .username {
    color: #e5e5e5;
}

.dark-layout .head-container .word p {
    color: #999;
}

.dark-layout .selector-left-side {
    background: #2a2a2a;
}

.dark-layout .select-item {
    color: #999;
}

.dark-layout .select-item:hover {
    background: #333;
    color: #e5e5e5;
}

.dark-layout .select-item.selected {
    background: #1a3a2e;
    color: #0dbc79;
}

.dark-layout .personal-info {
    background: #2a2a2a;
}

.dark-layout .personal-info h2,
.dark-layout .personal-info h3 {
    color: #e5e5e5;
}

.dark-layout .personal-info input,
.dark-layout .personal-info textarea {
    background: #1a1a1a;
    border-color: #444;
    color: #e5e5e5;
}

.dark-layout .personal-info input:focus,
.dark-layout .personal-info textarea:focus {
    border-color: #0dbc79;
}

/* 移动端样式 */
@media (max-width: 768px) {
    .head-container {
        padding: 20px 0;
    }
    
 
    
    .avatar-wrapper .setting-icon {
        width: 35px;
        height: 35px;
        right: -8px;
        bottom: -8px;
        padding: 6px;
    }
    
    .head-container .word .username {
        font-size: 20px;
    }
    
    .selector {
        gap: 0;
        position: relative;
    }
    
    /* 左侧菜单默认隐藏 */
    .selector-left-side {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100vh;
        background: #fff;
        z-index: 999;
        transition: left 0.3s ease;
        border-radius: 0;
        box-shadow: none;
        padding-top: 60px;
    }
    
    /* 展开状态 */
    .selector-left-side.mobile-expanded {
        left: 0;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }
    
    .dark-layout .selector-left-side {
        background: #1a1a1a;
    }
    
    .dark-layout .selector-left-side.mobile-expanded {
        box-shadow: 2px 0 8px rgba(0,0,0,0.5);
    }
    
    /* 展开按钮 */
    .expend-left {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: #0dbc79;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        z-index: 998;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }
    
    .expend-left .iconpark-icon {
        width: 20px;
        height: 20px;
        color: #fff;
    }
    
    .selector-right-side {
        width: 100%;
        padding: 0;
    }
    
    .personal-info {
        padding: 20px 15px;
        border-radius: 0;
        margin-bottom: 1px;
    }
}