body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.step-card {
    cursor: pointer;
    transition: 0.3s;
}
.step-complete {
    border-left: 5px solid #28a745;
}
.step-active {
    border-left: 5px solid #0d6efd;
}
.step-pending {
    border-left: 5px solid #6c757d;
}
.arrow {
    font-size: 1.5rem;
}
#docViewer {
    white-space: pre-wrap;
}
.badge {
    font-size: 0.8rem;
}

/* Badge panel */
.badge-card {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 5px solid #ccc;
}
.badge-card.earned {
    border-left-color: #28a745;
}
.badge-icon {
    font-size: 2rem;
    margin-right: 10px;
}
.badge-status {
    font-size: 0.8rem;
    color: #666;
}

/* Badge popup */
.badge-popup {
    position: fixed;
    bottom: -200px;
    right: 20px;
    background: #222;
    color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 9999;
}
.badge-popup.show {
    bottom: 20px;
    opacity: 1;
}