:root{
  --bg:#0f1115; --bg2:#151a22; --card:#1b2230; --card2:#20293a;
  --text:#e8ecf2; --muted:#a7b1c2;
  --accent:#5eead4; --accent2:#22d3ee;
  --ok:#33d17a; --warn:#ffb84d; --danger:#ff6b6b;
  --border:rgba(255,255,255,.08);
  --sans:'Manrope','Segoe UI',Tahoma,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius-card:18px; --radius-btn:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; display:block}

/* ambient background glow — тот же приём, что на главной странице cheatcode.kz/dashboard,
   но ярче и внутри видимой области — на статье нет других цветных акцентов, кроме этого фона */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 700px at 12% 0%, rgba(94,234,212,.24), transparent 55%),
    radial-gradient(1000px 800px at 88% 15%, rgba(34,211,238,.22), transparent 55%),
    radial-gradient(700px 600px at 50% 100%, rgba(94,234,212,.10), transparent 60%),
    var(--bg);
}

/* nav */
.blog-nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.6rem; border-bottom:1px solid var(--border);
  max-width:1000px; margin:0 auto;
  background:rgba(15,17,21,.7); backdrop-filter:blur(16px);
}
.blog-nav__logo{font-family:var(--mono); font-weight:700; text-decoration:none; font-size:.95rem}
.blog-nav__logo span{color:var(--muted); font-weight:400}
.blog-nav__links{display:flex; gap:1.4rem}
.blog-nav__links a{text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:600}
.blog-nav__links a:hover{color:var(--accent)}

main{max-width:1000px; margin:0 auto; padding:0 1.6rem}

/* hero */
.blog-hero{padding:3rem 0 2rem; border-bottom:1px solid var(--border)}
.blog-hero h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .6rem; text-wrap:balance}
.blog-hero p{color:var(--muted); max-width:56ch; margin:0; font-size:1.05rem}

/* sections */
.blog-section{padding:2.6rem 0}
.blog-section h2{font-size:1.4rem; margin:0 0 1.3rem}

/* post grid / cards */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem}
.post-card{
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); overflow:hidden; text-decoration:none;
  transition:.15s ease; color:var(--text);
}
.post-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.post-card__cover{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--card2)}
.post-card__body{padding:1.1rem 1.2rem 1.3rem}
.post-card__tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.post-card__body h3{font-size:1.05rem; margin:.5rem 0 .5rem; line-height:1.35; text-wrap:balance}
.post-card__meta{display:flex; gap:.8rem; font-size:.78rem; color:var(--muted)}

/* article */
.post, .term{padding:2.6rem 0 4rem; max-width:760px; margin:0 auto}
.post__crumbs{font-size:.82rem; color:var(--muted); margin-bottom:1rem}
.post__crumbs a{color:var(--muted); text-decoration:none}
.post h1, .term h1{font-size:clamp(1.7rem,3.6vw,2.3rem); line-height:1.25; margin:0 0 1rem; text-wrap:balance}
.post__meta{display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:1.6rem}
.post__cover{width:100%; border-radius:var(--radius-card); margin-bottom:2rem; aspect-ratio:16/9; object-fit:cover}
.term__definition{font-size:1.15rem; color:var(--muted); margin:-.4rem 0 1.8rem}

.post__body{font-size:1.02rem}
.post__body h2{font-size:1.35rem; margin:2.2rem 0 1rem; color:var(--text)}
.post__body h3{font-size:1.1rem; margin:1.6rem 0 .8rem}
.post__body p{margin:0 0 1.1rem; color:var(--text)}
.post__body ul, .post__body ol{margin:0 0 1.1rem; padding-left:1.3rem; color:var(--text)}
.post__body li{margin-bottom:.4rem}
.post__body strong{color:var(--accent)}
.post__body table{width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.92rem}
.post__body th, .post__body td{border:1px solid var(--border); padding:.6rem .8rem; text-align:left}
.post__body th{background:var(--card); font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em}
.post__body code{font-family:var(--mono); background:var(--card); padding:.1em .4em; border-radius:4px; font-size:.9em}
.post__body blockquote{
  border-left:3px solid var(--accent); margin:1.4rem 0; padding:.2rem 0 .2rem 1.1rem;
  color:var(--muted); font-style:italic;
}

/* inline CTA */
.inline-cta{margin:2rem 0}
.btn-primary{
  display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#0b1015; font-weight:800; text-decoration:none; padding:.85rem 1.5rem;
  border-radius:var(--radius-btn); font-size:.95rem;
}

/* faq */
.post__faq{margin-top:2.6rem; border-top:1px solid var(--border); padding-top:1.8rem}
.post__faq h2{font-size:1.3rem; margin:0 0 1rem}
.post__faq details{border-bottom:1px solid var(--border); padding:.9rem 0}
.post__faq summary{cursor:pointer; font-weight:700; font-size:.98rem}
.post__faq summary::marker{color:var(--accent)}
.post__faq p{margin:.7rem 0 0; color:var(--muted)}

/* related */
.post__related{margin-top:3rem; border-top:1px solid var(--border); padding-top:2rem}
.post__related h2, .term__related h2{font-size:1.3rem; margin-bottom:1.2rem}
.post__all-link{display:inline-block; margin-top:1.2rem; color:var(--accent); text-decoration:none; font-weight:600; font-size:.9rem}

/* glossary term links */
.term-links{display:flex; flex-wrap:wrap; gap:.6rem}
.term-links a{
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:.45rem 1rem; font-size:.85rem; text-decoration:none; color:var(--text);
}
.term-links a:hover{border-color:var(--accent); color:var(--accent)}

/* glossary index */
.term-index{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden}
.term-index__item{background:var(--card); padding:1.1rem 1.3rem; text-decoration:none; color:var(--text)}
.term-index__item:hover{background:var(--card2)}
.term-index__title{display:block; font-weight:700; margin-bottom:.3rem}
.term-index__def{display:block; font-size:.85rem; color:var(--muted); line-height:1.5}

/* bottom cta section */
.blog-cta{text-align:center; border-top:1px solid var(--border)}
.blog-cta p{color:var(--muted); margin-bottom:1.4rem}

/* footer */
.blog-footer{
  max-width:1000px; margin:0 auto; padding:2.2rem 1.6rem 3rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.85rem; color:var(--muted);
}
.blog-footer a{color:var(--accent); text-decoration:none; font-weight:600}

@media (max-width:640px){
  .blog-nav{flex-direction:column; gap:.8rem; align-items:flex-start}
  .post, .term{padding:1.8rem 0 3rem}
}