body {
    font-family: Arial, sans-serif;
    background: #070b18;
    margin: 0;
    padding: 0;
    color: #ffffff;
}

.page {
    padding: 40px;
}

h1 {
    margin-bottom: 24px;
}

h2 {
    margin: 0 0 14px 0;
}

.card,
.learning-card {
    background: #ffffff;
    color: #000;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* ==========================================
   Moderne index pagina
========================================== */

.landing-page {
    min-height: 100vh;
    padding: 50px;
    background:
        radial-gradient(circle at top left, rgba(64, 122, 255, 0.35), transparent 35%),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.30), transparent 30%),
        linear-gradient(135deg, #070b18 0%, #101827 55%, #050816 100%);
}

.hero {
    max-width: 1050px;
    margin: 0 auto 45px auto;
    padding: 55px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.hero-badge {
    display: inline-block;
    margin-bottom: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.hero h1 {
    margin: 0 0 20px 0;
    font-size: 58px;
    line-height: 1;
}

.hero-text {
    max-width: 760px;
    color: #cbd5e1;
    font-size: 20px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: bold;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.dashboard-grid {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.dashboard-card {
    display: block;
    min-height: 185px;
    padding: 26px;
    border-radius: 22px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
    transition: transform 0.2s ease, background 0.2s ease, border 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(96, 165, 250, 0.75);
}

.dashboard-card .icon {
    font-size: 34px;
    margin-bottom: 18px;
}

.dashboard-card h2 {
    color: #ffffff;
    font-size: 23px;
}

.dashboard-card p {
    color: #cbd5e1;
    line-height: 1.5;
}

.dashboard-card-sys {
    grid-column: 1 / -1;
}
.dashboard-card-sys.sys-ok {
    border-left: 5px solid #22c55e;
}
.dashboard-card-sys.sys-warning {
    border-left: 5px solid #eab308;
}
.dashboard-card-sys.sys-error {
    border-left: 5px solid #ef4444;
}
.dashboard-card-sys.sys-unknown {
    border-left: 5px solid #64748b;
}


/* ==========================================
   Systeemstatus
========================================== */

.back-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    color: #93c5fd;
    margin-bottom: 24px;
    font-size: 14px;
}
.back-link:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

.subtitle {
    color: #94a3b8;
    margin-top: -10px;
    margin-bottom: 32px;
}

.systeemstatus-paginakop {
    max-width: 1200px;
    margin: 0 auto 26px auto;
}
.systeemstatus-paginakop h1 {
    margin: 0 0 8px 0;
    font-size: 34px;
}
.systeemstatus-paginakop p {
    margin: 0;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.5;
}

.systeemstatus-categorieen {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    gap: 20px;
    justify-content: start;
}

.systeemstatus-tegel {
    display: block;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    text-decoration: none;
    color: #ffffff;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.systeemstatus-tegel:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.13);
    border-color: rgba(96,165,250,.7);
}
.systeemstatus-tegel-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.systeemstatus-tegel-icon {
    font-size: 24px;
    line-height: 1;
}
.systeemstatus-tegel-naam {
    font-size: 20px;
    font-weight: 700;
}
.systeemstatus-tegel-proces {
    color: #cbd5e1;
    font-size: 15px;
    margin-bottom: 6px;
}
.systeemstatus-tegel-samenvatting {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
}
.systeemstatus-tegel-ok {
    border-left: 5px solid #22c55e;
}
.systeemstatus-tegel-warning {
    border-left: 5px solid #eab308;
}
.systeemstatus-tegel-error {
    border-left: 5px solid #ef4444;
}

@media (max-width: 720px) {
    .systeemstatus-paginakop h1 {
        font-size: 28px;
    }
    .systeemstatus-categorieen {
        grid-template-columns: 1fr;
    }
}

.systeemstatus-message {
    color: #94a3b8;
    padding: 20px 0;
}
.systeemstatus-message-error {
    color: #fca5a5;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(15,23,42,.38);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.back-button:hover {
    background: rgba(51,65,85,.55);
}

/* Detailtabel scans */
.systeemstatus-table-wrapper {
    max-width: 1050px;
    margin: 0 auto;
}
.systeemstatus-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(15,23,42,.94);
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 12px;
    overflow: hidden;
}
.systeemstatus-table th {
    text-align: left;
    padding: 14px 16px;
    background: rgba(30,41,59,.6);
    color: #94a3b8;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(148,163,184,.15);
}
.systeemstatus-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148,163,184,.08);
    color: #e2e8f0;
}
.systeemstatus-table tbody tr:last-child td {
    border-bottom: none;
}

.systeemstatus-status-ok {
    color: #4ade80;
}
.systeemstatus-status-error {
    color: #ef4444;
}
.systeemstatus-status-warning {
    color: #eab308;
}
.systeemstatus-status-planned {
    color: #eab308;
}

.systeemstatus-result {
    font-size: 14px;
}

.systeemstatus-row-clickable {
    cursor: pointer;
}
.systeemstatus-row-clickable:hover td {
    background: rgba(148,163,184,.08);
}

.systeemstatus-detail-row td {
    padding: 0;
}
.systeemstatus-detail-box {
    padding: 12px 16px 16px 40px;
    background: rgba(15,23,42,.7);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    border-top: 1px solid rgba(148,163,184,.1);
}
.systeemstatus-detail-box ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.systeemstatus-detail-box li {
    margin-bottom: 4px;
    line-height: 1.5;
}
.systeemstatus-detail-probleem {
    margin: 0;
}
.controle-lijst {
    margin-top: 12px;
    display: grid;
    gap: 6px;
}
.controle-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}
.controle-icon {
    flex: none;
    font-weight: 700;
}
.controle-ok .controle-icon,
.controle-ok {
    color: #4ade80;
}
.controle-warning .controle-icon,
.controle-warning {
    color: #facc15;
}
.controle-error .controle-icon,
.controle-error {
    color: #f87171;
}

.systeemstatus-sectie {
    margin-bottom: 14px;
}
.systeemstatus-sectie:last-child {
    margin-bottom: 0;
}
.systeemstatus-sectie-titel {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: 6px;
}
.systeemstatus-resultaat-tekst {
    font-weight: 600;
    color: #e2e8f0;
}
.systeemstatus-afwijking-tekst {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(251,191,36,.4);
    border-left: 4px solid #fbbf24;
    border-radius: 8px;
    background: rgba(251,191,36,.08);
    color: #fbbf24;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
}
.horizon-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(148,163,184,.22);
    border-left: 4px solid #64748b;
    border-radius: 8px;
    background: rgba(2,6,23,.55);
    padding: 10px 12px;
}
.horizon-card.controle-ok {
    border-left-color: #4ade80;
}
.horizon-card.controle-error {
    border-left-color: #f87171;
}
.horizon-kop {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.horizon-titel {
    color: #e2e8f0;
}
.horizon-meting {
    margin-left: auto;
    font-weight: 600;
    font-size: 12px;
}
.horizon-card.controle-ok .horizon-meting {
    color: #4ade80;
}
.horizon-card.controle-error .horizon-meting {
    color: #f87171;
}
.horizon-gegevens {
    display: grid;
    gap: 3px;
}
.horizon-rij {
    display: flex;
    gap: 10px;
    font-size: 13px;
}
.horizon-label {
    flex: none;
    width: 110px;
    color: #64748b;
}
.horizon-waarde {
    color: #e2e8f0;
    font-weight: 600;
}
.horizon-detail {
    color: #cbd5e1;
    font-size: 13px;
}
.horizon-fout {
    padding: 8px 10px;
    border: 1px solid rgba(248,113,113,.3);
    border-radius: 6px;
    background: rgba(248,113,113,.12);
    color: #fca5a5;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
}
.systeemstatus-afwijkingen {
    list-style: disc;
}
.systeemstatus-diagnose-knop {
    margin-top: 4px;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid rgba(148,163,184,.3);
    border-radius: 6px;
    background: rgba(148,163,184,.08);
    color: #94a3b8;
    cursor: pointer;
}
.systeemstatus-diagnose-knop:hover {
    background: rgba(148,163,184,.16);
    color: #e2e8f0;
}
.systeemstatus-diagnose {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 8px;
    background: rgba(2,6,23,.6);
}
.systeemstatus-diagnose dl {
    margin: 0;
    display: grid;
    gap: 6px;
}
.systeemstatus-diagnose dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
}
.systeemstatus-diagnose dd {
    margin: 0 0 8px;
    color: #cbd5e1;
}

.datum-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.datum-label.datum-label-inline {
    display: inline;
    margin-top: 0;
    font-size: 12px;
}

/* ==========================================
   Scan / analyzer kaarten
========================================== */

.analyzer {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}

.analyzer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analyzer-title {
    font-weight: bold;
}

.analyzer-score {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    background: #eee;
}

.toggle {
    cursor: pointer;
    color: #007bff;
    font-size: 12px;
    margin-top: 5px;
}

.details {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: #444;
}

/* ==========================================
   Learning statistieken
========================================== */

.learning-table {
    width: auto;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 15px;
    color: #000;
}

.learning-table th,
.learning-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e8ec;
    white-space: nowrap;
}

.learning-table th {
    background: #f0f3f7;
    font-weight: bold;
    text-align: left;
}

.learning-table th:first-child,
.learning-table td:first-child {
    width: 220px;
}

.learning-table th.number,
.learning-table td.number {
    width: 70px;
    text-align: right;
}

.learning-status {
    font-weight: bold;
}

.learning-positive {
    font-weight: bold;
}

.learning-negative {
    font-weight: bold;
}

.learning-neutral {
    color: #555;
}

@media (max-width: 900px) {
    .landing-page {
        padding: 24px;
    }

    .hero {
        padding: 32px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
    }
}

/* ==========================================
   Moderne subpagina's
========================================== */

.dark-page {
    min-height: 100vh;
    padding: 42px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 32%),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 30%),
        linear-gradient(135deg, #070b18 0%, #0f172a 55%, #050816 100%);
}

.page-hero {
    max-width: 1200px;
    margin: 0 auto 28px auto;
    padding: 38px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.small-hero h1 {
    margin: 0 0 14px 0;
    font-size: 42px;
}

.modern-panel {
    max-width: 1200px;
    margin: 0 auto 22px auto;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
    color: #ffffff;
}

.modern-panel h2 {
    color: #ffffff;
}

.modern-panel p {
    color: #cbd5e1;
}

.modern-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.stat-pill {
    min-width: 120px;
    padding: 16px 22px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(124, 58, 237, 0.35));
    border: 1px solid rgba(147, 197, 253, 0.35);
}

.stat-pill span {
    display: block;
    font-size: 34px;
    font-weight: bold;
    color: #ffffff;
}

.stat-pill small {
    color: #cbd5e1;
}

.modern-list {
    margin-top: 18px;
    color: #cbd5e1;
}
/* ==========================================
   Fix scanhistorie regels op donkere pagina
========================================== */

.modern-list .card {
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    border: 1px solid rgba(147, 197, 253, 0.22);
    box-shadow: none;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 12px;
}

.modern-list .card strong,
.modern-list .card span,
.modern-list .card p,
.modern-list .card div {
    color: #ffffff;
}

.modern-list .card:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(96, 165, 250, 0.65);
}

/* ==========================================
   Scans pagina - scanregels
========================================== */

.scan-row {
    display: grid;
    grid-template-columns: 160px 190px 140px;
    gap: 24px;
    align-items: center;
    margin-bottom: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(147, 197, 253, 0.22);
    color: #ffffff;
}

.scan-row:hover {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(96, 165, 250, 0.7);
}

.scan-type {
    font-weight: bold;
    color: #93c5fd;
}

.scan-date,
.scan-count {
    color: #e5e7eb;
}

/* ==========================================
   Live scan
========================================== */

.scan-results {
    margin-top: 25px;
}

.status-live {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
    font-weight: bold;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 12px #22c55e;
}

/* ==========================================
   Learning
========================================== */

.learning-results {
    margin-top: 25px;
}

.status-learning {

    display: inline-flex;
    align-items: center;

    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(124,58,237,.15);

    border: 1px solid rgba(168,85,247,.35);

    color: #d8b4fe;

    font-weight: bold;

    cursor: default;
    pointer-events: none;
    user-select: none;

}

.modern-button {

    padding: 14px 28px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    font-size: 15px;

    font-weight: bold;

    color: white;

    background: linear-gradient(135deg,#2563eb,#7c3aed);

    transition: .2s;

}

.modern-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(37,99,235,.35);

}

.save-panel {

    margin-top: 24px;

}

/* ==========================================
   Scan Historie
========================================== */

.scan-history-list {

    margin-top: 25px;

}

.status-history {

    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(59,130,246,.15);

    border: 1px solid rgba(96,165,250,.35);

    color: #93c5fd;

    font-weight: bold;

}

/* ==========================================
   Scan Historie kaarten - definitieve fix
========================================== */

.scan-history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.history-card {
    display: block !important;
    padding: 24px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(147, 197, 253, 0.25) !important;
    color: #ffffff !important;
}

.history-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.history-title {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

.history-subtitle {
    margin-top: 6px !important;
    color: #93c5fd !important;
    font-weight: bold !important;
}

.history-score {
    min-width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

.history-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
    color: #e5e7eb !important;
}

.history-info strong {
    color: #93c5fd !important;
}

.history-footer {
    display: flex !important;
    justify-content: flex-end !important;
}

/* =========================
   SCAN RESULTAAT KAARTEN
========================= */

#resultaten .card {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

#resultaten .card h2 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 14px;
}

#resultaten .analyzer {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding: 12px 0;
}

#resultaten .analyzer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f8fafc;
    font-weight: 700;
}

#resultaten .analyzer-score {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 8px;
    padding: 3px 8px;
}

#resultaten .details {
    margin-top: 10px;
    color: #cbd5e1;
}

/* ===========================
   LIVE SCAN LOADER
=========================== */

.scan-loader-wrapper{
    margin-top:20px;
}

.scan-loader-text{
    color:#dbeafe;
    font-weight:600;
    margin-bottom:12px;
}

.scan-loader{
    position:relative;
    height:14px;
    width:100%;
    border-radius:20px;
    overflow:hidden;
    background:#07111f;
    border:1px solid #1f7a48;
}

.scan-loader span{
    position:absolute;
    top:1px;
    left:-70px;

    width:70px;
    height:10px;

    border-radius:20px;

    background:#22c55e;

    box-shadow:
        0 0 8px #22c55e,
        0 0 20px #22c55e,
        0 0 35px #22c55e;

    animation:kittscan .8s ease-in-out infinite alternate;
}

@keyframes kittscan{

    from{
        left:-70px;
    }

    to{
        left:calc(100% - 5px);
    }

}

/* ==========================================
   Responsive hoofdheader
========================================== */

.main-header {
    position: relative;
    z-index: 100;
    background: rgba(31, 41, 55, 0.98);
    color: #ffffff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.main-header-inner {
    width: 100%;
    max-width: 1400px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-header-brand {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

.main-navigation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.main-navigation-links,
.main-navigation-account {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-navigation a {
    position: relative;
    padding: 22px 0 20px;
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: #60a5fa;
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.main-navigation a:hover,
.main-navigation a.is-active {
    color: #93c5fd;
}

.main-navigation a:hover::after,
.main-navigation a.is-active::after {
    transform: scaleX(1);
}

.header-hidden {
    display: none !important;
}

.mobile-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {

    .main-header-inner {
        min-height: 60px;
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 0;
    }

    .main-header-brand {
        font-size: 20px;
    }

    .mobile-menu-button {
        display: block;
    }

    .mobile-menu-button.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .main-navigation {
        display: none;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 10px 16px 18px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(31, 41, 55, 0.99);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation-links,
    .main-navigation-account {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .main-navigation-account {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    .main-navigation a {
        width: 100%;
        padding: 13px 12px;
        box-sizing: border-box;
        border-radius: 10px;
        color: #ffffff;
        font-size: 16px;
    }

    .main-navigation a::after {
        display: none;
    }

    .main-navigation a:hover,
    .main-navigation a.is-active {
        background: rgba(59, 130, 246, 0.16);
        color: #bfdbfe;
    }
}

/* ==========================================
   Analyzer test
========================================== */

.analyzer-test-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.analyzer-test-summary {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}

.analyzer-test-summary-card {
    flex: 1;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.analyzer-test-summary-card span {
    display: block;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.analyzer-test-summary-card strong {
    font-size: 32px;
}

.analyzer-test-grid {
    display: grid;
    gap: 24px;
    margin-top: 30px;
}

.analyzer-test-card {
    padding: 24px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.analyzer-test-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.analyzer-test-position {
    display: block;
    color: #93c5fd;
    margin-bottom: 8px;
    font-weight: bold;
}

.analyzer-test-quality {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: bold;
    background: rgba(59,130,246,.18);
}

.analyzer-test-warning {
    margin-bottom: 18px;
    color: #fbbf24;
    font-weight: bold;
}

.analyzer-test-main-score {
    margin-bottom: 24px;
}

.analyzer-test-main-score span {
    display: block;
    color: #cbd5e1;
}

.analyzer-test-main-score strong {
    display: block;
    margin: 8px 0;
    font-size: 34px;
}

.analyzer-test-main-score small {
    color: #cbd5e1;
}

.analyzer-test-metrics {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
}

.analyzer-test-metric {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
}

.analyzer-test-metric span {
    display: block;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.analyzer-test-metric strong {
    font-size: 22px;
}


/* ==========================================
   Analyzer-test responsive
========================================== */

@media (max-width: 900px) {

    .analyzer-test-page {
        padding: 20px 14px;
    }

    .analyzer-test-header h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .analyzer-test-header p,
    .analyzer-test-explanation p {
        line-height: 1.6;
    }

    .analyzer-test-summary {
        flex-direction: column;
        gap: 14px;
        margin: 22px 0;
    }

    .analyzer-test-summary-card {
        width: 100%;
        box-sizing: border-box;
    }

    .analyzer-test-grid {
        gap: 16px;
        margin-top: 22px;
    }

    .analyzer-test-card {
        padding: 18px;
        box-sizing: border-box;
    }

    .analyzer-test-card-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .analyzer-test-main-score {
        margin-bottom: 18px;
    }

    .analyzer-test-main-score strong {
        font-size: 28px;
    }

    .analyzer-test-main-score small {
        display: block;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .analyzer-test-warning {
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .analyzer-test-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .analyzer-test-page {
        padding: 16px 10px;
        overflow-x: hidden;
    }

    .analyzer-test-header h1 {
        margin-bottom: 16px;
        font-size: 28px;
    }

    .analyzer-test-header p,
    .analyzer-test-explanation p {
        font-size: 15px;
    }

    .analyzer-test-summary-card {
        padding: 16px;
    }

    .analyzer-test-summary-card strong {
        font-size: 26px;
    }

    .analyzer-test-card {
        padding: 16px;
    }

    .analyzer-test-card h2 {
        font-size: 22px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .analyzer-test-main-score strong {
        font-size: 24px;
    }
}

/* ==========================================
   Analyzer-test scorekleuren
========================================== */

.analyzer-test-score-low {
    color: #f87171;
}

.analyzer-test-score-medium {
    color: #fbbf24;
}

.analyzer-test-score-high {
    color: #4ade80;
}

/* ==========================================
   Analyzer-test kaartkleuren
========================================== */

.analyzer-test-card {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.analyzer-test-card-low {
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.10);
}

.analyzer-test-card-medium {
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.10);
}

.analyzer-test-card-high {
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.10);
}
.horizon-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}

.horizon-choice button {
    border: 1px solid rgba(96, 165, 250, .55);
    border-radius: 999px;
    background: transparent;
    color: #e5e7eb;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 700;
}

.horizon-choice button.active {
    background: #2563eb;
    border-color: #60a5fa;
    color: #fff;
}

.analyzer-test-summary .horizon-choice {
    grid-column: 1 / -1;
}