/* xiapian */
:root {
    --xp-panel:#f3f6f9;
    --xp-sheen:none;
    --xp-bar:#2c3b49;
    --xp-menu:#263746;
    --xp-search:#eef3f7;
    --xp-viewer:#18212b;
    --xp-blur:none;
    --xp-search-blur:none;
    --xp-scrim-blur:none;
    --xp-edge:rgba(255,255,255,.82);
    --xp-shadow:0 5px 20px rgba(36,54,73,.10), inset 0 1px rgba(255,255,255,.55);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
    @media not (prefers-reduced-transparency:reduce) {
        :root {
            --xp-panel:rgba(244,249,253,.74);
            --xp-sheen:linear-gradient(125deg, rgba(255,255,255,.28), transparent 48%, rgba(134,177,204,.10));
            --xp-bar:rgba(32,49,65,.84);
            --xp-menu:rgba(32,49,65,.94);
            --xp-search:linear-gradient(120deg, rgba(255,255,255,.72), rgba(226,238,248,.46));
            --xp-viewer:rgba(16,26,37,.82);
            --xp-blur:blur(10px) saturate(135%);
            --xp-search-blur:blur(16px) saturate(130%);
            --xp-scrim-blur:blur(2px);
        }
    }
}
html { scroll-padding-top:4rem; }
body { min-height:100vh; display:flex; flex-direction:column; }
.site-head {
    position:sticky;
    top:0;
    z-index:30;
    background:var(--xp-bar);
    box-shadow:0 2px 12px rgba(26,43,61,.18), inset 0 -1px rgba(255,255,255,.22);
    -webkit-backdrop-filter:var(--xp-blur);
    backdrop-filter:var(--xp-blur);
}
.site-head .container .nav ul li > a { color:#e8eff5; }
.site-head .container .nav ul li > a.chen { color:#ffc59e; }
.site-head .container .nav ul li > a.huan { color:#ffe099; }
.site-head .container .nav ul li > a:hover { color:#fff; }
.site-head .container .nav ul li a svg { fill:currentColor; }
.site-head .container .user { color:#edf4fa; }
.site-cont { flex:1 0 auto; }
.site-cont .container .cont-left > :is(.left-list, .left-brea, .left-search, .left-echo),
.site-cont .container .cont-cent > :is(.left-echo, .cent-err, .cent-pw),
.site-cont .container .cont-right :is(.right-user, .right-search, .right-list, .right-sort, .right-tag, .right-link, .right-text) {
    box-sizing:border-box;
    background:var(--xp-panel);
    background-image:var(--xp-sheen);
    border:1px solid var(--xp-edge);
    border-radius:14px;
    box-shadow:var(--xp-shadow);
    -webkit-backdrop-filter:var(--xp-blur);
    backdrop-filter:var(--xp-blur);
}
.site-cont .container .cont-right .right-search { padding:9px; }
.site-cont .container :is(.right-search, .left-search, .cent-pw) input { min-width:0; }
.site-foot { flex-shrink:0; position:relative; isolation:isolate; background:transparent; color:#e1eaf2; }
/* 页脚钩子可以输出固定控件，将滤镜放在独立的背景层。 */
.site-foot::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:var(--xp-bar);
    border-top:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:var(--xp-blur);
    backdrop-filter:var(--xp-blur);
}
.site-foot .container a { color:#e1eaf2; }
.site-foot .container a:hover { color:#fff; text-decoration:underline; }
.top-list {
    position:fixed;
    right:10px;
    bottom:80px;
    z-index:15;
    display:grid;
    padding:3px;
    border:1px solid var(--xp-edge);
    border-radius:14px;
    box-shadow:var(--xp-shadow);
    background:var(--xp-panel);
    background-image:var(--xp-sheen);
    -webkit-backdrop-filter:var(--xp-blur);
    backdrop-filter:var(--xp-blur);
}
.top-list a { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:#315777; }
.top-list a:hover, .top-list a:focus-visible { background:#d4e5f4; color:#193e61; }
.top-list a svg { fill:currentColor; }
@media (max-width:576px) {
    .top-list { right:4px; }
}
.xiapian-related { display:flow-root; padding-bottom:1px; }
.xiapian-related:empty { display:none; }
.xiapian-related .lcbk-netdisk-download { box-sizing:border-box; }
.site-cont .container .left-echo .cont .lcbk-netdisk-jump a { text-decoration:none; border:0; color:#2563eb; }
.site-cont .container .left-echo .cont .lcbk-netdisk-jump { margin-top:0; }
.xiapian-article-content { overflow-wrap:anywhere; }
.xiapian-article-content img { max-width:100%; height:auto; }
.xiapian-lightbox-trigger { cursor:zoom-in; }
.xiapian-lightbox-trigger:focus-visible, .xiapian-like:focus-visible { outline:2px solid #3977c5; outline-offset:4px; }
.site-cont .container .left-echo .cont-zan { flex-direction:column; align-items:center; gap:8px; }
.xiapian-like { padding:5px 10px 6px; border:1px solid #868e96; border-radius:4px; background:#fff; color:#697480; font:inherit; cursor:pointer; }
.xiapian-like:hover, .xiapian-like[aria-pressed="true"] { background:#697480; color:#fff; }
.xiapian-like:disabled { cursor:default; }
.xiapian-like-message:empty { display:none; }
.xiapian-like-message { font-size:12px; }
.xiapian-captcha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; }
.xiapian-captcha input { max-width:160px; }
.xiapian-copy-field { position:fixed; left:-9999px; top:0; }
.site-cont .container .left-echo .cont pre .pre-copy { width:auto; min-width:40px; height:28px; line-height:16px; border:0; border-radius:3px; background:#e8edf0; font-size:12px; }
.xiapian-search-dialog {
    position:fixed;
    inset:0;
    box-sizing:border-box;
    width:calc(100% - 32px);
    max-width:480px;
    max-height:calc(100% - 32px);
    overflow:auto;
    margin:auto;
    padding:0;
    border:1px solid rgba(255,255,255,.85);
    border-radius:16px;
    background:var(--xp-search);
    -webkit-backdrop-filter:var(--xp-search-blur);
    backdrop-filter:var(--xp-search-blur);
    color:#263746;
    box-shadow:0 12px 40px rgba(25,41,58,.22), inset 0 1px rgba(255,255,255,.6);
}
.xiapian-search-dialog:not([open]) { display:none; }
.xiapian-search-dialog::backdrop {
    background:rgba(25,39,55,.28);
    -webkit-backdrop-filter:var(--xp-scrim-blur);
    backdrop-filter:var(--xp-scrim-blur);
}
.xiapian-search-panel { display:flex; align-items:center; gap:6px; padding:clamp(10px, 2.5vw, 16px); }
.xiapian-search-fields { display:flex; flex:1; min-width:0; gap:8px; }
.xiapian-search-fields input { flex:1; min-width:0; min-height:44px; border:1px solid #95a7b8; border-radius:8px; background:rgba(255,255,255,.82); color:#213445; font-size:16px; }
.xiapian-search-fields input::placeholder { color:#526474; }
.xiapian-search-fields input:focus { box-shadow:none; }
.xiapian-search-fields button { min-height:44px; padding:0 16px; border:0; border-radius:8px; background:#356aa5; color:#fff; font:inherit; font-size:15px; }
.xiapian-search-fields button:hover { background:#295482; }
.xiapian-search-close { flex:0 0 44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:#304150; font:26px/1 sans-serif; }
.xiapian-search-close:hover { background:rgba(255,255,255,.55); }
.xiapian-search-dialog :focus-visible { outline:2px solid #356aa5; outline-offset:2px; }
.xiapian-search-fields input:focus-visible { outline-offset:0; }
.xiapian-lightbox { position:fixed; inset:0; box-sizing:border-box; margin:0; padding:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; border:0; background:transparent; color:#fff; }
.xiapian-lightbox::backdrop { background:var(--xp-viewer, #18212b); -webkit-backdrop-filter:var(--xp-blur); backdrop-filter:var(--xp-blur); }
.xiapian-lightbox[open] { display:flex; flex-direction:column; }
.xiapian-lightbox-toolbar { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; flex-shrink:0; }
.xiapian-lightbox button { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid #647080; border-radius:50%; background:#25303d; color:#fff; cursor:pointer; font:28px/1 sans-serif; }
.xiapian-lightbox button[hidden] { display:none; }
.xiapian-lightbox button:hover { background:#3d4b5b; }
.xiapian-lightbox button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.xiapian-lightbox-stage { display:flex; flex:1; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; min-height:0; }
.xiapian-lightbox-image { display:block; max-width:calc(100% - 120px); max-height:100%; width:auto; height:auto; object-fit:contain; margin:auto; }
.xiapian-lightbox-caption { text-align:center; padding:16px 24px; margin:0; min-height:24px; max-height:20vh; overflow:auto; overflow-wrap:anywhere; font:14px/1.6 sans-serif; }
.site-head .nav .xiapian-has-submenu {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
}
.site-head .container .nav .xiapian-has-submenu { padding-block:0; }
.site-head .nav .xiapian-submenu-toggle {
    display:grid;
    place-items:center;
    width:28px;
    height:32px;
    padding:0;
    border:0;
    background:transparent;
    color:#dce2e8;
}
.xiapian-submenu-toggle::after {
    content:"";
    width:6px;
    height:6px;
    border:solid currentColor;
    border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg);
}
.xiapian-submenu-toggle[aria-expanded="true"]::after { transform:rotate(225deg); }
#nav .xiapian-submenu {
    display:block;
    position:absolute;
    top:100%;
    left:0;
    z-index:20;
    box-sizing:border-box;
    width:max-content;
    min-width:10rem;
    max-width:min(22rem, 90vw);
    max-height:65vh;
    overflow-y:auto;
    padding:4px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:10px;
    background:var(--xp-menu);
    -webkit-backdrop-filter:var(--xp-blur);
    backdrop-filter:var(--xp-blur);
    box-shadow:0 4px 12px rgba(0,0,0,.22);
}
#nav .xiapian-submenu[hidden] { display:none; }
#nav .xiapian-submenu.xiapian-align-end { left:auto; right:0; }
#nav .xiapian-submenu li { padding:0; }
#nav .xiapian-submenu a {
    display:block;
    padding:8px 12px;
    color:#e4e9ee;
    overflow-wrap:anywhere;
}
#nav .xiapian-submenu a:hover, #nav .xiapian-submenu a:focus-visible,
#nav .xiapian-submenu-toggle:hover { background:#47515a; color:#fff; }
#nav :focus-visible { outline:2px solid #a9d4ff; outline-offset:-2px; }
@media (max-width:1030px) {
    .site-head .container .nav.xiapian-nav-open {
        display:flex;
        position:absolute;
        top:100%;
        left:0;
        max-height:calc(100vh - 100%);
        max-height:calc(100dvh - 100%);
        overflow-y:auto;
        overscroll-behavior-y:contain;
        padding:0 14px 7px;
        border-radius:0 0 12px 12px;
        background:var(--xp-menu);
        box-shadow:0 8px 16px rgba(21,36,52,.20);
        -webkit-backdrop-filter:var(--xp-blur);
        backdrop-filter:var(--xp-blur);
    }
    .site-head .nav .xiapian-submenu-toggle { width:44px; height:44px; }
    #nav .xiapian-submenu {
        position:static;
        grid-column:1 / -1;
        width:auto;
        min-width:0;
        max-width:none;
        max-height:none;
        padding:0 0 0 12px;
        border:0;
        background:transparent;
        box-shadow:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}
@media (max-width:576px) {
    .xiapian-lightbox-toolbar { padding:10px 12px; }
    .xiapian-lightbox-stage { gap:6px; padding:0 8px; }
    .xiapian-lightbox-stage button { width:36px; height:44px; flex-basis:36px; }
    .xiapian-lightbox-image { max-width:calc(100% - 84px); }
    .xiapian-lightbox-caption { padding:12px 16px; }
}