/* ===== Spacing ===== */
.tw-m-0 { margin: 0; }
.tw-m-1 { margin: 0.25rem; }
.tw-m-2 { margin: 0.5rem; }
.tw-m-4 { margin: 1rem; }
.tw-mt-2 { margin-top: 0.5rem; }
.tw-mb-2 { margin-bottom: 0.5rem; }
.tw-ml-2 { margin-left: 0.5rem; }
.tw-mr-2 { margin-right: 0.5rem; }

.tw-p-0     { padding: 0rem; }
.tw-p-0\.5  { padding: 0.125rem; }
.tw-p-1     { padding: 0.25rem; }
.tw-p-1\.5  { padding: 0.375rem; }
.tw-p-2     { padding: 0.5rem; }
.tw-p-2\.5  { padding: 0.625rem; }
.tw-p-3     { padding: 0.75rem; }
.tw-p-3\.5  { padding: 0.875rem; }
.tw-p-4     { padding: 1rem; }
.tw-p-5     { padding: 1.25rem; }
.tw-p-6     { padding: 1.5rem; }
.tw-p-7     { padding: 1.75rem; }
.tw-p-8     { padding: 2rem; }
.tw-p-9     { padding: 2.25rem; }
.tw-p-10    { padding: 2.5rem; }
.tw-p-11    { padding: 2.75rem; }
.tw-p-12    { padding: 3rem; }
.tw-p-14    { padding: 3.5rem; }
.tw-p-16    { padding: 4rem; }
.tw-p-20    { padding: 5rem; }
.tw-p-24    { padding: 6rem; }
.tw-p-28    { padding: 7rem; }
.tw-p-32    { padding: 8rem; }
.tw-p-36    { padding: 9rem; }
.tw-p-40    { padding: 10rem; }
.tw-p-44    { padding: 11rem; }
.tw-p-48    { padding: 12rem; }
.tw-p-52    { padding: 13rem; }
.tw-p-56    { padding: 14rem; }
.tw-p-60    { padding: 15rem; }
.tw-p-64    { padding: 16rem; }
.tw-p-72    { padding: 18rem; }
.tw-p-80    { padding: 20rem; }
.tw-p-96    { padding: 24rem; }

.tw-pt-2 { padding-top: 0.5rem; }
.tw-pb-2 { padding-bottom: 0.5rem; }

/* ===== Width & Height ===== */
.tw-w-full { width: 100%; }
.tw-h-full { height: 100%; }
.tw-w-1\/2 { width: 50%; }
.tw-h-1\/2 { height: 50%; }
.tw-w-screen { width: 100vw; }
.tw-h-screen { height: 100vh; }

/* ===== Display ===== */
.tw-block { display: block; }
.tw-inline-block { display: inline-block; }
.tw-hidden { display: none; }


/* ===== Font Style ===== */
.tw-italic { font-style: italic; }
.tw-not-italic { font-style: normal; }

/* ===== Flex & Grid ===== */
.tw-flex { display: flex; }
.tw-inline-flex { display: inline-flex; }
.tw-flex-col { flex-direction: column; }
.tw-flex-row { flex-direction: row; }
.tw-items-center { align-items: center; }
.tw-items-start { align-items: flex-start; }
.tw-items-end { align-items: flex-end; }
.tw-justify-center { justify-content: center; }
.tw-justify-between { justify-content: space-between; }

.tw-grid { display: grid; }
.tw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-gap-2 { gap: 0.5rem; }
.tw-gap-4 { gap: 1rem; }

/* ===== Text ===== */
.tw-text-xs { font-size: 0.75rem; }     /* 12px */
.tw-text-sm { font-size: 0.875rem; }    /* 14px */
.tw-text-base { font-size: 1rem; }      /* 16px */
.tw-text-lg { font-size: 1.125rem; }    /* 18px */
.tw-text-xl { font-size: 1.25rem; }     /* 20px */
.tw-text-2xl { font-size: 1.5rem; }     /* 24px */
.tw-text-3xl { font-size: 1.875rem; }   /* 30px */
.tw-text-4xl { font-size: 2.25rem; }    /* 36px */

.tw-font-normal { font-weight: 400; }
.tw-font-bold { font-weight: 700; }
.tw-font-semibold { font-weight: 600; }

.tw-text-left { text-align: left; }
.tw-text-center { text-align: center; }
.tw-text-right { text-align: right; }

.tw-text-white { color: #fff; }
.tw-text-black { color: #000; }
.tw-text-gray-500 { color: #6b7280; }
.tw-text-red-500 { color: #ef4444; }
.tw-text-green-500 { color: #10b981; }
.tw-text-blue-500 { color: #3b82f6; }


.tw-leading-none     { line-height: 1; }
.tw-leading-tight    { line-height: 1.25; }
.tw-leading-snug     { line-height: 1.375; }
.tw-leading-normal   { line-height: 1.5; }
.tw-leading-relaxed  { line-height: 1.625; }
.tw-leading-loose    { line-height: 2; }

.tw-leading-3        { line-height: .75rem; }  /* 12px */
.tw-leading-4        { line-height: 1rem; }    /* 16px */
.tw-leading-5        { line-height: 1.25rem; } /* 20px */
.tw-leading-6        { line-height: 1.5rem; }  /* 24px */
.tw-leading-7        { line-height: 1.75rem; } /* 28px */
.tw-leading-8        { line-height: 2rem; }    /* 32px */
.tw-leading-9        { line-height: 2.25rem; } /* 36px */
.tw-leading-10       { line-height: 2.5rem; }  /* 40px */


.tw-hover\:bg-blue-600:hover { background-color: #2563eb; }
.tw-hover\:bg-red-600:hover { background-color: #dc2626; }

/* ===== Border ===== */
.tw-border { border: 1px solid #ccc; }
.tw-border-2 { border-width: 2px; }
.tw-border-gray-300 { border-color: #d1d5db; }
.tw-rounded { border-radius: 0.25rem; }
.tw-rounded-md { border-radius: 0.375rem; }
.tw-rounded-lg { border-radius: 0.5rem; }
.tw-rounded-full { border-radius: 9999px; }

.tw-border         { border-width: 1px; }
.tw-border-0       { border-width: 0px; }
.tw-border-2       { border-width: 2px; }
.tw-border-4       { border-width: 4px; }
.tw-border-8       { border-width: 8px; }

/* Specific Sides */
.tw-border-t       { border-top-width: 1px; }
.tw-border-r       { border-right-width: 1px; }
.tw-border-b       { border-bottom-width: 1px; }
.tw-border-l       { border-left-width: 1px; }

.tw-border-solid    { border-style: solid; }
.tw-border-dashed   { border-style: dashed; }
.tw-border-dotted   { border-style: dotted; }
.tw-border-double   { border-style: double; }
.tw-border-none     { border-style: none; }



.tw-border-transparent { border-color: transparent; }
.tw-border-black       { border-color: #000000; }
.tw-border-white       { border-color: #ffffff; }
.tw-border-gray-100    { border-color: #f3f4f6; }
.tw-border-gray-300    { border-color: #d1d5db; }
.tw-border-gray-500    { border-color: #6b7280; }
.tw-border-red-500     { border-color: #ef4444; }
.tw-border-green-500   { border-color: #22c55e; }
.tw-border-blue-500    { border-color: #3b82f6; }
.tw-border-yellow-500  { border-color: #eab308; }



/* ===== Border Radius ===== */
.tw-rounded-none { border-radius: 0; }
.tw-rounded-sm { border-radius: 0.125rem; }   /* 2px */
.tw-rounded { border-radius: 0.25rem; }       /* 4px */
.tw-rounded-md { border-radius: 0.375rem; }   /* 6px */
.tw-rounded-lg { border-radius: 0.5rem; }     /* 8px */
.tw-rounded-xl { border-radius: 0.75rem; }    /* 12px */
.tw-rounded-2xl { border-radius: 1rem; }      /* 16px */
.tw-rounded-3xl { border-radius: 1.5rem; }    /* 24px */
.tw-rounded-full { border-radius: 9999px; }   /* full rounded for circles */

/* ===== Border Radius - Specific Corners ===== */
.tw-rounded-t-none    { border-top-left-radius: 0; border-top-right-radius: 0; }
.tw-rounded-r-none    { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tw-rounded-b-none    { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tw-rounded-l-none    { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.tw-rounded-t         { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.tw-rounded-r         { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.tw-rounded-b         { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.tw-rounded-l         { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }

.tw-rounded-tl        { border-top-left-radius: 0.25rem; }
.tw-rounded-tr        { border-top-right-radius: 0.25rem; }
.tw-rounded-bl        { border-bottom-left-radius: 0.25rem; }
.tw-rounded-br        { border-bottom-right-radius: 0.25rem; }

/* ===== Shadow ===== */
.tw-shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.tw-shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.tw-shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }

/* ===== Position ===== */
.tw-relative { position: relative; }
.tw-absolute { position: absolute; }
.tw-fixed { position: fixed; }
.tw-top-0 { top: 0; }
.tw-left-0 { left: 0; }

/* ===== Font Weight ===== */
.tw-font-thin { font-weight: 100; }
.tw-font-extralight { font-weight: 200; }
.tw-font-light { font-weight: 300; }
.tw-font-normal { font-weight: 400; }
.tw-font-medium { font-weight: 500; }
.tw-font-semibold { font-weight: 600; }
.tw-font-bold { font-weight: 700; }
.tw-font-extrabold { font-weight: 800; }
.tw-font-black { font-weight: 900; }

/* ===== Letter Spacing ===== */
.tw-tracking-tighter { letter-spacing: -0.05em; }
.tw-tracking-tight { letter-spacing: -0.025em; }
.tw-tracking-normal { letter-spacing: 0; }
.tw-tracking-wide { letter-spacing: 0.025em; }
.tw-tracking-wider { letter-spacing: 0.05em; }
.tw-tracking-widest { letter-spacing: 0.1em; }

/* ===== List Style Image ===== */
.tw-list-image-none { list-style-image: none; }
.tw-list-image-check { list-style-image: url('check-icon.png'); }
.tw-list-image-star { list-style-image: url('star-icon.png'); }

/* ===== Line Height ===== */
.tw-leading-none { line-height: 1; }
.tw-leading-tight { line-height: 1.25; }
.tw-leading-snug { line-height: 1.375; }
.tw-leading-normal { line-height: 1.5; }
.tw-leading-relaxed { line-height: 1.625; }
.tw-leading-loose { line-height: 2; }


/* ===== Cursor & Transitions ===== */
.tw-cursor-pointer { cursor: pointer; }
.tw-transition { transition: all 0.3s ease; }
.tw-duration-300 { transition-duration: 300ms; }

/* ===== Buttons ===== */
.tw-btn {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.tw-btn:hover {
  background-color: #2563eb;
}

/* ===== Container ===== */
.tw-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1280px;
}
/* ===== Card ===== */
.tw-card {
  background-color: #ffffff;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
  padding: 1rem; /* p-4 */
  margin-bottom: 1rem; /* mb-4 */
  border: 1px solid #e5e7eb; /* light border */
  transition: transform 0.2s ease-in-out;
}
.tw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12); /* shadow-lg */
}

/* ===== Box Shadow ===== */
.tw-shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.tw-shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
              0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.tw-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.tw-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.tw-shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.tw-shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.tw-shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.tw-shadow-none {
  box-shadow: none;
}


.tw-opacity-0 { opacity: 0; }
.tw-opacity-5 { opacity: 0.05; }
.tw-opacity-10 { opacity: 0.1; }
.tw-opacity-20 { opacity: 0.2; }
.tw-opacity-25 { opacity: 0.25; }
.tw-opacity-30 { opacity: 0.3; }
.tw-opacity-40 { opacity: 0.4; }
.tw-opacity-50 { opacity: 0.5; }
.tw-opacity-60 { opacity: 0.6; }
.tw-opacity-70 { opacity: 0.7; }
.tw-opacity-75 { opacity: 0.75; }
.tw-opacity-80 { opacity: 0.8; }
.tw-opacity-90 { opacity: 0.9; }
.tw-opacity-95 { opacity: 0.95; }
.tw-opacity-100 { opacity: 1; }



/* ===== Background ===== */

/* === Red Shades === */
.tw-bg-red-100  { background-color: #fee2e2; }
.tw-bg-red-200  { background-color: #fecaca; }
.tw-bg-red-300  { background-color: #fca5a5; }
.tw-bg-red-400  { background-color: #f87171; }
.tw-bg-red-500  { background-color: #ef4444; }
.tw-bg-red-600  { background-color: #dc2626; }
.tw-bg-red-700  { background-color: #b91c1c; }
.tw-bg-red-800  { background-color: #991b1b; }
.tw-bg-red-900  { background-color: #7f1d1d; }

/* === Green Shades === */
.tw-bg-green-100 { background-color: #d1fae5; }
.tw-bg-green-200 { background-color: #a7f3d0; }
.tw-bg-green-300 { background-color: #6ee7b7; }
.tw-bg-green-400 { background-color: #34d399; }
.tw-bg-green-500 { background-color: #10b981; }
.tw-bg-green-600 { background-color: #059669; }
.tw-bg-green-700 { background-color: #047857; }
.tw-bg-green-800 { background-color: #065f46; }
.tw-bg-green-900 { background-color: #064e3b; }

/* === Blue Shades === */
.tw-bg-blue-100  { background-color: #dbeafe; }
.tw-bg-blue-200  { background-color: #bfdbfe; }
.tw-bg-blue-300  { background-color: #93c5fd; }
.tw-bg-blue-400  { background-color: #60a5fa; }
.tw-bg-blue-500  { background-color: #3b82f6; }
.tw-bg-blue-600  { background-color: #2563eb; }
.tw-bg-blue-700  { background-color: #1d4ed8; }
.tw-bg-blue-800  { background-color: #1e40af; }
.tw-bg-blue-900  { background-color: #1e3a8a; }

/* === Yellow Shades === */
.tw-bg-yellow-100 { background-color: #fef9c3; }
.tw-bg-yellow-200 { background-color: #fef08a; }
.tw-bg-yellow-300 { background-color: #fde047; }
.tw-bg-yellow-400 { background-color: #facc15; }
.tw-bg-yellow-500 { background-color: #eab308; }
.tw-bg-yellow-600 { background-color: #ca8a04; }
.tw-bg-yellow-700 { background-color: #a16207; }
.tw-bg-yellow-800 { background-color: #854d0e; }
.tw-bg-yellow-900 { background-color: #713f12; }

/* === Purple Shades === */
.tw-bg-purple-100 { background-color: #f3e8ff; }
.tw-bg-purple-200 { background-color: #e9d5ff; }
.tw-bg-purple-300 { background-color: #d8b4fe; }
.tw-bg-purple-400 { background-color: #c084fc; }
.tw-bg-purple-500 { background-color: #a855f7; }
.tw-bg-purple-600 { background-color: #9333ea; }
.tw-bg-purple-700 { background-color: #7e22ce; }
.tw-bg-purple-800 { background-color: #6b21a8; }
.tw-bg-purple-900 { background-color: #581c87; }


/* === Gray Shades === */
.tw-bg-gray-50   { background-color: #f9fafb; }
.tw-bg-gray-100  { background-color: #f3f4f6; }
.tw-bg-gray-200  { background-color: #e5e7eb; }
.tw-bg-gray-300  { background-color: #d1d5db; }
.tw-bg-gray-400  { background-color: #9ca3af; }
.tw-bg-gray-500  { background-color: #6b7280; }
.tw-bg-gray-600  { background-color: #4b5563; }
.tw-bg-gray-700  { background-color: #374151; }
.tw-bg-gray-800  { background-color: #1f2937; }
.tw-bg-gray-900  { background-color: #111827; }

.tw-bg-white {
  background-color: #ffffff;
}


.tw-m-0     { margin: 0rem; }
.tw-m-1     { margin: 0.25rem; }   /* 4px */
.tw-m-2     { margin: 0.5rem; }    /* 8px */
.tw-m-3     { margin: 0.75rem; }   /* 12px */
.tw-m-4     { margin: 1rem; }      /* 16px */
.tw-m-5     { margin: 1.25rem; }   /* 20px */
.tw-m-6     { margin: 1.5rem; }    /* 24px */
.tw-m-8     { margin: 2rem; }      /* 32px */
.tw-m-10    { margin: 2.5rem; }    /* 40px */
.tw-m-12    { margin: 3rem; }      /* 48px */
.tw-m-16    { margin: 4rem; }      /* 64px */
.tw-m-auto  { margin: auto; }


.tw-mx-0     { margin-left: 0; margin-right: 0; }
.tw-mx-1     { margin-left: 0.25rem; margin-right: 0.25rem; }
.tw-mx-2     { margin-left: 0.5rem; margin-right: 0.5rem; }
.tw-mx-3     { margin-left: 0.75rem; margin-right: 0.75rem; }
.tw-mx-4     { margin-left: 1rem; margin-right: 1rem; }
.tw-mx-auto  { margin-left: auto; margin-right: auto; }


.tw-my-0     { margin-top: 0; margin-bottom: 0; }
.tw-my-1     { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.tw-my-2     { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.tw-my-3     { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.tw-my-4     { margin-top: 1rem; margin-bottom: 1rem; }
.tw-my-auto  { margin-top: auto; margin-bottom: auto; }


/* Top */
.tw-mt-0  { margin-top: 0; }
.tw-mt-1  { margin-top: 0.25rem; }
.tw-mt-2  { margin-top: 0.5rem; }
.tw-mt-3  { margin-top: 0.75rem; }
.tw-mt-4  { margin-top: 1rem; }
.tw-mt-auto { margin-top: auto; }

/* Bottom */
.tw-mb-0  { margin-bottom: 0; }
.tw-mb-1  { margin-bottom: 0.25rem; }
.tw-mb-2  { margin-bottom: 0.5rem; }
.tw-mb-3  { margin-bottom: 0.75rem; }
.tw-mb-4  { margin-bottom: 1rem; }
.tw-mb-auto { margin-bottom: auto; }

/* Left */
.tw-ml-0  { margin-left: 0; }
.tw-ml-1  { margin-left: 0.25rem; }
.tw-ml-2  { margin-left: 0.5rem; }
.tw-ml-3  { margin-left: 0.75rem; }
.tw-ml-4  { margin-left: 1rem; }
.tw-ml-auto { margin-left: auto; }

/* Right */
.tw-mr-0  { margin-right: 0; }
.tw-mr-1  { margin-right: 0.25rem; }
.tw-mr-2  { margin-right: 0.5rem; }
.tw-mr-3  { margin-right: 0.75rem; }
.tw-mr-4  { margin-right: 1rem; }
.tw-mr-auto { margin-right: auto; }


/* ===== Font Family ===== */
.tw-font-sans { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
.tw-font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; }
.tw-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tw-font-roboto { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }

/* === tw-gap-* === */

.tw-gap-0     { gap: 0rem; }
.tw-gap-0\.5  { gap: 0.125rem; }
.tw-gap-1     { gap: 0.25rem; }
.tw-gap-1\.5  { gap: 0.375rem; }
.tw-gap-2     { gap: 0.5rem; }
.tw-gap-2\.5  { gap: 0.625rem; }
.tw-gap-3     { gap: 0.75rem; }
.tw-gap-3\.5  { gap: 0.875rem; }
.tw-gap-4     { gap: 1rem; }
.tw-gap-5     { gap: 1.25rem; }
.tw-gap-6     { gap: 1.5rem; }
.tw-gap-7     { gap: 1.75rem; }
.tw-gap-8     { gap: 2rem; }
.tw-gap-9     { gap: 2.25rem; }
.tw-gap-10    { gap: 2.5rem; }
.tw-gap-11    { gap: 2.75rem; }
.tw-gap-12    { gap: 3rem; }
.tw-gap-14    { gap: 3.5rem; }
.tw-gap-16    { gap: 4rem; }
.tw-gap-20    { gap: 5rem; }
.tw-gap-24    { gap: 6rem; }
.tw-gap-28    { gap: 7rem; }
.tw-gap-32    { gap: 8rem; }
.tw-gap-36    { gap: 9rem; }
.tw-gap-40    { gap: 10rem; }
.tw-gap-44    { gap: 11rem; }
.tw-gap-48    { gap: 12rem; }
.tw-gap-52    { gap: 13rem; }
.tw-gap-56    { gap: 14rem; }
.tw-gap-60    { gap: 15rem; }
.tw-gap-64    { gap: 16rem; }
.tw-gap-72    { gap: 18rem; }
.tw-gap-80    { gap: 20rem; }
.tw-gap-96    { gap: 24rem; }