/* Crawlity — licht en donker thema. Kleuren staan als variabelen bovenaan;
   donker is standaard (data-theme op <html>, keuze onthouden in localStorage). */

:root {
    --bg: #f3f5f5;
    --card: #fff;
    --side: #fff;
    --text: #1b1b2f;
    --muted: #7a7c92;
    --line: #e6ebeb;
    --accent: #5b5bf0;
    --accent2: #8a5cf5;
    --good: #12a678;
    --warn: #e89a1c;
    --bad: #ec4f6a;
    --info: #5a7cf0;
    --shadow: 0 1px 2px rgba(20, 20, 60, .04), 0 8px 28px rgba(20, 20, 60, .06);
}
[data-theme="dark"] {
    --bg: #101416;
    --card: #181d20;
    --side: #141819;
    --text: #e8eced;
    --muted: #8f9a9d;
    --line: #263033;
    --accent: #8b8bff;
    --accent2: #b48cff;
    --good: #34d3a0;
    --warn: #f5b544;
    --bad: #ff7088;
    --info: #8ea6ff;
    --shadow: none;
}
:root, [data-theme="dark"] {
    --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--card));
    --good-bg: color-mix(in srgb, var(--good) 14%, var(--card));
    --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--card));
    --bad-bg: color-mix(in srgb, var(--bad) 13%, var(--card));
    --info-bg: color-mix(in srgb, var(--info) 14%, var(--card));
    --gradient: linear-gradient(135deg, var(--accent), var(--accent2));
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

/* Opbouw */
.app { display: flex; min-height: 100vh; }
.side {
    width: 236px;
    background: var(--side);
    border-right: 1px solid var(--line);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
}
.logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; color: var(--text);
    padding: 0 8px 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.logo:hover { text-decoration: none; }
.logo i { width: 28px; height: 28px; background: url(/assets/icoon.svg) center / contain no-repeat; display: inline-block; flex-shrink: 0; }
.grp { font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; padding: 14px 10px 6px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); margin-bottom: 2px; }
.nav:hover { background: var(--accent-soft); text-decoration: none; }
.nav.on { background: var(--gradient); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.side .sp { flex: 1; }
.main { flex: 1; padding: 24px 32px 48px; min-width: 0; }

.top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.search {
    flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; color: var(--muted);
}
.search input { flex: 1; border: none; background: none; color: var(--text); font: inherit; padding: 10px 0; outline: none; }
.top .icon { margin-left: auto; }

/* Knoppen */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: var(--card); color: var(--text);
    border-radius: 10px; padding: 9px 14px; font: inherit; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.pri { background: var(--gradient); border-color: transparent; color: #fff; }
.btn.pri:hover { filter: brightness(1.08); }
.btn.icon { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 17px; }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn.xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .6; cursor: wait; }
form.inline { display: inline; }

/* Koppen */
h1 { font-size: 22px; margin: 0 0 2px; display: flex; align-items: center; gap: 10px; }
.sub { color: var(--muted); margin: 0 0 20px; }
.crumb { margin: 0 0 6px; font-size: 13px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.head > .btn, .head > form { margin-bottom: 20px; }
.muted { color: var(--muted); }
.small { font-size: 12px; font-weight: 400; }
.c-good { color: var(--good); }
.c-bad { color: var(--bad); }

/* KPI-kaarten */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { background: var(--card); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: center; }
.kpi.hi { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--card)), color-mix(in srgb, var(--accent2) 8%, var(--card))); }
.kpi .l { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; margin-right: 6px; }
.ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.ic.sm { width: 32px; height: 32px; font-size: 13px; }

/* Pilletjes */
.pill { display: inline-block; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-good { background: var(--good-bg); color: var(--good); }
.p-warn { background: var(--warn-bg); color: var(--warn); }
.p-bad { background: var(--bad-bg); color: var(--bad); }
.p-info { background: var(--info-bg); color: var(--info); }
.p-accent { background: var(--accent-soft); color: var(--accent); }
.p-muted, .p-none { background: color-mix(in srgb, var(--muted) 14%, var(--card)); color: var(--muted); }

/* Kaarten */
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.card { background: var(--card); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.card.flush { padding: 20px 0 8px; }
.card.flush > h2 { padding: 0 20px; }
.pad { padding-left: 20px; padding-right: 20px; }
.card h2 { font-size: 16px; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card.banner { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.card.empty { text-align: center; padding: 48px 20px; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 12px; background: var(--bg); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--accent-soft); }
td.num, th.num { text-align: right; }
td.right { text-align: right; }
td.nowrap { white-space: nowrap; }
td.url { max-width: 380px; word-break: break-all; }
.av {
    width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px; margin-right: 10px; vertical-align: middle; flex-shrink: 0;
}
h1 .av { margin-right: 0; }
.who { display: inline-block; vertical-align: middle; }
.who a { color: var(--text); }
.who small { display: block; color: var(--muted); }

/* Voortgang */
.progress { width: 120px; height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.progress.wide { width: 100%; height: 8px; }
.progress div { height: 100%; background: var(--gradient); border-radius: 4px; transition: width .3s ease; }

/* Grafieken */
.chart { width: 100%; height: 170px; display: block; }
.spark .chart { height: 70px; margin-top: 14px; }
.chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-svg { width: 120px; height: 120px; }
.leg { flex: 1; min-width: 150px; }
.leg div { display: flex; align-items: center; margin-bottom: 8px; }
.leg b { margin-left: auto; padding-left: 20px; }

/* Activiteit */
.act { display: flex; gap: 12px; margin-bottom: 14px; color: var(--text); }
.act:hover { text-decoration: none; }
.act:hover > div:last-child { color: var(--accent); }
.act small { display: block; color: var(--muted); }

/* Tabbladen */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { padding: 10px 16px; border: none; background: none; color: var(--muted); font: inherit; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.pan { display: none; }
.pan.on { display: block; }

/* Begin hier-balken en verschil */
.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 6px 8px; border-radius: 10px; color: var(--text); }
.bar:hover { background: var(--accent-soft); text-decoration: none; }
.bar .n { width: 240px; flex-shrink: 0; }
.bar .t { flex: 1; height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.bar .f { height: 100%; border-radius: 6px; }
.f-error { background: var(--bad); }
.f-warning { background: var(--warn); }
.f-notice { background: var(--info); }
.bar .c { width: 40px; text-align: right; color: var(--muted); }
.delta { display: flex; gap: 28px; flex-wrap: wrap; color: var(--muted); }
.delta b { display: block; font-size: 24px; color: var(--text); }
.delta b.c-good { color: var(--good); }
.delta b.c-bad { color: var(--bad); }

/* Issues per type */
details.grp-issue { border-bottom: 1px solid var(--line); padding: 12px 0; }
details.grp-issue:last-of-type { border-bottom: none; }
details.grp-issue summary { cursor: pointer; display: flex; gap: 12px; align-items: center; list-style: none; }
details.grp-issue summary::-webkit-details-marker { display: none; }
details.grp-issue summary::before { content: "›"; color: var(--muted); transition: transform .15s; display: inline-block; width: 10px; }
details.grp-issue[open] summary::before { transform: rotate(90deg); }
details.grp-issue summary .c { margin-left: auto; color: var(--muted); }
details.grp-issue ul { list-style: none; margin: 10px 0 6px; padding: 0 0 0 22px; }
details.grp-issue li { padding: 4px 0; word-break: break-all; }
.show-more { margin-left: 22px; }

/* Filters en paginering */
.fil { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fil input, .fil select, .site-form input, .site-form select {
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--text); font: inherit;
}
.fil input { flex: 1; min-width: 200px; }
.pager { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding-top: 12px; }
.pager .btn:disabled { cursor: default; opacity: .4; }

/* Formulier site toevoegen */
.site-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.site-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.site-form input, .site-form select { color: var(--text); font-size: 14px; }
.site-form .btn { align-self: flex-start; }
.error { color: var(--bad); background: var(--bad-bg); padding: 10px 14px; border-radius: 10px; margin: 0; }
.hint { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* Inloggen */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.auth-box { background: var(--card); padding: 32px; border-radius: 18px; width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.auth-box h1 { margin: 0 0 4px; }
.auth-box label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-box input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
.auth-box .btn { justify-content: center; margin-top: 6px; }

/* Smalle schermen */
@media (max-width: 1100px) {
    .kpis, .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    .side { width: auto; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 16px; border-right: none; border-bottom: 1px solid var(--line); gap: 4px; overflow-x: auto; }
    .logo { border: none; padding: 0 8px 0 0; margin: 0; }
    .grp, .side .sp { display: none; }
    .nav { padding: 8px 10px; white-space: nowrap; }
    .main { padding: 16px; }
    .kpis, .kpis.five { grid-template-columns: minmax(0, 1fr); }
    .bar .n { width: 150px; }
    .card h2 { flex-wrap: wrap; }
    .app { max-width: 100vw; overflow-x: hidden; }
}
.logo-mark { width: 28px; height: 28px; background: url(/assets/icoon.svg) center / contain no-repeat; display: inline-block; flex-shrink: 0; }

/* Instellingen en Search Console */
.flash { background: var(--accent-soft); color: var(--text); padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; }
.select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; max-width: 100%; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 4px; }
.kpi .sm-v { font-size: 12px; color: var(--muted); display: block; }
.card-list { margin: 0; padding: 0; list-style: none; }
.grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
td.q { max-width: 320px; word-break: break-word; }
@media (max-width: 1100px) { .grid.even { grid-template-columns: minmax(0, 1fr); } }

/* Privacyverklaring */
.card.privacy { max-width: 720px; margin: 32px auto; line-height: 1.6; }
.card.privacy h1 { font-size: 22px; margin-bottom: 4px; }
.card.privacy h2 { font-size: 15px; margin: 22px 0 6px; display: block; }
.card.privacy ul { padding-left: 20px; }

/* Site bewerken en uitsluitingen */
.head-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
.head-actions form { margin: 0; }
.site-form textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.site-form small { font-size: 12px; }
.site-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }

/* Maandrapport (altijd licht, A4) */
.report-page { background: var(--bg); }
.report-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 820px; margin: 20px auto 0; padding: 0 16px; }
.report { max-width: 820px; margin: 16px auto 40px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 40px 48px; }
.report h1 { font-size: 28px; margin: 4px 0 2px; }
.report h2 { font-size: 17px; margin: 0 0 12px; display: block; }
.report h3 { font-size: 14px; margin: 18px 0 8px; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--line); margin-bottom: 8px; }
.report-kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.report-brand { font-weight: 700; font-size: 18px; text-align: right; }
.report-brand small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.report-brand-logo { height: 32px; width: auto; display: block; margin-left: auto; }
.report-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.report-block h2, .report-block h3 { break-after: avoid; }
.report-list, .report-kpis, .report-table, .report-actions li, .report-score, .chart { break-inside: avoid; }
.report-block:last-of-type { border-bottom: none; }
.report-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.report-big { font-size: 22px; font-weight: 700; }
.report-score { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.report-scores { display: flex; gap: 18px 40px; flex-wrap: wrap; }
.score-circle { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; flex-shrink: 0; }
.score-circle.score-good { background: var(--good-bg); color: var(--good); }
.score-circle.score-warn { background: var(--warn-bg); color: var(--warn); }
.score-circle.score-bad { background: var(--bad-bg); color: var(--bad); }
.report-facts { display: flex; gap: 28px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.report-facts b { display: block; font-size: 22px; color: var(--text); }
.report-facts b.c-good { color: var(--good); }
.report-facts b.c-bad { color: var(--bad); }
.report-trend .chart, .report .chart { height: 90px; }
.report-list { list-style: none; padding: 0; margin: 0; }
.report-list li { padding: 5px 0; display: flex; align-items: center; }
.report-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.report-kpis b { font-size: 24px; margin-right: 6px; }
.report-table { margin-top: 4px; }
.report-table th { background: none; border-bottom: 1px solid var(--line); padding-left: 0; }
.report-table td { padding: 8px 12px 8px 0; }
.report-table th:first-child, .report-table td:first-child { padding-left: 0; }
.report-actions { margin: 0; padding-left: 22px; }
.report-actions li { margin-bottom: 12px; padding-left: 4px; }
.report-actions small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.report-note textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--bg); color: var(--text); margin-bottom: 8px; resize: vertical; }
.report-maint-attention { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.report-maint-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); align-items: flex-start; }
.report-maint-form label { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 13px; }
.report-maint-form textarea, .report-maint-form input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--bg); color: var(--text); resize: vertical; }
.report-maint-form input[type="date"], .report-maint-form input[type="number"] { width: auto; }
.report-foot { color: var(--muted); font-size: 11px; padding-top: 18px; text-align: center; }
.print-only { display: none; }
@media (max-width: 700px) {
    .report { padding: 24px 18px; border-radius: 0; }
    .report-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    @page { size: A4; margin: 14mm; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-page { background: #fff; }
    .report-toolbar, .no-print { display: none !important; }
    .report { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
    .print-only { display: block; }
    .report-note.is-empty, .report-maint.is-empty { display: none; }
    .report-block { padding: 14px 0; }
    .report-head { padding-bottom: 14px; }
}

/* Melding geblokkeerde crawl */
.report-warning { flex-basis: 100%; font-size: 13px; }
.card.banner.alert { border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-bg); }
.card.banner.alert b { color: var(--bad); }

/* Site verwijderen */
.card.danger-zone { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }

/* Dubbele teksten: per tekst de pagina's die hem delen */
.dup-list li.dup { padding: 8px 0; border-bottom: 1px dashed var(--line); word-break: normal; }
.dup-list li.dup:last-child { border-bottom: none; }
.dup-first { font-weight: 600; margin-bottom: 2px; }
.dup-label { font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.dup-text { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 6px; }
.dup-lang { font-size: 12px; color: var(--warn); margin-top: 3px; }
.dup-pages { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.dup-pages a { word-break: break-all; }
.report-pages { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.report-dup { color: var(--text); font-style: italic; margin-right: 4px; }
.report-pages a, .report-pagelist a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.report-pages a:hover, .report-pagelist a:hover { color: var(--accent); }
.report-appendix h3 { font-size: 14px; margin: 18px 0 4px; }
.report-appendix h3 { break-after: avoid; }
.report-appendix h3 .pill { font-size: 11px; margin-right: 4px; vertical-align: 1px; }
.report-appendix h3 + p.muted { margin: 0 0 4px; }
.report-dup-text { font-size: 13px; font-style: italic; margin: 10px 0 2px; }
.report-pagelist { font-size: 12px; break-inside: auto; }
.report-pagelist td { padding: 3px 12px 3px 0; word-break: break-word; vertical-align: top; }
.report-pagelist td:first-child { width: 55%; }
.report-pagelist tr { break-inside: avoid; }

/* Crawl pauzeren/stoppen */
.banner-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner-actions { display: flex; gap: 6px; }
.progress.paused div { background: var(--warn); }

/* Pagina controleren */
.site-form.wide { max-width: 760px; }
table.facts th { background: none; border-bottom: 1px solid var(--line); vertical-align: top; padding-top: 12px; width: 150px; }
table.facts td { vertical-align: top; }

/* Doelzoekwoorden in het maandrapport (2 oktober 2026) */
.report-keywords td { vertical-align: top; }
.report-keywords td:first-child { width: 60%; }
.report-keywords .pill { margin-top: 3px; font-size: 11px; }
.report-tip { color: var(--text); opacity: .8; }
.report-tip::before { content: "→ "; color: var(--accent); }
.spark { display: block; overflow: visible; }

/* AI-zichtbaarheid (2 oktober 2026) */
.site-form .form-sub { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.site-form .form-sub h3 { margin: 0; font-size: 14px; color: var(--text); }
ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; word-break: break-word; }
tr.row-own td { background: var(--accent-soft); }
.ai-answer-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 6px; font-size: 13px; }
.ai-answer { white-space: pre-wrap; font-size: 13px; line-height: 1.55; max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ai-answer mark { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 3px; padding: 0 2px; }
.report-ai td.hit { color: var(--good); font-weight: 700; }
#pan-ai > .card { margin-bottom: 16px; }