/* Material Design CSS */

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Material Design Color Palette - Light Theme */
    --md-primary: #1976d2;
    --md-primary-light: #42a5f5;
    --md-primary-dark: #1565c0;
    --md-secondary: #9c27b0;
    --md-surface: #ffffff;
    --md-background: #fafafa;
    --md-error: #d32f2f;
    --md-success: #388e3c;
    --md-on-primary: #ffffff;
    --md-on-surface: rgba(0, 0, 0, 0.87);
    --md-on-surface-medium: rgba(0, 0, 0, 0.6);
    --md-on-surface-disabled: rgba(0, 0, 0, 0.38);
    --md-divider: rgba(0, 0, 0, 0.12);
    --md-input-hover: rgba(0, 0, 0, 0.04);
    --md-input-focus: rgba(0, 0, 0, 0.06);

    /* Elevation shadows */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
    --md-elevation-4: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);

    /* Spacing (8px grid) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Border radius */
    --md-radius-sm: 4px;
    --md-radius-md: 8px;
    --md-radius-lg: 16px;
}

/* Dark Theme */
[data-theme="dark"] {
    --md-primary: #90caf9;
    --md-primary-light: #e3f2fd;
    --md-primary-dark: #42a5f5;
    --md-secondary: #ce93d8;
    --md-surface: #1e1e1e;
    --md-background: #121212;
    --md-error: #ef5350;
    --md-success: #66bb6a;
    --md-on-primary: #000000;
    --md-on-surface: rgba(255, 255, 255, 0.87);
    --md-on-surface-medium: rgba(255, 255, 255, 0.6);
    --md-on-surface-disabled: rgba(255, 255, 255, 0.38);
    --md-divider: rgba(255, 255, 255, 0.12);
    --md-input-hover: rgba(255, 255, 255, 0.04);
    --md-input-focus: rgba(255, 255, 255, 0.08);

    /* Dark theme elevations */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.24);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.30), 0 3px 6px rgba(0,0,0,0.20);
    --md-elevation-4: 0 15px 25px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.10);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-primary: #90caf9;
        --md-primary-light: #e3f2fd;
        --md-primary-dark: #42a5f5;
        --md-secondary: #ce93d8;
        --md-surface: #1e1e1e;
        --md-background: #121212;
        --md-error: #ef5350;
        --md-success: #66bb6a;
        --md-on-primary: #000000;
        --md-on-surface: rgba(255, 255, 255, 0.87);
        --md-on-surface-medium: rgba(255, 255, 255, 0.6);
        --md-on-surface-disabled: rgba(255, 255, 255, 0.38);
        --md-divider: rgba(255, 255, 255, 0.12);
        --md-input-hover: rgba(255, 255, 255, 0.04);
        --md-input-focus: rgba(255, 255, 255, 0.08);

        --md-elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
        --md-elevation-2: 0 3px 6px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.24);
        --md-elevation-3: 0 10px 20px rgba(0,0,0,0.30), 0 3px 6px rgba(0,0,0,0.20);
        --md-elevation-4: 0 15px 25px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.10);
    }
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--md-on-surface);
    background: var(--md-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme change */
article,
.comment,
form,
nav,
pre,
code {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Layout */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

/* App Bar / Navigation */
nav {
    background: var(--md-surface);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--md-elevation-2);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: var(--md-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--md-radius-sm);
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

nav a:hover {
    background: var(--md-input-hover);
}

nav a:active {
    background: var(--md-input-focus);
}

/* Theme Toggle Button */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    color: var(--md-on-surface-medium);
}

.theme-toggle:hover {
    background: var(--md-input-hover);
}

.theme-toggle:active {
    background: var(--md-input-focus);
}

.theme-toggle .material-icons {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .material-icons {
    transform: rotate(15deg);
}

/* Hide icons based on theme */
.theme-toggle .icon-dark {
    display: block;
}

.theme-toggle .icon-light {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-dark {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-light {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-dark {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .icon-light {
        display: block;
    }
}

/* Typography - Material Design Type Scale */
h1 {
    font-size: 2.125rem;
    font-weight: 400;
    letter-spacing: 0.00735em;
    color: var(--md-on-surface);
    margin-bottom: var(--spacing-lg);
    line-height: 1.235;
}

h2 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0em;
    margin-bottom: var(--spacing-sm);
    line-height: 1.334;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0075em;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    color: var(--md-on-surface);
    line-height: 1.6;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--md-on-surface-medium);
    line-height: 1.75;
}

/* Cards (Articles) */
article {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--md-elevation-1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

article:hover {
    box-shadow: var(--md-elevation-3);
    transform: translateY(-2px);
}

article h2 a {
    color: var(--md-on-surface);
    text-decoration: none;
    transition: color 0.2s ease;
}

article h2 a:hover {
    color: var(--md-primary);
}

article p {
    margin: var(--spacing-sm) 0;
    font-size: 0.9375rem;
}

article small {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--md-on-surface-disabled);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-top: var(--spacing-sm);
}

/* Post meta (published date + views) */
.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
}

.post-meta small {
    color: var(--md-on-surface-disabled);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Filters */
.filters {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--md-elevation-1);
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--md-on-surface-medium);
    margin-right: var(--spacing-sm);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--md-background);
    color: var(--md-on-surface-medium);
    border-radius: 16px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid var(--md-divider);
    cursor: pointer;
    font-family: inherit;
}

.filter-chip:hover {
    background: var(--md-input-hover);
    color: var(--md-on-surface);
}

/* Include state (green) */
.filter-chip.include {
    background: var(--md-success);
    color: #ffffff;
    border-color: var(--md-success);
    box-shadow: var(--md-elevation-1);
}

.filter-chip.include .filter-icon::before {
    content: "+";
    font-weight: bold;
}

/* Exclude state (red) */
.filter-chip.exclude {
    background: var(--md-error);
    color: #ffffff;
    border-color: var(--md-error);
    box-shadow: var(--md-elevation-1);
}

.filter-chip.exclude .filter-icon::before {
    content: "−";
    font-weight: bold;
}

/* Reset button */
.filter-reset {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    color: var(--md-primary);
    border: none;
    border-radius: var(--md-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: var(--spacing-sm);
    font-family: inherit;
}

.filter-reset:hover {
    background: var(--md-input-hover);
}

@media (max-width: 480px) {
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-label {
        margin-bottom: var(--spacing-xs);
    }
}

/* Post Detail */
.post-content {
    font-size: 1rem;
    line-height: 1.75;
}

.post-content p {
    color: var(--md-on-surface);
    margin-bottom: var(--spacing-lg);
}

/* Comments */
.comment {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--md-elevation-1);
    border-left: 4px solid var(--md-primary);
}

.comment b {
    color: var(--md-on-surface);
    font-weight: 500;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.comment hr {
    display: none;
}

/* Messages / Snackbar style */
.message {
    padding: var(--spacing-md);
    border-radius: var(--md-radius-sm);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.message.success {
    background: var(--md-success);
    color: #ffffff;
}

/* Forms - Material Design Filled Style */
form {
    background: var(--md-surface);
    padding: var(--spacing-lg);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
}

form p {
    margin-bottom: var(--spacing-md);
}

form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--md-on-surface-medium);
    margin-bottom: var(--spacing-sm);
}

input[type="text"],
textarea {
    width: 100%;
    padding: var(--spacing-md);
    padding-top: var(--spacing-lg);
    background: var(--md-background);
    border: none;
    border-bottom: 2px solid var(--md-divider);
    border-radius: var(--md-radius-sm) var(--md-radius-sm) 0 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--md-on-surface);
    transition: border-color 0.2s ease, background 0.2s ease;
}

input[type="text"]:hover,
textarea:hover {
    background: var(--md-input-hover);
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-bottom-color: var(--md-primary);
    background: var(--md-input-focus);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* Buttons - Material Design Contained */
button[type="submit"] {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: var(--md-radius-sm);
    cursor: pointer;
    box-shadow: var(--md-elevation-1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease;
    position: relative;
    overflow: hidden;
}

button[type="submit"]:hover {
    background: var(--md-primary-dark);
    box-shadow: var(--md-elevation-2);
}

button[type="submit"]:active {
    box-shadow: var(--md-elevation-3);
}

/* Ripple effect */
button[type="submit"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

button[type="submit"]:active::after {
    width: 200px;
    height: 200px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
}

.pagination a {
    color: var(--md-primary);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--md-radius-sm);
    font-weight: 500;
    transition: background 0.2s ease;
}

.pagination a:hover {
    background: rgba(25, 118, 210, 0.08);
}

.pagination a:active {
    background: rgba(25, 118, 210, 0.16);
}

.pagination .current {
    color: var(--md-on-surface-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 500;
}

/* Empty State */
.container > p:only-child,
.container > h1 + p:last-child {
    text-align: center;
    padding: var(--spacing-xxl);
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    color: var(--md-on-surface-medium);
    box-shadow: var(--md-elevation-1);
}

/* Dividers */
hr {
    border: none;
    border-top: 1px solid var(--md-divider);
    margin: var(--spacing-lg) 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--md-radius-sm);
}

/* Content overflow */
.post-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

pre, code {
    overflow-x: auto;
    max-width: 100%;
    background: var(--md-background);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--md-radius-sm);
    font-size: 0.875rem;
}

pre {
    padding: var(--spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .container {
        padding: var(--spacing-md);
    }

    nav {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    nav a {
        font-size: 1.125rem;
        padding: var(--spacing-sm);
    }

    article {
        padding: var(--spacing-md);
    }

    form {
        padding: var(--spacing-md);
    }

    button[type="submit"] {
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.125rem;
    }

    h3 {
        font-size: 1rem;
    }

    .container {
        padding: var(--spacing-sm);
    }

    nav {
        padding: var(--spacing-sm);
    }

    nav a {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    article {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        border-radius: var(--md-radius-sm);
    }

    .comment {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .pagination {
        flex-wrap: wrap;
    }

    input[type="text"],
    textarea {
        padding: var(--spacing-md);
        font-size: 16px;
    }
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Selection */
::selection {
    background: rgba(25, 118, 210, 0.2);
}

/* =====================================================
   MARKDOWN STYLES
   ===================================================== */

/* Post content markdown styles */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: var(--md-on-surface);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.75rem; border-bottom: 1px solid var(--md-divider); padding-bottom: var(--spacing-sm); }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1rem; color: var(--md-on-surface-medium); }

.post-content p {
    color: var(--md-on-surface);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

/* Links in content */
.post-content a {
    color: var(--md-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.post-content a:hover {
    border-bottom-color: var(--md-primary);
}

/* Lists */
.post-content ul,
.post-content ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
    color: var(--md-on-surface);
}

.post-content li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
    margin: var(--spacing-sm) 0;
}

/* Blockquotes */
.post-content blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--md-primary);
    background: var(--md-background);
    border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
    color: var(--md-on-surface-medium);
    font-style: italic;
}

.post-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Inline code */
.post-content code {
    background: var(--md-background);
    padding: 2px 6px;
    border-radius: var(--md-radius-sm);
    font-family: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875em;
    color: var(--md-secondary);
}

/* Code blocks */
.post-content pre {
    background: var(--md-background);
    padding: var(--spacing-md);
    border-radius: var(--md-radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--md-divider);
}

.post-content pre code {
    background: transparent;
    padding: 0;
    color: var(--md-on-surface);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Syntax highlighting (Pygments) */
.highlight {
    background: var(--md-background);
    padding: var(--spacing-md);
    border-radius: var(--md-radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--md-divider);
}

.highlight pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Pygments color scheme - Light */
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #6a737d; font-style: italic } /* Comment */
.highlight .k { color: #d73a49; font-weight: bold } /* Keyword */
.highlight .o { color: #d73a49 } /* Operator */
.highlight .cm { color: #6a737d; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #d73a49 } /* Comment.Preproc */
.highlight .c1 { color: #6a737d; font-style: italic } /* Comment.Single */
.highlight .cs { color: #6a737d; font-style: italic } /* Comment.Special */
.highlight .gd { color: #b31d28; background-color: #ffeef0 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #b31d28 } /* Generic.Error */
.highlight .gh { color: #005cc5; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */
.highlight .go { color: #6a737d } /* Generic.Output */
.highlight .gp { color: #005cc5; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #6f42c1; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #b31d28 } /* Generic.Traceback */
.highlight .kc { color: #005cc5 } /* Keyword.Constant */
.highlight .kd { color: #d73a49 } /* Keyword.Declaration */
.highlight .kn { color: #d73a49 } /* Keyword.Namespace */
.highlight .kp { color: #d73a49 } /* Keyword.Pseudo */
.highlight .kr { color: #d73a49 } /* Keyword.Reserved */
.highlight .kt { color: #6f42c1 } /* Keyword.Type */
.highlight .m { color: #005cc5 } /* Literal.Number */
.highlight .s { color: #032f62 } /* Literal.String */
.highlight .na { color: #6f42c1 } /* Name.Attribute */
.highlight .nb { color: #005cc5 } /* Name.Builtin */
.highlight .nc { color: #6f42c1; font-weight: bold } /* Name.Class */
.highlight .no { color: #005cc5 } /* Name.Constant */
.highlight .nd { color: #6f42c1 } /* Name.Decorator */
.highlight .ni { color: #005cc5 } /* Name.Entity */
.highlight .ne { color: #6f42c1; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #6f42c1 } /* Name.Function */
.highlight .nl { color: #005cc5 } /* Name.Label */
.highlight .nn { color: #6f42c1 } /* Name.Namespace */
.highlight .nt { color: #22863a } /* Name.Tag */
.highlight .nv { color: #e36209 } /* Name.Variable */
.highlight .ow { color: #d73a49; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #005cc5 } /* Literal.Number.Float */
.highlight .mh { color: #005cc5 } /* Literal.Number.Hex */
.highlight .mi { color: #005cc5 } /* Literal.Number.Integer */
.highlight .mo { color: #005cc5 } /* Literal.Number.Oct */
.highlight .sb { color: #032f62 } /* Literal.String.Backtick */
.highlight .sc { color: #032f62 } /* Literal.String.Char */
.highlight .sd { color: #032f62 } /* Literal.String.Doc */
.highlight .s2 { color: #032f62 } /* Literal.String.Double */
.highlight .se { color: #032f62 } /* Literal.String.Escape */
.highlight .sh { color: #032f62 } /* Literal.String.Heredoc */
.highlight .si { color: #005cc5 } /* Literal.String.Interpol */
.highlight .sx { color: #032f62 } /* Literal.String.Other */
.highlight .sr { color: #032f62 } /* Literal.String.Regex */
.highlight .s1 { color: #032f62 } /* Literal.String.Single */
.highlight .ss { color: #005cc5 } /* Literal.String.Symbol */
.highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #e36209 } /* Name.Variable.Class */
.highlight .vg { color: #e36209 } /* Name.Variable.Global */
.highlight .vi { color: #e36209 } /* Name.Variable.Instance */
.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */
.highlight .fm { color: #6f42c1 } /* Name.Function.Magic */

/* Dark theme syntax highlighting */
[data-theme="dark"] .highlight .c { color: #8b949e }
[data-theme="dark"] .highlight .k { color: #ff7b72 }
[data-theme="dark"] .highlight .o { color: #ff7b72 }
[data-theme="dark"] .highlight .cm { color: #8b949e }
[data-theme="dark"] .highlight .cp { color: #ff7b72 }
[data-theme="dark"] .highlight .c1 { color: #8b949e }
[data-theme="dark"] .highlight .cs { color: #8b949e }
[data-theme="dark"] .highlight .gd { color: #ffa198; background-color: #490202 }
[data-theme="dark"] .highlight .gi { color: #7ee787; background-color: #04260f }
[data-theme="dark"] .highlight .gh { color: #79c0ff }
[data-theme="dark"] .highlight .gp { color: #79c0ff }
[data-theme="dark"] .highlight .gu { color: #d2a8ff }
[data-theme="dark"] .highlight .kc { color: #79c0ff }
[data-theme="dark"] .highlight .kd { color: #ff7b72 }
[data-theme="dark"] .highlight .kn { color: #ff7b72 }
[data-theme="dark"] .highlight .kp { color: #ff7b72 }
[data-theme="dark"] .highlight .kr { color: #ff7b72 }
[data-theme="dark"] .highlight .kt { color: #d2a8ff }
[data-theme="dark"] .highlight .m { color: #79c0ff }
[data-theme="dark"] .highlight .s { color: #a5d6ff }
[data-theme="dark"] .highlight .na { color: #d2a8ff }
[data-theme="dark"] .highlight .nb { color: #79c0ff }
[data-theme="dark"] .highlight .nc { color: #d2a8ff }
[data-theme="dark"] .highlight .no { color: #79c0ff }
[data-theme="dark"] .highlight .nd { color: #d2a8ff }
[data-theme="dark"] .highlight .ne { color: #d2a8ff }
[data-theme="dark"] .highlight .nf { color: #d2a8ff }
[data-theme="dark"] .highlight .nl { color: #79c0ff }
[data-theme="dark"] .highlight .nn { color: #d2a8ff }
[data-theme="dark"] .highlight .nt { color: #7ee787 }
[data-theme="dark"] .highlight .nv { color: #ffa657 }
[data-theme="dark"] .highlight .ow { color: #ff7b72 }
[data-theme="dark"] .highlight .mf { color: #79c0ff }
[data-theme="dark"] .highlight .mh { color: #79c0ff }
[data-theme="dark"] .highlight .mi { color: #79c0ff }
[data-theme="dark"] .highlight .mo { color: #79c0ff }
[data-theme="dark"] .highlight .sb { color: #a5d6ff }
[data-theme="dark"] .highlight .sc { color: #a5d6ff }
[data-theme="dark"] .highlight .sd { color: #a5d6ff }
[data-theme="dark"] .highlight .s2 { color: #a5d6ff }
[data-theme="dark"] .highlight .se { color: #a5d6ff }
[data-theme="dark"] .highlight .sh { color: #a5d6ff }
[data-theme="dark"] .highlight .si { color: #79c0ff }
[data-theme="dark"] .highlight .sx { color: #a5d6ff }
[data-theme="dark"] .highlight .sr { color: #a5d6ff }
[data-theme="dark"] .highlight .s1 { color: #a5d6ff }
[data-theme="dark"] .highlight .ss { color: #79c0ff }
[data-theme="dark"] .highlight .bp { color: #79c0ff }
[data-theme="dark"] .highlight .vc { color: #ffa657 }
[data-theme="dark"] .highlight .vg { color: #ffa657 }
[data-theme="dark"] .highlight .vi { color: #ffa657 }
[data-theme="dark"] .highlight .il { color: #79c0ff }
[data-theme="dark"] .highlight .fm { color: #d2a8ff }

/* Tables */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
}

.post-content th,
.post-content td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--md-divider);
}

.post-content th {
    background: var(--md-background);
    font-weight: 500;
    color: var(--md-on-surface);
}

.post-content tr:last-child td {
    border-bottom: none;
}

.post-content tr:hover {
    background: var(--md-input-hover);
}

/* Horizontal rule */
.post-content hr {
    border: none;
    border-top: 2px solid var(--md-divider);
    margin: var(--spacing-xl) 0;
}

/* Images in content */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-2);
    margin: var(--spacing-lg) 0;
    display: block;
}

/* Strong and emphasis */
.post-content strong {
    font-weight: 600;
    color: var(--md-on-surface);
}

.post-content em {
    font-style: italic;
}

/* Strikethrough */
.post-content del {
    text-decoration: line-through;
    color: var(--md-on-surface-medium);
}

/* Keyboard input */
.post-content kbd {
    background: var(--md-background);
    border: 1px solid var(--md-divider);
    border-radius: var(--md-radius-sm);
    padding: 2px 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875em;
    box-shadow: 0 1px 0 var(--md-divider);
}