.article-title {
                font-weight: 600;
                color: #2c3e50;
            }
            .journal-name {
                font-style: italic;
                color: #7f8c8d;
            }
            .article-date {
                color: #95a5a6;
            }
            .article-abstract {
                font-size: 0.9rem;
                color: #34495e;
                margin-top: 0.5rem;
            }
            .pagination {
                margin-top: 2rem;
            }
            .search-form {
                margin-bottom: 2rem;
            }
            .highlight {
                background-color: #fffacd;
                padding: 0 2px;
            }
            .btn-group-xs > .btn, .btn-xs {
                padding: .33rem .33rem;
                font-size: .75rem;
                line-height: .66rem;
            }
            .alphabet-filter .btn {
                margin: 0.2rem;
            }
            .topic-list {
                max-height: 600px;
                overflow-y: auto;
            }
            .topic-item {
                display: none;
            }
            .topic-item.show {
                display: block;
            }
            .btn-group-xs > .btn, .btn-xs {
                padding: .33rem .33rem;
                font-size: .75rem;
                line-height: .66rem;
            }
            .bg-primary {
                background-color: #003399!important;
            }

            /* Dark mode styles */
            @media (prefers-color-scheme: dark) {
                .article-title {
                    color: #93c5fd;
                }
                .journal-name {
                    color: #fb923c;
                }
                .article-date {
                    color: #d1d5db;
                }
                .article-abstract {
                    color: #f9fafb;
                }
                .highlight {
                    background-color: #fbbf24;
                    color: #111827;
                }
                .topic-list {
                    background-color: #1f2937;
                }
                .topic-item a {
                    color: #93c5fd;
                    border-color: #374151;
                }
                .topic-item a:hover {
                    color: #fb923c;
                }
                .bg-primary {
                    background-color: #1e40af!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(--primary-blue);
                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;
            }

:root {
                --primary-blue: #1e3a8a;
                --secondary-blue: #1e40af;
                --light-blue: #93c5fd;
                --accent-orange: #f97316;
                --text-dark: #374151;
                --text-light: #6b7280;
                --border-light: #e5e7eb;
                --bg-light: #f8fafc;
                --bg-white: #ffffff;
                --bg-gradient-start: #688faa13;
                --bg-gradient-end: white;
            }

            /* Dark mode variables */
            @media (prefers-color-scheme: dark) {
                :root {
                    --primary-blue: #3b82f6;
                    --secondary-blue: #60a5fa;
                    --light-blue: #1e40af;
                    --accent-orange: #fb923c;
                    --text-dark: #f9fafb;
                    --text-light: #d1d5db;
                    --border-light: #374151;
                    --bg-light: #111827;
                    --bg-white: #1f2937;
                    --bg-gradient-start: #111827;
                    --bg-gradient-end: #1f2937;
                }
            }

            body {
                font-family: '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;
            }

            /* 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;
            }

            .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: rgba(249, 115, 22, 0.1);
                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: rgba(251, 146, 60, 0.2);
                }
            }

            .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 {
                color: white !important;
                font-weight: 600;
                margin: 0;
                font-size: 1.1rem;
            }

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

            .card-header h5.text-orange,
            .card-header h4.text-orange {
                color: hsl(25, 90%, 75%) !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);
                }
            }

            /* Topic list specific styles */
            .topic-list {
                max-height: 600px;
                overflow-y: auto;
                background-color: var(--bg-white);
            }

            .topic-item {
                display: none;
            }

            .topic-item.show {
                display: block;
            }

            .topic-item a {
                color: var(--secondary-blue);
                border-color: var(--border-light);
                transition: all 0.3s ease;
            }

            .topic-item a:hover {
                color: var(--accent-orange);
                background-color: rgba(249, 115, 22, 0.05);
            }

            @media (prefers-color-scheme: dark) {
                .topic-item a:hover {
                    background-color: rgba(251, 146, 60, 0.1);
                }
            }

            /* Alphabet filter */
            .alphabet-filter .btn {
                margin: 0.2rem;
                background-color: var(--bg-white);
                border-color: var(--border-light);
                color: var(--text-dark);
            }

            .alphabet-filter .btn:hover,
            .alphabet-filter .btn.active {
                background-color: var(--secondary-blue);
                border-color: var(--secondary-blue);
                color: white;
            }

            /* Input group styles */
            .input-group-text {
                background-color: var(--bg-light);
                border-color: var(--border-light);
                color: var(--text-light);
            }

            @media (prefers-color-scheme: dark) {
                .input-group-text {
                    background-color: var(--border-light);
                    color: var(--text-light);
                }
            }

            /* 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;
            }