/* General styling */
main {
    max-width: 60rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Code card styling */
.code-card {
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.code-header {
    background: rgba(128, 128, 128, 0.05);
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.filename {
    font-size: 0.85rem;
    font-family: monospace;
    color: var(--page-text);
    font-weight: 600;
}

/* Code block styling */
pre[class*="language-"] {
    margin: 0 !important;
    padding: 1.25rem !important;
    background: transparent !important;
    font-size: 0.95rem !important;
    counter-reset: line-number;
}
.code-line {
    display: block;
    counter-increment: line-number;
}
.code-line::before {
    content: counter(line-number);
    display: inline-block;
    width: 2.5rem;
    margin-right: 1rem;
    padding-right: 0.75rem;
    text-align: right;
    border-right: 1px solid var(--page-text);
    color: var(--page-text);
    font-size: 0.85rem;
    flex-shrink: 0;
}
code[class*="language-"] {
    text-shadow: none !important;
    color: var(--page-text) !important;
}

/* Light mode */
.token.comment, .token.prolog, .token.doctype, .token.namespace { color: #3c4248 !important; }
.token.punctuation { color: #222222 !important; }
.token.keyword, .token.operator, .token.tag, .token.attr-name, .token.selector, .token.important { color: #8e121e !important; }
.token.string, .token.attr-value, .token.regex, .token.variable { color: #042347 !important; }
.token.function, .token.property, .token.atrule, .token.builtin { color: #4b0082 !important; }
.token.number, .token.boolean { color: #005000 !important; }
.token.class-name { color: #5d2d0b !important; }

/* Dark mode */
[data-theme="dark"] .token.comment, [data-theme="dark"] .token.prolog, [data-theme="dark"] .token.doctype, [data-theme="dark"] .token.namespace { color: #d1d5db !important; }
[data-theme="dark"] .token.punctuation { color: #ffffff !important; }
[data-theme="dark"] .token.keyword, [data-theme="dark"] .token.operator, [data-theme="dark"] .token.tag, [data-theme="dark"] .token.attr-name, [data-theme="dark"] .token.selector, [data-theme="dark"] .token.important { color: #ffbcbc !important; }
[data-theme="dark"] .token.string, [data-theme="dark"] .token.attr-value, [data-theme="dark"] .token.regex, [data-theme="dark"] .token.variable { color: #cce6ff !important; }
[data-theme="dark"] .token.function, [data-theme="dark"] .token.property, [data-theme="dark"] .token.atrule, [data-theme="dark"] .token.builtin { color: #e1d5ff !important; }
[data-theme="dark"] .token.number, [data-theme="dark"] .token.boolean { color: #b2ffcc !important; }
[data-theme="dark"] .token.class-name { color: #ffe0b2 !important; }