/* News of the Global World - Förbättrad CSS */
:root {
    --primary-color: #2563eb;
    --secondary-color: #10b981;
    --accent-color: #f59e0b;
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    --border-radius-lg: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

/* Header */
.header {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-icon {
    font-size: 1.5rem;
}

.subtitle {
    font-size: 0.7rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    margin-left: 0.5rem;
}

.header-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.refresh-btn,
.clear-cache-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.refresh-btn:hover,
.clear-cache-btn:hover {
    background: #1e40af;
    transform: translateY(-1px);
}

.clear-cache-btn {
    background: #6c28b9;
}

.clear-cache-btn:hover {
    background: #5b21b6;
}

/* Container & Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.stats-bar {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.stat-item i {
    color: var(--primary-color);
    width: 16px;
}

/* News Container */
.news-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.news-source {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.news-source:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.news-source.collapsed .articles-container {
    display: none;
}

/* Source Header */
.source-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.source-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.source-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.source-name h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.source-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.source-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.article-count {
    color: var(--text-muted);
    font-weight: 500;
}

.fresh-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.recent-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.collapse-btn:hover {
    background: #f3f4f6;
    color: var(--text-secondary);
}

/* Articles Container */
.articles-container {
    padding: 0;
}

.article {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    position: relative;
}

.article:hover {
    background: #f9fafb;
}

.article:last-child {
    border-bottom: none;
}

.article.read {
    opacity: 0.6;
}

.article.read .article-title {
    color: var(--text-muted);
}

.article.favorite {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 3px solid var(--accent-color);
}

/* Article Header */
.article-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.source-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

.article-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.action-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.375rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.action-icon:hover {
    color: var(--primary-color);
    background: #f3f4f6;
}

.action-icon.active {
    color: var(--accent-color);
}

/* Article Content */
.article-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.article-title:hover {
    color: var(--primary-color);
}

.article-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.meta-separator {
    color: var(--border-color);
}

.fresh-indicator {
    background: var(--secondary-color);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.recent-indicator {
    background: var(--accent-color);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.old-indicator {
    background: var(--text-muted);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.reading-stats,
.read-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Article Tags */
.article-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.tag {
    padding: 0.125rem 0.5rem;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 10px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.tag:hover {
    background: #c7d2fe;
    transform: translateY(-1px);
}

/* Article Images */
.article-image-container {
    position: relative;
    margin-bottom: 0.75rem;
}

.article-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.image-overlay {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    backdrop-filter: blur(4px);
}

.reading-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* No Articles */
.no-articles {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 2rem;
    font-size: 0.875rem;
}

/* Loading States */
.loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.loading-progress {
    width: 200px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0;
    transition: width 0.3s ease;
}

.loading-sources {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .header-content {
        padding: 0 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .title {
        font-size: 1.125rem;
    }
    
    .news-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stats-bar {
        gap: 1rem;
    }
    
    .source-header {
        padding: 0.75rem 1rem;
    }
    
    .source-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .article {
        padding: 0.75rem 1rem;
    }
    
    .article-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .article-image {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .news-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .source-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .source-info {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
}

/* Control Panel */
.control-panel {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.control-section {
    margin-bottom: 1.5rem;
}

.control-section:last-child {
    margin-bottom: 0;
}

/* Search Section */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-container i {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
}

.clear-search {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
}

/* Filter Section */
.filter-section {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.sort-select {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    cursor: pointer;
    font-size: 0.875rem;
}

/* View & Theme Toggles */
.view-toggles, .theme-toggles {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.theme-btn {
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-btn:hover {
    background: #f9fafb;
    transform: translateY(-1px);
}

.theme-btn:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.view-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.theme-btn.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Theme controls */
.theme-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.theme-select-wrapper {
    position: relative;
    width: 100%;
}

.theme-select {
    appearance: none;
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    padding-right: 2rem;
}

.theme-select:hover {
    border-color: var(--primary-color);
}

.theme-select-wrapper::after {
    content: '▼';
    font-size: 0.7rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
}

.theme-toggles {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Theme specific buttons */
.theme-btn[data-theme="default"] {
    background: linear-gradient(135deg, #f8fafc 0%, #3b82f6 100%);
}

.theme-btn[data-theme="dark"] {
    background: linear-gradient(135deg, #1f2937 0%, #60a5fa 100%);
    color: white;
}

.theme-btn[data-theme="auto"] {
    background: linear-gradient(135deg, #f8fafc 0%, #1f2937 100%);
}

.theme-btn[data-theme="neon"] {
    background: linear-gradient(135deg, #0f0f23 0%, #c084fc 100%);
    color: #e0e0ff;
}

.theme-btn[data-theme="forest"] {
    background: linear-gradient(135deg, #f0fdf4 0%, #22c55e 100%);
}

.theme-btn[data-theme="ocean"] {
    background: linear-gradient(135deg, #f0f9ff 0%, #0ea5e9 100%);
}

.theme-btn[data-theme="sepia"] {
    background: linear-gradient(135deg, #f5f1e9 0%, #9f7e53 100%);
}

.theme-btn[data-theme="sunset"] {
    background: linear-gradient(135deg, #fffbf0 0%, #f97316 100%);
}

/* Body theme classes */
body.theme-default {
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: rgba(31, 41, 55, 0.7);
    --text-muted: rgba(31, 41, 55, 0.5);
    --primary-color: #3b82f6;
    --secondary-color: #10b981;
    --accent-color: #f59e0b;
    --border-color: #e5e7eb;
}

body.theme-dark {
    --background-color: #111827;
    --surface-color: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: rgba(249, 250, 251, 0.7);
    --text-muted: rgba(249, 250, 251, 0.5);
    --primary-color: #60a5fa;
    --secondary-color: #34d399;
    --accent-color: #fbbf24;
    --border-color: #374151;
}

body.theme-neon {
    --background-color: #0f0f23;
    --surface-color: #1a1a3e;
    --text-primary: #e0e0ff;
    --text-secondary: rgba(224, 224, 255, 0.7);
    --text-muted: rgba(224, 224, 255, 0.5);
    --primary-color: #c084fc;
    --secondary-color: #f472b6;
    --accent-color: #22d3ee;
    --border-color: #2d2d6d;
}

body.theme-forest {
    --background-color: #f0fdf4;
    --surface-color: #dcfce7;
    --text-primary: #166534;
    --text-secondary: rgba(22, 101, 52, 0.7);
    --text-muted: rgba(22, 101, 52, 0.5);
    --primary-color: #22c55e;
    --secondary-color: #84cc16;
    --accent-color: #a78bfa;
    --border-color: #bbf7d0;
}

body.theme-ocean {
    --background-color: #f0f9ff;
    --surface-color: #e0f2fe;
    --text-primary: #0c4a6e;
    --text-secondary: rgba(12, 74, 110, 0.7);
    --text-muted: rgba(12, 74, 110, 0.5);
    --primary-color: #0ea5e9;
    --secondary-color: #06b6d4;
    --accent-color: #f97316;
    --border-color: #bae6fd;
}

body.theme-sepia {
    --background-color: #f5f1e9;
    --surface-color: #fbf8f3;
    --text-primary: #4b3621;
    --text-secondary: rgba(75, 54, 33, 0.7);
    --text-muted: rgba(75, 54, 33, 0.5);
    --primary-color: #9f7e53;
    --secondary-color: #826a46;
    --accent-color: #9f7e53;
    --border-color: #d8d0c5;
}

body.theme-sunset {
    --background-color: #fffbf0;
    --surface-color: #fff7e6;
    --text-primary: #7c2d12;
    --text-secondary: rgba(124, 45, 18, 0.7);
    --text-muted: rgba(124, 45, 18, 0.5);
    --primary-color: #f97316;
    --secondary-color: #eab308;
    --accent-color: #d946ef;
    --border-color: #fed7aa;
}

/* Mini Stats */
.mini-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mini-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mini-stats .stat-item i {
    color: var(--primary-color);
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.action-btn:hover {
    background: #1e40af;
    transform: translateY(-1px);
}

/* Notifications */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.notification {
    background: var(--surface-color);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    margin-bottom: 1rem;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    border-left: 4px solid var(--primary-color);
    min-width: 300px;
    cursor: pointer;
}

.notification:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left-color: var(--secondary-color);
}

.notification-error {
    border-left-color: #ef4444;
}

.notification-info {
    border-left-color: var(--primary-color);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-body {
    padding: 1.5rem;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.5rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Timeline View */
.view-timeline .news-container {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-container {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.timeline-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid var(--border-color);
}

.timeline-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timeline-header .article-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.timeline-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.timeline-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.timeline-empty h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.timeline-empty p {
    font-size: 0.875rem;
}

/* Timeline Groups */
.timeline-group {
    border-bottom: 1px solid var(--border-color);
}

.timeline-group:last-child {
    border-bottom: none;
}

.timeline-group-header {
    padding: 1rem 1.5rem;
    background: #fafbfc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 60px;
    z-index: 10;
}

.timeline-group-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-article-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.timeline-articles {
    padding: 0;
}

/* Timeline Article */
.timeline-article {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    position: relative;
}

.timeline-article:hover {
    background: #f9fafb;
}

.timeline-article:last-child {
    border-bottom: none;
}

.timeline-article.read {
    opacity: 0.6;
}

.timeline-article.favorite {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 3px solid var(--accent-color);
}

.timeline-article-time {
    flex-shrink: 0;
    width: 60px;
    text-align: right;
}

.exact-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.timeline-article-content {
    flex: 1;
    min-width: 0;
}

.timeline-article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.timeline-source-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-article-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.timeline-tags {
    display: flex;
    gap: 0.5rem;
}

/* Time Period Select */
.time-period-select {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-period-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Mobile adjustments for timeline */
@media (max-width: 768px) {
    .timeline-article {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .timeline-article-time {
        width: auto;
        text-align: left;
    }
    
    .exact-time {
        font-size: 0.75rem;
    }
    
    .timeline-group-header {
        padding: 0.75rem 1rem;
        top: 50px;
    }
}

/* Source Filters */
.source-filters {
    display: flex;
    gap: 0.25rem;
}

.source-filter-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-filter-btn:hover {
    background: #f9fafb;
    transform: translateY(-1px);
}

.source-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Source select dropdown */
.source-select {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: white;
    color: var(--text-color);
    font-size: 0.875rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    cursor: pointer;
}

.source-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Swedish source specific styles */
.news-source[data-source-type="swedish"] .source-icon {
    box-shadow: 0 0 0 2px #006aa7, 0 0 0 4px #fecc00;
}

/* International source specific styles */
.news-source[data-source-type="international"] .source-icon {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Source Credibility Styles */
.source-credibility-summary {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
    transition: all 0.3s ease;
}

.source-credibility-summary:hover {
    background: rgba(0, 0, 0, 0.04);
}

.credibility-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.credibility-indicator.very-high-credibility {
    color: #047857;
}

.credibility-indicator.high-credibility {
    color: #059669;
}

.credibility-indicator.good-credibility {
    color: #10b981;
}

.credibility-indicator.medium-credibility {
    color: #d97706;
}

.credibility-indicator.variable-credibility {
    color: #f59e0b;
}

.credibility-indicator.low-credibility {
    color: #dc2626;
}

.credibility-indicator.very-low-credibility {
    color: #991b1b;
}

/* Credibility calculation indicator */
.credibility-indicator::after {
    content: attr(data-source);
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 0.5rem;
}

/* Debug mode for credibility */
body.debug-credibility .source-credibility-summary {
    border: 2px dashed #ff0000;
}

body.debug-credibility .source-credibility-summary::before {
    content: attr(data-debug);
    display: block;
    font-size: 0.65rem;
    color: #ff0000;
    margin-bottom: 0.25rem;
}

.credibility-details-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.credibility-details-btn:hover {
    background: var(--primary-dark);
}

.single-source-warning {
    font-size: 0.75rem;
    color: #d97706;
    font-style: italic;
}

.source-credibility {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.credibility-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.credibility-score .score {
    color: #6b7280;
    font-weight: normal;
}

.source-base-credibility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 4px;
    border-left: 3px solid var(--border-color);
}

.source-base-credibility strong {
    margin-right: 0.5rem;
}

.source-base-credibility .score {
    color: #6b7280;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.cross-references {
    margin-top: 1rem;
}

.source-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.source-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.source-list li:last-child {
    border-bottom: none;
}

.source-name {
    font-weight: 500;
}

.pub-time {
    color: #6b7280;
    font-size: 0.875rem;
}

.credibility-note {
    background: #f0fdf4;
    color: #166534;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.single-source .credibility-note {
    background: #fef3c7;
    color: #92400e;
}

/* Credibility Modal */
.credibility-modal, .credibility-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.credibility-modal.show, .credibility-info-modal.show {
    opacity: 1;
}

.credibility-modal .modal-content, .credibility-info-modal .modal-content {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.credibility-modal .modal-header, .credibility-info-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.credibility-modal .modal-header h3, .credibility_info-modal .modal-header h3 {
    margin: 0;
    color: var(--text-color);
}

.credibility-modal .close-modal, .credibility-info-modal .close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}

.credibility-modal .close-modal:hover, .credibility-info-modal .close-modal:hover {
    color: var(--text-color);
}

.credibility-modal .modal-body, .credibility-info-modal .modal-body {
    padding: 1.5rem;
}

/* Credibility Info Modal Styling */
.credibility-info-modal .modal-content {
    max-width: 700px;
}

.credibility-info-modal h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.credibility-info-modal h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.credibility-info-modal h5::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--primary-color);
    font-size: 1.2em;
}

.credibility-info-modal .info-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.credibility-info-modal ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.credibility-info-modal ul li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.credibility-info-modal .credibility-level {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.credibility-info-modal .level-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}

.credibility-info-modal .level-details {
    flex: 1;
}

.credibility-info-modal .level-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.credibility-info-modal .level-desc {
    font-size: 0.875rem;
    line-height: 1.5;
}

.credibility-info-modal .very-high-credibility .level-name {
    color: #047857;
}

.credibility-info-modal .high-credibility .level-name {
    color: #059669;
}

.credibility-info-modal .good-credibility .level-name {
    color: #10b981;
}

.credibility-info-modal .medium-credibility .level-name {
    color: #d97706;
}

.credibility-info-modal .variable-credibility .level-name {
    color: #f59e0b;
}

.credibility-info-modal .low-credibility .level-name {
    color: #dc2626;
}

.credibility-info-modal .very-low-credibility .level-name {
    color: #991b1b;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .source-filters {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .source-filter-btn {
        flex: 1;
        justify-content: center;
        min-width: 100px;
    }
    
    /* Tema-anpassningar för mobil */
    .theme-controls {
        flex-direction: column;
    }
    
    .theme-select-wrapper {
        width: 100%;
    }
    
    .theme-toggles {
        margin-top: 0.5rem;
        width: 100%;
    }
    
    .theme-btn {
        flex: 1;
    }
    
    .theme-filter {
        order: 10;  /* Flytta temasektionen sist i control panel på mobil */
    }
}

/* Source Reference Styles */
.source-reference {
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.source-reference:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.source-reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.verification-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.verification-high .verification-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.verification-medium .verification-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.verification-low .verification-badge {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.verification-unverified .verification-badge {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.credibility-score {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
}

.source-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.875rem;
}

.source-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.source-reference.expanded .source-details {
    max-height: 500px;
}

.source-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.source-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.source-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-name {
    font-weight: 600;
    color: #1e293b;
}

.source-type {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.source-type.swedish {
    background: #dbeafe;
    color: #1d4ed8;
}

.source-type.international {
    background: #dcfce7;
    color: #166534;
}

.source-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #64748b;
}

.credibility-mini {
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
    color: #475569;
}

.trust-indicators {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    border-left: 4px solid #10b981;
}

.indicators-label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.indicators-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.indicators-list li {
    padding: 0.25rem 0;
    color: #475569;
    font-size: 0.875rem;
}

.indicators-list li:before {
    content: "✓ ";
    color: #10b981;
    font-weight: bold;
    margin-right: 0.5rem;
}

.toggle-sources-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.75rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.toggle-sources-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.source-reference.expanded .toggle-sources-btn .toggle-text:after {
    content: " mindre";
}

.source-reference:not(.expanded) .toggle-sources-btn .toggle-text:after {
    content: "";
}

.source-reference.expanded .toggle-sources-btn i {
    transform: rotate(180deg);
}

/* Mobile responsiveness for source references */
@media (max-width: 768px) {
    .source-reference-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .source-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .source-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* PWA Specific Styles */
.install-prompt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.install-btn {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
}

.dismiss-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.25rem;
}

.offline-indicator {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: #ef4444;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    z-index: 100;
    animation: fadeIn 0.3s ease-out;
}

/* Enhanced Mobile Styles */
@media (max-width: 768px) {
    /* Safe area for notched devices */
    .header {
        padding-top: env(safe-area-inset-top);
    }
    
    .container {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Improved header for mobile */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    
    .header-content {
        padding: 0.75rem 1rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .title {
        font-size: 1rem;
    }
    
    .title-text {
        display: none;
    }
    
    .subtitle {
        display: none;
    }
    
    .refresh-btn,
    .clear-cache-btn {
        padding: 0.5rem;
        font-size: 0;
    }
    
    .refresh-btn i,
    .clear-cache-btn i {
        font-size: 1.25rem;
        margin: 0;
    }
    
    .refresh-text,
    .clear-cache-text {
        display: none;
    }
    
    /* Container adjustments for fixed header */
    .container {
        padding-top: 60px;
    }
    
    /* Compact stats bar */
    .stats-bar {
        padding: 0.75rem;
        gap: 1rem;
        margin-bottom: 1rem;
        position: sticky;
        top: 60px;
        z-index: 90;
        background: var(--surface-color);
    }
    
    .stat-item {
        font-size: 0.75rem;
    }
    
    .last-updated-text {
        display: none;
    }
    
    /* Control panel mobile optimization */
    .control-panel {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0;
        margin-left: -1rem;
        margin-right: -1rem;
    }
    
    .search-container {
        margin-bottom: 0.75rem;
    }
    
    .search-input {
        padding: 0.625rem 2.25rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .filter-section {
        gap: 1rem;
    }
    
    .filter-group {
        flex: 1 1 100%;
    }
    
    .filter-group label {
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .sort-select,
    .time-period-select,
    .category-select {
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .view-toggles,
    .theme-toggles {
        width: 100%;
        justify-content: space-between;
    }
    
    .view-btn,
    .theme-btn {
        flex: 1;
        padding: 0.625rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Quick actions mobile */
    .quick-actions {
        gap: 0.5rem;
    }
    
    .action-btn {
        flex: 1;
        padding: 0.5rem;
        font-size: 0.75rem;
        justify-content: center;
    }
    
    .action-btn span {
        display: none;
    }
    
    /* News container mobile */
    .news-container {
        gap: 0.75rem;
    }
    
    .news-source {
        border-radius: var(--border-radius);
    }
    
    .source-header {
        padding: 0.75rem;
    }
    
    .source-icon {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .source-name h3 {
        font-size: 0.875rem;
    }
    
    /* Article mobile optimization */
    .article {
        padding: 0.75rem;
    }
    
    .article-title {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .article-description {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    .article-meta {
        font-size: 0.65rem;
        gap: 0.5rem;
    }
    
    .article-image {
        height: 80px;
    }
    
    /* Touch-friendly action buttons */
    .action-icon {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Timeline mobile */
    .timeline-article {
        padding: 0.75rem;
    }
    
    .timeline-article-time {
        margin-bottom: 0.25rem;
    }
    
    /* Bottom padding for install prompt */
    .container {
        padding-bottom: 100px;
    }
    
    /* Modal mobile optimization */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    /* Notification mobile */
    .notification-container {
        left: 10px;
        right: 10px;
        top: 70px;
    }
    
    .notification {
        min-width: auto;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Small mobile devices */
@media (max-width: 380px) {
    .news-container {
        grid-template-columns: 1fr;
    }
    
    .view-btn i,
    .theme-btn {
        font-size: 0.875rem;
    }
    
    .stat-item {
        font-size: 0.7rem;
    }
    
    .article-actions {
        gap: 0;
    }
    
    .action-icon {
        padding: 0.375rem;
        font-size: 0.75rem;
    }
}

/* Touch interactions */
@media (hover: none) and (pointer: coarse) {
    .article:active {
        background: #f3f4f6;
    }
    
    .action-icon:active {
        transform: scale(0.95);
    }
    
    .refresh-btn:active {
        transform: scale(0.95);
    }
}

/* Settings Toggles */
.settings-toggles {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Failed RSS Source Indicator */
.rss-error-indicator {
    background-color: #fee2e2;
    border-left: 4px solid #dc2626;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn 0.3s ease-out;
}

.rss-error-message {
    flex: 1;
    margin-right: 1rem;
}

.rss-retry-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.rss-retry-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: var(--border-color);
    border-radius: 11px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.toggle-label {
    font-size: 1rem;
    user-select: none;
}

.cache-clear-btn {
    display: flex;
    align-items: center;
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    margin-left: 1rem;
    transition: background-color 0.2s;
}

.cache-clear-btn:hover {
    background: var(--primary-dark);
}

.cache-clear-btn i {
    margin-right: 0.25rem;
}

.info-btn {
    display: flex;
    align-items: center;
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    margin-left: 1rem;
    transition: background-color 0.2s;
}

.info-btn:hover {
    background: #f59e0b;
}

.info-btn i {
    margin-right: 0.25rem;
}

/* Pulse animation for notification icon */
@keyframes bellRing {
    0% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.notification-bell {
    animation: bellRing 2s ease-in-out infinite;
}