.blog-cover-crop {
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    display: block;
}

.blog-content {
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.blog-cover-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

/* Code block styling */
pre[class*="language-"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 15px;
    line-height: 1.6;
    text-shadow: none !important;
}

[data-theme="dark"] pre[class*="language-"] {
    background: #1a1a1a !important;
    border-color: #35364a;
}

code[class*="language-"] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--text-main);
    text-shadow: none !important;
}

/* Reset all token backgrounds */
.token {
    background: none !important;
}

/* Inline code */
p code, li code {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--text-main);
}

[data-theme="dark"] p code, [data-theme="dark"] li code {
    background: #292a33;
    border-color: #35364a;
}

/* Prism token colors for light mode */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6a737d;
}

.token.punctuation {
    color: #586e75;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #d73a49;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #032f62;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #a626a4;
    background: none !important;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #005cc5;
}

.token.function,
.token.class-name {
    color: #6f42c1;
}

.token.regex,
.token.important,
.token.variable {
    color: #e36209;
}

/* Prism token colors for dark mode */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
    color: #6a9955;
}

[data-theme="dark"] .token.punctuation {
    color: #d4d4d4;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
    color: #f48771;
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
    color: #ce9178;
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
    color: #c9d1d9;
    background: none !important;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
    color: #569cd6;
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
    color: #dcdcaa;
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
    color: #9cdcfe;
}