:root{
    --bg:#0b0d12; --text:#e9ecf3; --muted:#aab2c5;
    --card:#121622; --border:#232a3b;
    --primary:#7aa7ff; --radius:18px;
    --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
*{box-sizing:border-box}
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1 0 auto;
}

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1060px;margin:0 auto;padding:18px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;color:var(--text)}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.footer{border-top:1px solid var(--border);margin-top:40px;padding-top:22px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:center;
    background:linear-gradient(135deg, rgba(122,167,255,.18), rgba(255,122,210,.10));
    border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:24px}
.hero-img{width:100%;border-radius:calc(var(--radius) - 6px);border:1px solid var(--border)}
.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.cover{width:100%;height:160px;object-fit:cover;border-radius:calc(var(--radius) - 8px);border:1px solid var(--border);margin-bottom:10px}
.meta{display:flex;gap:10px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.post-cover{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);margin:14px 0}
.content p{margin:0 0 14px}
.pager{display:flex;justify-content:space-between;align-items:center;margin:22px 0;color:var(--muted)}
@media (max-width: 920px){ .grid{grid-template-columns:repeat(2,1fr)} .hero{grid-template-columns:1fr} }
@media (max-width: 520px){ .grid{grid-template-columns:1fr} }