/* ==========================================================================
   1. 全局基础样式
   ========================================================================== */

/* 主体过渡动画：确保在暗黑/明亮模式切换时，背景色和文字颜色平滑过渡 */
body { 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* ==========================================================================
   2. 文章目录 (TOC) 样式
   ========================================================================== */

/* 目录当前激活项高亮样式 (当滚动到对应标题时触发) */
/* 效果：文字变蓝 + 左侧蓝色边框 + 浅蓝色背景 */
.toc-link.active { 
    color: #3b82f6; 
    border-left: 2px solid #3b82f6; 
    background: rgba(59, 130, 246, 0.1); 
}

/* ==========================================================================
   3. 通用工具类
   ========================================================================== */

/* 隐藏滚动条但保留滚动功能 (用于侧边栏美化) */
/* 针对 Chrome/Safari/Webkit 内核 */
.no-scrollbar::-webkit-scrollbar { display: none; }
/* 针对 IE/Edge 和 Firefox */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   4. 代码块复制按钮样式
   ========================================================================== */

/* 复制按钮基础样式 (绝对定位在代码块右上角，默认透明隐藏) */
.copy-btn {
    position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.5rem;
    font-size: 0.75rem; color: #94a3b8; background-color: rgba(30, 41, 59, 0.8);
    border: 1px solid #334155; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s; 
    opacity: 0; 
}

/* 交互：当鼠标悬停在代码块(pre)上时，显示复制按钮 */
pre:hover .copy-btn { opacity: 1; }

/* 交互：当鼠标悬停在按钮上时，按钮变色高亮 */
.copy-btn:hover { color: #fff; background-color: #3b82f6; border-color: #3b82f6; }

/* ==========================================================================
   5. 图片灯箱 (Lightbox) 效果
   ========================================================================== */

/* 灯箱容器：全屏黑色遮罩，默认隐藏，居中显示图片 */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}

/* 激活状态：显示灯箱并允许交互 */
#lightbox.active { opacity: 1; pointer-events: all; }

/* 图片样式：默认稍微缩小，带阴影 */
#lightbox img {
    max-width: 95%; max-height: 95%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); border-radius: 4px;
    transform: scale(0.9); transition: transform 0.3s;
}

/* 图片激活状态：恢复原比例 (缩放动画) */
#lightbox.active img { transform: scale(1); }

/* 关闭按钮样式 (右上角 X) */
#lightbox-close {
    position: absolute; top: 20px; right: 30px;
    color: white; font-size: 40px; cursor: pointer; user-select: none;
}