/* layout */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-1{flex:1}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* spacing */
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}

/* size */
.w-full{width:100%}
.w-12{width:3rem}
.w-32{width:8rem}
.w-80{width:20rem}
.w-11\/12{width:91.666%}
.h-12{height:3rem}
.h-32{height:8rem}
.max-w-md{max-width:28rem}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

/* text */
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.font-bold{font-weight:700}
.text-center{text-align:center}

/* colors */
.bg-white{background:#fff}
.bg-gray-100{background:#f3f4f6}
.bg-gray-200{background:#e5e7eb}
.bg-yellow-100{background:#fef9c3}
.bg-blue-100{background:#dbeafe}
.bg-green-100{background:#dcfce7}
.bg-purple-100{background:#f3e8ff}

.bg-blue-500{background:#3b82f6;color:#fff}
.bg-green-500{background:#22c55e;color:#fff}
.bg-purple-500{background:#a855f7;color:#fff}
.bg-red-500{background:#ef4444;color:#fff}

.text-white{color:#fff}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-blue-500{color:#3b82f6}
.text-yellow-600{color:#ca8a04}

/* effects */
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1)}
.hidden{display:none}

/* positioning */
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.z-50{z-index:50}

/* misc */
.border{border:1px solid #e5e7eb}
.block{display:block}