:root {
  --blog-bg: var(--bitt-color-bg-base, #ebedf0);
  --blog-surface: rgba(255, 255, 255, 0.84);
  --blog-surface-strong: var(--bitt-color-surface, var(--blog-surface-strong));
  --blog-border: var(--bitt-color-border, rgba(13, 91, 48, 0.12));
  --blog-text: var(--bitt-color-text-primary, var(--blog-text));
  --blog-muted: var(--bitt-color-text-muted, var(--blog-muted));
  --blog-accent: var(--bitt-color-accent, var(--blog-accent));
  --blog-accent-soft: #e8f5ea;
  --blog-gold: var(--bitt-color-accent-2, var(--blog-gold));
}
.blog-body {margin-top:20px;margin-bottom:22px;}
.reading-progress {position: fixed;top: 0;left: 0;width: 100%;height: 3px;z-index: 80;background: rgba(255,255,255,.35);backdrop-filter: blur(2px);}
.reading-progress span {display:block;height:100%;width:0;background: linear-gradient(90deg, var(--blog-accent), var(--blog-gold));box-shadow: 0 0 14px rgba(247,195,46,.35);transition: width .12s linear;}
.detail-floating-tools {position: fixed;right: 16px;bottom: 18px;z-index: 60;display: flex;flex-direction: column;gap: 8px;opacity: 0;transform: translateY(12px);pointer-events: none;transition: all .24s ease;}
.detail-floating-tools.is-visible {opacity: 1;transform: translateY(0);pointer-events: auto;}
.reading-finish-badge {position: fixed;left:50%;bottom:24px;transform:translate(-50%,16px);padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,var(--blog-accent),var(--bitt-color-accent-2));color:#fff;font-weight:800;font-size:13px;z-index:85;opacity:0;pointer-events:none;box-shadow:0 10px 22px rgba(27,127,58,.24);transition:all .28s ease;}
.reading-finish-badge.is-visible {opacity:1;transform:translate(-50%,0);}
.reading-confetti {position:fixed;inset:0;pointer-events:none;z-index:84;display:none;}
.reading-confetti.is-active {display:block;}
.float-tool {border: 1px solid rgba(18,34,24,.14);background: rgba(255,255,255,.92);color: #1e3c2d;font-weight: 800;font-size: 12px;border-radius: 999px;padding: 8px 12px;backdrop-filter: blur(4px);box-shadow: 0 8px 18px rgba(18,34,24,.08);transition: all .2s ease;}
.float-tool:hover {transform: translateY(-1px);border-color:var(--blog-accent)44;}
.float-tool.is-primary {background: linear-gradient(135deg, var(--blog-accent), var(--bitt-color-accent-2));color:#fff;border-color:transparent;}
.blog-hero,.blog-post-card,.blog-article,.sidebar-box {border: 1px solid var(--blog-border);border-radius: 20px;background: var(--blog-surface);backdrop-filter: blur(4px);}
.blog-hero {padding: 24px;}
.blog-detail-hero {position: relative;overflow: hidden;background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(242,250,244,.88));}
.blog-detail-hero::before {content:'';position:absolute;width:240px;height:240px;border-radius:999px;right:-70px;top:-110px;background: radial-gradient(circle, rgba(247,195,46,.22), rgba(247,195,46,0));pointer-events:none;transform-origin:center;animation:blogHeroGlowPulse 6s ease-in-out infinite;will-change:transform,opacity;}
.detail-subline {margin-top: 10px;max-width: none;width:100%;color:#365145;line-height:1.7;font-size:.98rem;}
@keyframes blogHeroGlowPulse {
	0%,100% {transform: scale(1);opacity:.9;}
	50% {transform: scale(1.14);opacity:1;}
}
.blog-breadcrumb {display: flex;flex-wrap: wrap;gap: 8px;font-size: 13px;color: var(--blog-muted);margin-bottom: 12px;}
.blog-breadcrumb a {color: var(--blog-accent);font-weight: 600;}
.blog-kicker {font-size: 12px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--blog-accent);font-weight: 700;}
.blog-hero h1 {margin-top: 8px;font-size: clamp(1.5rem, 2.4vw, 2.35rem);line-height: 1.25;font-weight: 900;color: var(--blog-text);max-width: 900px;}
.blog-category-title {text-align:center;margin-left:auto;margin-right:auto;}
.blog-hero-desc-wrap {margin-top: 2px;}
.blog-hero-desc-inner {overflow: hidden;max-height: none;transition: max-height .42s cubic-bezier(.22,.61,.36,1);position: relative;}
.blog-hero-desc {margin-top: 14px;font-size: 1.02rem;line-height: 1.8;color: #304138;}
.blog-hero-desc-wrap.is-collapsed:not(.is-expanded) .blog-hero-desc-inner::after {content:'';position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(to bottom, rgba(235,237,240,0), rgba(235,237,240,.9));pointer-events:none;}
.blog-hero-desc-wrap.is-collapsed:not(.is-expanded) .blog-hero-desc {padding-bottom:18px;}
.collapse-btn {margin: 12px auto 0;display:flex;align-items:center;justify-content:center;gap:7px;border: 1px solid var(--blog-border);background: #fff;color: var(--blog-accent);font-size: 14px;font-weight: 800;border-radius: 999px;padding: 8px 16px;min-width: 132px;transition: all .22s ease;}
.collapse-btn:hover {transform: translateY(-1px);border-color:var(--blog-accent);background:#f5fbf6;}
.collapse-btn::after {content:'▾';font-size:12px;line-height:1;transition:transform .25s ease;}
.blog-hero-desc-wrap.is-expanded .collapse-btn::after {transform: rotate(180deg);}
.blog-category-grid {display: grid;gap: 16px;}
.blog-category-grid.is-list .blog-post-card {grid-template-columns: minmax(0, 340px) minmax(0, 1fr);}
.blog-category-grid.is-grid {grid-template-columns: repeat(var(--blog-grid-columns, 3), minmax(0, 1fr));}
.blog-category-grid.is-grid .blog-post-card {grid-template-columns: minmax(0, 1fr);}
.blog-category-grid.is-grid .blog-post-thumb {min-height: 200px;}
.bitt-archive-gap {margin-top: 30px;}
.blog-post-card {overflow: hidden;display: grid;grid-template-columns: minmax(0, 340px) minmax(0, 1fr);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .24s ease;}
.blog-post-card:hover {transform:translateY(-5px);border-color:rgba(27,127,58,.34);box-shadow:0 18px 34px rgba(16,44,28,.14);}
.blog-post-thumb-link {display:block;height:100%;}
.blog-post-thumb {width: 100%;height: 100%;min-height: 220px;object-fit: cover;transition:transform .38s ease,filter .32s ease;}
.blog-post-card:hover .blog-post-thumb {transform:scale(1.04);filter:saturate(1.06);}
.blog-post-body {padding: 20px;display: flex;flex-direction: column;gap: 10px;}
.blog-post-meta {display: flex;flex-wrap: wrap;gap: 10px;font-size: 12px;color: var(--blog-muted);}
.blog-post-meta span,.blog-post-meta-link {background: var(--blog-accent-soft);color: #185f33;border-radius: 999px;padding: 4px 10px;font-weight: 600;display:inline-flex;align-items:center;text-decoration:none;}
.blog-post-meta-link:hover {color:#0f5d2a;background:#dff1e4;}
.blog-post-body h2 {font-size: clamp(1.1rem, 1.6vw, 1.45rem);line-height: 1.4;font-weight: 800;}
.blog-post-title-link {color:inherit;text-decoration:none;}
.blog-post-title-link:hover {color:#14612e;}
.blog-post-body p {color: #3e4d45;line-height: 1.75;}
.blog-post-link {margin-top:auto;display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;max-width:100%;gap:8px;font-weight:800;color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,var(--blog-accent),var(--bitt-color-accent-2));box-shadow:0 10px 24px rgba(27,127,58,.24);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;position:relative;overflow:hidden;isolation:isolate;}
.blog-post-link::after {content:'→';font-size:14px;transition:transform .22s ease;}
.blog-post-link::before {content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%);transform:translateX(-120%);transition:transform .42s ease;z-index:-1;}
.blog-post-card:hover .blog-post-link::before {transform:translateX(0);}
.blog-post-link:hover {color:#fff;transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 14px 26px rgba(27,127,58,.3);}
.blog-post-link:hover::after {transform:translateX(2px);}
.blog-detail-layout {display: grid;grid-template-columns: minmax(0, 1fr);gap: 18px;}
.blog-detail-gap {margin-top: 18px;}
.blog-article {padding: 24px;}
.blog-article-cover {width: 100%;border-radius: 16px;margin-bottom: 20px;}
.blog-article h2,.blog-article h3 {color: #142319;font-weight: 850;margin: 18px 0 8px;line-height: 1.35;}
.blog-article h2 {font-size: clamp(1.2rem, 1.7vw, 1.6rem);}
.blog-article h3 {font-size: clamp(1.06rem, 1.3vw, 1.3rem);}
.blog-article p,.blog-article li {color: #33433b;line-height: 1.85;}
.blog-article ul {margin: 8px 0 8px 18px;list-style: disc;}
.blog-article blockquote {margin: 14px 0;border-left: 4px solid var(--blog-gold);background: #fff9ea;color: #59430a;border-radius: 10px;padding: 14px 16px;font-weight: 600;}
.blog-sidebar {align-self: start;}
.sidebar-box {padding: 18px;}
.sidebar-box h3 {font-size: 1.05rem;font-weight: 800;color: #183326;margin-bottom: 12px;}
.toc-nav {display: flex;flex-direction: column;gap: 8px;position:relative;padding-left:10px;}
.toc-nav::before {content:'';position:absolute;left:2px;top:2px;bottom:2px;width:2px;background:linear-gradient(to bottom, rgba(27,127,58,.25), rgba(27,127,58,.05));border-radius:999px;}
.toc-link {display: grid;grid-template-columns:12px minmax(0,1fr);align-items:start;column-gap:8px;font-size: 14px;line-height: 1.45;color: #4b5c53;text-decoration: none;border-left: 2px solid transparent;padding-left: 10px;transition: all .2s ease;}
.toc-dot {width:8px;height:8px;border-radius:999px;background:#c6d4cb;margin-top:6px;box-shadow:0 0 0 3px #fff;transition:all .2s ease;}
.toc-link.is-read .toc-dot {background:var(--bitt-color-accent-2);}
.toc-link.active .toc-dot {background:var(--blog-gold);box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(247,195,46,.22);}
.toc-link.active,.toc-link:hover {color: var(--blog-accent);border-left-color: var(--blog-accent);}
.toc-h3 {padding-left: 22px;font-size: 13px;}

.inline-cta {margin: 22px 0;border:1px solid rgba(27,127,58,.18);border-radius:16px;background: linear-gradient(130deg, #f8fff9, #eef8f0);padding:16px;}
.inline-cta-kicker {font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blog-accent);font-weight:800;}
.inline-cta h3 {margin:6px 0 4px;color:#173224;font-size:1.12rem;font-weight:900;line-height:1.35;}
.inline-cta p {color:#365145;line-height:1.7;}
.inline-cta-actions {margin-top:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.inline-cta-btn {display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,var(--blog-accent),var(--bitt-color-accent-2));color:#fff;font-weight:800;text-decoration:none;}
.inline-cta-link {font-size:14px;font-weight:700;color:var(--blog-accent);text-decoration:none;}
.inline-cta-link:hover {text-decoration:underline;}
.related-list {display: flex;flex-direction: column;gap: 10px;}
.related-item {display: block;border: 1px solid var(--blog-border);border-radius: 12px;background: var(--blog-surface-strong);padding: 12px;text-decoration: none;transition: all .22s ease;}
.related-item:hover {transform: translateY(-1px);border-color:var(--blog-accent)22;box-shadow:0 8px 18px rgba(18,34,24,.08);}
.related-item strong {display: block;color: #1d3025;line-height: 1.45;font-size: 14px;}
.related-item span {display: block;margin-top: 6px;font-size: 12px;color: #6a7b72;}
.related-item-media {display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center;}
.related-thumb {width:84px;height:64px;object-fit:cover;border-radius:10px;border:1px solid rgba(18,34,24,.08);background:#f2f4f5;}
.author-box {margin-top: 26px;border: 1px solid var(--blog-border);border-radius: 16px;background: linear-gradient(140deg, var(--blog-surface-strong), #f3f8f4);padding: 16px;display: flex;gap: 14px;}
.author-avatar {width: 52px;height: 52px;border-radius: 999px;background: linear-gradient(135deg, var(--blog-accent), var(--blog-gold));color: #fff;display: grid;place-items: center;font-weight: 900;}
.author-name {font-size: 1rem;font-weight: 800;color: #143021;}
.author-name a {color: inherit;text-decoration: none;border-bottom: 1px dashed rgba(20,48,33,.32);}
.author-name a:hover {color: var(--blog-accent);border-bottom-color:var(--blog-accent);}
.author-role {font-size: 13px;color: #4f6558;margin-top: 2px;}
.author-bio {margin-top: 8px;font-size: 14px;color: #3f5448;line-height: 1.65;}
@media (min-width: 992px) {.blog-detail-layout {grid-template-columns: minmax(0, 1fr) 320px;}.blog-sidebar {position: sticky;top: 95px;}}
@media (max-width: 991px) {.blog-post-card {grid-template-columns: minmax(0, 1fr);} .blog-category-grid.is-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} .blog-post-thumb {min-height: 180px;}}
.blog-pagination {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px;}
.page-link {display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--blog-border);background:#fff;color:#274437;font-weight:700;text-decoration:none;transition:all .2s ease;}
.page-link:hover {border-color:var(--blog-accent);color:var(--blog-accent);transform:translateY(-1px);}
.page-link.is-active {background:var(--blog-accent);color:#fff;border-color:var(--blog-accent);}
.page-dots {color:#5c6f64;font-weight:700;padding:0 4px;}

@media (max-width: 640px) {.blog-hero,.blog-article,.sidebar-box {border-radius: 16px;} .blog-hero,.blog-article {padding: 16px;} .blog-category-grid.is-grid {grid-template-columns: minmax(0, 1fr);} .page-link {height:36px;min-width:36px;padding:0 10px;font-size:13px;}}