/* ===== TOC DESKTOP ===== */
    .toc-sidebar {
        position: sticky;
        top: 100px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .toc-sidebar::-webkit-scrollbar { display: none; }

    .toc-link {
        display: block;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--c-primary);
        background-color: rgba(248,246,241,0.8);
        
        text-decoration: none;
        line-height: 1.4;
        transition: all 0.2s ease;
    }
    .toc-link:hover {
        background-color: var(--c-secondary);
        color: #f7f3ec;
    }
    .toc-link.active {
        background-color: var(--c-primary);
        color: #f7f3ec;
        font-weight: 600;
    }
    .toc-link.toc-h3 {
        padding-left: 28px;
        font-size: 13px;
    }

    /* ===== ARTICLE CONTENT ===== */
    .article-body h2,
    .article-body h3 {
        scroll-margin-top: 110px;
    }
    .article-body h2 {
        font-size: clamp(22px, 2.5vw, 30px);
        font-weight: 500;
        color: var(--c-primary);
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    .article-body h3 {
        font-size: clamp(18px, 2vw, 22px);
        font-weight: 500;
        color: var(--c-primary);
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        line-height: 1.35;
    }
    .article-body p {
        font-size: 15px;
        line-height: 1.8;
        color: var(--c-primary);
        
        margin-bottom: 1.2rem;
    }
    .article-body img {
        width: 100%;
        height: auto;
        margin: 1.5rem 0;
    }
    .article-body a {
        color: var(--c-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .article-body ul, .article-body ol {
        padding-left: 1.5rem;
        margin-bottom: 1.2rem;
    }
    .article-body li {
        font-size: 15px;
        line-height: 1.8;
        color: var(--c-primary);
        
        margin-bottom: 0.4rem;
    }
    .article-body blockquote {
        border-left: 3px solid var(--c-secondary);
        padding: 0.75rem 1.25rem;
        margin: 1.5rem 0;
        background: rgba(248,246,241,0.1);
        
        font-style: italic;
        
    }

    /* ===== MOBILE READING PROGRESS BAR (fixed bottom) ===== */
    .mobile-reading-bar {
        position: fixed;
        bottom: 10px;
        left: 10px;
        right: 10px;
        
        overflow: hidden;
        z-index: 51;
        background: var(--c-primary);
        color: #f7f3ec;
        padding: 16px 16px 20px 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        transform: translateY(0);
        transition: transform 0.3s ease;
        cursor: pointer;
    }
    .mobile-reading-bar.hidden-bar {
        transform: translateY(100%);
    }

    .toc-mobile-bar {
        position: fixed;
        bottom: 80px; /* above the reading bar */
        left: 16px;
        right: 16px;
        z-index: 50;
        background: rgba(247, 243, 236,0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(36,66,179,0.12);
        
        padding: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transform: translateY(150%);
        opacity: 0;
        transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        pointer-events: none;
    }
    .toc-mobile-bar.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .toc-mobile-scroll {
        display: flex;
        gap: 8px;
        padding: 14px 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .toc-mobile-scroll::-webkit-scrollbar { display: none; }
    .toc-mobile-item {
        flex-shrink: 0;
        padding: 7px 14px;
        
        background: rgba(36,66,179,0.07);
        color: var(--c-primary);
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.2s ease;
    }
    .toc-mobile-item:hover,
    .toc-mobile-item.active {
        background: var(--c-primary);
        color: #f7f3ec;
    }

    /* hide mobile toc on desktop */
    @media (min-width: 768px) {
        .toc-mobile-bar,
        .toc-mobile-toggle { display: none !important; }
    }
    /* hide desktop toc on mobile */
    @media (max-width: 767px) {
        .toc-sidebar-col { display: none !important; }
    }

    /* progress bar */
    #read-progress {
        position: fixed;
        top: 0; left: 0;
        height: 3px;
        background: var(--c-primary);
        z-index: 9999;
        width: 0%;
        transition: width 0.1s linear;
    }