/* Custom Properties and Base Styles */
:root {
  --font-family: 'Poppins', sans-serif;
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #252525;
  --card: #ffffff;
  --card-foreground: #252525;
  --primary: #030213;
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #030213;
  --muted: #f1f1f5;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --ring: #a1a1aa;
  --radius: 0.625rem;
  --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-300: #fca5a5; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-red-800: #991b1b;
  --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-300: #fdba74; --color-orange-500: #f97316; --color-orange-600: #ea580c; --color-orange-700: #c2410c;
  --color-yellow-50: #fefce8; --color-yellow-100: #fef9c3; --color-yellow-300: #fcd34d; --color-yellow-400: #fbbf24; --color-yellow-700: #b45309;
  --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-300: #86efac; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534;
  --color-teal-50: #f0fdfa; --color-teal-100: #ccfbf1; --color-teal-300: #5eead4; --color-teal-800: #115e59;
  --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-300: #93c5fd; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af;
  --color-indigo-50: #eef2ff; --color-indigo-100: #e0e7ff; --color-indigo-300: #a5b4fc; --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca;
  --color-purple-50: #f5f3ff; --color-purple-100: #ede9fe; --color-purple-300: #c4b5fd; --color-purple-600: #7c3aed; --color-purple-700: #6d28d9; --color-purple-800: #5b21b6;
  --color-pink-50: #fdf2f8;
  --color-gray-50: #f9fafb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937;
  --color-white: #fff;
}
*, :after, :before { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; border-color: var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: var(--font-family); }
body { line-height: inherit; background-color: var(--background); color: var(--foreground); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
button { font: inherit; background-color: transparent; }

/* Global Component Styles */
.container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

.header-title { text-align: center; color: var(--color-white); margin-bottom: 0.5rem; font-size: 1.8rem; font-weight: 700; }
.header-subtitle { text-align: center; color: var(--color-white); font-size: 0.875rem; opacity: 0.9; }
.section-title { color: var(--color-gray-800); margin-bottom: 0.75rem; font-size: 1.5rem; font-weight: 500; }
.info-card { padding: 1rem; border-radius: 0.5rem; text-align: center; }
.footer-title { color: var(--color-white); margin-bottom: 0.5rem; font-weight: 500; }
.component-description { padding: 1rem; border-radius: 0.5rem; border-width: 2px; }
.component-header { text-align: center; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; }

/* Tab System */
.tab-list { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 2rem; background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); border-radius: 0.375rem; }
@media (min-width: 1024px) { .tab-list { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tab-trigger { padding: 0.75rem 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); background-color: transparent; border: none; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-bottom 0.2s; border-bottom: 3px solid transparent; }
.tab-trigger:hover { color: var(--primary); background-color: var(--secondary); }
.tab-trigger[data-state="active"] { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: block; }
.tab-content[hidden] { display: none; }

/* Download Button */
.download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; color: white; font-weight: 500; border-radius: 0.375rem; transition: background-color 0.2s; border: none; cursor: pointer; }

/* Utility Classes from Tailwind */
.min-h-screen { min-height: 100vh; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-blue-50 { --tw-gradient-from: var(--color-blue-50); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0)); }
.via-purple-50 { --tw-gradient-to: var(--color-purple-50); }
.to-pink-50 { --tw-gradient-to: var(--color-pink-50); }
/* ... (and so on for all gradient classes) ... */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-red-600 { --tw-gradient-from: var(--color-red-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0)); }
.via-red-500 { --tw-gradient-to: var(--color-red-500); }
.to-orange-500 { --tw-gradient-to: var(--color-orange-500); }
.text-white { color: var(--color-white); }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.container { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.opacity-90 { opacity: .9; }
.bg-white { background-color: var(--color-white); }
.rounded-lg { border-radius: 0.5rem; }
.p-6 { padding: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.text-gray-800 { color: var(--color-gray-800); }
.mb-3 { margin-bottom: 0.75rem; }
.text-gray-600 { color: var(--color-gray-600); }
.max-w-3xl { max-width: 48rem; }
.grid { display: grid; }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.from-blue-50 { --tw-gradient-from: var(--color-blue-50); }
.to-blue-100 { --tw-gradient-to: var(--color-blue-100); }
.p-4 { padding: 1rem; }
.text-blue-800 { color: var(--color-blue-800); }
.mb-1 { margin-bottom: 0.25rem; }
.font-medium { font-weight: 500; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.from-green-50 { --tw-gradient-from: var(--color-green-50); }
.to-green-100 { --tw-gradient-to: var(--color-green-100); }
.text-green-800 { color: var(--color-green-800); }
.from-purple-50 { --tw-gradient-from: var(--color-purple-50); }
.to-purple-100 { --tw-gradient-to: var(--color-purple-100); }
.text-purple-800 { color: var(--color-purple-800); }
.w-full { width: 100%; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.rounded-md { border-radius: 0.375rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.from-yellow-50 { --tw-gradient-from: var(--color-yellow-50); }
.to-yellow-100 { --tw-gradient-to: var(--color-yellow-100); }
.border-2 { border-width: 2px; }
.border-yellow-300 { border-color: var(--color-yellow-300); }
.text-yellow-800 { color: var(--color-yellow-800); }
.text-red-600 { color: var(--color-red-600); }
.h-auto { height: auto; }
.border-4 { border-width: 4px; }
.border-yellow-400 { border-color: var(--color-yellow-400); }
.mt-4 { margin-top: 1rem; }
.bg-red-600 { background-color: var(--color-red-600); }
.hover\:bg-red-700:hover { background-color: var(--color-red-700); }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.mt-12 { margin-top: 3rem; }
.bg-gray-800 { background-color: var(--color-gray-800); }
.text-gray-300 { color: var(--color-gray-300); }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.flex { display: flex; }
.text-gray-500 { color: var(--color-gray-500); }
/* Add any other specific utility classes you see in your HTML that might be missing */