a, button { -webkit-tap-highlight-color: transparent; outline: none; } 
		a:focus, button:focus { outline: none; box-shadow: none; } 
        /* Prevents background scroll when modal is open */
        body.modal-open {
            overflow: hidden;
        }
        
        a {
            text-decoration: none;
        }

        /* --- Modal Styles --- */
        .modal-overlay {
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0; /* from inset-0 */
            background-color: rgba(0, 0, 0, 0.6); /* from bg-black bg-opacity-60 */
            display: flex; /* This is the default state, JS toggles 'hidden' */
            align-items: center;
            justify-content: center;
            padding: 1rem; /* from p-4 */
            z-index: 10000; /* from z-50 */
        }
        
        .modal-overlay.hidden {
            display: none;
        }
        
        .modal-content {
            background-color: #fff; /* from bg-white */
            border-radius: 1rem; /* from rounded-2xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* from shadow-2xl */
            max-width: 56rem; /* from max-w-4xl */
            width: 100%; /* from w-full */
            max-height: 90vh; /* from max-h-[90vh] */
            display: flex;
            flex-direction: column; /* from flex-col */
            overflow: hidden; /* Ensures children respect the border-radius */
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between; /* from justify-between */
            align-items: center;
            padding: 1rem; /* from p-4 */
            border-bottom: 1px solid #E5E7EB; /* from border-b */
        }
        
        .modal-title {
            font-size: 1.25rem; /* from text-xl */
            font-weight: 400; /* from font-bold */
            color: #1F2937; /* from text-gray-800 */
        }

		.modal-close-btn {
			font-size: 1.5rem; /* from text-2xl */
			color: #9CA3AF; /* from text-gray-400 */
			background: none;
			border: 1px solid #D1D5DB; /* light gray border */
			cursor: pointer;
			line-height: 1;
			border-radius: 9999px; /* makes it circular */
			width: 2rem;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease-in-out;
			user-select: none;
		}

		.modal-close-btn:hover {
			color: #DC2626; /* red text */
			border-color: #DC2626; /* red border */
		}

        .modal-body {
            padding: 1.5rem; /* from p-6 */
            overflow-y: auto; /* from overflow-y-auto */
        }

        /* --- Modal Body Content --- */
        .description-text {
            font-size: 1rem; /* from text-base */
            color: #374151; /* from text-gray-700 */
            margin-bottom: 1.25rem; /* from mb-5 */
			text-align: center;
        }

        .highlight {
            background-color: #FEF08A; /* from bg-yellow-200 */
            padding: 0 0.25rem; /* from px-1 */
            border-radius: 0.25rem; /* from rounded */
			text-align: center;
        }
        
        .update-info {
            font-size: 0.875rem; /* from text-sm */
            color: #6B7280; /* from text-gray-500 */
			text-align: center;
        }
        
        .modal-footer {
            margin-top: 1.5rem; /* from mt-6 */
            font-size: 0.875rem; /* from text-sm */
            text-align: center; /* from text-center */
            color: #6B7280; /* from text-gray-500 */
        }
        
        .footer-link {
            color: #2563EB; /* from text-blue-600 */
        }
        
        .footer-link:hover {
            text-decoration: none; /* from hover:underline */
        }

        /* --- Sets Grid --- */
        .sets-grid {
            display: grid;
            gap: 0.5rem; /* from gap-2 */
            grid-template-columns: repeat(5, 1fr); /* from grid-cols-6 */
        }

        /* Responsive Grid Columns */
        @media (min-width: 640px) {
            .sets-grid { grid-template-columns: repeat(8, 1fr); } /* from sm:grid-cols-8 */
        }
        @media (min-width: 768px) {
            .sets-grid { grid-template-columns: repeat(10, 1fr); } /* from md:grid-cols-10 */
        }
        @media (min-width: 1024px) {
            .sets-grid { grid-template-columns: repeat(12, 1fr); } /* from lg:grid-cols-12 */
        }

        /* --- Dynamically Generated Buttons --- */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem; /* from p-2 */
            border: 1px solid #D1D5DB; /* default border */
            border-radius: 0.375rem; /* from rounded-md */
            text-align: center;
            font-size: 0.875rem; /* from text-sm */
            font-weight: 400; /* from font-semibold */
            transition: all 0.2s ease-in-out; /* from transition-colors duration-200 */
            cursor: pointer;
			user-select: none;
        }

        .btn-regular {
            color: #374151; /* from text-gray-700 */
            background-color: #fff; /* from bg-white */
        }
        
        .btn-regular:hover {
            background-color: #F3F4F6; /* from hover:bg-gray-100 */
            border-color: #9CA3AF; /* from hover:border-gray-400 */
        }

        .btn-free {
            color: #166534; /* from text-green-800 */
            background-color: #DCFCE7; /* from bg-green-100 */
            border-color: #86EFAC; /* from border-green-300 */
            position: relative; /* for badge positioning */
        }
        
        .btn-free:hover {
            background-color: #BBF7D0; /* from hover:bg-green-200 */
        }

		.modal-title,
		.description-text,
		.modal-footer {
			font-family: 'Tiro Bangla', serif;
		}

		.btn,
		.free-badge {
			font-family: 'Open Sans', sans-serif;
		}

		.free-badge {
			position: absolute;
			top: -0.5rem; /* same as before */
			left: 50%;
			transform: translateX(-50%);
			background-color: #22C55E;
			color: #fff;
			font-size: 8px;
			font-weight: 400;
			padding: 2px 6px;
			border-radius: 9999px;
		}