/* --- 基础样式 --- */
body, html, ul, li, p { margin: 0; padding: 0; }
body, html {
    font-size: 12px;
    font-family: 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
    background-color: #1e1e1e; /* 全局暗黑色背景 */
    color: #e0e0e0; /* 全局浅色文字 */
}
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a {
    text-decoration: none;
    color: #8ab4f8; /* 链接颜色 */
    transition: all .2s ease-in;
}
a:hover { color: #ffffff; } /* 链接 hover 颜色 */
* { box-sizing: border-box; }

/* --- 代码高亮样式 --- */
.language-css, .language-styl, .language-less, .language-scss, .language-sass { color: #c586c0; }
.language-css .punctuation, .language-styl .punctuation, .language-less .punctuation, .language-scss .punctuation, .language-sass .punctuation { color: #d4d4d4; }
.language-css .selector, .language-styl .selector, .language-less .selector, .language-scss .selector, .language-sass .selector { color: #9cdcfe; }
.language-css .property, .language-styl .property, .language-less .property, .language-scss .property, .language-sass .property { color: #c586c0; }
.language-css .atrule, .language-styl .atrule, .language-less .atrule, .language-scss .atrule, .language-sass .atrule { color: #c586c0; }

/* --- Markdown 内容样式 --- */
.markdown-body {
    padding: 70px 35px 30px 35px;
    word-wrap: break-word;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0; /* Markdown 文字颜色 */
}
@media screen and (max-width: 479px) {
    .markdown-body { padding-right: 15px; padding-left: 15px; }
}
.markdown-body .edit_btn { position: relative; right: 0; float: right; top: 48px; z-index: 2; }
.markdown-body .edit_btn .split {
    display: inline-block;
    height: 13px;
    vertical-align: middle;
    width: 1px;
    border-left: 1px solid #3a3a3a; /* 分割线颜色变深 */
    margin: -1px 0 0 0;
}
.markdown-body .edit_btn a {
    text-decoration: none;
    background: #2196f3;
    color: #fff;
    border-radius: 3px;
    padding: 2px 5px;
}
.markdown-body .edit_btn a:hover { color: #333; background: #e6e6e6; }

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { color: #ffffff; } /* 标题颜色更亮 */
.markdown-body h1 a, .markdown-body h2 a, .markdown-body h3 a, .markdown-body h4 a, .markdown-body h5 a, .markdown-body h6 a {
    float: left;
    margin-left: -20px;
    visibility: hidden;
}
.markdown-body h1:hover a, .markdown-body h2:hover a, .markdown-body h3:hover a, .markdown-body h4:hover a, .markdown-body h5:hover a, .markdown-body h6:hover a { visibility: visible; }
.markdown-body .icon.icon-link {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAABq0lEQVQoFYVSTUsCURR13sw4YGmb6AOiReDsXIfVImsXbdwEfiKTkESrgjZChNu0RUQYCCJ+LNzUppYm/YA2Lg1cRFgELbIGv0Y7F3pBIvbgcebee8559755gumf5fF4JgVBSPT7/U1gA5h0u90nwiidz+ebA7GEbYPoHDgP3AZGpVHCXq93BqIiSZIzm83WiOv1ehlykZFCRVH2QfpKp9Nv/ADEzzC0ijzBsVgsirIsrzscjhWQ6plM5onXgsGgCtEl8jd/ZgyHw9O6rl9hBucP2WCM7eXz+SSJut1uGfkPtL78KwyFQjOtVqsENyvIEbPZfN9sNndgUkMHlU6nc4daAzVXLperM3L2+/2z7Xab3GxUMAxDhmitUCjEQX4fFJGGBQKBKRDLcB4XRXEVbo8QLyG+xg1+AqmLF34SiWgx9J0ATnARJTHTIWIXBDHsLVVVF6k9qvFFv2MDbsd0Ek9qmmbFvA8wKPPcINLPbOCKx3gB7S1gvgpaPOW5YShBeIHCEd6kCd80UxSo48pjwwQ8J9nt9ni1WqV4F5ve5K3FYjlIpVKvnDQMvwFCU8QdZ5XDSAAAAABJRU5ErkJggg==");
    width: 23px;
    height: 23px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 4px 4px;
    filter: invert(1); /* 图标反色 */
}

.markdown-body pre {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    line-height: 1.3;
    word-break: break-all;
    word-wrap: break-word;
    color: #d4d4d4;
    border: 1px solid #3a3a3a; /* 边框颜色变深 */
    position: relative;
    background-color: #2d2d2d; /* 代码块背景色 */
    border-radius: 3px;
    font-size: .93em;
    -webkit-overflow-scrolling: touch;
}
.markdown-body pre code {
    padding: .7em;
    overflow: auto;
    max-height: 35em;
    background-color: transparent;
    color: inherit;
    line-height: 1.4;
    display: block;
    font-size: .93em;
    box-sizing: border-box;
    border-radius: 0;
    white-space: inherit;
    overflow-wrap: normal;
    word-wrap: normal !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.markdown-body code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background-color: #2d2d2d; /* 行内代码背景色 */
    border-radius: 3px;
    margin: 0 .4em;
    color: #d4d4d4;
}

.markdown-body .class-name { color: #4ec9b0; }
.markdown-body .comment, .markdown-body .quote { color: #6a9955; }
.markdown-body .keyword, .markdown-body .selector-tag, .markdown-body .subst { color: #569cd6; }
.markdown-body .key, .markdown-body .number, .markdown-body .literal, .markdown-body .variable, .markdown-body .template-variable, .markdown-body .tag .attr { color: #b5cea8; }
.markdown-body .string, .markdown-body .doctag { color: #ce9178; }
.markdown-body .title, .markdown-body .section, .markdown-body .selector-id { color: #4ec9b0; font-weight: bold; }
.markdown-body .subst { font-weight: normal; }
.markdown-body .type, .markdown-body .class .title { color: #4ec9b0; font-weight: bold; }
.markdown-body .function, .markdown-body .operator { color: #dcdcaa; }
.markdown-body .tag, .markdown-body .name, .markdown-body .attribute { color: #569cd6; font-weight: normal; }
.markdown-body .url { color: #9cdcfe; }
.markdown-body .boolean { color: #569cd6; }
.markdown-body .property { color: #9cdcfe; }
.markdown-body .null, .markdown-body .selector { color: #9cdcfe; }
.markdown-body .constant { color: #569cd6; }
.markdown-body .punctuation { color: #d4d4d4; }
.markdown-body .attr-name { color: #9cdcfe; }
.markdown-body .attr-value { color: #ce9178; }
.markdown-body .tag .punctuation { color: #d4d4d4; }
.markdown-body .tag .attr-name { color: #9cdcfe; }
.markdown-body .tag .attr-value { color: #ce9178; }
.markdown-body .tag .attr-value .punctuation, .markdown-body .tag .script-punctuation { color: #d4d4d4; }
.markdown-body .tag .script .keyword { color: #569cd6; }
.markdown-body .tag .language-javascript { color: #c586c0; }
.markdown-body .regexp, .markdown-body .regex, .markdown-body .link { color: #dcdcaa; }
.markdown-body .symbol, .markdown-body .bullet { color: #9cdcfe; }
.markdown-body .built_in, .markdown-body .builtin-name { color: #9cdcfe; }
.markdown-body .meta { color: #9cdcfe; font-weight: bold; }
.markdown-body .deletion { background: #8b0000; }
.markdown-body .addition { background: #008000; }
.markdown-body .emphasis { font-style: italic; }
.markdown-body .strong { font-weight: bold; }
.markdown-body .shebang, .markdown-body .important { color: #ff1717; }

.markdown-body ul, .markdown-body ol { padding-left: 2em; }
.markdown-body blockquote {
    margin: 0;
    padding: 0 1em;
    color: #b4b4b4;
    border-left: .25em solid #3a3a3a; /* 引用块边框颜色变深 */
    background-color: #252526; /* 引用块背景色 */
}
.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin-top: 0; margin-bottom: 16px; }

.markdown-body table {
    border-spacing: 0;
    border-collapse: collapse;
}
.markdown-body table td, .markdown-body table th {
    padding: 6px 13px;
    border: 1px solid #3a3a3a; /* 表格边框颜色变深 */
}
.markdown-body table tr {
    background-color: #2d2d2d; /* 表格行背景色 */
    border-top: 1px solid #3a3a3a;
}
.markdown-body table tr:nth-child(2n) {
    background-color: #252526; /* 表格隔行变色 */
}

a.github-corner { position: fixed; z-index: 9999; top: 0; right: 0; }
a.github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
a.github-corner svg {
    fill: #333; /* GitHub 角标颜色变深 */
    color: #fff;
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
    z-index: 99;
    width: 70px;
    height: 70px;
}

/* --- 头部与搜索框 --- */
.header { width: 517px; margin: 0 auto; padding: 0 10px; }
.header .logo { text-align: center; padding-top: 50px; padding-bottom: 50px; }
.header .box { position: relative; }
.header .search { min-height: 20px; position: relative; display: table; border-collapse: separate; width: 100%; }
.header .search li, .header .search ul { list-style: none; }
.header .search #result .ok { background: #2d2d2d; }
.header .search .search-list {
    position: absolute;
    display: none;
    z-index: 999;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* 阴影颜色变深 */
    border: 1px solid #3a3a3a;
    background: #2d2d2d; /* 下拉列表背景色 */
    min-width: 100px;
    top: 39px;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}
.header .search .search-list li { line-height: 23px; }
.header .search .search-list li span { padding: 0 8px; color: #888; }
.header .search .search-list a { display: block; padding: 2px 6px; color: #e0e0e0; }
.header .search .search-list a:hover { background-color: #3a3a3a; } /* hover 背景色 */
.header .search .search-list a .kw { color: #ff6b6b; font-style: inherit; font-weight: bold; } /* 关键词高亮色调整 */

.header .search .query, .header .search .enter-input { display: table-cell; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.header .search .query {
    resize: none;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    color: #e0e0e0;
    background-color: #2d2d2d; /* 输入框背景色 */
    background-image: none;
    border: 1px solid #3a3a3a; /* 输入框边框色 */
    border-radius: 5px 0 0 5px;
    -webkit-appearance: none;
}
.header .search .query:focus {
    z-index: 99;
    border-color: #007acc; /* focus 边框高亮色 */
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(0, 122, 204, 0.6);
}
.header .search .enter-input { width: 1%; white-space: nowrap; vertical-align: middle; }
.header .search .enter-input button {
    margin: 0;
    left: -1px;
    position: relative;
    z-index: 5;
    display: inline-block;
    padding: 9px 23px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    text-rendering: auto;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    background-color: #2d2d2d; /* 按钮背景色 */
    border: 1px solid #3a3a3a; /* 按钮边框色 */
    border-collapse: separate;
    border-radius: 0 5px 5px 0;
    border-color: #3a3a3a;
    color: #e0e0e0; /* 按钮文字颜色 */
}
.header .search .enter-input button:focus, .header .search .enter-input button:active:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.header .search .enter-input button:active {
    color: #fff;
    background-color: #007acc; /* 按钮点击背景色 */
    border-color: #007acc;
    background-image: none;
    box-shadow: inset 0 8px 32px -8px rgba(0,0,0,0.3);
}
.header .search .enter-input button:focus {
    color: #fff;
    background-color: #3a3a3a;
    border-color: #007acc;
    text-decoration: none;
}
.header .search .enter-input button:hover {
    color: #fff;
    background-color: #3a3a3a; /* 按钮 hover 背景色 */
    border-color: #007acc;
}

/* --- 页脚 --- */
.footer {
    text-align: center;
    padding-top: 31px;
    color: #888; /* 页脚文字颜色变浅 */
    font-size: 14px;
    font-weight: 300;
    border-top: 1px solid #3a3a3a; /* 页脚边框颜色变深 */
    padding-bottom: 50px;
}
.footer.footer_index { border-top: 0; }

/* --- 列表页头部 --- */
.header.header_list {
    width: auto;
    position: fixed;
    width: 100%;
    background: rgba(30, 30, 30, 0.8); /* 导航栏半透明背景 */
    backdrop-filter: saturate(180%) blur(10px); /* 模糊效果 */
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    z-index: 99;
}
.header_list { padding: 10px 10px 10px 13px; border-bottom: 1px solid #3a3a3a; }
.header_list .logo { float: left; padding-top: 3px; padding-bottom: 0; padding-right: 24px; text-align: left; }
.header_list .logo svg { height: 37px; width: 136px; filter: invert(1); } /* Logo 反色 */
.header_list .search { max-width: 517px; }
.header_list .footer { display: none; }

/* --- 搜索结果与热门列表 --- */
.search_list, .hotlist { padding: 79px 27px; }
.search_list a, .hotlist a { font-size: 16px; color: #8ab4f8; }
.search_list a strong, .hotlist a strong { font-weight: bold; color: #ffffff; }
.search_list a .kw { color: #ff6b6b; font-style: inherit; font-weight: bold; }
.search_list a:hover .kw { color: #ff8787; }
.search_list li, .hotlist li { padding: 10px 0; list-style-type: none; border-bottom: 1px solid #2d2d2d; } /* 列表项边框 */
.search_list li p, .hotlist li p { padding-top: 5px; color: #888; } /* 列表描述文字颜色 */

/* --- 响应式调整 --- */
@media screen and (max-width: 479px) {
    .header { width: inherit; }
    .header .search .enter-input button { padding: 9px 14px; }
    .header_list .logo svg { width: 96px; }
    .header_list .search .query { line-height: 31px; }
    .header_list .logo {
        float: inherit;
        padding-right: 10px;
        padding-top: 8px;
        padding-bottom: 14px;
        text-align: center;
    }
    .search_list, .hotlist { padding: 129px 15px; } /* 移动端内边距调整 */
    div.markdown-body { padding: 140px 15px 10px; }
    div.markdown-body .edit_btn + * { margin-top: 0 !important; }
    div.markdown-body .edit_btn { top: 9px; }
    div.markdown-body .edit_btn a { background: #3a3a3a; color: #b4b4b4; }
}

/* --- GitHub 图标动画 --- */
@-moz-keyframes octocat-wave { 0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%, 80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } }
@-webkit-keyframes octocat-wave { 0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%, 80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } }
@-o-keyframes octocat-wave { 0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%, 80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } }
@keyframes octocat-wave { 0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40%, 80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } }