:root {
            --primary-blue: #084F72;
            --secondary-blue: #D68110;
            --light-blue: #D9EdFC;
            --accent-orange: #0F93D5;
            --text-dark: #222222;
            --text-light: #565656;
            --border-light: #565656;
            --bg-light: #FCEDD9;
            --bg-white: #FAFAFA;
            --bg-gradient-start: #FCEDD9;
            --bg-gradient-end: #724409#;
        }

        /* Dark mode variables */
        @media (prefers-color-scheme: dark) {
            :root {
                --primary-blue: #084F72;
                --secondary-blue: #D68110;
                --light-blue: #D9EdFC;
                --accent-orange: #0F93D5;
                --text-dark: #222222;
                --text-light: #565656;
                --border-light: #565656;
                --bg-light: #FCEDD9;
                --bg-white: #FAFAFA;
                --bg-gradient-start: #FCEDD9;
                --bg-gradient-end: #724409#;
            }
        }

        body {
            font-family: 'Lexend', sans-serif, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-end));
            color: var(--text-dark);
            line-height: 1.6;
			overflow-x: hidden;
        }

        /* Navigation Styles */
        .navbar {
            background: var(--primary-blue) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 1rem 0;
        }

        @media (prefers-color-scheme: dark) {
            .navbar {
                box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.4rem !important;
            color: white !important;
        }

        .navbar-brand img {
            filter: brightness(0) invert(1);
        }

        .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: var(--light-blue) !important;
        }

        .nav-item.active .nav-link {
            color: white !important;
            background-color: rgba(255,255,255,0.15);
            border-radius: 0.275rem;
        }

        /* Header Section */
        .header-section {
            background: var(--bg-white);
            border-radius: .75rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            margin-top: 2rem;
            padding: 2.5rem;
            border-left: 4px solid var(--accent-orange);
        }

        @media (prefers-color-scheme: dark) {
            .header-section {
                box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            }
        }

        .header-section h1 {
            color: var(--primary-blue);
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .section-heading {
            color: var(--primary-blue);
            font-weight: 700;
            font-size: 1.35rem;
            margin: 0 0 1rem;
        }

        .header-section .lead {
            color: var(--text-light);
            font-size: 1.25rem;
            font-weight: 400;
        }

        /* Search Form */
        .search-form {
            background: var(--bg-white);
            border-radius: .75rem;
            padding: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            border: 1px solid var(--border-light);
            margin-bottom: 2rem;
        }

        @media (prefers-color-scheme: dark) {
            .search-form {
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
        }

        .search-form .form-control {
            border: 2px solid var(--border-light);
            border-radius: 0.33rem;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: var(--bg-white);
            color: var(--text-dark);
        }

        .search-form .form-control:focus {
            border-color: var(--secondary-blue);
            box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
            background-color: var(--bg-white);
            color: var(--text-dark);
        }

        .btn-primary {
            background-color: var(--secondary-blue);
            border-color: var(--secondary-blue);
            border-radius: 0.33rem;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            transform: translateY(-1px);
        }

        /* Results Info */
        .results-info {
            background: var(--white);
            border-left: 4px solid var(--accent-orange);
            padding: 1rem 1.5rem;
            border-radius: 0.33rem;
            margin-bottom: 2rem;
        }

        @media (prefers-color-scheme: dark) {
            .results-info {
                background: var(--white);
            }
        }

        .results-info p {
            margin: 0;
            font-weight: 500;
            color: var(--text-dark);
        }

        /* Article Cards */
        .list-group-item {
            border: 1px solid var(--border-light);
            border-radius: .75rem !important;
            margin-bottom: 1.5rem;
            padding: 2rem;
            background: var(--bg-white);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .list-group-item:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        @media (prefers-color-scheme: dark) {
            .list-group-item {
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
            
            .list-group-item:hover {
                box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            }
        }

        .article-title {
            font-weight: 600 !important;
            color: var(--primary-blue) !important;
            font-size: 1.25rem;
            line-height: 1.4;
            margin-bottom: 1rem !important;
        }

        .article-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .article-title a:hover {
            color: var(--secondary-blue) !important;
            text-decoration: none;
        }

        .journal-name {
            font-style: italic !important;
            color: var(--accent-orange) !important;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .article-date {
            color: var(--text-light) !important;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .article-abstract {
            font-size: 1rem !important;
            color: var(--text-dark) !important;
            line-height: 1.6;
            margin-top: 1rem !important;
            margin-bottom: 1.5rem !important;
        }

        /* Topic Tags */
        .btn-xs {
            padding: 0.375rem 0.75rem !important;
            font-size: 0.75rem !important;
            border-radius: .75rem !important;
            font-weight: 500;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            background-color: rgba(30, 58, 138, 0.1);
            border-color: rgba(30, 58, 138, 0.2);
            color: var(--primary-blue);
            transition: all 0.3s ease;
        }

        @media (prefers-color-scheme: dark) {
            .btn-xs {
                background-color: rgba(59, 130, 246, 0.2);
                border-color: rgba(59, 130, 246, 0.3);
            }
        }

        .btn-xs:hover {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            color: white;
        }

        /* Action Buttons */
        .btn-outline-primary {
            color: var(--secondary-blue);
            border-color: var(--secondary-blue);
            border-radius: 0.33rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-outline-primary:hover {
            background-color: var(--secondary-blue);
            border-color: var(--secondary-blue);
            color: white;
        }

        .btn-outline-secondary {
            color: var(--text-light);
            border-color: var(--border-light);
            border-radius: 0.33rem;
            font-weight: 500;
        }

        .btn-outline-secondary:hover {
            background-color: var(--text-light);
            border-color: var(--text-light);
            color: var(--bg-white);
        }

        /* Sidebar Cards */
        .card {
            border: 1px solid var(--border-light);
            border-radius: .75rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            overflow: hidden;
            background-color: var(--bg-white);
        }

        @media (prefers-color-scheme: dark) {
            .card {
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
        }

        .card-header {
            background: var(--primary-blue) !important;
            border-bottom: none;
            padding: 1.25rem 1.5rem;
        }

        .card-header h5,
            .card-header h2 {
                color: white !important;
                font-weight: 600;
                margin: 0;
                font-size: 1.1rem;
            }

            .card-header h4,
            .card-header h2.text-orange {
                color: white !important;
                font-weight: 600;
                margin: 0;
                font-size: 1.25rem;
            }

            .card-header h5.text-orange,
            .card-header h4.text-orange,
            .card-header h2.text-orange {
                color: hsl(25, 90%, 75%) !important;
            }
            .card-header h5.text-white,
            .card-header h4.text-white,
            .card-header h2.text-white {
                color: var(--white) !important;
            }


        .card-body {
            padding: 1.5rem;
            background-color: var(--bg-white);
        }

        .card-body ul li {
            margin-bottom: 1rem !important;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-light);
        }

        .card-body ul li:last-child {
            border-bottom: none;
            margin-bottom: 0 !important;
            padding-bottom: 0;
        }

        .card-body a {
            color: var(--secondary-blue);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.3s ease;
        }

        .card-body a:hover {
            color: var(--accent-orange);
            text-decoration: none;
        }

        .badge-secondary {
            background-color: var(--accent-orange) !important;
            color: white;
            font-weight: 500;
        }

        /* Pagination */
        .pagination {
            margin-top: 3rem;
        }

        .page-link {
            color: var(--secondary-blue);
            border-color: var(--border-light);
            border-radius: 0.33rem !important;
            margin: 0 0.25rem;
            font-weight: 500;
            transition: all 0.3s ease;
            background-color: var(--bg-white);
        }

        .page-link:hover {
            color: white;
            background-color: var(--secondary-blue);
            border-color: var(--secondary-blue);
        }

        .page-item.active .page-link {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            color: white;
        }

        .page-item.disabled .page-link {
            color: var(--text-light);
            background-color: var(--bg-light);
            border-color: var(--border-light);
        }

        /* Footer */
        footer {
            background: var(--primary-blue) !important;
            color: white;
            margin-top: 4rem;
        }

        footer a {
            color: var(--light-blue);
            text-decoration: none;
        }

        footer a:hover {
            color: white;
            text-decoration: underline;
        }

        /* Search highlighting */
        .highlight {
            background-color: var(--accent-orange);
            color: white;
            padding: 0 2px;
            border-radius: 2px;
        }

        @media (prefers-color-scheme: dark) {
            .highlight {
                background-color: #fbbf24;
                color: #111827;
            }
        }

        /* Form controls dark mode */
        @media (prefers-color-scheme: dark) {
            .form-control {
                background-color: var(--bg-white);
                border-color: var(--border-light);
                color: var(--text-dark);
            }
            
            .form-control:focus {
                background-color: var(--bg-white);
                border-color: var(--secondary-blue);
                color: var(--text-dark);
                box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
            }
            
            .form-control::placeholder {
                color: var(--text-light);
            }
        }

        /* Alert styles for dark mode */
        @media (prefers-color-scheme: dark) {
            .alert-info {
                background-color: rgba(59, 130, 246, 0.1);
                border-color: rgba(59, 130, 246, 0.2);
                color: var(--text-dark);
            }
            
            .alert-danger {
                background-color: rgba(239, 68, 68, 0.1);
                border-color: rgba(239, 68, 68, 0.2);
                color: var(--text-dark);
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .header-section {
                padding: 2rem 1.5rem;
                margin-top: 1rem;
            }

            .header-section h1 {
                font-size: 2rem;
            }

            .search-form {
                padding: 1.5rem;
            }

            .list-group-item {
                padding: 1.5rem;
            }

            .card-body {
                padding: 1rem;
            }
        }

        /* Custom utility classes */
        .text-accent {
            color: var(--accent-orange) !important;
        }

        .bg-gradient {
            background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
        }
            /* Custom utility classes */
            .text-accent {
                color: var(--accent-orange) !important;
            }
            .bg-gradient {
                background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
            }

            /* Newsletter promotion card specific styles */
            .newsletter-card {
                border: none;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                overflow: hidden;
            }

            .newsletter-card .card-header {
                background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
                border-bottom: none;
            }

            .newsletter-card .image-container {
                position: relative;
            }

            .newsletter-card .image-container::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(to bottom, rgba(249, 115, 22, 0.2), rgba(30, 58, 138, 0.4));
                pointer-events: none;
            }

            .newsletter-card .btn-primary {
                background-color: var(--accent-orange);
                border-color: var(--accent-orange);
                color: var(--white);
                font-weight: 600;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-size: 0.9rem;
            }

            .newsletter-card .btn-primary:hover {
                background-color: var(--primary-blue);
                border-color: var(--primary-blue);
                color: white;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
            }

            .newsletter-card .card-body {
                background: white;
            }

            .newsletter-card p {
                color: var(--text-dark);
                font-size: 0.95rem;
                line-height: 1.6;
            }