/* ════════════════════════════════════════════════════════════════
   Anubis Theme CSS
   简约清新的个人博客主题
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CSS 变量与主题定义
   ════════════════════════════════════════════════════════════════ */

:root {
    --card-border-radius: 0.5rem;
    --card-margin: 1.5rem;
    --icon-margin-left: 1rem;
    --icon-margin-top: 1rem
}

@media(prefers-color-scheme:light) {
    html {
        --title-color: hsl(0, 0%, 10%);
        --font-color: hsl(0, 0%, 15%);
        --bg-color: #ffffff;
        --card-color: #fafafa;
        --card-border-color: #eeeeee;
        --link-color: #1d60a3;
        --link-state-color: var(--primary-color);
        --link-state-border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
        --thead-bg-color: lightgrey;
        --table-border-color: lightgrey;
        --nav-bg-color: #fafafa;
        --nav-link-color: #696969;
        --pre-color: rgb(31, 35, 40);
        --pre-bg-color: #eff1f2;
        --pre-border-color: #e1e5e9;
        --kbd-bg-color: #f7f7f7;
        --bq-color: #ccc;
        --hr-color: #ccc;
        --pagination-bg-color: #fafafa;
        --pagination-link-color: #696969;
        --pagination-border-color: #eeeeee;
        --pagination-border-radius: 5px;
        --post-info-color: #595959;
        --switcher-color: #333;
        --svg-color: #333;
        --svg-state-color: var(--primary-color);
        --comment-bg: #ffffff;
        --comment-border: var(--pre-border-color);
        --comment-meta-color: #656d76;
        --comment-input-bg: var(--card-color);
        --comment-child-border: #d0d7de;
        --comment-child-bg: var(--card-color);
        --btn-primary-bg: #2da44e;
        --btn-primary-hover: #2c974b;
        --btn-primary-color: #ffffff;
    }
}

html[data-theme=light] {
    --title-color: hsl(0, 0%, 10%);
    --font-color: hsl(0, 0%, 15%);
    --bg-color: #ffffff;
    --card-color: #fafafa;
    --card-border-color: #eeeeee;
    --link-color: #1d60a3;
    --link-state-color: var(--primary-color);
    --link-state-border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    --thead-bg-color: lightgrey;
    --table-border-color: lightgrey;
    --nav-bg-color: #fafafa;
    --nav-link-color: #696969;
    --pre-color: rgb(31, 35, 40);
    --pre-bg-color: #eff1f2;
    --pre-border-color: #e1e5e9;
    --kbd-bg-color: #f7f7f7;
    --bq-color: #ccc;
    --hr-color: #ccc;
    --pagination-bg-color: #fafafa;
    --pagination-link-color: #696969;
    --pagination-border-color: #eeeeee;
    --pagination-border-radius: 5px;
    --post-info-color: #595959;
    --switcher-color: #333;
    --svg-color: #333;
    --svg-state-color: var(--primary-color);
    --comment-bg: #ffffff;
    --comment-border: var(--pre-border-color);
    --comment-meta-color: #656d76;
    --comment-input-bg: var(--card-color);
    --comment-child-border: #d0d7de;
    --comment-child-bg: var(--card-color);
    --btn-primary-bg: #2da44e;
    --btn-primary-hover: #2c974b;
    --btn-primary-color: #ffffff;
}

@media(prefers-color-scheme: dark) {
    html {
        --title-color:#f0f0f0;
        --font-color: #dadadb;
        --bg-color: #1d1e20;
        --card-color: #2e2e33;
        --card-border-color: #333333;
        --link-color: #599ada;
        --link-state-color: var(--primary-color);
        --link-state-border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
        --thead-bg-color: #343a40;
        --table-border-color: lightgrey;
        --nav-bg-color: #2e2e33;
        --nav-link-color: #b6b6b6;
        --pre-color: #f8f8f2;
        --pre-bg-color: #292b2d;
        --pre-border-color: rgba(175, 184, 193, 0.3);
        --kbd-bg-color: #404347;
        --bq-color: #ccc;
        --hr-color: #333;
        --pagination-bg-color: #2e2e33;
        --pagination-link-color: #b6b6b6;
        --pagination-border-color: #333333;
        --pagination-border-radius: 5px;
        --post-info-color: #9a9a9a;
        --switcher-color: #fff;
        --svg-color: #ccc;
        --svg-state-color: var(--primary-color);
        --comment-bg: var(--bg-color);
        --comment-border: var(--pre-border-color);
        --comment-meta-color: #8b949e;
        --comment-input-bg: var(--card-color);
        --comment-child-border: #30363d;
        --comment-child-bg: var(--card-color);
        --btn-primary-bg: #238636;
        --btn-primary-hover: #2ea043;
        --btn-primary-color: #ffffff;
    }
}

html[data-theme=dark] {
    --title-color: #f0f0f0;
    --font-color: #dadadb;
    --bg-color: #1d1e20;
    --card-color: #2e2e33;
    --card-border-color: #333333;
    --link-color: #599ada;
    --link-state-color: var(--primary-color);
    --link-state-border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    --thead-bg-color: #343a40;
    --table-border-color: lightgrey;
    --nav-bg-color: #2e2e33;
    --nav-link-color: #b6b6b6;
    --pre-color: #f8f8f2;
    --pre-bg-color: #292b2d;
    --pre-border-color: rgba(175, 184, 193, 0.3);
    --kbd-bg-color: #404347;
    --bq-color: #ccc;
    --hr-color: #333;
    --pagination-bg-color: #2e2e33;
    --pagination-link-color: #b6b6b6;
    --pagination-border-color: #333333;
    --pagination-border-radius: 5px;
    --post-info-color: #9a9a9a;
    --switcher-color: #fff;
    --svg-color: #ccc;
    --svg-state-color: var(--primary-color);
    --comment-bg: var(--bg-color);
    --comment-border: var(--pre-border-color);
    --comment-meta-color: #8b949e;
    --comment-input-bg: var(--card-color);
    --comment-child-border: #30363d;
    --comment-child-bg: var(--card-color);
    --btn-primary-bg: #238636;
    --btn-primary-hover: #2ea043;
    --btn-primary-color: #ffffff;
}


/* ════════════════════════════════════════════════════════════════
   2. 基础重置与全局样式
   ════════════════════════════════════════════════════════════════ */

*, :after, :before {
    box-sizing: border-box;
}

html {
    font-family: system-ui, -apple-system, noto sans sc, microsoft yahei, segoe ui, Roboto, Oxygen, Ubuntu, Cantarell, open sans, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll
}

body {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    color: var(--font-color);
    background: var(--bg-color);
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}

.container {
    max-width: 46rem;
    margin: 0 auto
}

main {
    outline: none
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent
}

a:hover,
a:focus,
a:active {
    color: var(--link-state-color);
    border-bottom: 1px solid var(--link-state-border-color)
}

a:active,
a:hover {
    outline: 0
}

a:active {
    opacity: .9
}

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999
}

a.skip-main:focus,
a.skip-main:active {
    left: auto;
    top: 0;
    width: auto;
    height: auto;
    overflow: auto;
    z-index: 999;
    padding: 4px 6px;
    text-decoration: underline;
    border: none
}

p {
    margin-top: .75em;
    margin-bottom: .75em
}

hr {
    color: var(--hr-color);
    background-color: var(--hr-color);
    border: none;
    height: 1px
}

blockquote {
    border-left: 3px solid var(--bq-color);
    padding: .25em 1.25em;
    margin-left: .5em;
    margin-top: 1.25em;
    margin-bottom: 1.25em
}


/* ════════════════════════════════════════════════════════════════
   3. 标题与目录
   ════════════════════════════════════════════════════════════════ */

h1 {
    font-size: 1.4em;
    letter-spacing: -.01em
}

h2 {
    color: var(--title-color);
    font-size: 1.25em;
    margin-top: 2.5em;
    margin-bottom: .75em;
    letter-spacing: -.01em
}

h2:first-of-type {
    margin-top: 0
}

h3 {
    color: var(--title-color);
    font-size: 1.1em;
    margin-top: 2em;
    margin-bottom: .5em
}

.toc {
    cursor: zoom-in;
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-color);
    font-size: .8rem;
    font-weight: 700
}

.toc.expanded {
    cursor: zoom-out
}

.toc .inner {
    margin: 0;
    padding: 0
}

.toc ul {
    padding-left: 1em;
    margin-top: .2em;
    margin-bottom: .2em
}


/* ════════════════════════════════════════════════════════════════
   4. 表格样式
   ════════════════════════════════════════════════════════════════ */

thead {
    background: var(--thead-bg-color)
}

.table-wrapper {
    overflow-x: auto
}

table {
    max-width: 100%;
    display: table;
    overflow: hidden;
    border-spacing: 0;
    border-collapse: collapse;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: .8rem;
    margin-left: auto;
    margin-right: auto
}

.highlight table {
    border-radius: 0
}

th,
td {
    padding: .25rem .5rem;
    border: 1px solid var(--table-border-color)
}


/* ════════════════════════════════════════════════════════════════
   5. 代码与标记
   ════════════════════════════════════════════════════════════════ */

mark {
    border-radius: 4px
}

code,
pre,
kbd {
    color: var(--pre-color);
    background-color: var(--pre-bg-color);
    font-family: menlo, courier new, consolas, monospace;
    font-size: 14.4px;
    line-height: 154%;
    border-radius: 6px;
    border: 1px solid var(--pre-border-color);
    overflow: visible
}

code {
    font-size: 14.4px;
    padding: .1rem .3rem
}

pre {
    padding: .75em;
    margin-bottom: 1em
}

pre:has(code.language-txt) {
    padding: .3em .6em .3em .6rem
}

p kbd,
pre kbd,
p kbd kbd,
pre kbd kbd {
    font-size: 14.4px;
    background-color: var(--kbd-bg-color);
    border: 1px solid var(--pre-border-color);
    border-width: 1px 2px 2px 1px;
    padding: .1rem .3rem;
    margin-left: .2rem;
    margin-right: .2rem
}

p code,
p kbd {
    padding: .1rem .3rem
}

td pre {
    border: none;
    padding: 0;
    border-radius: 0
}

td:first-child pre {
    padding-right: 0
}

td:last-child pre {
    padding-left: 0
}

td pre code {
    padding: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0
}

div.highlight {
    border-radius: 6px;
    border: 1px solid var(--pre-border-color);
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    overflow: hidden
}

div.highlight div {
    overflow: auto;
    padding: .3rem 0
}

div.highlight pre {
    border: none;
    display: block;
    margin: 0;
    overflow: auto
}

div.highlight code {
    padding-left: 0;
    padding-right: 0;
    overflow: unset
}

div.highlight code a:hover,
div.highlight code a:focus {
    color: #fff;
    border-bottom: 1px solid #fff
}

pre code,
pre kbd {
    color: inherit;
    background-color: inherit;
    border: none;
    padding: 0
}


/* ════════════════════════════════════════════════════════════════
   6. 代码高亮与复制按钮
   ════════════════════════════════════════════════════════════════ */

.highlight {
    position: relative;
    overflow: visible
}

.highlight:hover .highlight-copy-btn {
    display: inline-block;
    border: 1px solid var(--pre-border-color)
}

.highlight-copy-btn {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid var(--pre-border-color);
    border-radius: 6px;
    padding: 1px;
    font-size: .7rem;
    line-height: 1.8;
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    min-width: 22px;
    text-align: center;
    transition: border .3s;
    transition: background-color .3s
}

.highlight-copy-btn:hover {
    transition-duration: .1s;
    background-color: rgba(255, 255, 255, .3);
    cursor: pointer
}

.highlight:focus-within .highlight-copy-btn,
.highlight .highlight-copy-btn:focus,
.highlight .highlight-copy-btn:focus-visible {
    display: inline-block;
    outline: none
}

.highlight-copy-btn,
.highlight-copy-btn svg {
    vertical-align: middle;
    margin: 8px
}

@media(hover:none) and (pointer:coarse) {
    .highlight .highlight-copy-btn {
        display: inline-block
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important
    }

    .highlight-copy-btn {
        transition: none
    }
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}


/* ════════════════════════════════════════════════════════════════
   7. 头部与站点信息
   ════════════════════════════════════════════════════════════════ */

.common-header {
    padding-bottom: 1.5rem
}

header a {
    color: var(--title-color)
}

header h1 {
    color: var(--title-color);
    font-size: 18px;
    margin-top: 1em;
    margin-bottom: 0;
    font-weight: 400
}

header h2 {
    font-size: 1rem;
    margin: 0;
    font-weight: 400
}

.header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0
}

.header-top-left {
    display: flex;
    align-items: center;
    gap: 1rem
}

.site-title {
    display: inline;
    white-space: nowrap;
    font-weight: 700;
    margin: 0
}

.site-logo {
    height: 44px;
    width: auto;
    display: block
}

html[data-theme=dark] .site-logo {
    filter: brightness(0) invert(1);
}


/* ════════════════════════════════════════════════════════════════
   8. 导航菜单
   ════════════════════════════════════════════════════════════════ */

header nav:not(:empty) {
    background: var(--nav-bg-color);
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 5%;
    padding: .25rem 0;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    font-size: .8rem
}

header nav a {
    display: inline-block;
    margin: 0
}

header nav:not(:empty) {
    gap: 0;
}

header nav a {
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   9. 二级导航下拉菜单
   ════════════════════════════════════════════════════════════════ */

.nav-wrapper {
    position: relative;
    display: inline-block;
}

.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.nav-item:hover,
.nav-item:focus {
    color: var(--link-state-color);
    border-bottom: none;
}

.nav-item.has-dropdown {
    cursor: pointer;
}

.dropdown-icon {
    font-size: 0.85em;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.nav-wrapper:hover .dropdown-icon,
.nav-wrapper:focus-within .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--card-color);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .dropdown-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-wrapper:hover .dropdown-menu,
.nav-wrapper:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--nav-link-color);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--nav-bg-color);
    color: var(--link-state-color);
    border-bottom: none;
}

@media (max-width: 840px) {
    .dropdown-icon {
        transition: transform 0.2s ease;
    }

    .nav-wrapper:hover .dropdown-icon,
    .nav-wrapper:focus-within .dropdown-icon {
        transform: rotate(180deg);
    }
}


/* ════════════════════════════════════════════════════════════════
   10. 社交图标
   ════════════════════════════════════════════════════════════════ */

.social-icons {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none
}

.social-icons li {
    display: inline-flex;
    align-items: center
}

.social-icons a,
.social-icons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    vertical-align: middle
}

.social-icons button {
    background: 0 0;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit
}

.social-icons a:hover,
.social-icons a:focus,
.social-icons a:active,
.social-icons button:hover,
.social-icons button:focus,
.social-icons button:active {
    color: inherit;
    border-bottom: none;
    text-decoration: none
}

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

.inline-ri i {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem
}


/* ════════════════════════════════════════════════════════════════
   11. 文章列表与卡片
   ════════════════════════════════════════════════════════════════ */

main h1 {
    margin-top: 0;
    font-weight: 400;
    line-height: 1.1rem;
    margin-bottom: .5rem;
    font-weight: 600
}

.post-card {
    border: 1px solid var(--card-border-color) !important;
    border-radius: .5rem;
    padding: 1rem;
    background: var(--card-color)
}

article:not(:last-of-type) {
    margin-bottom: var(--card-margin)
}

.post-short-list:first-of-type {
    margin-top: 1rem
}

.post-short-list img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto .5rem
}

.post-short-list video {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto .5rem
}

.post-short-list .post-header {
    margin-top: 0rem;
    line-height: 1.1rem;
    margin-bottom: .5rem
}

.post-header {
    font-size: 14px;
    line-height: 1.4em
}

.post-header header {
    display: inline
}

.post-list {
    border: #777
}

.post-short-list .post-title {
    display: inline
}

.post-title.favorite::after {
    content: "🌟";
    display: inline-block;
    margin-left: .2rem
}

.post-title.draft::after {
    content: "✏️";
    display: inline-block;
    margin-left: .2rem
}

.post-title.favorite.draft::after {
    content: "🌟 ✏️";
    display: inline-block;
    margin-left: .2rem
}

article header :is(h1, h2) {
    font-size: 1.35em;
    line-height: 1.5em;
    margin-bottom: .5em;
    font-weight: 600;
    display: inline
}

.articles>h1.post-title {
    font-size: 1.35em;
    line-height: 1.5em;
    margin-bottom: .5em;
    font-weight: 600
}

article header :is(h1, h2) a {
    color: var(--title-color);
    border: none;
    text-decoration: none;
    line-height: 2rem
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
    position: relative
}

.post h1 a,
.post h2 a,
.post h3 a,
.post h4 a,
.post h5 a,
.post h6 a {
    opacity: 1;
    border-bottom: none
}

.post h1:hover a,
.post h2:hover a,
.post h3:hover a,
.post h4:hover a,
.post h5:hover a,
.post h6:hover a {
    opacity: 1;
    border-bottom: none
}

.post h1 a:hover,
.post h1 a:focus,
.post h1 a:active,
.post h2 a:hover,
.post h2 a:focus,
.post h2 a:active,
.post h3 a:hover,
.post h3 a:focus,
.post h3 a:active,
.post h4 a:hover,
.post h4 a:focus,
.post h4 a:active,
.post h5 a:hover,
.post h5 a:focus,
.post h5 a:active,
.post h6 a:hover,
.post h6 a:focus,
.post h6 a:active {
    border-bottom: none
}

.post h1 svg,
.post h2 svg,
.post h3 svg,
.post h4 svg,
.post h5 svg,
.post h6 svg {
    stroke: var(--svg-color)
}

.post h1 svg:hover,
.post h1 svg:focus,
.post h1 svg:active,
.post h2 svg:hover,
.post h2 svg:focus,
.post h2 svg:active,
.post h3 svg:hover,
.post h3 svg:focus,
.post h3 svg:active,
.post h4 svg:hover,
.post h4 svg:focus,
.post h4 svg:active,
.post h5 svg:hover,
.post h5 svg:focus,
.post h5 svg:active,
.post h6 svg:hover,
.post h6 svg:focus,
.post h6 svg:active {
    stroke: var(--svg-state-color)
}

.post-list .post-img {
    color: var(--pre-color);
    background-color: var(--pre-bg-color);
    font-family: menlo, courier new, consolas, monospace;
    font-size: 14.4px;
    line-height: 154%;
    border-radius: 6px;
    border: 1px solid var(--pre-border-color);
    overflow: visible;
}

.post-img {
    padding: .75em;
    margin-bottom: 1em;
}

article .post-img img {
    width: 100%;
    max-width: 100%;
    display: block;
    height: 195px;
    margin: 0;
    object-fit: cover;
    vertical-align: middle;
}

.post-list .post-info {
    color: var(--post-info-color);
    font-size: 12px;
    margin-top: 1em;
    display: flex;
    gap: 1rem
}

.post-info {
    color: var(--post-info-color);
    font-size: 12px;
    margin-top: 1em;
    display: flex;
    gap: 1rem
}

.post-info a {
    color: var(--post-info-color)
}

.post-info a:hover {
    color: var(--link-state-color)
}

.post-short-list .post-info {
    margin-top: 0;
    margin-bottom: 1.5rem
}

.post-taxonomies {
    display: inline
}

.post-hidden-url {
    display: none
}

.post-hidden-author {
    display: none
}

.post-date {
    white-space: nowrap
}

.post-categories {
    display: inline;
    list-style-type: none;
    padding: 0
}

.post-categories li {
    display: inline;
    margin-right: 1rem
}

.post-tags {
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 0
}

.post-tags li {
    display: inline;
    margin-right: 1rem
}

.post-authors {
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 0
}

.post-authors li {
    display: inline;
    margin-right: 1rem
}

article img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 1.5em auto
}

article figcaption {
    color: grey;
    text-align: center;
    font-size: .85em;
    margin-top: -1em;
    margin-bottom: 1.5em
}

article table+figcaption {
    margin-top: .5em
}

article video {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 1.5em auto
}

code.has-jax {
    -webkit-font-smoothing: antialiased;
    background: inherit !important;
    border: none !important;
    font-size: 100%
}

.read-more {
    margin: 1em 0;
    font-size: 14px
}

.divider {
    border-top: thin solid var(--hr-color);
    display: block;
    height: 1px;
    border: 0;
    width: 25%;
    margin: 1rem auto
}

.post-summary {
    margin-top: .5rem;
    display: block;
    font-size: 14px
}

.post-summary>p {
    display: block
}

.post-translations {
    margin-left: .5rem;
    list-style: none;
    padding: 0;
    display: inline;
    font-size: 12px;
    color: var(--font-color)
}

.post-translations>li {
    display: inline
}

.post-translations>li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px
}

.post-translations>li a {
    color: var(--link-color)
}

.post-translations>li a:hover,
.post-translations>li a:focus {
    color: var(--link-state-color)
}

.read-next-title {
    margin-bottom: 0;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--thead-bg-color)
}

.read-next-posts {
    margin-top: 5px;
    list-style-type: "- ";
    padding-inline-start: 20px
}

.terms {
    list-style-type: none;
    padding: 0;
    line-height: 2rem
}


/* ════════════════════════════════════════════════════════════════
   12. 分页与页脚
   ════════════════════════════════════════════════════════════════ */

.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    text-align: center;
    font-size: 14px
}

.pagination-item {
    border: 1px solid var(--pagination-border-color);
    border-radius: var(--pagination-border-radius);
    background: var(--pagination-bg-color);
    padding: .25rem .75rem
}

.pagination-item a {
    color: var(--pagination-link-color)
}

.pagination-item a:hover,
.pagination-item a:focus {
    color: var(--link-state-color)
}

.disabled {
    visibility: hidden
}

.pagination-item a:hover,
.pagination-item a:focus {
    border-bottom: 0
}

.post-pagination .pagination-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem
}

.common-footer {
    padding-top: 1.5rem;
    margin-top: 3rem;
    font-size: 12px;
    margin-bottom: 1.5rem;
    color: var(--pagination-link-color)
}

.common-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 8px
}

.footer-licenses {
    display: flex;
    align-items: center;
    gap: 4px
}

.footer-stat-link {
    display: inline-flex;
    align-items: center;
    border-bottom: none;
    cursor: pointer;
    color: var(--pagination-link-color)
}

.footer-beian-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain
}

ul.language-select,
ul.footer-menu {
    padding-left: 0;
    list-style: none;
    display: flex
}

ul.language-select>li,
ul.footer-menu>li {
    margin-right: 1rem
}

.theme-switcher {
    color: var(--switcher-color);
    margin: var(--icon-margin-top)0 0 var(--icon-margin-left);
    cursor: pointer
}


/* ════════════════════════════════════════════════════════════════
   13. 评论区域 - GitHub Discussion 风格
   ════════════════════════════════════════════════════════════════ */

#comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comments-area {
    margin: 0;
    padding: 0;
    border: 1px solid var(--comment-border);
    border-radius: var(--card-border-radius);
    background: var(--comment-bg);
    overflow: hidden;
}

.comment-header {
    padding: 0.75rem 0;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 600;
}

.commentform {
    margin: 0;
}

.comment-input-area {
    padding: 1rem;
    background: var(--comment-bg);
}

.comment-textarea-wrapper {
    margin-bottom: 0;
}

.log_comment {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem;
    font-size: 14px;
    line-height: 1.6;
    color: var(--font-color);
    background: var(--comment-input-bg);
    border: 1px solid var(--comment-border);
    border-radius: var(--card-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.log_comment:focus {
    outline: none;
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-color) 15%, transparent);
}

.comment-input-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.comment-input-row .form-control {
    flex: 1;
    min-width: 200px;
}

.captcha-container {
    margin-bottom: 0;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.captcha-row img,
.captcha-row #captcha,
.captcha-row canvas {
    display: block;
    height: 38px;
    cursor: pointer;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--comment-border);
}

.captcha-row br {
    display: none;
}

.captcha-row input[type="text"] {
    width: 120px;
    min-width: 120px;
}

.form-control {
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: var(--font-color);
    background: var(--comment-input-bg);
    border: 1px solid var(--comment-border);
    border-radius: var(--card-border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-color) 15%, transparent);
}

.comment-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--comment-border);
    background: var(--comment-bg);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
}

.btn-primary {
    color: var(--btn-primary-color);
    background: var(--btn-primary-bg);
    border-color: rgba(27, 31, 35, 0.15);
    box-shadow: 0 1px 0 rgba(27, 31, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    border-color: rgba(27, 31, 35, 0.15);
}

.btn-secondary {
    color: var(--font-color);
    background: var(--nav-bg-color);
    border: 1px solid var(--comment-border);
    box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-secondary:hover {
    background: var(--card-color);
    border-color: var(--comment-border);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 12px;
    border-radius: 6px;
}

.login-notice {
    color: var(--comment-meta-color);
    font-size: 14px;
}

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

.comment {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--comment-border);
    flex-wrap: nowrap;
    background: var(--comment-bg);
}

.comment:last-of-type {
    border-bottom: none;
}

.comment-children-wrapper {
    margin-left: 0;
    margin-top: 1rem;
    border-left: 2px solid var(--comment-child-border);
    padding-left: 1rem;
    border-radius: 0 6px 6px 0;
}

.comment-children {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--comment-border);
}

.comment-children:last-child {
    border-bottom: none;
}

.avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
    display: block;
}

.comment-infos {
    flex: 1;
    min-width: 0;
    position: relative;
}

.comment-infos .arrow {
    display: none;
}

.comment-meta {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-meta b {
    color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
}

.comment-time {
    color: var(--comment-meta-color);
    font-size: 12px;
}

.comment-owner-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--link-color);
    background: color-mix(in srgb, var(--link-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--link-color) 20%, transparent);
    border-radius: 12px;
}

.comment-edited {
    color: var(--comment-meta-color);
    font-size: 12px;
    margin-left: auto;
}

.comment-content {
    color: var(--font-color);
    font-size: 14px;
    line-height: 1.6;
    margin: 0.5rem 0;
    background-color: var(--comment-child-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    word-wrap: break-word;
    border-left: 2px solid transparent;
}

.comment-content p {
    margin: 0.5em 0;
}

.comment-content p:first-child {
    margin-top: 0;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.comment-reply {
    margin-top: 0.5rem;
}

#pagenavi {
    padding: 0.75rem 1rem;
    text-align: center;
    background: var(--comment-bg);
}

#pagenavi a, 
#pagenavi span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin: 0 0.25rem;
    color: var(--pagination-link-color);
    border: 1px solid var(--pagination-border-color);
    border-radius: 6px;
    background: var(--pagination-bg-color);
    font-size: 14px;
    text-decoration: none;
}

#pagenavi a:hover {
    color: var(--link-state-color);
}

#pagenavi span {
    background: var(--pre-bg-color);
    color: var(--pre-color);
    border-color: var(--pre-border-color);;
}

.cancel-reply {
    display: none;
}

.cancel-reply.show {
    display: inline-flex;
}

html[data-theme="dark"] .captcha-row img,
html[data-theme="dark"] .captcha-row canvas {
    filter: brightness(0.9) contrast(1.1);
}


/* ════════════════════════════════════════════════════════════════
   14. 相邻文章导航
   ════════════════════════════════════════════════════════════════ */

.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    background: transparent;
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding: 0;
    border: none;
}

.prev-log,
.next-log {
    flex: 1;
    min-width: 0;
}

.next-log {
    text-align: right;
}

.neighbor-link {
    display: grid;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    background: var(--card-color);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    text-decoration: none;
    overflow: hidden;
}

.neighbor-link:hover .neighbor-title,
.neighbor-link:focus .neighbor-title {
    color: var(--link-state-color);
    border-bottom: 1px solid var(--card-border-color);
}

.neighbor-dir {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    color: var(--comment-meta-color);
    font-weight: 500;
    line-height: 1.4;
}

.neighbor-dir .iconfont {
    font-size: 12px;
}

.neighbor-title {
    display: block;
    font-size: 14px;
    color: var(--title-color);
    font-weight: 500;
    line-height: 1.5;
    height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.next-log .neighbor-link {
    align-items: flex-end;
}

.next-log .neighbor-dir {
    flex-direction: row-reverse;
}

.next-log .neighbor-title {
    text-align: right;
}

.post-navigation a:first-of-type {
    margin-left: 0
}

/* ════════════════════════════════════════════════════════════════
   15. 响应式适配
   ════════════════════════════════════════════════════════════════ */

@media(max-width:840px) {
    .main-wrapper {
        margin: 0;
        max-width: none;
        overflow-x: hidden;
        padding-left: 25px;
        padding-right: 25px
    }

    .container {
        max-width: 90%;
        margin: 0 auto;
        word-wrap: break-word
    }

    .pagination-item {
        padding: .5rem;
        font-size: .8rem
    }

    .post-navigation a {
        margin-left: .5rem
    }

    .post-pagination .pagination-item {
        max-width: 10rem
    }

    .post-navigation {
        flex-direction: column;
        gap: 0.75rem;
    }

    .next-log {
        text-align: left;
    }

    .next-log .neighbor-link {
        align-items: flex-start;
    }

    .next-log .neighbor-dir {
        flex-direction: row;
    }

    .next-log .neighbor-title {
        text-align: left;
    }

    .neighbor-title {
        -webkit-line-clamp: 3;
    }

    .comment-input-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .comment-input-row .form-control {
        min-width: 100%;
        width: 100%;
    }

    .captcha-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .captcha-row input[type="text"] {
        width: 100%;
    }

    .comment,
    .comment-children {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .avatar {
        width: 32px;
        height: 32px;
    }

    .comment-children-wrapper {
        padding-left: 0.5rem;
    }

    .comment-actions {
        padding: 0.75rem;
    }

    .comment-actions .btn {
        width: auto;
    }
}


/* ════════════════════════════════════════════════════════════════
   16. 内容排版增强
   ════════════════════════════════════════════════════════════════ */

.e-content {
    font-size: 16px;
    line-height: 1.75
}

.e-content ul,
.e-content ol {
    padding-left: 1.5em;
    margin-top: .75em;
    margin-bottom: .75em
}

.e-content li {
    margin-top: .25em;
    margin-bottom: .25em
}

.e-content li>ul,
.e-content li>ol {
    margin-top: .25em;
    margin-bottom: .25em
}