.blog-page {
  --blog-bg: #f6f8f3;
  --blog-surface: #fff;
  --blog-text: #172014;
  --blog-muted: #657060;
  --blog-border: rgba(62, 109, 38, .16);
  --blog-accent: #3e6d26;
  --blog-soft: #edf4e9;
  --blog-shadow: 0 18px 46px rgba(23, 32, 20, .08);
  background: var(--blog-bg);
  color: var(--blog-text);
  min-height: 100vh;
}

[data-theme="dark"] .blog-page {
  --blog-bg: #0f1210;
  --blog-surface: #171c18;
  --blog-text: #edf3e9;
  --blog-muted: #a6b1a1;
  --blog-border: rgba(104, 192, 68, .2);
  --blog-accent: #72c852;
  --blog-soft: rgba(104, 192, 68, .1);
  --blog-shadow: 0 18px 46px rgba(0, 0, 0, .25);
}

.blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.article-shell { width: min(900px, calc(100% - 2rem)); margin-inline: auto; }
.blog-hero { padding: 4.5rem 0 3.5rem; background: radial-gradient(circle at 85% 0, rgba(104, 192, 68, .18), transparent 34%), linear-gradient(135deg, #183515, #3e6d26); color: #fff; }
.blog-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 3rem; align-items: end; }
.blog-kicker { display: inline-flex; padding: .42rem .8rem; border-radius: 999px; background: var(--blog-soft); color: var(--blog-accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.blog-hero .blog-kicker { background: rgba(255, 255, 255, .14); color: #fff; }
.blog-hero h1, .blog-category-hero h1, .article-hero h1 { margin: .9rem 0; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 850; }
.blog-hero p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 1.1rem; line-height: 1.7; }
.blog-search { padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(14px); }
.blog-search label { display: block; margin-bottom: .65rem; font-weight: 750; }
.blog-search__row { display: flex; gap: .55rem; }
.blog-search input { min-width: 0; flex: 1; padding: .9rem 1rem; border: 0; border-radius: 13px; background: #fff; color: #182015; }
.blog-search button, .blog-empty a, .article-order > a { border: 0; border-radius: 13px; padding: .9rem 1.15rem; background: #6ec34d; color: #10200b; font-weight: 800; text-decoration: none; cursor: pointer; }
.blog-categories { display: flex; gap: .55rem; overflow-x: auto; padding: 1.25rem 0; scrollbar-width: thin; }
.blog-categories a, .blog-categories span, .blog-tags a, .blog-tags span, .blog-card__category { flex: none; display: inline-flex; align-items: center; padding: .58rem .9rem; border: 1px solid var(--blog-border); border-radius: 999px; background: var(--blog-surface); color: var(--blog-muted); font-size: .86rem; font-weight: 700; text-decoration: none; }
.blog-categories a:hover, .blog-categories a.is-active, .blog-categories span.is-active, .blog-tags a:hover { background: var(--blog-accent); color: #fff; border-color: var(--blog-accent); }
.blog-section { padding: 2.2rem 0 3.5rem; }
.blog-section__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.blog-section__head span { color: var(--blog-accent); font-size: .76rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.blog-section__head h2, .blog-tags-panel h2 { margin: .25rem 0 0; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.1; }
.blog-section__head strong { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 50%; background: var(--blog-soft); color: var(--blog-accent); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--blog-border); border-radius: 22px; background: var(--blog-surface); box-shadow: var(--blog-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(23, 32, 20, .13); }
.blog-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--blog-soft), var(--blog-surface)); text-decoration: none; }
.blog-card__media picture, .blog-card__media img { display: block; width: 100%; height: 100%; }
.blog-card__media img { object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.035); }
.blog-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--blog-accent); font-size: 1.3rem; font-weight: 850; }
.blog-card__body { flex: 1; display: flex; flex-direction: column; padding: 1.25rem; }
.blog-card__category { align-self: flex-start; color: var(--blog-accent); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.blog-card h3 { margin: .7rem 0 .55rem; font-size: 1.28rem; line-height: 1.25; }
.blog-card h3 a { color: var(--blog-text); text-decoration: none; }
.blog-card p { margin: 0 0 1rem; color: var(--blog-muted); line-height: 1.65; font-size: .94rem; }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--blog-border); color: var(--blog-muted); font-size: .78rem; }
.blog-tags-panel { margin: 0 0 4rem; padding: 1.5rem; border: 1px solid var(--blog-border); border-radius: 24px; background: var(--blog-surface); }
.blog-tags-panel h2 { margin-bottom: 1rem; font-size: 1.5rem; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2rem; }
.blog-pagination a, .blog-pagination span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--blog-border); border-radius: 12px; background: var(--blog-surface); color: var(--blog-text); text-decoration: none; font-weight: 800; }
.blog-pagination span { background: var(--blog-accent); color: #fff; }
.blog-empty { padding: 4rem 1rem; border: 1px dashed var(--blog-border); border-radius: 24px; text-align: center; background: var(--blog-surface); }
.blog-empty strong { display: block; font-size: 1.5rem; }
.blog-empty p { color: var(--blog-muted); margin-bottom: 1.5rem; }
.blog-category-hero { padding: 3.5rem 0 2.5rem; background: linear-gradient(180deg, var(--blog-soft), transparent); }
.blog-category-hero h1 { color: var(--blog-text); }
.blog-category-hero p { max-width: 720px; color: var(--blog-muted); font-size: 1.08rem; line-height: 1.7; }
.blog-back { display: block; margin-bottom: 1.5rem; color: var(--blog-accent); font-weight: 750; text-decoration: none; }
.article-hero { padding: 3.5rem 0 2rem; text-align: center; background: linear-gradient(180deg, var(--blog-soft), transparent); }
.article-breadcrumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; color: var(--blog-muted); font-size: .85rem; }
.article-breadcrumbs a { color: var(--blog-accent); text-decoration: none; }
.article-hero .blog-kicker { margin-top: .5rem; }
.article-hero h1 { color: var(--blog-text); font-size: clamp(2.2rem, 5vw, 4.4rem); }
.article-lead { max-width: 760px; margin: 1rem auto; color: var(--blog-muted); font-size: 1.15rem; line-height: 1.75; }
.article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; color: var(--blog-muted); font-size: .86rem; }
.article-cover { overflow: hidden; border-radius: 28px; box-shadow: var(--blog-shadow); }
.article-cover picture, .article-cover img { display: block; width: 100%; }
.article-cover img { max-height: 600px; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; padding: 3rem 0 4rem; }
.article-content { min-width: 0; padding: clamp(1.25rem, 4vw, 2.7rem); border: 1px solid var(--blog-border); border-radius: 26px; background: var(--blog-surface); box-shadow: var(--blog-shadow); font-size: 1.06rem; line-height: 1.82; }
.article-content h2, .article-content h3, .article-content h4 { margin: 2em 0 .7em; line-height: 1.2; color: var(--blog-text); }
.article-content h2 { font-size: 1.85rem; }.article-content h3 { font-size: 1.45rem; }
.article-content p, .article-content li { color: var(--blog-text); }
.article-content a { color: var(--blog-accent); font-weight: 700; }
.article-content img, .article-content iframe, .article-content table { max-width: 100%; }
.article-content img { height: auto; border-radius: 16px; }
.article-content blockquote { margin: 1.6rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--blog-accent); background: var(--blog-soft); border-radius: 0 14px 14px 0; }
.article-content table { display: block; overflow-x: auto; border-collapse: collapse; }
.article-content th, .article-content td { padding: .7rem; border: 1px solid var(--blog-border); }
.article-content .not-prose { margin-block: 2rem; }
.article-content .not-prose.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.article-content .not-prose.grid[class*="lg:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-content .not-prose.grid > div { padding: 1.25rem; border: 1px solid var(--blog-border); border-radius: 18px; background: var(--blog-surface); box-shadow: 0 10px 28px rgba(23, 32, 20, .06); }
.article-content .not-prose[class*="bg-gradient"] { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--blog-border); border-radius: 22px; background: linear-gradient(135deg, var(--blog-soft), var(--blog-surface)); }
.article-content .not-prose[class*="from-green-600"] { background: linear-gradient(135deg, #315f20, #58a53a); color: #fff; text-align: center; }
.article-content .not-prose[class*="from-green-600"] h2,
.article-content .not-prose[class*="from-green-600"] p { color: #fff; }
.article-content .not-prose .flex { display: flex; gap: .75rem; }
.article-content .not-prose .items-center { align-items: center; }
.article-content .not-prose .items-start { align-items: flex-start; }
.article-content .not-prose .justify-center { justify-content: center; }
.article-content .not-prose .justify-between { justify-content: space-between; }
.article-content .not-prose .flex-shrink-0 { flex-shrink: 0; }
.article-content .not-prose .list-none { list-style: none; padding-left: 0; }
.article-content .not-prose li + li { margin-top: .65rem; }
.article-content .not-prose svg { width: 1.1rem; height: 1.1rem; color: var(--blog-accent); }
.article-content .not-prose span[class*="rounded-full"],
.article-content .not-prose div[class*="rounded-full"],
.article-content .not-prose div[class*="rounded-lg"] { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: .3rem; border-radius: 999px; background: var(--blog-soft); color: var(--blog-accent); }
.article-content .not-prose.overflow-hidden { overflow-x: auto; border: 1px solid var(--blog-border); border-radius: 18px; }
.article-content .not-prose details { overflow: hidden; border: 1px solid var(--blog-border); border-radius: 16px; background: var(--blog-surface); }
.article-content .not-prose details + details { margin-top: .75rem; }
.article-content .not-prose summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; color: var(--blog-text); font-weight: 800; cursor: pointer; list-style: none; }
.article-content .not-prose details p { margin: 0; padding: 0 1.15rem 1.15rem; color: var(--blog-muted); }
.article-content .not-prose a[class*="inline-flex"] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.25rem; border-radius: 13px; background: #fff; color: #315f20; text-decoration: none; }
.article-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.article-order, .article-topics { padding: 1.3rem; border: 1px solid var(--blog-border); border-radius: 22px; background: var(--blog-surface); box-shadow: var(--blog-shadow); }
.article-order span { color: var(--blog-accent); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.article-order h2, .article-topics h2 { margin: .45rem 0; font-size: 1.4rem; }
.article-order p { color: var(--blog-muted); line-height: 1.6; }
.article-order > a { display: block; margin-top: .55rem; text-align: center; background: var(--blog-accent); color: #fff; }
.article-order > a.is-secondary { background: var(--blog-soft); color: var(--blog-accent); }
.article-topics .blog-tags { margin-top: 1rem; }
.article-related { padding: 3.5rem 0 4.5rem; background: var(--blog-soft); }

@media (max-width: 980px) {
  .blog-hero__grid, .article-layout { grid-template-columns: 1fr; }
  .blog-grid, .blog-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .blog-shell, .article-shell { width: min(100% - 1rem, 1180px); }
  .blog-hero { padding: 3rem 0 2.5rem; }
  .blog-search__row { flex-direction: column; }
  .blog-grid, .blog-featured, .article-aside { grid-template-columns: 1fr; }
  .blog-section { padding: 1.6rem 0 2.5rem; }
  .article-layout { padding-top: 1rem; }
  .article-cover { border-radius: 18px; }
  .article-content .not-prose.grid,
  .article-content .not-prose.grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr; }
}