:root { --blue:#0b3d91; --blue-dark:#082a66; --yellow:#ffc107; --orange:#ff7a00; --bg:#f7f9fc; --text:#1c2333; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }
.container { max-width:960px; margin:0 auto; padding:0 1.25rem; }
.site-header { background:var(--blue); border-bottom:5px solid var(--yellow); padding:1rem 0; }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { color:#fff; font-size:1.7rem; font-weight:800; text-decoration:none; }
.logo span { color:var(--yellow); }
.logo span:last-child { color:var(--orange); }
.social-links { display:flex; gap:1rem; }
.social-links a { color:#fff; font-weight:600; text-decoration:none; }
.social-links a:hover, .social-links a:focus-visible { color:var(--yellow); text-decoration:underline; }
@media (max-width:480px) {
  .header-content { align-items:flex-start; flex-direction:column; gap:.25rem; }
  .social-links { gap:1.25rem; }
}
.page-title { color:var(--blue); margin:2rem 0 1rem; }

.cards { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); margin-bottom:3rem; }
.card { display:flex; flex-direction:column; background:#fff; border-radius:8px; overflow:hidden; border-top:4px solid var(--orange);
        text-decoration:none; color:inherit; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .15s, border-top-color .15s; }
.card:hover { transform:translateY(-4px); border-top-color:var(--yellow); }
.card-img { width:100%; height:140px; object-fit:cover; background:var(--blue); }
.card-body { padding:1.1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.card h2 { margin:0 0 .3rem; color:var(--blue); font-size:1.15rem; line-height:1.3; }
.card p { margin:.5rem 0; flex:1; }
.card .more { color:var(--orange); font-weight:700; }
time { color:#6b7385; font-size:.85rem; }

.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.tag { background:var(--yellow); color:var(--blue-dark); font-size:.75rem; font-weight:700; padding:.1rem .6rem; border-radius:999px; }

.post { background:#fff; margin:2rem 0; padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.post h1 { color:var(--blue); margin:.5rem 0 0; line-height:1.25; }
.cover { width:100%; height:auto; border-radius:6px; margin:1rem 0; }
.post-body h2, .post-body h3 { color:var(--blue); border-left:5px solid var(--yellow); padding-left:.6rem; }
.post-body a, .back { color:var(--orange); }
.post-body img { max-width:100%; height:auto; border-radius:6px; }
.post-body pre { background:#0d1117; padding:0; border-radius:6px; overflow-x:auto; }
.post-body pre code { display:block; padding:1rem; background:none; }
.post-body :not(pre) > code { background:#fff3cd; padding:.1rem .3rem; border-radius:3px; }
.post-body blockquote { border-left:4px solid var(--orange); margin-left:0; padding-left:1rem; color:#444; }

.site-footer { background:var(--blue-dark); color:#cfd8ef; text-align:center; padding:1rem 0; border-top:4px solid var(--orange); }