:root { --brand: #0B276B; }
/* Title block */
.title-block { background: #EFF3FF; padding: 1.25rem 1.5rem; }

/* Share */
.share-btn { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; border: none;
display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
color: #212529; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.share-btn:hover { background: var(--brand); color: #fff; }

/* Article typography */
#article-body h2 { font-family: 'Satoshi'; font-size: 18px; line-height: 21px; font-weight: 700; color: rgb(11, 39, 107); }
#article-body p { font-family: 'Satoshi'; font-size: 16px; line-height: 24px; font-weight: 400; color: #000; }
#article-body a { color: #0d6efd; font-weight: 600; text-decoration: none; }
#article-body a:hover { text-decoration: underline; }
#article-body ul li { font-size: 16px; line-height: 1.7; color: #000; margin-bottom: .4rem; }
figcaption { font-size: 13px; color: #616161; font-style: italic; margin-top: .4rem; font-family: 'Satoshi'; }

/* TOC desktop */
#toc-desktop { position: sticky; top: 80px; }
.toc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem; color: #212529; margin-bottom: .25rem; font-family: 'Satoshi'; }
.toc-divider { border-top: 2px solid var(--brand); margin-bottom: .75rem; }
.toc-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.toc-list li a { color: rgb(11, 39, 107); text-decoration: none; display: block; padding: 4px 0; border-left: 3px solid transparent; padding-left: 8px; transition: border-color .2s, color .2s; }
.toc-list li a:hover, .toc-list li a.active { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }

/* TOC mobile sticky bar */
#toc-mobile {
display: none; position: fixed; top: 49px; left: 0; right: 0; z-index: 999;
background: rgba(255,255,255,0.97); backdrop-filter: blur(10px);
border-bottom: 1.5px solid #e4eaff;
box-shadow: 0 4px 24px rgba(11,39,107,0.10);
}

#toc-mobile .toc-bar {
display: flex; align-items: center; gap: 14px;
padding: 10px 18px; cursor: pointer; user-select: none;
}

/* Progress ring */
#toc-mobile .toc-ring-wrap { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
#toc-mobile .toc-ring-wrap svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
#toc-mobile .ring-bg { fill: none; stroke: #e4eaff; stroke-width: 3; }
#toc-mobile .ring-fill { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
#toc-mobile .toc-ring-label {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--brand); line-height: 1;
}
#toc-mobile .toc-ring-label span { font-size: 9px; color: #94a3b8; font-weight: 600; }

#toc-mobile .toc-bar-text { flex: 1; min-width: 0; }
#toc-mobile .toc-bar-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08rem; color: #94a3b8; line-height: 1; margin-bottom: 3px;
}
#toc-mobile .toc-bar-active {
font-size: 14px; font-weight: 700; color: var(--brand);
line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#toc-mobile .toc-chevron-btn {
width: 32px; height: 32px; border-radius: 50%; background: #EFF3FF;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background .2s, transform .25s;
}
#toc-mobile .toc-chevron-btn svg { transition: transform .25s; }
#toc-mobile .toc-chevron-btn.open { background: var(--brand); }
#toc-mobile .toc-chevron-btn.open svg { transform: rotate(180deg); }
#toc-mobile .toc-chevron-btn svg path { stroke: var(--brand); transition: stroke .2s; }
#toc-mobile .toc-chevron-btn.open svg path { stroke: #fff; }

/* Progress bar under header */
#toc-mobile .toc-progress-bar { height: 3px; background: #e4eaff; }
#toc-mobile .toc-progress-fill {
height: 100%; background: linear-gradient(90deg, #0B276B, #3b6fe8);
transition: width .3s ease; width: 0%;
}

/* Dropdown */
#toc-mobile .toc-dropdown {
max-height: 0; overflow: hidden;
transition: max-height .35s cubic-bezier(.4,0,.2,1);
background: #fff; border-top: 1px solid #e4eaff;
}
#toc-mobile .toc-dropdown.open { max-height: 400px; }
#toc-mobile .toc-dropdown-inner { padding: 8px 0; }

#toc-mobile .toc-dropdown a {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px; font-size: 14px; color: #555; text-decoration: none;
transition: background .15s, color .15s; position: relative;
}
#toc-mobile .toc-dropdown a::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: transparent; border-radius: 0 3px 3px 0; transition: background .2s;
}
#toc-mobile .toc-dropdown a:hover { background: #f5f7ff; color: var(--brand); }
#toc-mobile .toc-dropdown a.active { color: var(--brand); font-weight: 700; background: #EFF3FF; }
#toc-mobile .toc-dropdown a.active::before { background: var(--brand); }

#toc-mobile .step-num {
min-width: 26px; height: 26px; border-radius: 50%;
background: #e4eaff; color: var(--brand);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background .2s, color .2s;
}
#toc-mobile .toc-dropdown a.active .step-num { background: var(--brand); color: #fff; }

#toc-mobile .step-title { flex: 1; line-height: 1.3; }
#toc-mobile .step-check {
width: 18px; height: 18px; border-radius: 50%;
background: #e4eaff; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; opacity: 0; transition: opacity .2s;
}
#toc-mobile .toc-dropdown a.visited .step-check { opacity: 1; background: #d1fae5; }
#toc-mobile .toc-dropdown a.visited .step-check svg path { stroke: #059669; }

@media (max-width: 991.98px) { #toc-mobile { display: block; } #toc-desktop { display: none; } }

/* Related posts */
.related-link { font-family: 'Satoshi'; font-size: 18px; line-height: 21px; font-weight: 700; color: rgb(11, 39, 107); text-decoration: none; }
.related-link:hover { text-decoration: underline; }