.blog-header{padding:120px 40px 40px;max-width:800px;margin:0 auto}
.blog-header h1{font-size:2.2rem;font-weight:700;letter-spacing:-0.5px;margin-bottom:12px}
.blog-header p{color:var(--text-secondary);font-size:1.1rem;line-height:1.6}
.blog-list{max-width:800px;margin:0 auto;padding:24px 40px 80px;display:flex;flex-direction:column;gap:24px}
.blog-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;transition:border-color 0.2s,box-shadow 0.2s;text-decoration:none;display:block}
.blog-card:hover{border-color:var(--accent);box-shadow:0 2px 12px var(--accent-glow)}
.blog-card h2{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:8px;letter-spacing:-0.3px}
.blog-card p{color:var(--text-secondary);font-size:0.95rem;line-height:1.6;margin-bottom:12px}
.blog-card .blog-card-footer{display:flex;justify-content:space-between;align-items:center}
.blog-card .blog-date{color:var(--text-secondary);font-size:0.85rem}
.blog-card .blog-read-more{color:var(--accent);font-size:0.9rem;font-weight:500}
.blog-card-image{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:16px}
.blog-article{max-width:800px;margin:0 auto;padding:120px 40px 80px}
.blog-back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:0.9rem;font-weight:500;margin-bottom:32px}
.blog-back:hover{color:var(--accent-hover)}
.blog-article h1{font-size:2rem;font-weight:700;letter-spacing:-0.5px;margin-bottom:16px;line-height:1.3}
.blog-article-meta{color:var(--text-secondary);font-size:0.9rem;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.blog-hero-image{width:100%;border-radius:12px;margin-bottom:40px;box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}
.blog-content img{width:100%;border-radius:10px;margin:24px 0;box-shadow:0 2px 16px rgba(0, 0, 0, 0.1)}
.blog-content h2{font-size:1.5rem;font-weight:600;margin:40px 0 16px;letter-spacing:-0.3px}
.blog-content h3{font-size:1.2rem;font-weight:600;margin:32px 0 12px}
.blog-content p{margin-bottom:16px;line-height:1.7;color:var(--text)}
.blog-content ol,.blog-content ul{margin:0 0 16px 24px;line-height:1.7}
.blog-content li{margin-bottom:6px}
.blog-content code{background:var(--bg-card);padding:2px 6px;border-radius:4px;font-size:0.9em;font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
.blog-content pre{background:#1e1e2e;color:#cdd6f4;padding:20px 24px;border-radius:8px;overflow-x:auto;margin-bottom:20px;font-size:0.88rem;line-height:1.6}
.blog-content pre code{background:none;padding:0;border-radius:0;color:inherit}
.blog-content table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:0.9rem}
.blog-content td,.blog-content th{padding:10px 14px;border:1px solid var(--border);text-align:left}
.blog-content th{background:var(--bg-elevated);font-weight:600}
.blog-content blockquote{border-left:3px solid var(--accent);padding:12px 20px;margin:0 0 16px;background:var(--accent-glow);border-radius:0 8px 8px 0}
.blog-content strong{font-weight:600}
.blog-content hr{border:none;border-top:1px solid var(--border);margin:40px 0}
@media (max-width: 768px){
.blog-article,.blog-header,.blog-list{padding-left:20px;padding-right:20px}
.blog-header h1{font-size:1.7rem}
.blog-article h1{font-size:1.5rem}
.blog-content h2{font-size:1.25rem}
.blog-content pre{padding:14px 16px;font-size:0.82rem}
.blog-content table{font-size:0.8rem}
.blog-content td,.blog-content th{padding:6px 8px}
}