/* 页面背景和卡片样式优化 */
/* 设置浅色模式页面背景色 */
body {
    background-color: #f9fafb;
}

/* 深色模式背景色 */
.dark body {
    background-color: #0f172a;
}

/* 自定义工具类 */
.card-hover:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 确保优势信息在悬停时可见 */
.card-hover:hover .advantage-info {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    z-index: 10 !important;
}

/* 确保优势信息显示在正确的位置 */
.advantage-info {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 8px !important;
    display: none;
    opacity: 0;
    pointer-events: none;
    z-index: 10 !important;
}

/* 卡片通用样式 - 增强对比度 */
.card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.dark .card {
    background-color: #1e293b;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* 文章卡片样式优化 */
.article-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.dark .article-card {
    background-color: #1e293b;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 深色模式过渡 */
.dark-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 回到顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 50;
}

.back-to-top.visible {
    opacity: 1;
}

.back-to-top:hover {
    background-color: var(--primary-color-dark);
}

/* 主题切换按钮 */
.theme-toggle {
    width: 3rem;
    height: 1.5rem;
    background-color: #e0e0e0;
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-toggle::after {
    content: '';
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: white;
    top: 0.15rem;
    left: 0.15rem;
    transition: transform 0.3s ease;
}

.theme-toggle.dark {
    background-color: #424242;
}

.theme-toggle.dark::after {
    transform: translateX(1.5rem);
}

/* 代码高亮 */
/* 代码块样式优化 */
pre {
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

pre code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1rem;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 行内代码样式 */
.prose code:not(pre code) {
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border-radius: 0.375rem;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

/* 深色模式下的代码样式 */
.dark pre {
    background-color: #1e293b;
    border-color: #334155;
}

.dark pre code {
    color: #e2e8f0;
}

.dark .prose code:not(pre code) {
    background-color: #334155;
    color: #f8fafc;
    border-color: #475569;
}

/* 代码块滚动条优化 */
pre {
    position: relative;
}

pre::-webkit-scrollbar {
    height: 6px;
}

.dark pre::-webkit-scrollbar-track {
    background: #1e293b;
}

.pre::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

.dark pre::-webkit-scrollbar-thumb {
    background: #64748b;
}

/* 表格样式 */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.prose th, .prose td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.prose th {
    font-weight: 600;
    background-color: #f9fafb;
}

.dark .prose th {
    background-color: #1f2937;
}

.dark .prose th, .dark .prose td {
    border-bottom-color: #374151;
}

/* 按钮样式 */
.btn-primary {
    background-color: var(--primary-color, #3B82F6);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: rgba(59, 130, 246, 0.9);
}

.btn-secondary {
    background-color: white;
    color: #3B82F6;
    border: 1px solid #3B82F6;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.dark .btn-secondary {
    background-color: #333333;
}

/* 确保优势信息在悬停时可见 - 再次增强样式 */
.card-hover.relative:hover .advantage-info {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    z-index: 10 !important;
}

/* 确保优势信息样式优先级 */
.advantage-info {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 8px !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* 响应式调整 */
@media screen and (max-width: 640px) {
    .prose {
        font-size: 1rem;
    }

    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* 标题样式优化 - 更适合中文阅读习惯 */
.prose h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.dark .prose h1 {
    color: #f8fafc;
}

.prose h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .prose h2 {
    color: #e2e8f0;
    border-bottom-color: #374151;
}

.prose h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.dark .prose h3 {
    color: #cbd5e1;
}

.prose h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
    margin-top: 1.125rem;
    margin-bottom: 0.625rem;
}

.dark .prose h4 {
    color: #94a3b8;
}

.prose h5 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.dark .prose h5 {
    color: #94a3b8;
}

.prose h6 {
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.dark .prose h6 {
    color: #94a3b8;
}

/* 标题前的装饰元素 */
.prose h2::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 1.2rem;
    background-color: var(--primary-color);
    margin-right: 0.4rem;
    vertical-align: middle;
    border-radius: 0.2rem;
}

/* 段落样式优化 */
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
    text-align: justify;
}

.dark .prose p,
.dark .prose li,
.dark .prose table,
.dark .prose th,
.dark .prose td,
.dark article p,
.dark article li,
.dark article table,
.dark article th,
.dark article td,
.dark .entry-content p,
.dark .entry-content li,
.dark .entry-content table,
.dark .entry-content th,
.dark .entry-content td,
.dark .post-content p,
.dark .post-content li,
.dark .post-content table,
.dark .post-content th,
.dark .post-content td,
.dark .content p,
.dark .content li,
.dark .content table,
.dark .content th,
.dark .content td,
.dark .main-content p,
.dark .main-content li,
.dark .main-content table,
.dark .main-content th,
.dark .main-content td,
.dark .article-content p,
.dark .article-content li,
.dark .article-content table,
.dark .article-content th,
.dark .article-content td,
.dark .category-content p,
.dark .category-content li,
.dark .category-content table,
.dark .category-content th,
.dark .category-content td,
.dark .taxonomy-content p,
.dark .taxonomy-content li,
.dark .taxonomy-content table,
.dark .taxonomy-content th,
.dark .taxonomy-content td,
.dark .term-content p,
.dark .term-content li,
.dark .term-content table,
.dark .term-content th,
.dark .term-content td,
.dark .text-gray-600.dark\:text-gray-300,
.dark .prose span,
.dark .prose div,
.dark article .text-gray-600.dark\:text-gray-300 {
    color: #e2e8f0 !important;
}

/* 列表样式优化 */
.prose ul,
.prose ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* 文章内容链接样式优化 */
.prose a:not(.nav-item-hover):not(.btn-primary):not(.btn-secondary):not(.card-hover a) {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid rgba(37, 99, 235, 0.2);
    padding-bottom: 0.05em;
    transition: all 0.2s ease;
    position: relative;
}

/* 链接悬停效果 */
.prose a:not(.nav-item-hover):not(.btn-primary):not(.btn-secondary):not(.card-hover a):hover {
    color: #1d4ed8;
    border-bottom-color: rgba(37, 99, 235, 0.6);
    background-color: rgba(37, 99, 235, 0.05);
}

/* 链接点击时效果 */
.prose a:not(.nav-item-hover):not(.btn-primary):not(.btn-secondary):not(.card-hover a):active {
    transform: translateY(1px);
}

/* 深色模式下的链接样式 */
.dark .prose a:not(.nav-item-hover):not(.btn-primary):not(.btn-secondary):not(.card-hover a) {
    color: #60a5fa;
    border-bottom-color: rgba(96, 165, 250, 0.2);
}

.dark .prose a:not(.nav-item-hover):not(.btn-primary):not(.btn-secondary):not(.card-hover a):hover {
    color: #3b82f6;
    border-bottom-color: rgba(96, 165, 250, 0.6);
    background-color: rgba(59, 130, 246, 0.1);
}

/* 响应式调整标题大小 */
@media (max-width: 768px) {
    .prose h1 {
        font-size: 2rem;
    }
    
    .prose h2 {
        font-size: 1.75rem;
    }
    
    .prose h3 {
        font-size: 1.4rem;
    }
    
    .prose h4 {
        font-size: 1.2rem;
    }
    
    .prose h5 {
        font-size: 1.05rem;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 详情页评论区样式 */
/* Twikoo评论区深色模式优化 */
.dark #twikoo,
.dark #tcomment {
    --tk-color-text-primary: #e2e8f0 !important;
    --tk-color-text-secondary: #cbd5e1 !important;
    --tk-color-text-placeholder: #94a3b8 !important;
    --tk-color-bg-card: #1e293b !important;
    --tk-color-bg-input: #334155 !important;
    --tk-color-border: #475569 !important;
}

/* 确保评论区内所有文本在深色模式下都有良好的可读性 */
.dark #twikoo *, 
.dark #tcomment * {
    color: #e2e8f0 !important;
}

.dark #twikoo input,
.dark #twikoo textarea,
.dark #tcomment input,
.dark #tcomment textarea {
    color: #e2e8f0 !important;
    background-color: #334155 !important;
    border-color: #475569 !important;
}

.dark #twikoo input::placeholder,
.dark #twikoo textarea::placeholder,
.dark #tcomment input::placeholder,
.dark #tcomment textarea::placeholder {
    color: #94a3b8 !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}