/* -- Theme Variables -- */
:root {
    --bg-color: #0d1117; --primary-color: #c9d1d9; --accent-color: #58a6ff;
    --border-color: #30363d; --content-bg: rgba(22, 27, 34, 0.7); --code-bg: #161b22;
    --font-family: 'Poppins', sans-serif;
}
/* -- Prism.js Dark Theme (customized) -- */
pre[class*="language-"] { background: var(--code-bg); color: var(--primary-color); padding: 1.5em; margin: 1.5em 0; overflow: auto; border-radius: 8px; border: 1px solid var(--border-color); position: relative; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8b949e; }
.token.punctuation { color: #8b949e; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #f97583; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #85e89d; }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #79c0ff; }
.token.atrule, .token.attr-value, .token.keyword { color: #d2a8ff; }
.token.function, .token.class-name { color: #f69d50; }
.token.regex, .token.important, .token.variable { color: #ffab70; }

/* -- Basic Reset & Body -- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-color); color: var(--primary-color); font-family: var(--font-family); }
#particles-js-post { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; }

/* -- Progress Bar -- */
.progress-bar-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; z-index: 100; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-color), #d2a8ff); width: 0%; transition: width 0.1s linear; }

/* -- Table of Contents -- */
.toc-container { position: fixed; top: 150px; left: 30px; width: 220px; z-index: 50; }
.toc-container h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: #8b949e; }
.toc-container ul { list-style: none; margin-top: 1rem; }
.toc-container li a { display: block; text-decoration: none; color: #8b949e; padding: 8px 0 8px 15px; border-left: 2px solid var(--border-color); transition: all .3s; }
.toc-container li a:hover { color: var(--primary-color); border-left-color: var(--primary-color); }
.toc-container li a.active { color: var(--accent-color); border-left-color: var(--accent-color); transform: translateX(5px); font-weight: 600; }
@media (max-width: 1200px) { .toc-container { display: none; } }

/* -- Post Layout -- */
.post-container { max-width: 800px; margin: 0 auto; padding: 5rem 2rem; }
.post-header { margin-bottom: 3rem; border-bottom: 1px solid var(--border-color); padding-bottom: 3rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: #8b949e; font-size: 0.9rem; margin-bottom: 1rem; }
.post-meta .tag { text-decoration: none; color: #8b949e; background: #30363d55; padding: 4px 10px; border-radius: 20px; transition: all .3s; }
.post-meta .tag:hover { color: #fff; background-color: var(--accent-color); }
.post-title { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.post-excerpt { font-size: 1.2rem; color: #b1bac4; }
.post-featured-image { width: 100%; border-radius: 12px; margin-top: 2rem; }

/* -- Post Content Typography -- */
.post-content { line-height: 1.8; font-size: 1.1rem; }
.post-content p { margin-bottom: 1.5em; }
.post-content h2 { font-size: 2rem; margin: 2em 0 1em 0; border-left: 4px solid var(--accent-color); padding-left: 1rem; }
.post-content blockquote { border-left: 4px solid #8b949e; margin: 1.5em 0; padding: 0.5em 1.5em; font-style: italic; color: #b1bac4; }
.post-content a { color: var(--accent-color); text-decoration: none; }
.post-content a:hover { text-decoration: underline; }
.code-copy-button { position: absolute; top: 15px; right: 15px; background: #30363d; color: #8b949e; border: 1px solid var(--border-color); border-radius: 6px; padding: 5px 10px; cursor: pointer; opacity: 0; transition: all .3s; }
pre:hover .code-copy-button { opacity: 1; }
.code-copy-button:hover { color: #fff; background-color: var(--accent-color); }

@media(max-width: 768px) {
    .post-title { font-size: 2rem; }
    .post-content h2 { font-size: 1.5rem; }
}