body, html {
    height: 100%; margin: 0; font-family: 'Inter', sans-serif; background-color: #f8f9fa;
}
#loader-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color:rgb(255 255 255 / 70%); display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.75s, visibility 0.75s;
    opacity: 1; visibility: visible;
}
#loader-wrapper.hidden { opacity: 0; visibility: hidden; }
.loader {
    width: 50px; height: 50px; border: 5px solid #f3f3f3;
    border-top: 5px solid #468fea; border-radius: 50%;
    animation: spin 1s linear infinite; margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.custom-css-1 {
    border-radius: 0 0 1rem 1rem; border: none;
    box-shadow: 0 0 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.play-button { width: 110px; }
.modal-content { background-color: #f8f9fa; border-radius: 1rem; border: none; }
.guide-container { text-align: center; padding: 1.5rem; }
#lung-animation-svg { width: 180px; height: 180px; margin: 1rem auto; transition: transform 4s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
#lung-animation-svg.breathing-in { transform: scale(1.2); }
#lung-animation-svg.breathing-out { transform: scale(1); }
#guide-text { font-size: 1rem; font-weight: 700; color: #343a40; min-height: 3.5rem; display: flex; align-items: center; justify-content: center; }
#countdown-timer { font-size: 3rem; font-weight: 800; color: #468fea; margin-top: 0.5rem; }
.timeline-wrapper { margin-bottom: 1.5rem; }
#timeline-container { width: 100%; height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; }
#timeline-fill { width: 0%; height: 100%; background-color: #468fea; border-radius: 4px; transition: width 1s linear; }
#timeline-text { font-size: 0.8rem; color: #6c757d; text-align: end; margin-top: 0.25rem; }
.table-hover > tbody > tr:hover > * { background-color: #f0f6ff; }
.table th { font-weight: 600; }
.page-link { color: #468fea; }
.page-item.active .page-link { background-color: #468fea; border-color: #468fea; }
.tapping-video-frame { object-fit: contain; border-radius: 1rem; }