/* Simplified Color Palette & Design System */\n\n:root {\n  /* Primary Colors */\n  --primary: #7C3AED;\n  --primary-light: #A78BFA;\n  --primary-dark: #5B21B6;\n\n  /* Secondary Colors */\n  --secondary: #2EC4A5;\n  --secondary-light: #6FEAB3;\n  --secondary-dark: #0E8D6F;\n\n  /* Accent Colors */\n  --success: #10B981;\n  --warning: #F59E0B;\n  --danger: #EF4444;\n  --info: #3B82F6;\n\n  /* Grayscale */\n  --white: #FFFFFF;\n  --gray-50: #F9FAFB;\n  --gray-100: #F3F4F6;\n  --gray-200: #E5E7EB;\n  --gray-300: #D1D5DB;\n  --gray-400: #9CA3AF;\n  --gray-500: #6B7280;\n  --gray-600: #4B5563;\n  --gray-700: #374151;\n  --gray-800: #1F2937;\n  --gray-900: #111827;\n  --black: #000000;\n\n  /* Typography */\n  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n\n  /* Spacing */\n  --space-xs: 0.25rem;\n  --space-sm: 0.5rem;\n  --space-md: 1rem;\n  --space-lg: 1.5rem;\n  --space-xl: 2rem;\n  --space-2xl: 3rem;\n\n  /* Border Radius */\n  --radius-sm: 0.375rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 0.75rem;\n  --radius-xl: 1rem;\n  --radius-2xl: 1.5rem;\n\n  /* Shadows */\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n\n  /* Transitions */\n  --transition: all 0.2s ease-in-out;\n  --transition-fast: all 0.15s ease-in-out;\n}\n\n/* Base Styles */\nbody {\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  line-height: 1.6;\n  color: var(--gray-900);\n  background-color: var(--white);\n}\n\n/* Typography */\nh1, h2, h3, h4, h5, h6 {\n  font-weight: 700;\n  line-height: 1.2;\n  margin-top: 0;\n  margin-bottom: var(--space-md);\n}\n\nh1 { font-size: var(--font-size-4xl); }\nh2 { font-size: var(--font-size-3xl); }\nh3 { font-size: var(--font-size-2xl); }\nh4 { font-size: var(--font-size-xl); }\nh5 { font-size: var(--font-size-lg); }\nh6 { font-size: var(--font-size-base); }\n\np {\n  margin-top: 0;\n  margin-bottom: var(--space-md);\n}\n\n/* Layout */\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding-left: var(--space-md);\n  padding-right: var(--space-md);\n}\n\n/* Cards */\n.card {\n  background: var(--white);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  border: 1px solid var(--gray-200);\n  overflow: hidden;\n  transition: var(--transition);\n}\n\n.card:hover {\n  box-shadow: var(--shadow-lg);\n  transform: translateY(-2px);\n}\n\n.card-header {\n  padding: var(--space-lg);\n  background: var(--gray-50);\n  border-bottom: 1px solid var(--gray-200);\n  display: flex;\n  align-items: center;\n  gap: var(--space-md);\n}\n\n.card-body {\n  padding: var(--space-lg);\n}\n\n/* Forms */\n.form-group {\n  margin-bottom: var(--space-lg);\n}\n\n.form-label {\n  display: block;\n  margin-bottom: var(--space-sm);\n  font-weight: 600;\n  color: var(--gray-700);\n}\n\n.form-control {\n  width: 100%;\n  padding: var(--space-md) var(--space-lg);\n  border: 2px solid var(--gray-200);\n  border-radius: var(--radius-md);\n  font-size: var(--font-size-base);\n  background: var(--white);\n  transition: var(--transition);\n}\n\n.form-control:focus {\n  outline: none;\n  border-color: var(--primary);\n  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);\n}\n\n/* Buttons */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-sm);\n  padding: var(--space-md) var(--space-lg);\n  border-radius: var(--radius-md);\n  font-weight: 600;\n  text-decoration: none;\n  cursor: pointer;\n  border: none;\n  transition: var(--transition);\n}\n\n.btn-primary {\n  background: linear-gradient(135deg, var(--primary), var(--primary-light));\n  color: var(--white);\n}\n\n.btn-primary:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--shadow-lg);\n  color: var(--white);\n}\n\n.btn-secondary {\n  background: var(--gray-200);\n  color: var(--gray-700);\n}\n\n.btn-secondary:hover {\n  background: var(--gray-300);\n  color: var(--gray-800);\n}\n\n.btn-danger {\n  background: var(--danger);\n  color: var(--white);\n}\n\n.btn-danger:hover {\n  background: #dc2626;\n}\n\n/* Grid System */\n.grid {\n  display: grid;\n  gap: var(--space-md);\n}\n\n.grid-2 {\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n}\n\n.grid-3 {\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n}\n\n/* Utilities */\n.text-center { text-align: center; }\n.text-left { text-align: left; }\n.text-right { text-align: right; }\n\n.mb-1 { margin-bottom: var(--space-sm); }\n.mb-2 { margin-bottom: var(--space-md); }\n.mb-3 { margin-bottom: var(--space-lg); }\n\n.mt-1 { margin-top: var(--space-sm); }\n.mt-2 { margin-top: var(--space-md); }\n.mt-3 { margin-top: var(--space-lg); }\n\n.p-1 { padding: var(--space-sm); }\n.p-2 { padding: var(--space-md); }\n.p-3 { padding: var(--space-lg); }\n\n/* Responsive */\n@media (max-width: 768px) {\n  .container {\n    padding-left: var(--space-sm);\n    padding-right: var(--space-sm);\n  }\n  \n  .grid-2, .grid-3 {\n    grid-template-columns: 1fr;\n  }\n  \n  .card-header {\n    flex-direction: column;\n    text-align: center;\n  }\n}\n\n/* Dark Mode */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --gray-50: #1F2937;\n    --gray-100: #111827;\n    --gray-200: #1F2937;\n    --gray-300: #374151;\n    --gray-400: #4B5563;\n    --gray-500: #6B7280;\n    --gray-600: #9CA3AF;\n    --gray-700: #D1D5DB;\n    --gray-800: #E5E7EB;\n    --gray-900: #F9FAFB;\n    --white: #111827;\n    --black: #F9FAFB;\n  }\n  \n  body {\n    background-color: var(--gray-900);\n    color: var(--white);\n  }\n  \n  .card {\n    background: var(--gray-800);\n    border-color: var(--gray-700);\n  }\n  \n  .form-control {\n    background: var(--gray-800);\n    border-color: var(--gray-600);\n    color: var(--white);\n  }\n}