.page-main{padding:72px 24px 60px;max-width:1100px;margin:0 auto;}

.page-header{text-align:center;margin-bottom:32px;}
.page-header h1{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:600;margin-bottom:12px;}
.page-header p{color:var(--cs-text-muted);font-size:15px;}

.filter-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.filter-tab{padding:8px 18px;border-radius:999px;border:1px solid var(--cs-border);background:var(--cs-surface);color:var(--cs-text-muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.2s;}
.filter-tab:hover{border-color:var(--cs-primary);color:var(--cs-text);}
.filter-tab.is-active{background:var(--cs-primary);border-color:var(--cs-primary);color:#fff;}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.blog-card{background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:var(--cs-radius);overflow:hidden;cursor:pointer;transition:transform 0.2s,border-color 0.2s;}
.blog-card:hover{transform:translateY(-4px);border-color:var(--cs-primary);}
.blog-card.is-hidden{display:none;}

.blog-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(14,165,233,0.15));}
.blog-thumb--tutorial{background:linear-gradient(135deg,rgba(124,58,237,0.25),rgba(236,72,153,0.15));}
.blog-thumb--news{background:linear-gradient(135deg,rgba(14,165,233,0.25),rgba(34,197,94,0.15));}
.blog-thumb--guide{background:linear-gradient(135deg,rgba(234,179,8,0.2),rgba(124,58,237,0.15));}
.blog-thumb--release{background:linear-gradient(135deg,rgba(34,197,94,0.25),rgba(14,165,233,0.15));}

.blog-body{padding:20px;}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;color:var(--cs-text-muted);}
.blog-body h2{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.35;}
.blog-excerpt{color:var(--cs-text-muted);font-size:14px;line-height:1.6;}

.blog-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity 0.25s,visibility 0.25s;}
.blog-modal-overlay.is-open{opacity:1;visibility:visible;}

.blog-modal{background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:var(--cs-radius);max-width:680px;width:100%;max-height:85vh;overflow-y:auto;padding:32px;position:relative;transform:translateY(16px);transition:transform 0.25s;}
.blog-modal-overlay.is-open .blog-modal{transform:translateY(0);}

.blog-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--cs-border);background:var(--cs-background);color:var(--cs-text);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
.blog-modal-close:hover{border-color:var(--cs-primary);}

.blog-modal h2{font-size:1.5rem;font-weight:800;margin-bottom:12px;padding-right:40px;}
.blog-modal-meta{font-size:13px;color:var(--cs-text-muted);margin-bottom:20px;}
.blog-modal-content{color:var(--cs-text-muted);font-size:15px;line-height:1.8;}
.blog-modal-content p{margin-bottom:14px;}