:root{ --bg:#f6f9fc; --card:#ffffff; --ink:#0b1220; --muted:#667085; --accent:#0f62fe; --ok:#16a34a; --maxw:1100px; }
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; background:var(--bg); color:var(--ink); line-height:1.6}
.container{max-width:var(--maxw); margin:36px auto; padding:20px}
.header{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px}
.logo{font-weight:800; color:var(--accent); font-size:22px}
.nav a{margin-left:16px; color:var(--ink); text-decoration:none; font-size:15px}
.hero{background:#eef4ff; border-radius:14px; overflow:hidden; box-shadow:0 10px 28px rgba(11,18,32,0.06)}
.hero img{width:100%; height:auto; display:block}
.hero .inner{padding:20px}
.hero h1{margin:8px 0 0; font-size:32px}
.hero p{margin:8px 0 0; color:var(--muted)}
.grid{display:grid; grid-template-columns:1fr; gap:22px; margin-top:22px}
.card{background:var(--card); padding:18px; border-radius:12px; box-shadow:0 10px 28px rgba(11,18,32,0.06)}
.post-list{display:grid; gap:16px}
.post img{width:100%; border-radius:10px}
.post h3{margin:6px 0 0; font-size:20px}
.meta{font-size:13px; color:var(--muted)}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none}
.table{width:100%; border-collapse:collapse; margin-top:10px}
.table th,.table td{padding:10px; text-align:left; border-bottom:1px solid #eef2f7}
blockquote{background:#f1f5f9; padding:12px 14px; border-left:4px solid #60a5fa; border-radius:6px}
.form{display:grid; gap:10px; max-width:520px}
input, textarea{padding:10px 12px; border-radius:8px; border:1px solid #e5e7eb; background:#fff}
button{padding:10px 12px; border-radius:8px; background:var(--ok); color:#fff; border:none}
@media(min-width:980px){ .grid{grid-template-columns:2fr 1fr} }