:root {
            --primary: #6f42c1;
        }
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .navbar {
            background: #fff;
            padding: 1rem 0;
        }
        .navbar-brand {
            font-weight: 700;
            font-size: 1.65rem;
        }
        .compact-search {
            background: linear-gradient(135deg, #6f42c1, #9f7dff);
            color: white;
            padding: 1.2rem 0;
        }
        .search-input {
            border-radius: 50px;
            padding: 0.75rem 1.25rem;
            font-size: 1.05rem;
        }

        /* Recente analyses (onder datum) — opvallender */
        .today-item {
            border: 1px solid #e0d4f5;
            border-radius: 12px;
            padding: 1.75rem 1.5rem;
            margin-bottom: 1.25rem;
            transition: all 0.25s ease;
            background-color: #fff;
        }
        .today-item:hover {
            background-color: #f8f4ff;
            border-color: #c5b3f0;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(111, 66, 193, 0.12);
        }

        .article-item {
            border-bottom: 1px solid #eee;
            padding: 1.5rem 1.25rem;
            margin: 0 -1.25rem;
            transition: background-color 0.2s;
            border-radius: 8px;
        }
        .article-item:hover {
            background-color: #f0e8ff;
        }
        .article-item:last-child {
            border-bottom: none;
        }

        .score-bar-container {
            height: 10px;
            border-radius: 5px;
            position: relative;
            margin: 6px 0;
        }
        .score-marker {
            position: absolute;
            top: -4px;
            width: 18px;
            height: 18px;
            background: white;
            border: 3px solid #6f42c1;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* Kleurenbalken */
        .feitenscore-bar, .populisme-bar, .framing-bar {
            background: linear-gradient(to right, #dc3545, #fff, #28a745);
        }
        .politiek-bar {
            background: linear-gradient(to right, #28a745, #fff, #0d6efd);
        }

        .score-percentage {
            font-size: 0.85rem;
            font-weight: 600;
            color: #555;
        }
        .source-logos {
            overflow-x: auto;
            white-space: nowrap;
            padding: 8px 0;
        }
        .source-logos img {
            width: 42px;
            height: 42px;
            object-fit: contain;
            margin-right: 12px;
            border-radius: 6px;
            border: 1px solid #ddd;
        }
        .sidebar-card {
            background: linear-gradient(145deg, #f8f9fa, #ffffff);
            border: 1px solid #e0d4f5;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(111, 66, 193, 0.08);
        }

        .highlight-section {
            background: linear-gradient(145deg, #f8f4ff, #f0e8ff);
            border-radius: 12px;
            padding: 1.5rem;
        }

        /* Categorie pills */
        .category-pills {
            background: #f8f9fa;
            border-radius: 50px;
            padding: 8px;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 8px;
        }
        .category-pill {
            border-radius: 50px;
            padding: 10px 24px;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .category-pill.active {
            background: #6f42c1;
            color: white;
            box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, #2b2b2b, #1f1f2e);
            color: #ddd;
            padding-bottom: 0 !important;
        }
        .footer-bottom {
            background: #181824;
            padding: 1rem 0 30px 0;
            font-size: 0.9rem;
        }

/* ==================== ARTIKELPAGINA ==================== */

.article-hero {
    background: linear-gradient(135deg, #6f42c1, #9f7dff);
    color: white;
    padding: 4rem 0 3rem;
    margin-bottom: 2rem;
}

.article-hero .badge {
    font-size: 0.95rem;
    padding: 0.5em 1em;
}

.score-card {
    border: 1px solid #e0d4f5;
    border-radius: 12px;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.08);
}

.source-row {
    border-bottom: 1px solid #f0e8ff;
    padding: 1.1rem 0;
}

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

.fact-list {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.75rem;
    border-left: 5px solid var(--primary);
}

.today-item, .highlight-section {
    background: #fff;
    border: 1px solid #e0d4f5;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.today-item:hover, .highlight-section:hover {
    border-color: #c5b3f0;
    box-shadow: 0 15px 35px rgba(111, 66, 193, 0.12);
    transform: translateY(-4px);
}

/* Extra ruimte en typografie voor artikel */
h4 {
    color: #2c2c2c;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.sticky-top {
    top: 30px;
}
.nshow {display:none;}

.tooltip {
    opacity: 1 !important;
}

.tooltip-inner {
    max-width: 380px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-style: italic;
    padding: 12px 18px !important;
    text-align: left;
    line-height: 1.5;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    opacity: 1 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #fff !important;
}

.md-12-Art { margin-bottom:0px;padding-left:30px;padding-right:30px; }
.artDiv {background:#fff;border:1px solid #e0d4f5;border-radius:14px;padding:1.85rem;padding-bottom:40px;box-shadow:0 4px 12px rgba(0,0,0,0.04);}
.mBot12 {margin-bottom:12px;}

.Mt-30 {margin-top:-30px;}

.artDiv span {color:#666;font-size:0.9rem;}
.TagButton {background:#f1e9ff;color:#6f42c1;font-size:0.75rem;padding:3px 10px;border-radius:20px;margin-left:6px;text-decoration:none;}
.CategoryButton {background:#6f42c1;color:#fff;font-size:0.75rem;padding:3px 10px;border-radius:20px;margin-left:8px;text-decoration:none;}

.listRowLeft {border:1px solid #e0d4f5;background:linear-gradient(180deg, #fff, #fff5f5);border-radius:14px;padding-top:15px;margin-bottom:1.75rem;box-shadow:0 3px 8px rgba(0,0,0,0.03);}
.listRowRight {border:1px solid #e0d4f5;background:linear-gradient(180deg, #fff, #f5f8ff);border-radius:14px;padding-top:15px;margin-bottom:1.75rem;box-shadow:0 3px 8px rgba(0,0,0,0.03);}
.listRow li {color:#555555;padding:0 0 0 10px;}

.listRow ul {list-style: none; color:inherit;padding-left:0px!important;font-size:0.95em;text-align:center;}
.listRow img {width:20px; cursor:pointer;}

.sidebarItem {float:left;width:100%; padding:10px 20px 10px 30px; border-radius:10px; border-right:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; text-decoration:none; color:inherit;transition: font-weight 0.25s ease, font-size 0.25s ease;}
.sidebarItem span {font-weight:500;color:#9f7dff;font-size:0.8em;margin-left:-45px;background:#fff;padding:5px 10px 5px 0;}
.sidebarItem:hover {color:#6f42c1!important;background:linear-gradient(90deg, #fff, #fff);}

.articleLink {color:inherit;text-decoration:none;cursor:pointer;}

.spinner {
            width: 18px;
            height: 18px;
            border: 3px solid #ccc;
            border-top: 3px solid #3498db;   /* blauwe kleur van de spinner */
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


.mainArticleCat {position:absolute;top:0;right:0;bottom:0;width:45%;background-size: cover;background-position: right center;background-repeat: no-repeat;z-index:0;pointer-events:none;}