/*! Custom Tailwind Built-in Utilities */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body { margin: 0; padding: 0; background-color: #f9f9f9; color: #1a1c1c; }

/* Flexbox & Grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }

/* Spacing & Gaps */
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.px-sm { padding-left: 8px; padding-right: 8px; }
.px-md { padding-left: 16px; padding-right: 16px; }
.py-xs { padding-top: 4px; padding-bottom: 4px; }
.py-sm { padding-top: 8px; padding-bottom: 8px; }
.py-md { padding-top: 16px; padding-bottom: 16px; }
.py-lg { padding-top: 24px; padding-bottom: 24px; }
.px-gutter { padding-left: 20px; padding-right: 20px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 40px; }
.my-sm { margin-top: 8px; margin-bottom: 8px; }
.my-md { margin-top: 16px; margin-bottom: 16px; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.pl-sm { padding-left: 8px; }

/* Sizing & Container */
.w-full { width: 100%; }
.w-10 { width: 40px; } .h-10 { height: 40px; }
.w-12 { width: 48px; } .h-12 { height: 48px; }
.max-w-container-max { max-width: 1280px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.min-w-full { min-width: 100%; }

/* Colors & Styling */
.bg-surface { background-color: #ffffff; }
.bg-surface-container-low { background-color: #f3f3f3; }
.bg-surface-accent { background-color: #FFF8F0; }
.bg-primary-container { background-color: #ff6b00; }
.text-primary-container { color: #ff6b00; }
.text-on-primary { color: #ffffff; }
.text-on-surface { color: #1a1c1c; }
.text-on-surface-variant { color: #5a4136; }
.border-border-subtle { border-color: #E0E0E0; }
.border-primary-container { border-color: #ff6b00; }

/* Typography */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-mono { font-family: monospace; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Components */
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-l-4 { border-left-width: 4px; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.pt-16 { padding-top: 64px; }

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:my-0 { margin-top: 0; margin-bottom: 0; }
}