:root{--bg:#050607;--card:#101318;--card2:#15191f;--text:#f5f7fa;--muted:#8f99a8;--soft:#c5cbd3;--border:rgba(255,255,255,.09);--accent:#8b7cff;--accent2:#42d7ad}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.blog-wrap{max-width:760px;margin:0 auto;padding:24px 20px 60px}
.blog-top{display:flex;align-items:center;justify-content:space-between;padding:10px 0 28px;border-bottom:1px solid var(--border);margin-bottom:28px}
.blog-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.04em;font-size:14px}
.blog-brand img{border-radius:7px}
.blog-back{color:var(--muted);font-size:12.5px}
.blog-back:hover{color:var(--text)}
.blog-hero h1{font-size:26px;margin:0 0 6px}
.blog-hero p{color:var(--muted);margin:0 0 26px;font-size:13.5px}
.blog-list{display:flex;flex-direction:column;gap:14px}
.blog-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color .15s,transform .15s}
.blog-card:hover{border-color:rgba(139,124,255,.4);transform:translateY(-1px)}
.blog-card h2{font-size:16.5px;margin:0 0 8px;color:var(--text)}
.blog-card p{margin:0 0 10px;color:var(--soft);font-size:13px}
.blog-card-meta{display:flex;gap:10px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.blog-pager{display:flex;justify-content:space-between;margin-top:26px;font-size:13px;color:var(--accent)}
.blog-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.blog-post h1{font-size:27px;line-height:1.3;margin:0 0 10px}
.blog-meta{display:flex;gap:8px;color:var(--muted);font-size:12px;margin-bottom:26px}
.blog-content{font-size:15px;color:var(--soft)}
.blog-content h2{color:var(--text);font-size:19px;margin:28px 0 10px}
.blog-content h3{color:var(--text);font-size:16.5px;margin:22px 0 8px}
.blog-content p{margin:0 0 14px}
.blog-content ul,.blog-content ol{margin:0 0 14px;padding-left:22px}
.blog-content li{margin-bottom:6px}
.blog-content a{color:var(--accent2);text-decoration:underline}
.blog-content blockquote{border-left:3px solid var(--accent);margin:16px 0;padding:4px 16px;color:var(--muted)}
.blog-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:11.5px}
@media(max-width:800px){
  .blog-wrap{width:100%;padding:18px 14px max(42px,env(safe-area-inset-bottom))}
  .blog-top{padding:6px 0 20px;margin-bottom:22px}
  .blog-card{padding:16px;border-radius:13px}
  .blog-card,.blog-content{overflow-wrap:anywhere}
  .blog-meta,.blog-card-meta{flex-wrap:wrap;row-gap:3px}
  .blog-content pre,.blog-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}