.bd-page{padding:96px 0 80px;max-width:1160px;margin:0 auto}
.bd-back{margin-bottom:36px;display:inline-flex;align-items:center;gap:7px;color:#6b7280;font-size:.87rem;font-weight:600;transition:color .15s}
.bd-back:hover{color:var(--p,#7c3aed)}
.bd-back-icon{width:15px;height:15px;transition:transform .15s}
.bd-back:hover .bd-back-icon{transform:translateX(-3px)}
.bd-layout{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
.bd-hero-banner{margin-bottom:32px;width:100%;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--p,#7c3aed) 0%,#a78bfa 100%)}
.bd-hero-has-img{background:none}
.bd-hero-img{width:100%;height:100%;object-fit:cover;display:block}
.bd-hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.25}
.bd-hero-placeholder-icon{width:64px;height:64px}
.bd-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,#00000026)}
.bd-meta{margin-bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bd-tag{padding:4px 12px;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--p,#7c3aed);background:var(--p-soft,#f5f3ff);border-radius:99px;text-transform:uppercase}
.bd-meta-sep{width:3px;height:3px;border-radius:50%;background:#d1d5db;flex-shrink:0}
.bd-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:#9ca3af}
.bd-meta-icon{width:12px;height:12px}
.bd-title{margin-bottom:20px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.4px;line-height:1.25;color:#111827}
.bd-divider{margin-bottom:32px;height:2px;background:linear-gradient(90deg,var(--p,#7c3aed),transparent);border-radius:99px}
.bd-body{font-size:1rem;line-height:1.9;color:#374151}
.bd-body h1,.bd-body h2,.bd-body h3{margin:1.8em 0 .6em;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#111827;line-height:1.3}
.bd-body h2{font-size:1.35rem}
.bd-body h3{font-size:1.1rem}
.bd-body p{margin-bottom:1.1em}
.bd-body ul,.bd-body ol{padding-left:1.6em;margin-bottom:1.1em}
.bd-body li{margin-bottom:.4em}
.bd-body a{color:var(--p,#7c3aed);text-decoration:underline;text-underline-offset:3px}
.bd-body blockquote{padding:14px 20px;margin:1.5em 0;border-left:3px solid var(--p,#7c3aed);background:var(--p-soft,#f5f3ff);border-radius:0 12px 12px 0;color:#4b5563;font-style:italic}
.bd-body img{margin:1.2em 0;max-width:100%;border-radius:12px;display:block}
.bd-body code{padding:2px 7px;background:#f3f4f6;border-radius:5px;font-size:.88em}
.bd-body pre{padding:20px;margin:1.5em 0;background:#1e1e2e;color:#cdd6f4;border-radius:12px;overflow-x:auto;font-size:.88rem;line-height:1.7}
.bd-no-content{color:#9ca3af;font-style:italic}
.bd-share{padding-top:28px;margin-top:40px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1.5px solid #f1f5f9}
.bd-share-label{font-size:.82rem;font-weight:600;color:#6b7280}
.bd-share-btn{padding:7px 16px;display:inline-flex;align-items:center;gap:6px;border-radius:99px;font-size:.8rem;font-weight:600;border:1.5px solid #e5e7eb;background:#fff;color:#374151;cursor:pointer;transition:all .15s;text-decoration:none}
.bd-share-btn:hover{border-color:var(--p,#7c3aed);color:var(--p,#7c3aed);background:var(--p-soft,#f5f3ff)}
.bd-share-facebook:hover{border-color:#1877f2;color:#1877f2;background:#e7f3ff}
.bd-share-x:hover{border-color:#000000;color:#000000;background:#f0f0f0}
.bd-share-linkedin:hover{border-color:#0a66c2;color:#0a66c2;background:#e7f3ff}
.bd-share-instagram:hover{border-color:#e4405f;color:#e4405f;background:#ffe7ec}
.bd-share-copy:hover{border-color:var(--p,#7c3aed);color:var(--p,#7c3aed);background:var(--p-soft,#f5f3ff)}
.bd-not-found{padding:80px 20px;text-align:center}
.bd-not-found-icon{margin:0 auto 20px;width:72px;height:72px;border-radius:20px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af}
.bd-not-found-icon i{width:32px;height:32px}
.bd-not-found h2{margin-bottom:8px;font-size:1.4rem;font-weight:800;color:#374151}
.bd-not-found p{color:#9ca3af;font-size:.9rem}
.bd-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
.bd-sidebar-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:20px;overflow:hidden}
.bd-sidebar-head{padding:16px 20px 14px;border-bottom:1.5px solid #f1f5f9;display:flex;align-items:center;gap:10px}
.bd-sidebar-head-icon{width:30px;height:30px;border-radius:8px;background:var(--p-soft,#f5f3ff);color:var(--p,#7c3aed);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bd-sidebar-head-icon i{width:14px;height:14px}
.bd-sidebar-title{font-size:.78rem;font-weight:700;color:#111827;text-transform:uppercase;letter-spacing:.07em}
.bd-recent-list{padding:4px 0}
.bd-recent-item{padding:12px 20px;display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;transition:background .15s;border-bottom:1px solid #f9fafb}
.bd-recent-item:last-child{border-bottom:none}
.bd-recent-item:hover{background:var(--p-soft,#f5f3ff)}
.bd-recent-thumb{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,var(--p,#7c3aed),#a78bfa);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bd-recent-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bd-recent-thumb-icon{width:20px;height:20px;color:#fff;opacity:.6}
.bd-recent-info{flex:1;min-width:0}
.bd-recent-title{margin-bottom:4px;font-size:.84rem;font-weight:600;color:#111827;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-recent-date{font-size:.74rem;color:#9ca3af}
.bd-recent-empty{padding:20px;text-align:center;color:#9ca3af;font-size:.85rem}
.bd-sidebar-cta-card{border-color:color-mix(in srgb,var(--p,#7c3aed) 20%,transparent);background:var(--p-soft,#f5f3ff)}
.bd-sidebar-cta-inner{padding:24px 20px;text-align:center}
.bd-sidebar-cta-icon{margin:0 auto 14px;width:44px;height:44px;border-radius:14px;background:var(--p,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center}
.bd-sidebar-cta-icon i{width:20px;height:20px}
.bd-sidebar-cta-inner h4{margin-bottom:6px;font-size:.95rem;font-weight:800;color:#111827}
.bd-sidebar-cta-inner p{margin-bottom:16px;font-size:.82rem;color:#6b7280;line-height:1.5}
@media(max-width:1024px){
.bd-layout{grid-template-columns:1fr 260px;gap:32px}
}
@media(max-width:768px){
.bd-page{padding:80px 15px 60px}
.bd-layout{grid-template-columns:1fr;gap:40px}
.bd-sidebar{position:static;flex-direction:row;overflow-x:auto;gap:16px;padding-bottom:4px}
.bd-sidebar::-webkit-scrollbar{display:none}
.bd-sidebar-card{flex-shrink:0;min-width:280px}
.bd-hero-banner{border-radius:16px}
.bd-title{font-size:1.5rem}
.bd-back{margin-bottom:24px}
.bd-share{padding-top:20px;margin-top:28px}
}
@media(max-width:540px){
.bd-page{padding:72px 15px 48px}
.bd-hero-banner{height:auto;border-radius:12px;margin-bottom:20px}
.bd-title{margin-bottom:14px;font-size:1.3rem}
.bd-divider{margin-bottom:20px}
.bd-body{font-size:.93rem}
.bd-body h2{font-size:1.15rem}
.bd-share{gap:8px}
.bd-share-btn{padding:6px 12px;font-size:.76rem}
.bd-back{margin-bottom:20px;font-size:.82rem}
.bd-sidebar{flex-direction:column}
.bd-sidebar-card{min-width:unset}
}


/* ═══════════════════════════════════════════════════════════════════════
   DARK THEME SUPPORT FOR BLOG DETAIL PAGE
   Applied via: html[data-theme="dark"]
═══════════════════════════════════════════════════════════════════════ */


html[data-theme="dark"] .bd-back{color:#A0A0A0!important}
html[data-theme="dark"] .bd-back:hover{color:var(--p,#7c3aed)!important}
html[data-theme="dark"] .bd-tag{color:var(--p,#7c3aed)!important;background:var(--p-light,#ede9fe)!important}
html[data-theme="dark"] .bd-meta-item{color:#A0A0A0!important}
html[data-theme="dark"] .bd-title{color:#EDEDED!important}
html[data-theme="dark"] .bd-divider{background:linear-gradient(90deg,var(--p,#7c3aed),transparent)!important}
html[data-theme="dark"] .bd-body{color:#A0A0A0!important}
html[data-theme="dark"] .bd-body h1,html[data-theme="dark"] .bd-body h2,html[data-theme="dark"] .bd-body h3{color:#EDEDED!important}
html[data-theme="dark"] .bd-body a{color:var(--p,#7c3aed)!important}
html[data-theme="dark"] .bd-body blockquote{background:var(--p-light,#ede9fe)!important;border-left-color:var(--p,#7c3aed)!important;color:#A0A0A0!important}
html[data-theme="dark"] .bd-body code{background:#2A2A2A!important;color:#EDEDED!important}
html[data-theme="dark"] .bd-body pre{background:#1C1C1C!important;color:#EDEDED!important}
html[data-theme="dark"] .bd-no-content{color:#A0A0A0!important}
html[data-theme="dark"] .bd-share{border-top-color:#2A2A2A!important}
html[data-theme="dark"] .bd-share-label{color:#A0A0A0!important}
html[data-theme="dark"] .bd-share-btn{border-color:#2A2A2A!important;background:#1C1C1C!important;color:#EDEDED!important}
html[data-theme="dark"] .bd-share-btn:hover{border-color:var(--p,#7c3aed)!important;color:var(--p,#7c3aed)!important;background:var(--p-light,#ede9fe)!important}
html[data-theme="dark"] .bd-share-facebook:hover{border-color:#1877f2!important;color:#1877f2!important;background:#0d1829!important}
html[data-theme="dark"] .bd-share-x:hover{border-color:#EDEDED!important;color:#EDEDED!important;background:#2A2A2A!important}
html[data-theme="dark"] .bd-share-linkedin:hover{border-color:#0a66c2!important;color:#0a66c2!important;background:#0d1829!important}
html[data-theme="dark"] .bd-share-instagram:hover{border-color:#e4405f!important;color:#e4405f!important;background:#2A1822!important}
html[data-theme="dark"] .bd-share-copy:hover{border-color:var(--p,#7c3aed)!important;color:var(--p,#7c3aed)!important;background:var(--p-light,#ede9fe)!important}
html[data-theme="dark"] .bd-not-found-icon{background:#2A2A2A!important;color:#A0A0A0!important}
html[data-theme="dark"] .bd-not-found h2{color:#EDEDED!important}
html[data-theme="dark"] .bd-not-found p{color:#A0A0A0!important}
html[data-theme="dark"] .bd-sidebar-card{background:#1C1C1C!important;border-color:#2A2A2A!important}
html[data-theme="dark"] .bd-sidebar-head{border-bottom-color:#2A2A2A!important}
html[data-theme="dark"] .bd-sidebar-head-icon{background:var(--p-light,#ede9fe)!important;color:var(--p,#7c3aed)!important}
html[data-theme="dark"] .bd-sidebar-title{color:#EDEDED!important}
html[data-theme="dark"] .bd-recent-item{color:#EDEDED!important;border-bottom-color:#2A2A2A!important}
html[data-theme="dark"] .bd-recent-item:hover{background:#242424!important}