/* ── Top accent bar ─────────────────────────────────────── */
    .post-hero-accent {
        height: 4px;
        background: linear-gradient(90deg, #FFDE00, #009B77, #FFDE00);
    }

    /* ── Hero ──────────────────────────────────────────────── */
    .post-hero {
        background: #f8faf8;
        padding: 52px 0 48px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #e8f0e8;
    }
    .post-hero::before {
        content: '';
        position: absolute;
        top: -60px; right: -80px;
        width: 360px; height: 360px;
        background: radial-gradient(circle, rgba(0,155,119,.07) 0%, transparent 65%);
        pointer-events: none;
    }
    .post-hero::after {
        content: '';
        position: absolute;
        bottom: -60px; left: 5%;
        width: 280px; height: 280px;
        background: radial-gradient(circle, rgba(255,222,0,.08) 0%, transparent 65%);
        pointer-events: none;
    }
    .post-hero__inner { position: relative; z-index: 1; }

    .post-breadcrumb {
        display: flex; align-items: center; gap: 8px;
        font-size: .8rem; color: #8aab8a;
        margin-bottom: 20px; flex-wrap: wrap;
    }
    .post-breadcrumb a {
        color: #8aab8a; text-decoration: none; transition: color .15s;
    }
    .post-breadcrumb a:hover { color: #009B77; }
    .post-breadcrumb i { font-size: .6rem; }

    .post-hero__cat {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(0,155,119,.08); color: #007a60;
        font-size: .72rem; font-weight: 700; letter-spacing: 1px;
        text-transform: uppercase; padding: 4px 14px;
        border-radius: 20px; margin-bottom: 18px;
        border: 1px solid rgba(0,155,119,.2);
        text-decoration: none; transition: .15s;
    }
    .post-hero__cat:hover { background: rgba(0,155,119,.15); color: #007a60; }

    .post-hero__title {
        font-size: 2.2rem; font-weight: 800; color: #0A1F0D;
        line-height: 1.25; margin-bottom: 22px; max-width: 760px;
    }

    .post-hero__meta {
        display: flex; gap: 20px; flex-wrap: wrap;
    }
    .post-hero__meta-item {
        display: flex; align-items: center; gap: 6px;
        font-size: .82rem; color: #8aab8a;
    }
    .post-hero__meta-item i { color: #009B77; font-size: .72rem; }
    .post-hero__meta-item strong { color: #2d4a2d; font-weight: 600; }

    .post-hero__tags {
        display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px;
    }
    .post-hero__tag {
        display: inline-block; background: #fff;
        color: #8aab8a; font-size: .75rem;
        padding: 3px 10px; border-radius: 20px;
        border: 1px solid #dde8dd; text-decoration: none;
        transition: .15s;
    }
    .post-hero__tag:hover { background: #fffbe6; color: #009B77; border-color: #FFDE00; }

    /* ── Page body ──────────────────────────────────────────── */
    .post-page { padding: 48px 0 80px; background: #f4f7f4; }
    .post-layout {
        display: grid;
        grid-template-columns: 1fr 288px;
        gap: 40px; align-items: start;
    }
    @media (max-width: 991px) { .post-layout { grid-template-columns: 1fr; } }

    /* ── Article card ───────────────────────────────────────── */
    .post-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 24px rgba(10,31,13,.06);
        overflow: hidden;
    }
    .post-card__progress {
        height: 3px; background: #eef2ee;
        position: sticky; top: 0; z-index: 10;
    }
    .post-card__progress-bar {
        height: 100%; width: 0;
        background: linear-gradient(90deg, #009B77, #FFDE00);
        transition: width .1s;
    }
    .post-card__body { padding: 40px 44px; }
    @media (max-width: 767px) { .post-card__body { padding: 24px 20px; } }

    /* ── Content typography ─────────────────────────────────── */
    .post-content { font-size: 1rem; line-height: 1.85; color: #3a4a3a; }
    .post-content h2 {
        font-size: 1.45rem; font-weight: 800; color: #0A1F0D;
        margin: 36px 0 14px; padding-left: 14px;
        border-left: 4px solid #FFDE00;
    }
    .post-content h3 {
        font-size: 1.15rem; font-weight: 700; color: #0A1F0D;
        margin: 28px 0 10px;
    }
    .post-content p { margin-bottom: 18px; }
    .post-content a { color: #009B77; text-decoration: underline; }
    .post-content a:hover { color: #007a60; }
    .post-content img { max-width: 100%; border-radius: 10px; margin: 20px 0; }
    .post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 18px; }
    .post-content li { margin-bottom: 8px; }
    .post-content blockquote {
        border-left: 4px solid #FFDE00;
        padding: 16px 24px; margin: 28px 0;
        background: #fffef0; border-radius: 0 10px 10px 0;
        color: #555; font-style: italic; font-size: 1.02rem;
    }
    .post-content code {
        background: #f0f7f0; color: #007a60;
        padding: 2px 7px; border-radius: 4px; font-size: .9em;
    }
    .post-content pre {
        background: #1e3320; color: #c8e6c9;
        padding: 22px 24px; border-radius: 12px;
        overflow-x: auto; margin: 20px 0; font-size: .9rem;
    }
    .post-content pre code { background: none; color: inherit; padding: 0; }
    .post-content table { width: 100%; border-collapse: collapse; margin: 20px 0; }
    .post-content th { background: #f0f7f2; color: #0A1F0D; padding: 10px 14px; text-align: left; font-size: .88rem; border-bottom: 2px solid #dde8dd; }
    .post-content td { padding: 9px 14px; border-bottom: 1px solid #eaeeea; font-size: .9rem; }
    .post-content tr:hover td { background: #f9fbf9; }

    /* ── Post footer ────────────────────────────────────────── */
    .post-footer {
        margin-top: 36px; padding-top: 28px;
        border-top: 2px solid #f0f4f0;
        display: flex; align-items: flex-start;
        justify-content: space-between; gap: 20px; flex-wrap: wrap;
    }
    .post-footer__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .post-footer__tags-label { font-size: .8rem; color: #aaa; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
    .post-footer__tag {
        display: inline-block; background: #f0f7f2; color: #009B77;
        font-size: .8rem; font-weight: 600; padding: 5px 14px;
        border-radius: 20px; text-decoration: none; border: 1px solid #dde8dd;
        transition: .15s;
    }
    .post-footer__tag:hover { background: #fffbe6; color: #009B77; border-color: #FFDE00; }

    .post-footer__share { display: flex; align-items: center; gap: 10px; }
    .post-footer__share-label { font-size: .8rem; color: #aaa; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
    .share-btn {
        width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        text-decoration: none; font-size: .82rem; transition: .15s;
        border: 1px solid #dde8dd; color: #777; background: #fff;
    }
    .share-btn:hover { background: #fffbe6; color: #009B77; border-color: #FFDE00; }

    /* ── Back link ──────────────────────────────────────────── */
    .post-back {
        display: inline-flex; align-items: center; gap: 8px;
        color: #666; font-size: .88rem; font-weight: 600;
        text-decoration: none; margin-bottom: 20px;
        padding: 8px 16px; background: #fff; border-radius: 8px;
        border: 1px solid #dde8dd; transition: .15s;
    }
    .post-back:hover { background: #fffbe6; color: #009B77; border-color: #FFDE00; }
    .post-back i { font-size: .7rem; }

    /* ── Sidebar ────────────────────────────────────────────── */
    .sidebar-widget {
        background: #fff; border-radius: 14px;
        box-shadow: 0 2px 20px rgba(10,31,13,.06);
        overflow: hidden; margin-bottom: 24px;
    }
    .sidebar-widget__head {
        background: #f8faf8; color: #0A1F0D;
        padding: 13px 20px; font-size: .88rem; font-weight: 700;
        display: flex; align-items: center; gap: 8px;
        border-bottom: 2px solid #FFDE00;
    }
    .sidebar-widget__head i { color: #009B77; }
    .sidebar-widget__body { padding: 8px 0; }

    .recent-item {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 12px 20px; border-bottom: 1px solid #f4f7f4;
        text-decoration: none; transition: background .15s;
    }
    .recent-item:last-child { border-bottom: none; }
    .recent-item:hover { background: #f9fbf9; }
    .recent-item__num {
        min-width: 26px; height: 26px; border-radius: 6px;
        background: #f0f7f2; color: #009B77;
        display: flex; align-items: center; justify-content: center;
        font-size: .7rem; font-weight: 800; flex-shrink: 0; margin-top: 1px;
    }
    .recent-item:hover .recent-item__num { background: #FFDE00; color: #0A1F0D; }
    .recent-item__title {
        font-size: .85rem; font-weight: 600; color: #333; line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .recent-item:hover .recent-item__title { color: #009B77; }
    .recent-item__date { font-size: .73rem; color: #bbb; margin-top: 4px; }

    .cat-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 20px; border-bottom: 1px solid #f4f7f4;
        text-decoration: none; transition: background .15s;
    }
    .cat-item:last-child { border-bottom: none; }
    .cat-item:hover { background: #f9fbf9; }
    .cat-item__name { font-size: .9rem; color: #333; font-weight: 500; }
    .cat-item:hover .cat-item__name { color: #009B77; }
    .cat-item__count {
        background: #f0f7f2; color: #009B77;
        font-size: .72rem; font-weight: 800;
        padding: 2px 9px; border-radius: 10px;
    }

    /* ── Reading info bar ───────────────────────────────────── */
    .reading-info {
        display: flex; align-items: center; gap: 16px;
        background: #fff; border-radius: 10px; padding: 14px 20px;
        margin-bottom: 24px;
        box-shadow: 0 2px 20px rgba(10,31,13,.06);
        border: 1px solid #eef2ee;
    }
    .reading-info__item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #7a9a7a; }
    .reading-info__item i { color: #009B77; }
    .reading-info__item strong { color: #0A1F0D; }