/* =========================================
   BlueTex Ultra - Gemini Compact Edition
   用于：七弦的知识库 (Refactored)
========================================= */

:root {
    --theme-color: #2196f3;
    --theme-color-light: rgba(33, 150, 243, 0.12);
    --h-color: #32325d;
    --text-main: #34495e; /* 同步 Typora 默认字体颜色 */
    --text-secondary: #5e6368;
    
    --sidebar-bg: rgba(255, 255, 255, 0.75); 
    --sidebar-border: rgba(255, 255, 255, 0.4);
    
    --card-bg: rgba(255, 255, 255, 0.75); 
    --card-border: rgba(255, 255, 255, 0.3);
    
    --code-bg: rgba(246, 248, 250, 0.7);
    --code-border: #d4e5ff66;
    --inline-code-color: #e96900;
    --inline-code-bg: rgba(248, 248, 248, 0.7);
    --table-header: rgba(240, 246, 255, 0.7);
    --table-border: #d3e4ff;

    --content-max-width: 860px; /* 同步 Typora 较窄的阅读视口 */
}

body.dark {
    --text-main: #e6edf3;
    --text-secondary: #9aa0a6;
    --h-color: #e6edf3; /* 暗黑模式下标题颜色变浅 */
    
    --sidebar-bg: rgba(13, 17, 23, 0.65);
    --sidebar-border: rgba(255, 255, 255, 0.15);
    
    --card-bg: rgba(22, 27, 34, 0.65); 
    --card-border: rgba(255, 255, 255, 0.08);
    
    --code-bg: rgba(13, 17, 23, 0.7);
    --code-border: #30363d;
    --table-header: rgba(31, 41, 55, 0.7);
    --table-border: #30363d;
}

/* =========================================
   1. 全局字体与渲染 (Typora 同步)
========================================= */
body {
    font-family: "Open Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif !important;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/background.jpg') center/cover fixed no-repeat !important; 
    color: var(--text-main) !important;
    line-height: 1.6 !important; 
    transition: color 0.4s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================
   2. 左侧边栏 (极简 Compact Edition)
========================================= */
.app-name {
    margin: 25px auto 20px !important;
    padding: 0 20px;
}

.app-name-link {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--theme-color), #8ab4f8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
    display: inline-block;
}

.sidebar-toggle {
    background: transparent !important;
    border: none !important;
}

body.close .sidebar-toggle {
    background: var(--sidebar-bg) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border-radius: 0 16px 0 0 !important;
}

.sidebar {
    background: var(--sidebar-bg) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    border: none !important; 
    box-shadow: 2px 0 20px rgba(0,0,0,0.03) !important;
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px) !important;
    height: calc(100% - 40px) !important;
    margin: 20px 0 20px 15px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-color) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--theme-color); border-radius: 10px; opacity: 0.3; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

@media screen and (max-width: 768px) {
    .sidebar {
        margin: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
        clip-path: none !important; 
    }
}

.sidebar-nav li { position: relative !important; margin: 1px 12px !important; }

.sidebar-nav a {
    position: relative !important; 
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px 6px 40px !important; 
    font-size: 0.95rem;
    font-weight: 600 !important;
    border-radius: 20px !important; 
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav li a:hover {
    background: var(--theme-color-light) !important; 
    color: var(--theme-color) !important;
    transform: translateX(6px) !important; 
}

.sidebar-nav li.active > a {
    background: var(--theme-color-light) !important; 
    color: var(--theme-color) !important; 
    font-weight: 700 !important;
    border-radius: 4px 20px 20px 4px !important; 
    transform: translateX(4px) !important; 
}

.sidebar-nav li.active > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background-color: var(--theme-color) !important;
    border-radius: 4px 0 0 4px !important;
    z-index: 2 !important; 
}

.sidebar-nav .folder-before {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-secondary) !important;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.sidebar-nav .folder-before.collapsible-opened { 
    transform: translateY(-50%) rotate(90deg) !important; 
}

/* =========================================
   3. 正文容器 (Docsify Glassmorphism)
========================================= */
.markdown-section {
    max-width: var(--content-max-width) !important;
    margin: 40px auto 40px auto !important; 
    padding: 45px 60px 100px !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important;
}

/* =========================================
   4. 正文排版与标题小蓝条动效 (Typora 深度移植)
========================================= */
.markdown-section p {
    line-height: 1.6;
    word-spacing: 0;
}

/* 标题基础样式与小蓝条占位 */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
    position: relative !important;
    margin: 1.5rem 0 1rem !important;
    padding-left: 18px !important; /* 给小蓝条预留空间 */
    font-weight: bold !important;
    color: var(--h-color) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 悬浮过渡曲线 */
}

/* 核心修复：悬浮右移缩进动效 */
.markdown-section h1:hover,
.markdown-section h2:hover,
.markdown-section h3:hover,
.markdown-section h4:hover,
.markdown-section h5:hover,
.markdown-section h6:hover {
    transform: translateX(10px) !important;
}

/* 核心修复：重绘完美居中的小蓝条 */
.markdown-section h1::before,
.markdown-section h2::before,
.markdown-section h3::before,
.markdown-section h4::before,
.markdown-section h5::before,
.markdown-section h6::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;          
    height: 70% !important;         
    background: var(--theme-color) !important; 
    border-radius: 3px !important;  
    z-index: 1 !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* 修复了此处缺失的右大括号，并增加暗黑模式下的标题光效 */
body.dark .markdown-section h1::before,
body.dark .markdown-section h2::before,
body.dark .markdown-section h3::before,
body.dark .markdown-section h4::before,
body.dark .markdown-section h5::before,
body.dark .markdown-section h6::before {
    background: #8ab4f8 !important; 
    box-shadow: 0 0 8px rgba(138, 180, 248, 0.4) !important;
}

/* 正文链接动效 */
.markdown-section a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    color: var(--theme-color);
    padding: 0 2px;
}
.markdown-section a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--theme-color);
    transition: width 0.3s, transform 0.3s;
    transform: translateX(-50%);
}
.markdown-section a:hover::before {
    width: 100%;
}

/* 引用块样式 */
.markdown-section blockquote {
    padding: 0.8em 1.4rem !important;
    margin: 1em 0 !important;
    font-weight: 400 !important;
    border-left: 4px solid var(--theme-color) !important;
    background-color: var(--theme-color-light) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: rgb(149 149 149 / 13%) 0 5px 10px !important;
}
body.dark .markdown-section blockquote {
    box-shadow: rgb(0 0 0 / 20%) 0 5px 10px !important;
}

/* 表格样式 */
.markdown-section table {
    width: 100%;
    border-collapse: collapse;
}
.markdown-section table tr:nth-child(2n),
.markdown-section thead {
    background-color: var(--table-header) !important;
}
.markdown-section table th,
.markdown-section table td {
    border: 1px solid var(--table-border) !important;
    padding: 6px 13px;
}

/* 粗细分割线 */
.markdown-section hr {
    border: none;
    border-top: 5px dashed var(--theme-color-light);
    margin: 22px 0;
}

/* 内联代码 */
.markdown-section code {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.92rem !important;
    color: var(--inline-code-color) !important;
    background-color: var(--inline-code-bg) !important;
    border: 1px solid rgba(233, 105, 0, 0.1) !important;
}