/* Background blur effect  */
 .blur-active {
     filter: blur(5px);
     pointer-events: none;
     user-select: none;
 }
 /* Slide-in transition */
 .slide-menu {
     transform: translateX(-100%);
     transition: transform 0.35s ease;
 }
 .slide-menu.open {
     transform: translateX(0);
 }
     @keyframes slide-scroll {
         0% {
             transform: translateX(0);
         }
         100% {
             transform: translateX(-50%);
         }
     }
     
     /* Active nav link */
     .nav-active {
         color: #48BEEC;
     }
     /* Compact training material cards */
     .card-sm img {
         height: 8.5rem; /* a bit smaller than before */
     }
     .card-sm h3 {
         font-size: 0.9rem; /* smaller than text-lg */
     }
     .card-sm p,
     .card-sm span {
         font-size: 0.65rem; /* mobile: further reduced */
     }
     /* Tablet and desktop: larger fonts */
     @media (min-width: 640px) {
         .card-sm p,
         .card-sm span {
             font-size: 0.8rem;
         }
     }
     /* Filter sidebar smaller text */
     .filter-sidebar h2 {
         font-size: 0.95rem; /* smaller heading */
     }
     .filter-sidebar span,
     .filter-sidebar label,
     .filter-sidebar button {
         font-size: 0.8rem;
     }
     /* Corner crown badge on cards */
     .corner-badge {
         position: absolute;
         top: 0;
         right: 0;
         width: 42px;
         height: 42px;
         background: linear-gradient(135deg, #FFDC21, #FB8C0A);
         border-bottom-left-radius: 999px;
         border-top-right-radius: 0.75rem;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .corner-badge i {
         color: #ffffff;
     }
     /* Filled style for selected footer social icons */
     .footer-social a.fill-icon .lucide {
         fill: currentColor;
         stroke-width: 0;
     }
 /* Sticky header & progress card styles */
 /* Sticky header: sits on top with slight translucency and blur */
     #mainPage {
         position: fixed;
         top: var(--promo-height, 0px);
         left: 0;
         right: 0;
         z-index: 30;
     background: rgba(255,255,255,0.95);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 1px 6px rgba(16,24,40,0.04);
 }