.pp-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: .75rem; font-weight: 600;
    background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6;
    flex-shrink: 0;
}
.pp-dot.active  { background: #dc3545; color: #fff; border-color: #dc3545; }
.pp-dot.done    { background: #198754; color: #fff; border-color: #198754; }

[data-bs-theme="dark"] .pp-dot {
    background: var(--bs-gray-800);
    color: var(--bs-gray-300);
    border-color: var(--bs-gray-700);
}