/* --- 修复根元素高度 --- */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

/* ================= 1. Halo 赛车加载动画 ================= */
#halo-racer-loader { 
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;     
    width: 100% !important; height: 100% !important; z-index: 999999999 !important; 
    background: #ffffff; display: flex !important; justify-content: center !important; align-items: center !important; 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
html.dark #halo-racer-loader { background: #1a1a1a; }
#halo-racer-loader.hidden { opacity: 0; visibility: hidden; }

.racer-container { position: relative; width: 80px; height: 20px; }
.bar { position: absolute; top: 0; left: 0; width: 12px; height: 20px; border-radius: 0; }
.p1 { background: rgba(255,71,87,0.2); z-index:1; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0.15s; }
.p2 { background: rgba(255,71,87,0.5); z-index:2; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0.08s; }
.red { background: #ff4757; z-index:10; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0s; }
@keyframes run { 0%{left:0} 30%{left:68px} 50%{left:68px} 80%{left:0} 100%{left:0} }


/* ================= 2. 代码块修复 (滚动条分离) ================= */

/* 外层容器：负责圆角、背景、折叠，但不负责滚动！ */
.highlight { 
    background: #f6f8fa!important; 
    border-radius: 6px !important; 
    margin: 1.5rem 0; 
    padding: 0; 
    position: relative; /* 按钮定位基准 */
    box-shadow: none !important; 
    border: none !important; 
    transition: height 0.3s ease; 
    color: #24292e;
    
    /* 关键：外层不滚动，只隐藏溢出（为了圆角和折叠） */
    overflow: hidden !important; 
}
html.dark .highlight { background: #282a36!important; color: #f8f8f2 !important; }

/* 折叠状态 */
.highlight.folded { height: 60px !important; }
.highlight.folded::after { content:""; position:absolute; bottom:0; width:100%; height:30px; background:linear-gradient(to bottom, transparent, #f6f8fa); pointer-events: none; z-index: 5; }
html.dark .highlight.folded::after { background:linear-gradient(to bottom, transparent, #282a36); }

/* --- 内部滚动控制 --- */

/* 1. 表格模式 (lineNos=true) 的滚动控制 */
.highlight table { 
    display: block !important;       /* 变成块级才能滚动 */
    width: 100% !important; 
    overflow-x: auto !important;     /* 横向滚动条在这里 */
    margin: 0 !important; 
    border-spacing: 0;
    border-collapse: collapse;
}

/* 2. 纯代码模式 (lineNos=false) 的滚动控制 */
.highlight pre {
    overflow-x: auto !important;     /* 横向滚动条在这里 */
    white-space: pre !important;     /* 强制不换行 */
    word-wrap: normal !important;
    display: block;
    padding: 10px 15px !important;
    margin: 0 !important;
    width: 100%;
}

/* 表格内单元格样式 */
.highlight td:first-child { 
    width: 40px !important; 
    background: transparent !important; 
    padding: 10px 0 !important; 
    user-select: none; 
    vertical-align: top;
    position: sticky; /* (可选) 让行号在滚动时固定 */
    left: 0;
    z-index: 2;
}
.highlight td:last-child { 
    padding: 10px 15px !important; 
    width: 100%; 
    vertical-align: top; 
}

.highlight .lnt { color: #999!important; font-size: 12px; margin-right: 8px; text-align: right; display: block; }

/* 按钮组 (固定在右上角) */
.code-tools { 
    position: absolute; 
    top: 6px; 
    right: 6px; 
    display: flex; 
    opacity: 0; 
    transition: opacity 0.2s; 
    z-index: 20; /* 层级最高，要在滚动条上面 */
}
.highlight:hover .code-tools { opacity: 1; }

.c-btn { width: 30px; height: 30px; background: transparent; border:none; cursor:pointer; color:#999; display:flex; justify-content:center; align-items:center; transition: all 0.2s ease; }
.c-btn:hover { background: transparent; color: #ff4757; }
html.dark .c-btn { color: #aaa; }
html.dark .c-btn:hover { background: transparent; color: #ff79c6; }

/* ================= 3. 完整语法颜色集 (Light/Dark) ================= */

/* --- 浅色模式 (Light - 默认) --- */
.chroma .k, .chroma .kd, .chroma .kt { color: #0088ce; font-weight: bold; } /* 关键字 (blue) */
.chroma .s, .chroma .s1, .chroma .s2 { color: #a31515; } /* 字符串 (red) */
.chroma .c, .chroma .c1, .chroma .cm { color: #888888; font-style: italic; } /* 注释 (grey) */
.chroma .nf { color: #660066; font-weight: bold; } /* 函数名 */
.chroma .mi, .chroma .mb, .chroma .mf { color: #660066; } /* 数字/浮点数 */
.chroma .nc { color: #008080; } /* 类名 */
.chroma .na, .chroma .nt { color: #000080; } /* 标签/属性 */
.chroma .nb { color: #0086b3; } /* 内置对象/函数 */


/* --- 深色模式适配 (Dracula/Neon Mix) --- */
html.dark .chroma .k, html.dark .chroma .kd, html.dark .chroma .kt { color: #ff79c6 !important; } /* 关键字/类型: 粉色 */
html.dark .chroma .s { color: #f1fa8c !important; } /* 字符串: 黄色 */
html.dark .chroma .c { color: #6272a4 !important; } /* 注释: 蓝灰 */

html.dark .chroma .nf { color: #50fa7b !important; font-weight: bold; } /* 函数名: 绿色 */
html.dark .chroma .mi, html.dark .chroma .mf, html.dark .chroma .mb { color: #bd93f9 !important; } /* 数字: 紫色 */
html.dark .chroma .na { color: #50fa7b !important; } /* 属性名: 绿色 */
html.dark .chroma .nt { color: #ff79c6 !important; } /* 标签名: 粉色 */
html.dark .chroma .nb { color: #8be9fd !important; } /* 内置对象: 浅蓝 */

/* ========================================================================
   3. iOS/Safari 兼容性急救补丁 (修复菜单变垂直圆点问题)
   ======================================================================== */

/* 强制去掉列表前面的圆点 */
nav ul, .menu, .navbar ul {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* 强制菜单横向排列 (Flex布局) */
nav ul, .menu {
    display: flex !important;
    flex-direction: row !important; /* 强制横向 */
    align-items: center !important; /* 垂直居中 */
    flex-wrap: wrap !important;     /* 小屏幕允许换行，防止撑爆 */
    gap: 15px !important;           /* 按钮之间的间距 */
}

/* 强制菜单项显示模式 */
nav li, .menu-item {
    display: inline-flex !important;
    align-items: center !important;
}

/* 修复图标和文字的垂直对齐 */
nav a, .menu a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

/* 针对 iOS Safari 的滚动优化 (代码块) */
.highlight pre {
    -webkit-overflow-scrolling: touch !important; /* 让代码块滚动顺滑 */
}