/* ==================== Code Block Styles ==================== */
pre {
    position: relative;
    margin: 24px 0;
    padding: 20px;
    background: var(--code-bg);
    border-radius: 12px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
}

pre code {
    display: block;
    color: var(--code-text);
    background: none;
    padding: 0;
    margin: 0;
}

/* 代码复制按钮 */
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2D2D2D;
    border-radius: 12px 12px 0 0;
    margin-top: 24px;
}

.code-header + pre {
    margin-top: 0;
    border-radius: 0 0 12px 12px;
}

.code-lang {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}

.copy-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.copy-button svg {
    width: 14px;
    height: 14px;
}

.copy-button.copied {
    background: rgba(37, 99, 235, 0.3);
    color: #60A5FA;
}

/* 代码行号 */
.code-line {
    display: block;
    padding: 0 8px;
    margin: 0 -8px;
}

.code-line:hover {
    background: rgba(255, 255, 255, 0.05);
}

.code-line-number {
    display: inline-block;
    width: 40px;
    text-align: right;
    color: #555;
    margin-right: 16px;
    user-select: none;
}

/* ==================== Syntax Highlighting ==================== */
/* Base */
.language-comment, .comment { color: #6A9955; }
.language-string, .string { color: #CE9178; }
.language-keyword, .keyword { color: #569CD6; }
.language-number, .number { color: #B5CEA8; }
.language-function, .function { color: #DCDCAA; }
.language-class, .class { color: #4EC9B0; }
.language-variable, .variable { color: #9CDCFE; }
.language-operator, .operator { color: #D4D4D4; }

/* JavaScript / TypeScript */
.language-javascript, .language-typescript, 
.language-js, .language-ts {
    color: #D4D4D4;
}

.language-javascript .keyword, .language-typescript .keyword,
.language-js .keyword, .language-ts .keyword {
    color: #569CD6;
}

.language-javascript .string, .language-typescript .string,
.language-js .string, .language-ts .string {
    color: #CE9178;
}

.language-javascript .number, .language-typescript .number,
.language-js .number, .language-ts .number {
    color: #B5CEA8;
}

.language-javascript .function, .language-typescript .function,
.language-js .function, .language-ts .function {
    color: #DCDCAA;
}

.language-javascript .comment, .language-typescript .comment,
.language-js .comment, .language-ts .comment {
    color: #6A9955;
}

/* Python */
.language-python, .language-py {
    color: #D4D4D4;
}

.language-python .keyword, .language-py .keyword {
    color: #569CD6;
}

.language-python .string, .language-py .string {
    color: #CE9178;
}

.language-python .number, .language-py .number {
    color: #B5CEA8;
}

.language-python .decorator, .language-py .decorator {
    color: #DCDCAA;
}

.language-python .comment, .language-py .comment {
    color: #6A9955;
}

.language-python .builtin, .language-py .builtin {
    color: #4EC9B0;
}

/* HTML */
.language-html, .language-markup {
    color: #D4D4D4;
}

.language-html .tag, .language-markup .tag {
    color: #569CD6;
}

.language-html .attr-name, .language-markup .attr-name {
    color: #9CDCFE;
}

.language-html .attr-value, .language-markup .attr-value {
    color: #CE9178;
}

.language-html .comment, .language-markup .comment {
    color: #6A9955;
}

/* CSS */
.language-css {
    color: #D4D4D4;
}

.language-css .selector {
    color: #D7BA7D;
}

.language-css .property {
    color: #9CDCFE;
}

.language-css .value {
    color: #CE9178;
}

.language-css .comment {
    color: #6A9955;
}

/* JSON */
.language-json {
    color: #D4D4D4;
}

.language-json .key {
    color: #9CDCFE;
}

.language-json .string {
    color: #CE9178;
}

.language-json .number {
    color: #B5CEA8;
}

/* Bash / Shell */
.language-bash, .language-shell, .language-sh {
    color: #D4D4D4;
}

.language-bash .comment, .language-shell .comment, .language-sh .comment {
    color: #6A9955;
}

.language-bash .string, .language-shell .string, .language-sh .string {
    color: #CE9178;
}

.language-bash .variable, .language-shell .variable, .language-sh .variable {
    color: #9CDCFE;
}

.language-bash .keyword, .language-shell .keyword, .language-sh .keyword {
    color: #569CD6;
}

/* SQL */
.language-sql {
    color: #D4D4D4;
}

.language-sql .keyword {
    color: #569CD6;
}

.language-sql .string {
    color: #CE9178;
}

.language-sql .number {
    color: #B5CEA8;
}

.language-sql .function {
    color: #DCDCAA;
}

.language-sql .comment {
    color: #6A9955;
}

/* Go */
.language-go {
    color: #D4D4D4;
}

.language-go .keyword {
    color: #569CD6;
}

.language-go .string {
    color: #CE9178;
}

.language-go .number {
    color: #B5CEA8;
}

.language-go .function {
    color: #DCDCAA;
}

.language-go .comment {
    color: #6A9955;
}

/* Rust */
.language-rust {
    color: #D4D4D4;
}

.language-rust .keyword {
    color: #569CD6;
}

.language-rust .string {
    color: #CE9178;
}

.language-rust .number {
    color: #B5CEA8;
}

.language-rust .macro {
    color: #DCDCAA;
}

.language-rust .comment {
    color: #6A9955;
}

/* Java */
.language-java {
    color: #D4D4D4;
}

.language-java .keyword {
    color: #569CD6;
}

.language-java .string {
    color: #CE9178;
}

.language-java .number {
    color: #B5CEA8;
}

.language-java .function {
    color: #DCDCAA;
}

.language-java .comment {
    color: #6A9955;
}

/* C / C++ */
.language-c, .language-cpp {
    color: #D4D4D4;
}

.language-c .keyword, .language-cpp .keyword {
    color: #569CD6;
}

.language-c .string, .language-cpp .string {
    color: #CE9178;
}

.language-c .number, .language-cpp .number {
    color: #B5CEA8;
}

.language-c .function, .language-cpp .function {
    color: #DCDCAA;
}

.language-c .comment, .language-cpp .comment {
    color: #6A9955;
}

/* Inline code in dark mode */
[data-theme="dark"] pre code:not([class*="language-"]) {
    color: #E8E8E8;
}

[data-theme="dark"] .code-line-number {
    color: #555;
}

[data-theme="dark"] .code-header {
    background: #1E1E1E;
}