/* ===== CSS 变量定义 ===== */
:root {
    --dark-bg: #0d1117;
    --dark-surface: #161b22;
    --dark-card: #21262d;
    --dark-border: #161b22;
    --dark-text: #c9d1d9;
    --dark-text-secondary: #8b949e;
    --dark-accent: #58a6ff;
    --dark-accent-hover: #79c0ff;
    --dark-code-bg: #161b22;
    --dark-quote-bg: #161b22;
    --dark-table-bg: #161b22;
    --dark-input-bg: #21262d;
    --dark-subtle-bg: #0d1117;
}

/* ===== 基础夜间模式样式 ===== */
html.dark-mode body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* ===== 链接样式 ===== */
html.dark-mode body a,
html.dark-mode body .nav-menu ul a,
html.dark-mode body .post-content .more a {
    color: var(--dark-accent);
}

html.dark-mode body a:hover,
html.dark-mode body .rewards a:hover,
html.dark-mode body .tags a:hover,
html.dark-mode body .comment-author a:hover,
html.dark-mode body #footer .links a:hover,
html.dark-mode body .icpnum:hover {
    color: var(--dark-accent-hover);
}

html.dark-mode body .post-content a,
html.dark-mode body .comment-content a {
    color: var(--dark-accent);
    border-bottom-color: rgba(88, 166, 255, 0.4);
}

html.dark-mode body .post-content a:hover,
html.dark-mode body .comment-content a:hover {
    color: var(--dark-accent-hover);
    border-bottom-color: var(--dark-accent-hover);
}

/* ===== 头部导航 ===== */
html.dark-mode body #header {
    background: rgba(13, 17, 23, 0.95);
    border-bottom-color: var(--dark-border);
}

html.dark-mode body.head-fixed #header {
    background: rgba(13, 17, 23, 0.95);
}

html.dark-mode body .site-name .site-title,
html.dark-mode body #logo {
    color: var(--dark-text);
}

html.dark-mode body #nav-swith {
    color: var(--dark-text);
}

html.dark-mode body .nav-menu a {
    color: var(--dark-text);
}

html.dark-mode body .nav-menu a:hover {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}

html.dark-mode body .menu-parent ul {
    background: rgba(33, 38, 45, 0.95);
}

html.dark-mode body .menu-parent .menu-parent .menu-child {
    background: rgba(48, 54, 61, 0.95);
}

html.dark-mode body .menu-parent ul:before {
    border-bottom-color: rgba(33, 38, 45, 0.95);
}

html.dark-mode body .menu-parent .menu-parent .menu-child:before {
    border-left-color: rgba(48, 54, 61, 0.95);
}

html.dark-mode body #search input {
    background: transparent;
    border-bottom-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-mode body #search button {
    color: var(--dark-text);
}

/* ===== 主要内容区域 ===== */
html.dark-mode body #main {
    color: var(--dark-text);
}

html.dark-mode body .post-title,
html.dark-mode body .post-title a {
    color: var(--dark-text);
}

html.dark-mode body .post-meta {
    color: var(--dark-text-secondary);
}

html.dark-mode body .post-meta li {
    border-left-color: var(--dark-border);
}

html.dark-mode body .post-content {
    color: var(--dark-text);
}

/* ===== 代码块样式 ===== */
html.dark-mode body pre,
html.dark-mode body code {
    background-color: var(--dark-code-bg);
    color: var(--dark-text);
}

html.dark-mode body pre code {
    background: transparent;
    color: var(--dark-text);
}

/* ===== 引用块样式 ===== */
html.dark-mode body blockquote {
    border-left-color: var(--dark-accent);
    color: var(--dark-text-secondary);
}

/* ===== 表格样式 ===== */
html.dark-mode body table th,
html.dark-mode body table td {
    color: var(--dark-text);
}

html.dark-mode body table th {
    color: var(--dark-text);
}

/* ===== 分割线 ===== */
html.dark-mode body hr {
    border-top-color: var(--dark-border);
}

/* ===== 列表样式 ===== */
html.dark-mode body ul,
html.dark-mode body ol {
    color: var(--dark-text);
}

html.dark-mode body ul li,
html.dark-mode body ol li {
    color: var(--dark-text);
}

/* ===== 输入框和按钮 ===== */
html.dark-mode body input,
html.dark-mode body textarea {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-mode body input:focus,
html.dark-mode body textarea:focus {
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
}

html.dark-mode body button,
html.dark-mode body input[type="submit"] {
    background-color: var(--dark-accent);
    color: white;
    border: none;
}

html.dark-mode body button:hover,
html.dark-mode body input[type="submit"]:hover {
    background-color: var(--dark-accent-hover);
}

/* ===== 评论区域 ===== */

html.dark-mode body .comment-by-author,
html.dark-mode body .whisper .comment-parent.comment-by-author,
html.dark-mode body .comment-by-author > .comment-whisper {
    background-color: rgba(88, 166, 255, 0.1);
}

html.dark-mode body .comment-author {
    color: var(--dark-text);
}

html.dark-mode body .comment-meta time {
    color: var(--dark-text-secondary);
}

html.dark-mode body .comment-content {
    color: var(--dark-text);
}


html.dark-mode body .cancel-comment-reply {
    color: var(--dark-accent);
}

html.dark-mode body .cancel-comment-reply:hover {
    color: var(--dark-accent-hover);
}

/* ===== 侧边栏 ===== */
html.dark-mode body #secondary {
    color: var(--dark-text);
}

html.dark-mode body .widget {
    color: var(--dark-text);
}

html.dark-mode body .widget h3 {
    color: var(--dark-text);
    border-bottom-color: var(--dark-border);
}

html.dark-mode body .widget-list li {
    color: var(--dark-text);
}

html.dark-mode body .widget-tile li {
    color: var(--dark-text);
}

/* ===== 底部区域 ===== */
html.dark-mode body #footer {
    border-top-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

html.dark-mode body #footer a,
html.dark-mode body #footer .links a,
html.dark-mode body .icpnum {
    color: var(--dark-text-secondary);
}

html.dark-mode body #footer a:hover,
html.dark-mode body .links a:hover {
    color: var(--dark-accent);
}

/* ===== 分页导航 ===== */
html.dark-mode body .page-navigator a {
    color: var(--dark-text);
}

html.dark-mode body .page-navigator a:hover {
    color: var(--dark-accent);
}

html.dark-mode body .page-navigator .current a {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}

/* ===== 特殊组件样式 ===== */
html.dark-mode body .whisper.post {
    border-color: var(--dark-border);
    background-color: var(--dark-surface);
}

html.dark-mode body .whisper .post-title a {
    background-color: var(--dark-text);
    color: var(--dark-bg);
}

html.dark-mode body .whisper .post-title a:hover {
    background-color: var(--dark-accent);
    color: white;
}

html.dark-mode body .whisper .notice {
    color: #f85149;
    border-color: rgba(248, 81, 73, 0.3);
    background-color: rgba(248, 81, 73, 0.1);
}

html.dark-mode body .rewards a,
html.dark-mode body .tags a,
html.dark-mode body .comment-author a {
    color: var(--dark-accent);
}

html.dark-mode body .rewards img {
    background-color: var(--dark-surface);
}

html.dark-mode body .license {
    color: var(--dark-text-secondary);
}

html.dark-mode body .post-near {
    color: var(--dark-text-secondary);
}

html.dark-mode body .post-near a {
    color: var(--dark-accent);
}

html.dark-mode body .error-page {
    color: var(--dark-text);
}

html.dark-mode body #archives li {
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text);
}

html.dark-mode body #archives a {
    color: var(--dark-accent);
}

/* ===== 工具栏 ===== */
html.dark-mode body #cornertool li {
    background: var(--dark-surface);
}

html.dark-mode body #cornertool li:hover {
    background: var(--dark-card);
}

html.dark-mode body #top:hover:before {
    color: var(--dark-accent);
}

html.dark-mode body #music.play span {
    background: var(--dark-accent);
}

html.dark-mode body #music.play span i {
    background: white;
}

/* ===== 夜间模式切换按钮 ===== */
#darkmode:before {
    content: "\25cf"; /* 实心圆，更简洁的月亮 */
}

#darkmode.active:before {
    content: "\2600"; /* 太阳符号 */
    animation: play 5s linear infinite;
    -webkit-animation: play 5s linear infinite;
}

#darkmode.active span i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--primary-color, #58a6ff);
}

html.dark-mode #darkmode.active span i {
    background: transparent;
}

/* ===== 目录导航 ===== */
html.dark-mode body #catalog-col {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-mode body #catalog-col a {
    color: var(--dark-text);
}

html.dark-mode body #catalog-col a:hover {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}

html.dark-mode body #catalog {
    color: var(--dark-text);
}

/* ===== 加载动画 ===== */
html.dark-mode body #bar {
    background: var(--dark-accent);
}

html.dark-mode body .loading:after {
    background: var(--dark-accent);
}

html.dark-mode body .ajaxload a {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-mode body .ajaxload a:hover {
    background-color: var(--dark-accent);
    color: white;
    border-color: var(--dark-accent);
}

html.dark-mode body .ajaxload .loading {
    background-color: var(--dark-accent);
    color: white;
}

/* ===== 面包屑导航 ===== */
html.dark-mode body .breadcrumbs {
    color: var(--dark-text-secondary);
}

html.dark-mode body .breadcrumbs a {
    color: var(--dark-accent);
}

html.dark-mode body .breadcrumbs a:hover {
    color: var(--dark-accent-hover);
}

/* ===== 文章链接卡片 ===== */
html.dark-mode body .post-content .links a {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-mode body .post-content .links a:hover {
    background-color: var(--dark-accent);
    color: white;
    border-color: var(--dark-accent);
}

html.dark-mode body .l_logo img,
html.dark-mode body .l_logo i {
    background-color: var(--dark-accent);
}

/* ===== qklhk-chocolate.css 主题样式覆盖 ===== */

/* 基础样式覆盖 */
html.dark-mode body .markdown-body {
    color: var(--dark-text);
    background-image: none;
}

/* 标题样式覆盖 */
html.dark-mode body .markdown-body h1 {
    color: var(--dark-text);
    border-bottom-color: var(--dark-accent);
}

html.dark-mode body .markdown-body h1::before {
    filter: brightness(0) invert(1);
}

html.dark-mode body .markdown-body h2 {
    color: var(--dark-text);
}

html.dark-mode body .markdown-body h2::before {
    filter: brightness(0) invert(1);
}

html.dark-mode body .markdown-body h3 {
    border-left-color: var(--dark-accent);
    color: var(--dark-text);
}

html.dark-mode body .markdown-body h4,
html.dark-mode body .markdown-body h5,
html.dark-mode body .markdown-body h6 {
    color: var(--dark-text);
}

html.dark-mode body .markdown-body h5::after,
html.dark-mode body .markdown-body h6::after {
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

/* 段落样式覆盖 */
html.dark-mode body .markdown-body p {
    color: var(--dark-text);
}

/* 代码样式覆盖 */
html.dark-mode body .markdown-body code {
    background-color: var(--dark-code-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-mode body .markdown-body pre {
    background-color: var(--dark-code-bg);
}

html.dark-mode body .markdown-body pre > code {
    background: transparent;
    color: var(--dark-text);
    border: none;
}

html.dark-mode body .markdown-body p code,
html.dark-mode body .markdown-body li code,
html.dark-mode body .markdown-body code {
    background-color: var(--dark-code-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* 链接样式覆盖 */
html.dark-mode body .markdown-body a {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}

html.dark-mode body .markdown-body a:hover {
    color: var(--dark-accent-hover);
    border-bottom-color: var(--dark-accent-hover);
}

/* 表格样式覆盖 */
html.dark-mode body .markdown-body table {
    background-color: var(--dark-table-bg);
    border-color: var(--dark-border);
}

html.dark-mode body .markdown-body thead {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.dark-mode body .markdown-body th,
html.dark-mode body .markdown-body td {
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-mode body .markdown-body th {
    background-color: var(--dark-surface);
}

/* 引用块样式覆盖 */
html.dark-mode body .markdown-body blockquote {
    background-color: var(--dark-quote-bg);
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

html.dark-mode body .markdown-body blockquote p {
    color: var(--dark-text-secondary);
}

html.dark-mode body .markdown-body blockquote::before,
html.dark-mode body .markdown-body blockquote::after {
    color: var(--dark-accent);
}

/* 强调样式覆盖 */
html.dark-mode body .markdown-body strong {
    color: var(--dark-accent);
}

html.dark-mode body .markdown-body strong::before,
html.dark-mode body .markdown-body strong::after {
    content: none;
}

html.dark-mode body .markdown-body em {
    color: var(--dark-text-secondary);
    font-style: italic;
}

html.dark-mode body .markdown-body em strong {
    background-color: var(--dark-accent);
    color: white;
}

html.dark-mode body .markdown-body s {
    color: var(--dark-text-secondary);
}

/* 分割线样式覆盖 */
html.dark-mode body .markdown-body hr {
    border-top-color: var(--dark-border);
}

/* 列表样式覆盖 */
html.dark-mode body .markdown-body ol,
html.dark-mode body .markdown-body ul {
    color: var(--dark-text);
}

html.dark-mode body .markdown-body ol li,
html.dark-mode body .markdown-body ul li {
    color: var(--dark-text);
    font-weight: normal;
}

/* 选中样式覆盖 */
html.dark-mode body .markdown-body ::selection {
    background-color: rgba(88, 166, 255, 0.3);
    color: var(--dark-text);
}

/* ===== 代码语法高亮 - GitHub Dark ===== */
html.dark-mode body .hljs {
    color: var(--dark-text);
    background: var(--dark-code-bg);
}

html.dark-mode body .hljs-comment,
html.dark-mode body .hljs-quote {
    color: #8b949e;
    font-style: italic;
}

html.dark-mode body .hljs-keyword,
html.dark-mode body .hljs-selector-tag,
html.dark-mode body .hljs-subst {
    color: #ff7b72;
    font-weight: 600;
}

html.dark-mode body .hljs-number,
html.dark-mode body .hljs-literal,
html.dark-mode body .hljs-variable,
html.dark-mode body .hljs-template-variable,
html.dark-mode body .hljs-tag .hljs-attr {
    color: #79c0ff;
}

html.dark-mode body .hljs-string,
html.dark-mode body .hljs-doctag {
    color: #a5d6ff;
}

html.dark-mode body .hljs-title,
html.dark-mode body .hljs-section,
html.dark-mode body .hljs-selector-id {
    color: #d2a8ff;
    font-weight: 600;
}

html.dark-mode body .hljs-type,
html.dark-mode body .hljs-class .hljs-title {
    color: #ff7b72;
}

html.dark-mode body .hljs-tag,
html.dark-mode body .hljs-name,
html.dark-mode body .hljs-attribute {
    color: #7ee787;
}

html.dark-mode body .hljs-regexp,
html.dark-mode body .hljs-link {
    color: #7ee787;
}

html.dark-mode body .hljs-symbol,
html.dark-mode body .hljs-bullet {
    color: #ffab70;
}

html.dark-mode body .hljs-built_in,
html.dark-mode body .hljs-builtin-name {
    color: #79c0ff;
}

html.dark-mode body .hljs-meta {
    color: #8b949e;
}

html.dark-mode body .hljs-deletion {
    background: rgba(255, 123, 114, 0.1);
    color: #ff7b72;
}

html.dark-mode body .hljs-addition {
    background: rgba(126, 231, 135, 0.1);
    color: #7ee787;
}

/* ===== 平滑过渡动画 ===== */
* {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* 特殊元素的过渡时间优化 */
html.dark-mode body {
    transition: background-color 0.5s ease;
}

/* ===== 可访问性优化 ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ===== 高对比度模式支持 ===== */
@media (prefers-contrast: high) {
    html.dark-mode body {
        --dark-bg: #000000;
        --dark-text: #ffffff;
        --dark-border: #ffffff;
        --dark-accent: #00ffff;
    }
}

/* ===== 打印样式 ===== */
@media print {
    html.dark-mode body {
        background-color: white !important;
        color: black !important;
    }
}