body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1a202c 100%); /* Dark blue-gray gradient */
            color: #e2e8f0; /* Light text color */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .ai-header {
            background-color: #1e293b; /* Darker blue-gray */
            padding: 1.5rem 0;
            border-bottom: 1px solid #334155;
        }
        .ai-header .nav-link {
            color: #94a3b8; /* Gray-300 equivalent */
            transition: color 0.2s ease-in-out;
        }
        .ai-header .nav-link:hover {
            color: #ffffff; /* White on hover */
        }
        .ai-footer {
            background-color: #1e293b;
            padding: 1rem 0;
            border-top: 1px solid #334155;
            color: #94a3b8;
            font-size: 0.875rem;
        }
        .card {
            background-color: #2d3748; /* Slightly lighter dark gray for card */
            border: none;
            border-radius: 1rem; /* More rounded corners */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
        }
        .form-control {
            background-color: #4a5568; /* Darker input background */
            border: 1px solid #64748b; /* Border for inputs */
            color: #e2e8f0; /* Input text color */
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
        }
        .form-control:focus {
            background-color: #4a5568;
            color: #e2e8f0;
            border-color: #6366f1; /* Indigo focus color */
            box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
        }
        .form-control::placeholder {
            color: #ffffff;
            opacity: 1;
        }
        .btn-primary {
            background-color: #6366f1; /* Indigo button */
            border-color: #6366f1;
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #4f46e5; /* Darker indigo on hover */
            border-color: #4f46e5;
        }
        .ai-image {
            border-radius: 1rem;
            object-fit: cover; /* Ensure image covers the area */
        }
        .text-gradient {
            background: linear-gradient(to right, #a78bfa, #818cf8); /* Purple to blue gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent; /* Fallback for unsupported browsers */
        }
        .ai-logo-text {
            font-size: 1.5rem; /* Equivalent to text-2xl */
            font-weight: 600; /* Equivalent to font-semibold */
            white-space: nowrap; /* Equivalent to whitespace-nowrap */
            color: #ffffff; /* Equivalent to text-white */
        }
        .ai-icon {
            color: #818cf8; /* Indigo-400 equivalent */
        }
        .ai-text-gray-400 {
            color: #94a3b8; /* Gray-400 equivalent */
        }
        .ai-text-gray-300 {
            color: #cbd5e1; /* Gray-300 equivalent */
        }
        .ai-text-indigo-400 {
            color: #818cf8; /* Indigo-400 equivalent */
            transition: color 0.2s ease-in-out;
        }
        .ai-text-indigo-400:hover {
            color: #a78bfa; /* Indigo-300 equivalent on hover */
        }
        .ai-text-sm {
            font-size: 0.875rem; /* text-sm equivalent */
        }
        .ai-bg-gradient-left {
            background: linear-gradient(to bottom right, #4f46e5, #8b5cf6); /* from-indigo-600 to-purple-700 equivalent */
        }
        .ai-max-w-5xl {
            max-width: 64rem; /* Equivalent to max-w-5xl (1024px) */
        }
        .ai-space-x-3 > *:not(:first-child) {
            margin-left: 0.75rem; /* Equivalent to space-x-3 */
        }
        .ai-space-x-4 > *:not(:first-child) {
            margin-left: 1rem; /* Equivalent to space-x-4 */
        }

         /* Dashboard Specific Styles */
        .dashboard-container {
            display: flex;
            flex-grow: 1;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        .sidebar {
            background-color: #1e293b; /* Darker blue-gray */
            border-radius: 1rem;
            padding: 1.5rem;
            margin-right: 1.5rem; /* Spacing between sidebar and main content */
            min-width: 250px; /* Fixed width for sidebar */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            flex-shrink: 0; /* Prevent sidebar from shrinking */
        }
        .sidebar .nav-link {
            color: #cbd5e1; /* Light gray for nav links */
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            transition: background-color 0.2s ease, color 0.2s ease;
            display: flex;
            align-items: center;
        }
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            background-color: #334155; /* Slightly lighter dark gray on hover/active */
            color: #ffffff;
        }
        .sidebar .nav-link svg {
            margin-right: 0.75rem;
            color: #818cf8; /* Indigo icon color */
        }
        .main-dashboard-content {
            flex-grow: 1;
        }
        .dashboard-card-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .dashboard-metric {
            font-size: 2.5rem;
            font-weight: bold;
            color: #6366f1; /* Indigo */
        }
        .dashboard-metric-label {
            color: #94a3b8;
            font-size: 0.9rem;
        }
        .chart-placeholder {
            background-color: #4a5568;
            border-radius: 0.75rem;
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #cbd5e1;
            font-size: 1.2rem;
        }

        /* Responsive adjustments for sidebar */
        @media (max-width: 767.98px) {
            .dashboard-container {
                flex-direction: column;
            }
            .sidebar {
                margin-right: 0;
                margin-bottom: 1.5rem;
                min-width: unset;
                width: 100%;
            }
            .sidebar .nav {
                flex-direction: row; /* Horizontal nav for mobile */
                flex-wrap: wrap;
                justify-content: center;
            }
            .sidebar .nav-item {
                flex: 1 1 auto; /* Distribute items evenly */
                text-align: center;
            }
            .sidebar .nav-link {
                justify-content: center; /* Center content in horizontal nav */
            }
            .sidebar .nav-link svg {
                margin-right: 0.5rem; /* Reduce margin for icons */
            }
        }

        #guideModal p
        {
            margin: 0px;
        }

        #guideModal .accordion-item {
            background-color: #2d3748; /* Slightly lighter dark gray for card */
            border: none;
            border-radius: 1rem; /* More rounded corners */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
            margin-bottom: 15px;
        }

        #guideModal .accordion-header .accordion-button {
            background-color: #1e293b; /* Darker blue-gray */
            color: #e2e8f0;
            font-weight: bold;
            border-radius: 1rem !important; /* Match card border-radius */
            padding: 1rem 1.5rem;
            transition: background-color 0.2s ease-in-out;
        }
        #guideModal .accordion-header .accordion-button:not(.collapsed) {
            background-color: #6366f1; /* Indigo button */
            color: #ffffff;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
        }
        #guideModal .accordion-header .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25); /* Indigo focus color */
            border-color: transparent;
        }
        #guideModal .accordion-body {
            color: #cbd5e1; /* Light gray for body text */
            padding: 1.5rem;
            border-top: 1px solid #334155; /* Darker border for separator */
        }
        #guideModal .accordion-body strong {
            color: #ffffff; /* White for strong text */
        }
        #guideModal .required-badge {
            background-color: #dc3545; /* Red for required */
            color: white;
            padding: 4px 10px;
            border-radius: 5px;
            font-size: 0.8em;
            margin-left: 10px;
        }
       #guideModal  .example-block {
            background-color: #1e293b; /* Darker background for examples */
            border-left: 4px solid #6366f1; /* Indigo accent */
            padding: 10px 15px;
            margin-top: 10px;
            border-radius: 5px;
            color: #e2e8f0;
        }
       #guideModal  .note {
            font-style: italic;
            color: #94a3b8; /* Muted gray for notes */
            font-size: 0.9em;
            margin-top: 10px;
        }
       #guideModal  h1 {
            color: #a78bfa; /* Purple to blue gradient for main heading */
            background: linear-gradient(to right, #a78bfa, #818cf8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }
       #guideModal  .lead {
            color: #94a3b8; /* Muted gray for lead text */
        }
       #guideModal  code {
            color: #ffc107; /* Yellow for code snippets */
            background-color: rgba(255, 193, 7, 0.1);
            padding: 2px 4px;
            border-radius: 4px;
        }
      #guideModal   table {
            width: 100%;
            margin-top: 10px;
            border-collapse: collapse;
        }
       #guideModal  table, th, td {
            border: 1px solid #4a5568; /* Darker border for table */
        }
       #guideModal  th, td {
            padding: 8px;
            text-align: left;
            color: #e2e8f0;
        }
       #guideModal  th {
            background-color: #334155; /* Darker header for table */
            font-weight: bold;
        }
       #guideModal  ul {
            padding-left: 20px;
            margin-top: 5px;
        }
       #guideModal  ul li {
            margin-bottom: 3px;
            text-align: left;
        }     
        
        
        .global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 3s;
}