/* ------------------------------------------------------------------
   Pagerankimprover – huisstijl
   Alle kleuren staan hieronder als variabelen.
   ------------------------------------------------------------------ */
:root {
  --brand: #0b1f3a;          /* primaire merkkleur (donker) */
  --brand-contrast: #ffffff;
  --accent: #19c39c;         /* accentkleur (knoppen, highlights) */
  --accent-hover: #12a483;
  --accent-soft: #e3f8f2;

  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #13213a;
  --muted: #5d6b82;
  --border: #e1e6ee;

  --success: #12805c;
  --success-soft: #e3f6ee;
  --warning: #9a6700;
  --warning-soft: #fff4d6;
  --error: #c2362b;
  --error-soft: #fdecea;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 32, 58, .04), 0 4px 16px rgba(16, 32, 58, .06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--brand); }
h1, h2 { line-height: 1.25; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.prewrap { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.text-error { color: var(--error); }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding-top: 32px; padding-bottom: 48px; }

/* Logo */
/* Op een donkere achtergrond (standaard) of een lichte (.logo--light) */
.logo {
  --logo-tile: #ffffff; --logo-line: var(--brand); --logo-text: #ffffff; --logo-accent: var(--accent);
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap;
  font-size: 1.3rem; color: var(--logo-text);
}
.logo--light { --logo-tile: var(--brand); --logo-line: #ffffff; --logo-text: var(--brand); --logo-accent: var(--accent-hover); }
.logo__icon { width: 1.5em; height: 1.5em; flex-shrink: 0; }
.logo__tile { fill: var(--logo-tile); }
.logo__line { fill: var(--logo-line); }
.logo__name { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.logo__accent { color: var(--logo-accent); }
.logo--lg { font-size: 1.7rem; margin-bottom: 24px; }

/* Topbar */
.topbar { background: var(--brand); color: var(--brand-contrast); }
.topbar__inner { display: flex; align-items: center; gap: 32px; min-height: 64px; flex-wrap: wrap; }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a {
  color: rgba(255, 255, 255, .75); text-decoration: none; font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius-sm);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav a.is-active { color: #fff; background: rgba(255, 255, 255, .14); }
.topbar__user { display: flex; align-items: center; gap: 12px; }
.topbar__client { font-size: .9rem; color: rgba(255, 255, 255, .8); }
.topbar .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.topbar .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.topbar--admin { background: #0b1220; box-shadow: inset 0 -3px 0 var(--accent); }
.logo__badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 3px;
  border: 1px solid currentColor; font-size: .55em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}
.nav a.nav__switch { margin-left: auto; color: rgba(255, 255, 255, .6); font-size: .9rem; }

/* Footer */
.footer { padding: 24px 0; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface); }
.footer a { color: inherit; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px;
}
section.card, details.card:not(.flow-step) { margin-bottom: 24px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head p { margin: 0; max-width: 640px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--brand); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--bg); }
.btn--sm { padding: 6px 12px; font-size: .85rem; }
.btn--lg { padding: 13px 24px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* Forms */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field__label { font-weight: 600; }
.field__hint { font-size: .87rem; color: var(--muted); }
.field__counter { font-size: .8rem; color: var(--muted); text-align: right; }
.field__counter.is-ok { color: var(--success); }
.field__error { font-size: .85rem; color: var(--error); font-weight: 500; }
.req { color: var(--error); }
.optional { color: var(--muted); font-weight: 400; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=search], input[type=number], input[type=date], input:not([type]), textarea, select {
  font: inherit; color: var(--text); width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.has-error input, .has-error textarea, .has-error select { border-color: var(--error); }
.form__row { display: flex; gap: 20px; flex-wrap: wrap; }
.form__row .field { flex: 1 1 280px; }
.form__row .field--narrow { flex: 0 1 240px; }
.form__actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); padding-top: 20px; }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form--inline .field { min-width: 180px; }
.input-group { display: flex; gap: 8px; align-items: center; }
.checkbox { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }

.layout-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tips { position: sticky; top: 24px; background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.tips ul { padding-left: 18px; margin: 0 0 12px; }
.tips li { margin-bottom: 10px; }

/* Login */
.page-login { background: linear-gradient(135deg, var(--brand) 0%, #16365f 100%); }
.page-login .footer { background: transparent; border: 0; color: rgba(255, 255, 255, .6); }
.login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; gap: 16px; }
.login .alert { width: 100%; max-width: 420px; margin: 0; }
.login__card { width: 100%; max-width: 420px; padding: 40px 32px; }
.login__title { font-size: 1.5rem; }
.login__card .form { margin-top: 24px; }
.login__help { font-size: .85rem; margin: 20px 0 0; }
.login__tabs { margin: 20px 0 16px; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 500; }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--error { background: var(--error-soft); color: var(--error); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge--verzonden { background: var(--success-soft); color: var(--success); }
.badge--mislukt { background: var(--error-soft); color: var(--error); }

/* Request list (dashboard) */
.request-list { display: flex; flex-direction: column; gap: 12px; }
.request { padding: 0; }
.request__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; cursor: pointer; list-style: none;
}
.request__summary::-webkit-details-marker { display: none; }
.request__summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.request[open] .request__summary::before { transform: rotate(90deg); }
.request__main { flex: 1; min-width: 0; }
.request__keywords { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request__meta { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request__details {
  display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px;
  margin: 0; padding: 20px 24px 24px; border-top: 1px solid var(--border);
}
.request__details dt { font-weight: 600; color: var(--muted); }
.request__details dd { margin: 0; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 48px 24px; }
.empty p { margin: 0 auto 20px; max-width: 420px; }

/* Tables (admin) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.table td a { overflow-wrap: anywhere; }
.table .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table .actions input { width: 170px; padding: 6px 10px; font-size: .85rem; }
.is-inactive td { color: var(--muted); }

@media (max-width: 860px) {
  .layout-form { grid-template-columns: 1fr; }
  .tips { position: static; }
  .topbar__inner { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .topbar__client { display: none; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.4rem; }
  .card { padding: 18px; }
  .topbar__inner { justify-content: space-between; }
  .nav { order: 3; flex-basis: 100%; }
  .nav a { padding: 6px 10px; font-size: .9rem; }
  .form__row .field, .form__row .field--narrow { flex-basis: 100%; }
  .request__summary { padding: 14px 16px; }
  .request__details { grid-template-columns: 1fr; gap: 2px; padding: 16px; }
  .request__details dd { margin-bottom: 10px; }
  .form__actions { flex-direction: column-reverse; }
  .form__actions .btn { width: 100%; }
  .page-head .btn { width: 100%; }
}

/* Schrijfwijze */
[data-style-preview]:empty { display: none; }

/* Adminportaal: flow */
.field-head { display: flex; flex-direction: column; gap: 4px; }
.form__row > .field { justify-content: flex-start; }
.section-title { margin: 32px 0 12px; }
.card__summary { cursor: pointer; list-style: none; }
.card__summary::-webkit-details-marker { display: none; }
.card__summary h2 { margin: 0; }
details[open] > .card__summary { margin-bottom: 16px; }
.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dot--ok { background: var(--success); }
.dot--off { background: var(--error); }
.flow-step { padding: 0; margin-bottom: 12px; }
.flow-step__summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.flow-step__summary::-webkit-details-marker { display: none; }
.flow-step__num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem;
}
.flow-step__title { font-weight: 600; }
.flow-step__model { margin-left: auto; font-size: .8rem; color: var(--muted); }
.flow-step__body { padding: 0 20px 20px; border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.kind { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 4px; }
.kind--ai { background: #ede7fb; color: #5b34b5; }
.kind--extern { background: #e5effb; color: #1f5fa8; }
.kind--code { background: #eef1f5; color: var(--muted); }
.kind--mock { background: var(--warning-soft); color: var(--warning); }
textarea.code, input.code, .pre-json, .pre-text, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.form__actions--left { justify-content: flex-start; }
.form__row--end { align-items: flex-end; }
.vars summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand); }
.vars__list { columns: 2; font-size: .82rem; padding-left: 18px; }
.vars__list li { margin-bottom: 4px; break-inside: avoid; }

.badge--run-klaar, .badge--step-klaar { background: var(--success-soft); color: var(--success); }
.badge--run-mislukt, .badge--step-mislukt { background: var(--error-soft); color: var(--error); }
.badge--run-bezig, .badge--step-bezig { background: #e5effb; color: #1f5fa8; }
.badge--run-nieuw, .badge--run-gepauzeerd, .badge--run-gestopt, .badge--run-onderbroken, .badge--step-gestopt, .badge--empty { background: #eef1f5; color: var(--muted); }
.badge--stale { background: var(--warning-soft); color: var(--warning); }
.badge--klaar { background: var(--success-soft); color: var(--success); }

.run-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.layout-run { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.run-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.run-side .card { margin: 0; }
.run-step { margin-bottom: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.run-step--bezig { border-color: #9cc0ea; box-shadow: 0 0 0 3px #e5effb; }
.run-step--mislukt { border-color: #f1b8b3; }
.run-step__head { display: flex; gap: 12px; align-items: flex-start; }
.run-step__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.run-step__meta { flex-basis: 100%; }
.run-step__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.run-step .alert { margin: 0; }
.result-list { margin: 0; padding-left: 20px; font-size: .9rem; }
.result-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.raw > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand); }
.raw[open] > summary { margin-bottom: 10px; }
.call { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.call > summary { cursor: pointer; font-size: .82rem; }
.pre-json, .pre-text {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.markdown-preview { line-height: 1.65; }
.markdown-preview h1 { font-size: 1.5rem; margin-top: 0; }
.markdown-preview h2 { font-size: 1.2rem; margin-top: 1.4em; }
.markdown-preview h3 { font-size: 1.05rem; }
.run-step .markdown-preview { max-height: 520px; overflow: auto; padding: 4px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi strong { font-size: 1.15rem; }
.kpi small { color: var(--muted); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv--stacked { grid-template-columns: 1fr; gap: 2px; margin-bottom: 14px; }
.kv--stacked dd { margin-bottom: 8px; }

@media (max-width: 960px) {
  .layout-run { grid-template-columns: minmax(0, 1fr); }
  .run-side { position: static; }
}
@media (max-width: 560px) {
  .run-step__head { flex-wrap: wrap; }
  .run-step__actions { justify-content: flex-start; flex-basis: 100%; }
  .vars__list { columns: 1; }
  .kv { grid-template-columns: 1fr; }
}

/* Aanmeldingen */
.kpis--page { margin-bottom: 24px; }
.kpis--page .kpi { background: var(--surface); border: 1px solid var(--border); }
.badge--lead-nieuw { background: #e5effb; color: #1f5fa8; }
.badge--lead-account { background: var(--success-soft); color: var(--success); }
.badge--lead-afgewezen { background: #eef1f5; color: var(--muted); }
.tag { display: inline-block; background: var(--bg); border-radius: 999px; padding: 4px 12px; margin: 0 4px 6px 0; font-size: .88rem; }
.tag small { color: var(--muted); }

/* Gesloten deur */
.gate__lock { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--success); margin-bottom: 16px; }

/* Mijn website */
.audience-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); }
.audience-row__name { flex: 1 1 180px; }
.audience-row__desc { flex: 3 1 320px; }
.audience-row__actions { display: flex; gap: 8px; padding-bottom: 2px; }
.page-head--card { margin-bottom: 8px; }
.page-head--card h2 { margin-top: 0; }
.site-pages summary { cursor: pointer; font-weight: 600; }
.site-pages ul { max-height: 360px; overflow: auto; margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.site-pages a { overflow-wrap: anywhere; }

/* Nieuwe aanvraag: opgeslagen doelgroepen en bestaande pagina's */
.audience-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.audience-pick { font: inherit; font-size: .85rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.audience-pick:hover, .audience-pick.is-on { border-color: var(--accent); background: var(--accent-soft); }
.page-warning { background: #fff7e6; border: 1px solid #f3d19c; border-radius: var(--radius-sm); padding: 10px 12px; font-size: .9rem; }
.page-warning a { overflow-wrap: anywhere; }

/* Onboarding: gebruik en kosten */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--bg); border-radius: var(--radius-sm); width: fit-content; max-width: 100%; }
.tabs a { padding: 6px 14px; border-radius: 6px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: .92rem; }
.tabs a:hover { color: var(--text); }
.tabs a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.table--usage .num { text-align: right; white-space: nowrap; }
.usage__target { overflow-wrap: anywhere; max-width: 320px; }
.usage-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }

/* Advies op basis van de zoekresultaten */
.advice { border-left: 4px solid var(--accent); }
.advice h2 { margin-top: 0; }
.advice__list { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }

/* Accountoverzicht */
.inline-edit { border-color: transparent !important; background: transparent !important; padding: 6px 8px !important; margin-left: -8px; min-width: 140px; }
.inline-edit:hover { border-color: var(--border) !important; }
.inline-edit:focus { border-color: var(--accent) !important; background: var(--surface) !important; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; max-width: 560px; }
.search-form input { flex: 1 1 240px; }
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: .92rem; }
.pager a:not(.btn) { padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.pager a:not(.btn):hover { background: var(--bg); }
.pager__current { padding: 4px 10px; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 600; }

/* Technische SEO-check */
.seo-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seo-item { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.seo-item__tip { font-size: .9rem; margin-top: 2px; }
.seo-badge { flex-shrink: 0; min-width: 84px; text-align: center; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-top: 2px; }
.seo-badge--probleem { background: var(--error-soft); color: var(--error); }
.seo-badge--verbeteren { background: var(--warning-soft); color: var(--warning); }
.seo-badge--actie { background: #e5effb; color: #1f5fa8; }
.seo-badge--goed { background: var(--success-soft); color: var(--success); }
.defaults-form { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.defaults-form .checkbox { align-items: flex-start; max-width: 360px; }
.release h2 { margin-top: 0; }
.run-actions--left { justify-content: flex-start; margin: 8px 0; }
.pw-reset summary { list-style: none; cursor: pointer; }
.pw-reset summary::-webkit-details-marker { display: none; }
.pw-reset[open] summary { margin-bottom: 6px; }
.pw-reset .input-group input { min-width: 150px; }
.table td input.inline-edit[type=email] { min-width: 220px; }
.table td select { width: auto; min-width: 0; padding: 6px 8px; font-size: .9rem; }
.table td .inline-edit { width: 100%; min-width: 170px; }
.account-meta { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.table td.actions { display: table-cell; }
.actions__row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: nowrap; }
.card__subtitle { font-size: 1rem; margin: 20px 0 8px; }
.client-defaults { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 16px; }
.client-defaults__intro { margin: 0 0 10px; font-size: .92rem; }

/* Telefoon: aanvraagregels op het dashboard en de menubalk */
@media (max-width: 600px) {
  .request__summary { flex-wrap: wrap; row-gap: 8px; }
  .request__main { flex: 1 1 calc(100% - 24px); }
  .request__keywords, .request__meta { white-space: normal; }
  .request__summary .badge { margin-left: 20px; }
  .topbar__client { display: none; }
  .topbar .logo { font-size: 1.1rem; }
  .topbar__inner { gap: 12px 16px; }
}

/* Taalkeuze met vlaggetjes */
.lang-switch { position: relative; }
.lang-switch summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
  padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: .85rem; font-weight: 600; letter-spacing: .03em;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
}
.lang-switch summary:hover { background: rgba(255, 255, 255, .1); }
.lang-switch summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switch__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.lang-switch__menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: .92rem;
}
.lang-switch__menu a:hover { background: var(--bg); }
.lang-switch__menu a.is-active { font-weight: 600; }
.lang-switch__menu a.is-active::after { content: "✓"; margin-left: auto; color: var(--accent); }
.flag { width: 20px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.lang-switch--light summary { color: var(--text); border-color: var(--border); background: var(--surface); }
.lang-switch--light summary:hover { background: var(--bg); }

/* Balk boven openbare pagina's zonder menu (inloggen, toegangscode) */
.public-bar__inner { display: flex; justify-content: flex-end; padding-top: 16px; }
@media (max-width: 560px) {
  .topbar .lang-switch__menu { left: 0; right: auto; }
}

/* Flow-instellingen: velden in een raster. Elke instelling heeft vier rijen (label, uitleg, invoer,
   standaardwaarde) die via subgrid per rij gelijk lopen, zodat invoervelden naast elkaar even hoog staan. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; }
.setting { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; padding-bottom: 18px; min-width: 0; }
.setting--wide { display: flex; flex-direction: column; gap: 6px; }
.setting .field__hint:empty { display: block; min-height: 0; }
.setting__check { align-self: start; font-weight: 600; padding-bottom: 0; }
.setting > input, .setting > select { width: 100%; align-self: start; }
.settings-grid--toggles .setting { grid-row: span 2; }
.settings-grid--toggles .setting > span:empty { display: none; }
.settings-grid:empty { display: none; }
.settings-actions { justify-content: flex-start; flex-wrap: wrap; }

/* De productnaam in lopende tekst: cursief, in het schreeffont van de koppen */
.brandword { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: 1.08em; letter-spacing: 0; }

/* Onomkeerbare acties, zoals een account verwijderen */
.btn--danger { background: transparent; color: var(--error); border-color: #f0c4bf; }
.btn--danger:hover { background: #fdecea; border-color: var(--error); }

/* Wisselaar tussen websites (klanten met meerdere websites) */
.site-switch__current { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.site-switch__menu { min-width: 220px; max-width: min(340px, calc(100vw - 32px)); overflow: hidden; }
.site-switch__title { margin: 4px 10px 6px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.site-switch__menu button {
  display: flex; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: .92rem; text-align: left; white-space: nowrap;
}
.site-switch__menu button:hover { background: var(--bg); }
.site-switch__menu button.is-active { font-weight: 600; }
.site-switch__menu button.is-active::after { content: "✓"; margin-left: auto; padding-left: 10px; color: var(--accent); }
.lang-switch__menu a.site-switch__manage { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; font-size: .85rem; color: var(--muted); }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list__item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.site-list__name { flex: 1 1 200px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.request__site { font-weight: 600; color: var(--text); }
/* De naam van de website in de wisselaar maakt de klantnaam overbodig; zo blijft het menu op één regel. */
@media (max-width: 1360px) {
  .topbar__user:has(.site-switch) .topbar__client { display: none; }
}
@media (max-width: 560px) {
  .topbar .site-switch__menu { left: 0; right: auto; }
  .site-switch__current { max-width: 120px; }
}

/* Beheer: artikelen per klant en de prijzenpagina */
.credits-cell { min-width: 150px; }
.credit-edit summary { cursor: pointer; list-style: none; }
.credit-edit summary::-webkit-details-marker { display: none; }
.credit-edit[open] summary { margin-bottom: 10px; }
.credit-edit { position: relative; }
.credit-edit summary { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; }
.credit-edit summary:hover { background: var(--bg); }
.credit-edit__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: 380px; max-width: 86vw; display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.credit-edit__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.credit-edit__row .field { flex: 1 1 120px; }
.credit-plus { color: var(--success); font-weight: 600; }
.credit-min { color: var(--muted); }
.pricing-admin input { width: 100%; min-width: 90px; }

/* Dashboard: artikelen (credits) */
.credits__balance { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.credits__balance > div { flex: 1; min-width: 200px; }
.credits__balance p { margin: 2px 0 0; }
.credits__number { font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--brand); min-width: 56px; text-align: center; }
.credits__empty { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #fff4d6; color: #7a5200; font-weight: 600; }
.credits__title { font-size: 1.05rem; margin: 22px 0 2px; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.pack { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pack__price { font-size: 1.4rem; font-weight: 700; }
.pack .btn { margin-top: 6px; align-self: flex-start; }
.credits__upgrade { margin: 6px 0 8px; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); }
.verify-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Wat het hidden-attribuut heeft, blijft verborgen, ook als een class er display: flex aan geeft */
[hidden] { display: none !important; }

/* Dashboard: creditcard toevoegen voor extra gratis artikelen */
.card-bonus { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 2px solid var(--accent); background: linear-gradient(90deg, #e8faf4, var(--surface) 70%); }
.card-bonus p { margin: 4px 0 0; }
.public-bar__inner--split { justify-content: space-between; align-items: center; }
.public-bar__home { color: rgba(255, 255, 255, .85); font-size: .9rem; text-decoration: none; }
.public-bar__home:hover { color: #fff; text-decoration: underline; }

/* Downloadmenu bij een tekst */
.dl-menu { position: relative; }
.dl-menu > summary { list-style: none; cursor: pointer; }
.dl-menu > summary::-webkit-details-marker { display: none; }
.dl-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 30, 60, .14); }
.dl-menu__list a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.dl-menu__list a:hover { background: var(--bg); }
.dl-menu__list span { font-size: .82rem; color: var(--muted); }

/* Dashboard: de hoofdknoppen in de blokken boven elkaar even breed */
.card-bonus .btn, .credits__balance > .btn, .credits__balance > form .btn { min-width: 220px; justify-content: center; text-align: center; }
@media (max-width: 560px) { .card-bonus form, .card-bonus .btn, .credits__balance > .btn, .credits__balance > form, .credits__balance > form .btn { width: 100%; } }
.request__eta { margin-top: 6px; font-size: .85rem; color: var(--text); display: flex; gap: 6px; align-items: baseline; }
.request__eta::before { content: "⏱"; }

/* ------------------------------------------------------------------
   Klantomgeving: zijmenu links, inhoud rechts. Op telefoons een balk met menuknop.
   ------------------------------------------------------------------ */
body.has-sidebar { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: 1fr auto; }
body.has-sidebar > .main, body.has-sidebar > .footer { grid-column: 2; }
body.has-sidebar > .main { padding-left: 32px; padding-right: 32px; max-width: 1180px; margin: 0; }
body.has-sidebar > .footer > .container { max-width: none; padding: 0 32px; }
.mobilebar { display: none; }
.sidebar {
  grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 20px 16px; background: var(--brand); color: #fff;
}
.sidebar__top { padding: 4px 6px 6px; }
.sidebar .logo { font-size: 1.2rem; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 500;
}
.sidebar__nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar__nav a.is-active { color: #fff; background: rgba(255, 255, 255, .14); }
.sidebar__nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar__nav a.sidebar__switch { margin-top: 8px; color: rgba(255, 255, 255, .55); font-size: .9rem; }
.sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sidebar__bottom .lang-switch { align-self: flex-start; }
.sidebar__bottom .lang-switch__menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.sidebar__client { font-size: .88rem; color: rgba(255, 255, 255, .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.sidebar .btn--ghost:hover { background: rgba(255, 255, 255, .1); }

/* Website-wisselaar (zoals een projectkiezer) */
.site-picker { position: relative; }
.site-picker > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; list-style: none;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.site-picker > summary::-webkit-details-marker { display: none; }
.site-picker > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; flex: none; border: solid rgba(255, 255, 255, .7); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.site-picker[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.site-picker > summary:hover { background: rgba(255, 255, 255, .12); }
.site-picker__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.site-picker__label small { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.site-picker__label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.sidebar__favicon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: 5px; background: #fff; color: var(--brand); font-size: .75rem; font-weight: 700; overflow: hidden; }
.sidebar__favicon img { position: absolute; inset: 2px; width: 18px; height: 18px; object-fit: contain; background: #fff; }
.site-picker__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(10, 25, 50, .25);
}
.site-picker__search { width: 100%; margin-bottom: 6px; }
.site-picker__list { max-height: 320px; overflow-y: auto; }
.site-picker__list button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
}
.site-picker__list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-picker__list button:hover { background: var(--bg); }
.site-picker__list button.is-active { font-weight: 600; }
.site-picker__list button.is-active::after { content: "✓"; margin-left: auto; color: var(--accent); }
.site-picker__list .sidebar__favicon { box-shadow: 0 0 0 1px var(--border); }
.site-picker__add { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--border); color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none; }
.site-picker__add:hover { background: var(--bg); border-radius: 0 0 8px 8px; }

@media (max-width: 900px) {
  body.has-sidebar { display: flex; flex-direction: column; }
  body.has-sidebar > .main { padding-left: 16px; padding-right: 16px; }
  body.has-sidebar > .footer > .container { padding: 0 16px; }
  .mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--brand); position: sticky; top: 0; z-index: 40; }
  .mobilebar .logo { font-size: 1.1rem; }
  .mobilebar__toggle { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; background: none; cursor: pointer; }
  .mobilebar__toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 1px; }
  .sidebar { position: fixed; z-index: 60; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.is-open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .sidebar__backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(5, 15, 30, .45); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Betaling & facturen */
.billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; }
.billing-grid .card { margin: 0; }
.billing__big { font-size: 1.15rem; font-weight: 600; margin: 4px 0; }
.billing__digits { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.billing__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Nieuwe aanvraag: kiezen tussen een nieuwe pagina en een bestaande pagina verbeteren */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 20px; }
.mode-switch legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; }
.mode-switch__option { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--border);
  border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.mode-switch__option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode-switch__option input { margin-top: 4px; accent-color: var(--accent); }
.mode-switch__option span { display: flex; flex-direction: column; gap: 2px; }
.mode-switch__option small { color: var(--muted); font-size: .85rem; }
@media (max-width: 600px) { .mode-switch { grid-template-columns: 1fr; } }

/* Voorbeeldteksten per website */
.sample-list { list-style: none; margin: 0 0 16px; padding: 0; }
.sample-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sample-list__kind { flex: none; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 64px; }
.sample-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inline-rename { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.inline-rename input { width: min(360px, 100%); }

/* Beheer: compacte klantenlijst, inklapbare instellingen en de pagina per klant */
.client-table td { vertical-align: middle; }
.client-table__name { font-weight: 600; color: var(--text); text-decoration: none; }
.client-table__name:hover { text-decoration: underline; }
.client-table__open { text-align: right; width: 1%; }
.client-table .badge + .badge, .client-table strong + .badge { margin-left: 6px; }
.admin-settings-title { margin: 32px 0 12px; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.admin-fold { padding: 0; }
.admin-fold > summary { display: flex; align-items: center; gap: 10px; padding: 18px 24px; cursor: pointer; list-style: none; }
.admin-fold > summary::-webkit-details-marker { display: none; }
.admin-fold > summary h2 { margin: 0; font-size: 1.05rem; }
.admin-fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.admin-fold[open] > summary::after { transform: rotate(-135deg); }
.admin-fold[open] { padding-bottom: 20px; }
.admin-fold > :not(summary) { margin-left: 24px; margin-right: 24px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-bottom: 20px; }
.client-grid .card { margin: 0; }
.client-balance { font-size: 1.05rem; margin: 0 0 6px; }
.field--xs input { width: 90px; }
.account-tools { display: flex; flex-direction: column; gap: 16px; }
.account-tools__row { display: flex; gap: 10px; flex-wrap: wrap; }
.client-grid .form + .form { margin-top: 14px; }
.login__forgot { align-self: flex-end; margin-top: -8px; font-size: .85rem; }

/* Dashboard: je pakket, wat erin zit en wat je mist (met voorbeelden) */
.plan-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.plan-card__head h2 { margin: 2px 0 2px; font-size: 1.3rem; }
.plan-card__head p { margin: 0; }
.plan-card__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hover); }
.plan-card__cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; margin-top: 18px; }
@media (max-width: 760px) { .plan-card__cols { grid-template-columns: 1fr; } }
.plan-card__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.plan-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-card__list li { position: relative; padding-left: 26px; }
.plan-card__list li::before { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; font-size: .7rem;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.plan-card__list li.is-included::before { content: "✓"; background: var(--accent-soft); color: var(--accent-hover); }
.plan-card__list li.is-missing::before { content: "+"; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.plan-card__from { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .75rem; font-weight: 600; }
.plan-example > summary { cursor: pointer; list-style: none; }
.plan-example > summary::-webkit-details-marker { display: none; }
.plan-example__toggle { margin-left: 6px; font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.plan-example__toggle::after { content: " ▾"; text-decoration: none; display: inline-block; }
.plan-example[open] .plan-example__toggle::after { transform: rotate(180deg); }
.plan-example__body { margin-top: 10px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.plan-example__body > p:first-child { margin-top: 0; }
.plan-example__quote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }
.plan-example__quote a { color: var(--brand); font-weight: 600; pointer-events: none; }
.plan-example__sites { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.plan-example__site { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: .9rem; }
.plan-example__site.is-active { border-color: var(--accent); font-weight: 600; }
.plan-example__site .sidebar__favicon { box-shadow: 0 0 0 1px var(--border); }
.field--unique textarea { border-color: var(--accent); background: linear-gradient(0deg, var(--surface), var(--surface)), var(--accent-soft); }
.field--unique textarea::placeholder { color: #8a96a8; }

/* Pakketlabel (dashboard, beheer): dezelfde kleuren als op de prijspagina */
.plan-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 700; background: #eef2f7; color: #475569; }
.plan-badge--growth { background: var(--accent-soft); color: #0f6f58; }
.plan-badge--agency { background: #e6edfb; color: #2349a8; }
.plan-badge--premium { background: linear-gradient(135deg, #121c2e, #22314d); color: #e2c27a; }
.plan-badge--onbeperkt { background: #f1ecfb; color: #5b3fa6; }
.plan-card--growth { border-top: 4px solid var(--accent); }
.plan-card--agency { border-top: 4px solid #2f5fd0; }
.plan-card--premium { border-top: 4px solid #c9a24b; }
.plan-card--starter { border-top: 4px solid #94a3b8; }
.dl-menu__sep { height: 1px; margin: 6px 4px; background: var(--border); }
.dl-menu__list form { margin: 0; }
.dl-menu__list button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dl-menu__list button:hover { background: var(--bg); }
.dl-menu__list button span { font-size: .82rem; color: var(--muted); }
.dl-menu__locked strong { color: var(--muted); }
.help { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .92rem; }
.help > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.help ol { margin: 10px 0 6px; padding-left: 20px; }
.wp-disconnect { margin-top: 10px; }

/* Resultaat: natuurlijk-schrijven-check (Premium) */
.natural-check { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 4px solid #c9a24b; }
.natural-check p { margin: 0; max-width: 560px; }
.natural-check__score { display: flex; flex-direction: column; align-items: flex-end; }
.natural-check__score strong { font-size: 2rem; line-height: 1; color: var(--warning); }
.natural-check__score.is-good strong { color: var(--success); }
.natural-check__score span { font-size: .85rem; color: var(--muted); }