.blog-container{max-width:1200px;min-height:80vh;margin:80px auto 0;padding:60px 20px}.blog-loading,.blog-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:100px 20px;display:flex}.blog-loading p,.blog-error p{color:#666;margin-bottom:1rem}.blog-loading button,.blog-error button{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:500;transition:background .2s}.blog-loading button:hover,.blog-error button:hover{background:#4338ca}.blog-spinner{border:3px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;width:40px;height:40px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.blog-list{text-align:center}.blog-list-title{background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.blog-list-subtitle{color:#6b7280;margin-bottom:3rem;font-size:1.125rem}.blog-empty{text-align:center;color:#6b7280;padding:60px 20px}.blog-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem;display:grid}@media (max-width:768px){.blog-grid{grid-template-columns:1fr}}.blog-card{cursor:pointer;text-align:left;background:#fff;border-radius:16px;transition:all .3s;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.blog-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.blog-card:hover .blog-card-title{color:#4f46e5}.blog-card-image{width:100%;height:200px;overflow:hidden}.blog-card-image img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.blog-card-image:hover img{transform:scale(1.05)}.blog-card-content{padding:1.5rem}.blog-card-meta{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.blog-card-date{color:#6b7280;font-size:.875rem}.blog-card-tags{flex-wrap:wrap;gap:.5rem;display:flex}.blog-card-title{color:#1f2937;margin-bottom:.75rem;font-size:1.25rem;font-weight:600;line-height:1.4;transition:color .2s}.blog-card-excerpt{color:#6b7280;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:1rem;font-size:.9375rem;line-height:1.6;display:-webkit-box;overflow:hidden}.blog-card-author{color:#9ca3af;font-size:.875rem}.blog-tag{color:#4f46e5;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:100px;padding:.25rem .75rem;font-size:.75rem;font-weight:500;display:inline-block}.blog-detail{max-width:800px;margin:0 auto}.blog-back-btn{color:#4b5563;cursor:pointer;background:#f3f4f6;border:none;border-radius:8px;align-items:center;gap:.5rem;margin-bottom:2rem;padding:.75rem 1.25rem;font-weight:500;transition:all .2s;display:inline-flex}.blog-back-btn:hover{color:#1f2937;background:#e5e7eb}.blog-article-thumbnail{object-fit:cover;border-radius:16px;width:100%;max-height:400px;margin-bottom:2rem}.blog-article-header{border-bottom:1px solid #e5e7eb;margin-bottom:2rem;padding-bottom:2rem}.blog-article-title{color:#1f2937;margin-bottom:1rem;font-size:2.5rem;font-weight:700;line-height:1.2}@media (max-width:768px){.blog-article-title{font-size:1.75rem}}.blog-article-meta{color:#6b7280;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem;font-size:.9375rem;display:flex}.blog-article-author{font-weight:500}.blog-article-date:before{content:"•";margin-right:1rem}.blog-article-tags{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.blog-article-excerpt{color:#4b5563;border-left:4px solid #4f46e5;margin-bottom:2rem;padding-left:1.25rem;font-size:1.25rem;font-style:italic;line-height:1.6}.blog-article-content{color:#374151;font-size:1.125rem;line-height:1.8}.blog-article-content h1,.blog-article-content h2,.blog-article-content h3,.blog-article-content h4,.blog-article-content h5,.blog-article-content h6{color:#1f2937;margin-top:2rem;margin-bottom:1rem;font-weight:600;line-height:1.3}.blog-article-content h1{font-size:2rem}.blog-article-content h2{font-size:1.5rem}.blog-article-content h3{font-size:1.25rem}.blog-article-content p{margin:1.25rem 0}.blog-article-content a{color:#4f46e5;text-decoration:underline}.blog-article-content a:hover{color:#4338ca}.blog-article-content img{border-radius:8px;max-width:100%;height:auto;margin:1.5rem 0}.blog-article-content pre{color:#e2e8f0;background:#1e293b;border-radius:8px;margin:1.5rem 0;padding:1.25rem;font-size:.9rem;line-height:1.5;overflow-x:auto}.blog-article-content code{background:#f1f5f9;border-radius:4px;padding:.2em .4em;font-size:.9em}.blog-article-content pre code{background:0 0;padding:0}.blog-article-content blockquote{color:#4b5563;border-left:4px solid #4f46e5;margin:1.5rem 0;padding-left:1.25rem;font-style:italic}.blog-article-content ul,.blog-article-content ol{margin:1rem 0;padding-left:1.5rem}.blog-article-content li{margin:.5rem 0}.blog-article-content table{border-collapse:collapse;width:100%;margin:1.5rem 0}.blog-article-content th,.blog-article-content td{text-align:left;border:1px solid #e5e7eb;padding:.75rem}.blog-article-content th{background:#f9fafb;font-weight:600}.blog-article-content .callout,.blog-article-content [data-callout]{border-left:4px solid;border-radius:8px;margin:1.5rem 0;padding:1rem 1.25rem}.blog-article-content .callout-info,.blog-article-content [data-callout=info]{background:#eff6ff;border-color:#3b82f6}.blog-article-content .callout-success,.blog-article-content [data-callout=success]{background:#f0fdf4;border-color:#22c55e}.blog-article-content .callout-warning,.blog-article-content [data-callout=warning]{background:#fffbeb;border-color:#f59e0b}.blog-article-content .callout-error,.blog-article-content [data-callout=error]{background:#fef2f2;border-color:#ef4444}.blog-article-content .callout-tip,.blog-article-content [data-callout=tip]{background:#faf5ff;border-color:#a855f7}
.share-buttons{align-items:center;gap:10px;margin:16px 0;display:flex}.share-icon{color:#9ca3af;font-size:.9rem}.share-label{color:#9ca3af;font-size:.85rem;font-weight:500}.share-btn{color:#6b7280;cursor:pointer;background:#4e54c80f;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;text-decoration:none;transition:all .2s;display:inline-flex}.share-btn:hover{transform:translateY(-1px)}.share-btn--twitter:hover{color:#1da1f2;background:#1da1f21f}.share-btn--linkedin:hover{color:#0a66c2;background:#0a66c21f}.share-btn--facebook:hover{color:#4267b2;background:#4267b21f}.share-btn--copy:hover{color:#4e54c8;background:#4e54c81f}.share-copied{color:#10b981}