/*
 * 代码块样式
 *
 * 这些样式原先放在全局的 style.css 中，会污染文档阅读页
 * （documents.html + documents.css）的 <code>/<pre>，造成边框、
 * 字距、悬停发光以及 pre::before 圆点装饰等冲突。
 *
 * 因此拆分为独立样式表，只在真正需要代码块外观的页面引入，
 * 目前为 contact.html。
 */

/* 行内代码 */
code {
    font-family: 'Fira Code', 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 0.9em;
    background: #111;
    color: #e0e0e0;
    padding: 0.2em 0.5em;
    border: 1px solid #222;
    border-radius: 3px;
    letter-spacing: -0.5px;
    position: relative;
    transition: 0.3s;
    word-break: break-word;
}

/* 悬停效果 */
code:hover {
    border-color: #444;
    background: #151515;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}

/* 多行代码块 */
pre {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    overflow-x: auto;
    position: relative;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

pre:hover {
    border-color: #444;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.03);
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #ccc;
    letter-spacing: 0;
    word-break: normal;
    white-space: pre;
}

/* 代码块左上角装饰 */
pre::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    box-shadow: 18px 0 0 #333, 36px 0 0 #333;
}

pre {
    padding-top: 2.5rem;
}

/* 滚动条 */
pre::-webkit-scrollbar {
    height: 6px;
    background: #0a0a0a;
}

pre::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #555;
}