/* ===== LeavesHack Minecraft工具官网主题 =====
   主色调: #333 (深灰), #1a1a1a (黑色)
   辅助色: #fff (白色), #e0e0e0 (浅灰)
   设计风格: 现代简约 + 黑白灰专业感
*/

/* FOUC 防护：防止页面加载时闪烁白色背景 */
html {
    background-color: #1a1a1a !important;
}

html body {
    background-color: #1a1a1a !important;
}

@font-face {
    font-family: 'MyFont';
    src: url('../font/trollhack.ttf') format('truetype');
}

/* ===== 1. 首页样式 - Hero Section ===== */
.video-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    opacity: 0.25 !important;
    filter: blur(24px) !important;
    pointer-events: none !important;
}

body {
    font-family: 'MyFont', sans-serif !important;
}

/*html#home_page body {*/
/*    background-image: url('/static/image/2b2t.png') !important;*/
/*    background-color: #0a0a0a !important;*/
/*    font-family: 'MyFont', sans-serif !important;*/
/*    background-size: cover !important;*/
/*    background-position: center !important;*/
/*    background-repeat: no-repeat !important;*/
/*    background-attachment: fixed !important;*/
/*    position: relative !important;*/
/*    overflow-x: hidden !important;*/
/*}*/

/* 深色半透明遮罩 + 背景模糊 */
html#home_page body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: -1 !important;
}

/* 光晕背景效果 - 移到文字后面 */
.glow-bg {
    position: absolute !important;
    top: 10% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    height: 400px !important;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%) !important;
    filter: blur(80px) !important;
    z-index: -2 !important;
    pointer-events: none !important;
}

.glow-bg-2 {
    position: absolute !important;
    top: 30% !important;
    left: 30% !important;
    width: 400px !important;
    height: 300px !important;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.1) 50%, transparent 70%) !important;
    filter: blur(60px) !important;
    z-index: -2 !important;
    pointer-events: none !important;
}

/* Hero Section 容器 */
.hero-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 20px !important;
    min-height: 60vh !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Logo + 主标题 */
.hero-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 30px !important;
}

/* ===== 进场动画 ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hero-logo {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.1s;
}

.hero-title h1 {
    color: #ffffff !important;
    font-size: 2.2em !important;
    font-weight: 700 !important;
    font-family: 'MyFont', sans-serif !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

/* 数据卡片 */
.stats-card {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

.stat-item {
    background: rgba(30, 30, 30, 0.85) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* 功能描述 */
.hero-desc {
    color: rgba(255,255,255,0.9) !important;
    font-size: 1em !important;
    margin-bottom: 35px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    max-width: 500px !important;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.5s;
}

/* 行动按钮 */
.hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.7s;
}

.btn-primary {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    transform: translateY(-2px) !important;
}

/* ===== 2. 导航栏 ===== */
#navbar {
    background: rgba(20, 20, 20, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 10px !important;
    height: 60px !important;
    line-height: 40px !important;
}

.dark #navbar {
    background: rgba(20, 20, 20, 0.95) !important;
}

#navbar a {
    color: #e0e0e0 !important;
}

#navbar a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.site_title {
    height: 60px !important;
}

/* 站点标题 */
.site_title h2 {
    color: #e0e0e0 !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
    line-height: inherit !important;
    padding: 10px 15px;
}

/* ===== 3. 侧边栏 ===== */
#sidebar {
    border-right: none !important;
}

.dark #sidebar {
    border-right: none !important;
    background: rgba(27, 27, 27, 0.95) !important;
}

#sidebar .active > a,
#navbar .active > a,
#sidebar a.active,
#navbar a.active {
    background: #1a1a1a !important;
    color: white !important;
}

.dark #sidebar .active > a,
.dark #navbar .active > a {
    background: #333 !important;
    color: white !important;
}

#sidebar a:hover {
    color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.dark #sidebar a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== 4. 文章内容 ===== */
#article {
    line-height: 1.8 !important;
}

#article h1, #article h2, #article h3, #article h4, #article h5, #article h6 {
    position: relative !important;
    padding-left: 20px !important;
}

#article h1::before, #article h2::before, #article h3::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 70% !important;
    background: #1a1a1a !important;
    border-radius: 2px !important;
}

.dark #article h1::before, .dark #article h2::before, .dark #article h3::before {
    background: #e0e0e0 !important;
}

#article a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
}

.dark #article a {
    color: #e0e0e0 !important;
}

#article a:hover {
    color: #333 !important;
}

.dark #article a:hover {
    color: #fff !important;
}

/* ===== 5. 文章标题 ===== */
#article_title h1 {
    color: #1a1a1a !important;
}

.dark #article_title h1 {
    color: #ffffff !important;
}

/* ===== 6. 代码块 ===== */
#article code {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    color: #1a1a1a !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

.dark #article code {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

#article pre {
    background: #1e1e2e !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    padding: 20px !important;
}

#article pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #a8dadc !important;
}

/* ===== 7. 引用块 ===== */
blockquote {
    border-left: 4px solid #1a1a1a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.dark blockquote {
    border-left: 4px solid #e0e0e0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===== 8. 表格 ===== */
th {
    background: #1a1a1a !important;
    color: white !important;
    border: none !important;
}

.dark th {
    background: #333 !important;
}

#article table {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#article td {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

#article tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

.dark #article td {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
}

.dark #article tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===== 9. 目录导航 ===== */
#toc {
    background: rgba(0, 0, 0, 0.03) !important;
    border-left: 3px solid #1a1a1a !important;
    border-radius: 8px !important;
}

.dark #toc {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 3px solid #e0e0e0 !important;
}

#toc a {
    color: #555 !important;
}

#toc a:hover {
    color: #1a1a1a !important;
}

.dark #toc a {
    color: #a0a0a0 !important;
}

.dark #toc a:hover {
    color: #fff !important;
}

/* 去掉 toc 列表项的左边竖线 */
#toc_content > .toc-list > .toc-list-item {
    border-left: none !important;
}

.is-active-link::before {
    border-left: 2px solid #1a1a1a !important;
}

.dark .is-active-link::before {
    border-left: 2px solid #e0e0e0 !important;
}

/* ===== 10. 返回顶部按钮 ===== */
#to_top {
    display: none !important;
}

/* ===== 11. 滚动条 ===== */
::-webkit-scrollbar {
    width: 10px !important;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
}

.dark ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

::-webkit-scrollbar-thumb {
    background: #333 !important;
    border-radius: 5px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #1a1a1a !important;
}

.dark ::-webkit-scrollbar-thumb {
    background: #555 !important;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #e0e0e0 !important;
}

/* ===== 12. 搜索框 ===== */
#search {
    height: 25px !important;
}

#search .search-input,
.search-input {
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
}

.dark #search .search-input,
.dark .search-input {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

#search .search-input:focus,
.search-input:focus {
    border-color: #1a1a1a !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
    outline: none !important;
}

.dark #search .search-input:focus,
.dark .search-input:focus {
    border-color: #e0e0e0 !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

/* ===== 13. 页脚 ===== */
#doc_footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

#page_footer {
    background-color: transparent !important;
    border-top-color: transparent !important;
}

.dark #doc_footer {
    background-color: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #page_footer {
    background-color: transparent !important;
    border-top-color: transparent !important;
}

/* ===== 14. 其他元素 ===== */
/* 分割线 */
hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #1a1a1a, transparent) !important;
}

.dark hr {
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent) !important;
}

/* 列表标记 */
#article ul li::marker,
#article ol li::marker {
    color: #1a1a1a !important;
}

.dark #article ul li::marker,
.dark #article ol li::marker {
    color: #e0e0e0 !important;
}

/* 强调文字 */
#article strong, #article b {
    color: #1a1a1a !important;
}

.dark #article strong, .dark #article b {
    color: #ffffff !important;
}

/* 标签样式 */
#article_tags .tag,
.tag {
    background: #1a1a1a !important;
    color: white !important;
    border-radius: 15px !important;
    padding: 2px 10px !important;
}

.dark #article_tags .tag,
.dark .tag {
    background: #333 !important;
}

/* 日期信息 */
#article_info>div>span,
.article_date,
.article_author {
    color: #1a1a1a !important;
}

.dark #article_info>div>span,
.dark .article_date,
.dark .article_author {
    color: #e0e0e0 !important;
}

/* 选中文字 */
::selection {
    background: rgba(0, 0, 0, 0.2) !important;
    color: inherit !important;
}

.dark ::selection {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* 上标链接 */
sup a {
    border-left: 1px solid #1a1a1a !important;
    border-right: 1px solid #1a1a1a !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark sup a {
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 链接悬停 */
a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 侧边栏提示 */
#sidebar .tip {
    background: #1a1a1a !important;
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
}

.dark #sidebar .tip {
    background: #333 !important;
}

/* 侧边栏标签 */
#sidebar .tag {
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
}

.dark #sidebar .tag {
    border-color: #e0e0e0 !important;
    color: #e0e0e0 !important;
}

/* 博客列表链接 */
#blog_list > ul > li a,
#blog_list > ul > li a:visited {
    color: #1a1a1a !important;
}

.dark #blog_list > ul > li a,
.dark #blog_list > ul > li a:visited {
    color: #e0e0e0 !important;
}

/* ===== 15. 响应式 ===== */
@media screen and (max-width: 900px) {
    .hero-title h1 {
        font-size: 1.6em !important;
    }
    
    .stats-card {
        gap: 10px !important;
    }
    
    .stat-item {
        padding: 10px 15px !important;
        font-size: 0.85em !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .btn-primary, .btn-secondary {
        padding: 12px 28px !important;
        font-size: 1em !important;
    }
    
    #sidebar {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .dark #sidebar {
        background: rgba(27, 27, 27, 0.95) !important;
    }
}