/* Reading Progress Bar */
.progress-container {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--border-color);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-container.visible {
    opacity: 1;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #0891b2; 
    transition: width 0.1s ease-out, background-color 0.3s ease;
}

/* Dark theme progress bar */
[data-theme="dark"] .progress-bar {
    background: var(--accent-beige); /* Beige in dark mode */
}

@media (max-width: 768px) {
    .progress-container {
        top: 63px;
    }
}