/**
 * Minimal Tailwind CSS (Utility Classes)
 * This is a simplified version for basic styling
 */

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.bg-white { background-color: #fff; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-blue-500 { background-color: #3b82f6; }

.text-white { color: #fff; }
.text-gray-600 { color: #4b5563; }
.text-center { text-align: center; }

.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }

.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.flex { display: flex; }
.grid { display: grid; }
.gap-4 { gap: 1rem; }

.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }

.cursor-pointer { cursor: pointer; }