/* Consyst Keuzehulp Sensorinzet – alle stijlen zijn afgeschermd onder .kh-app */
.kh-app {
	--kh-ink: #171717; --kh-muted: #66606d; --kh-purple: #5b2ca0; --kh-purple-dark: #3a1b68;
	--kh-soft: #eadff7; --kh-lavender: #c7b3e6; --kh-line: #ded8e8; --kh-grey: #f1eff5; --kh-bg: #fbf8ff;
	--kh-shadow: 0 14px 34px rgba(58, 27, 104, .14); --kh-radius: 22px;
	font-family: "Segoe UI", Arial, sans-serif; color: var(--kh-ink); line-height: 1.5;
	background: var(--kh-bg); border-radius: var(--kh-radius); padding-bottom: 24px; box-sizing: border-box;
}
.kh-app *, .kh-app *::before, .kh-app *::after { box-sizing: border-box; }
body.kh-body { margin: 0; background: #fbf8ff; min-height: 100vh; }
body.kh-body .kh-app { border-radius: 0; min-height: 100vh; }

.kh-app .kh-topbar { display: flex; justify-content: flex-end; gap: 14px; padding: 10px 20px 0; font-size: .86rem; color: var(--kh-muted); }
.kh-app .kh-topbar a { color: var(--kh-purple-dark); font-weight: 700; }
.kh-app .kh-preview { margin: 10px auto 0; width: min(1180px, 94%); background: #fff4d6; border: 1px solid #e5c76b; color: #5c4400; padding: 10px 14px; border-radius: 12px; font-weight: 700; }

.kh-app .kh-header { position: relative; overflow: hidden; isolation: isolate; padding: 24px 20px 18px; text-align: center; }
.kh-app .kh-header::before { content: ""; position: absolute; inset: 0; background: url(../img/consyst-logo.png) repeat-x center 18px / 230px auto; opacity: .105; z-index: -1; pointer-events: none; }
.kh-app .kh-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,248,255,.76), rgba(251,248,255,.98)); z-index: -1; pointer-events: none; }
.kh-app .kh-logo { width: min(360px, 70vw); height: auto; display: block; margin: 0 auto 14px; filter: drop-shadow(0 8px 14px rgba(58,27,104,.12)); }
.kh-app .kh-eyebrow { display: inline-block; background: var(--kh-soft); color: var(--kh-purple-dark); padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: .82rem; }
.kh-app .kh-h1 { margin: 14px 0 8px; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.1; color: var(--kh-purple-dark); font-weight: 800; }
.kh-app .kh-subtitle { max-width: 850px; margin: 0 auto; color: var(--kh-muted); font-size: 1rem; line-height: 1.55; }

.kh-app .kh-main { width: min(1180px, 94%); margin: 0 auto; display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; align-items: start; }
@media (max-width: 880px) { .kh-app .kh-main { grid-template-columns: 1fr; } }
.kh-app .kh-panel, .kh-app .kh-side-card { background: #fff; border: 1px solid var(--kh-line); box-shadow: var(--kh-shadow); border-radius: var(--kh-radius); }
.kh-app .kh-panel { padding: 26px; min-height: 520px; display: flex; flex-direction: column; gap: 20px; border-top: 5px solid var(--kh-purple); }
@media (max-width: 600px) { .kh-app .kh-panel { padding: 16px; } }

.kh-app .kh-progress { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kh-app .kh-dot { height: 9px; flex: 1; min-width: 24px; border-radius: 999px; background: #e4deed; }
.kh-app .kh-dot.is-active { background: linear-gradient(90deg, var(--kh-purple-dark), var(--kh-purple)); }
.kh-app .kh-step-label { font-size: .88rem; color: var(--kh-purple-dark); font-weight: 600; width: 100%; }

.kh-app .kh-question-card { border: 1px solid var(--kh-line); border-radius: 20px; padding: 26px; background: #fff; }
@media (max-width: 600px) { .kh-app .kh-question-card { padding: 16px; } }
.kh-app .kh-question { font-size: clamp(1.3rem, 2.2vw, 2.1rem); line-height: 1.22; margin: 0 0 18px; font-weight: 800; color: var(--kh-purple-dark); outline: none; }
.kh-app .kh-hint { color: var(--kh-muted); line-height: 1.55; margin: 0 0 22px; }

.kh-app .kh-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.kh-app .kh-btn, .kh-app button.kh-btn, .kh-app a.kh-btn {
	appearance: none; border: 1px solid var(--kh-purple); border-radius: 16px; padding: 15px 18px; font: inherit; font-weight: 800; font-size: 1rem;
	cursor: pointer; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1.2;
	background: var(--kh-purple); color: #fff; transition: .15s ease; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.kh-app .kh-btn:hover, .kh-app .kh-btn:focus { background: var(--kh-purple-dark); border-color: var(--kh-purple-dark); color: #fff; transform: translateY(-1px); }
.kh-app .kh-btn:focus-visible { outline: 3px solid rgba(91,44,160,.28); outline-offset: 3px; }
.kh-app .kh-btn.kh-ghost { background: #fff; color: var(--kh-purple-dark); }
.kh-app .kh-btn.kh-ghost:hover { background: var(--kh-soft); color: var(--kh-purple-dark); }
.kh-app .kh-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kh-app .kh-option-grid .kh-btn { width: 100%; justify-content: flex-start; text-align: left; }
@media (max-width: 720px) { .kh-app .kh-option-grid { grid-template-columns: 1fr; } }

.kh-app .kh-instruction { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-bottom: 20px; border: 1px solid var(--kh-line); border-left: 7px solid var(--kh-purple); border-radius: 20px; padding: 22px; box-shadow: 0 10px 24px rgba(58,27,104,.08); }
.kh-app .kh-instruction-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--kh-purple); color: #fff; font-size: 1.45rem; font-weight: 900; }
.kh-app .kh-instruction-title { margin: 0 0 8px; color: var(--kh-purple-dark); font-size: 1.15rem; font-weight: 900; }
.kh-app .kh-instruction p, .kh-app .kh-instruction ol { margin: 0 0 10px; color: #3f3948; }
.kh-app .kh-instruction ol { padding-left: 22px; }
.kh-app .kh-instruction-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--kh-line); color: var(--kh-purple-dark); font-weight: 700; }
@media (max-width: 600px) { .kh-app .kh-instruction { grid-template-columns: 1fr; } }

.kh-app .kh-result { border-radius: 22px; padding: 24px; border: 1px solid var(--kh-lavender); background: #fff; margin-bottom: 18px; }
.kh-app .kh-badge { display: inline-block; background: var(--kh-soft); color: var(--kh-purple-dark); font-weight: 900; padding: 7px 12px; border-radius: 999px; margin-bottom: 10px; }
.kh-app .kh-result-title { font-size: clamp(1.4rem, 2.5vw, 2.4rem); margin: 0 0 8px; color: var(--kh-purple-dark); font-weight: 800; }
.kh-app .kh-result-text { color: #45514d; line-height: 1.58; margin: 0 0 18px; }
.kh-app .kh-result-reason { margin: 0 0 14px; color: #46404e; }
.kh-app .kh-result-reason strong { color: var(--kh-purple-dark); }
.kh-app .kh-result-versie { font-size: .82rem; color: var(--kh-muted); margin: 16px 0; }

.kh-app .kh-resource { background: var(--kh-bg); border: 1px solid var(--kh-lavender); border-radius: 18px; padding: 16px; margin-top: 12px; }
.kh-app .kh-resource-title { color: var(--kh-purple-dark); font-weight: 900; margin: 0 0 10px; }
.kh-app .kh-resource-list, .kh-app .kh-footer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kh-app .kh-doc-note { margin: 10px 0 0; color: #5a5264; font-size: .82rem; }

.kh-app .kh-deploy { margin-top: 16px; border-radius: 20px; border: 1px solid var(--kh-lavender); background: #fff; padding: 18px; box-shadow: 0 8px 20px rgba(58,27,104,.07); }
.kh-app .kh-deploy-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--kh-purple-dark); font-size: 1.05rem; font-weight: 900; }
.kh-app .kh-deploy-title span { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--kh-purple); color: #fff; flex: 0 0 auto; }
.kh-app .kh-deploy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .kh-app .kh-deploy-grid { grid-template-columns: 1fr; } }
.kh-app .kh-mini { border: 1px solid var(--kh-line); border-radius: 16px; padding: 13px 14px; }
.kh-app .kh-mini h4 { margin: 0 0 6px; color: var(--kh-purple-dark); font-size: .92rem; font-weight: 900; }
.kh-app .kh-mini p { margin: 0; color: #46404e; font-size: .92rem; line-height: 1.45; }
.kh-app .kh-wzd-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f0e8fa; color: var(--kh-purple-dark); border: 1px solid var(--kh-lavender); font-size: .92rem; font-weight: 700; }

.kh-app .kh-next { margin-top: 16px; border: 1px solid var(--kh-lavender); border-radius: 20px; padding: 18px; background: var(--kh-bg); }
.kh-app .kh-next h3, .kh-app .kh-report h3 { margin: 0 0 10px; color: var(--kh-purple-dark); font-size: 1.05rem; }
.kh-app .kh-next ol { margin: 0; padding-left: 22px; color: #46404e; line-height: 1.6; }
.kh-app .kh-report { margin-top: 16px; border: 1px solid var(--kh-lavender); border-radius: 20px; padding: 18px; background: #fff; }
.kh-app .kh-report p { margin: 0 0 10px; color: #4d4655; }
.kh-app .kh-report ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.kh-app .kh-report li { padding: 10px 12px; border: 1px solid var(--kh-line); border-radius: 12px; background: var(--kh-bg); color: #46404e; }
.kh-app .kh-report li::before { content: '☐'; color: var(--kh-purple); font-weight: 900; margin-right: 9px; }

.kh-app .kh-history { border-top: 1px solid var(--kh-line); padding-top: 18px; margin-top: auto; }
.kh-app .kh-history h3 { margin: 0 0 10px; font-size: 1rem; color: var(--kh-purple-dark); }
.kh-app .kh-crumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.kh-app .kh-crumb { background: var(--kh-grey); border: 1px solid var(--kh-line); border-radius: 999px; padding: 8px 11px; font-size: .86rem; color: #44504c; }

.kh-app .kh-aside { display: flex; flex-direction: column; gap: 14px; }
.kh-app .kh-side-card { padding: 20px; border-color: var(--kh-lavender); background: var(--kh-bg); }
.kh-app .kh-side-card h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--kh-purple-dark); }
.kh-app .kh-side-card p { margin: 0; color: #495550; font-size: .95rem; }
.kh-app .kh-versie { font-size: .78rem; color: var(--kh-muted); text-align: right; margin: 0 6px; }
.kh-app .kh-melding { background: #fff4f4; border: 1px solid #f1c4c4; color: #7a1f1f; padding: 12px 14px; border-radius: 12px; }
.kh-app .kh-print-kop { display: none; }

/* Inlogscherm */
.kh-login-wrap { padding: 40px 16px; }
.kh-app .kh-login { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--kh-line); border-top: 5px solid var(--kh-purple); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow); padding: 30px; text-align: center; }
.kh-app .kh-login .kh-logo { width: 240px; }
.kh-app .kh-login .kh-h1 { font-size: 1.6rem; }
.kh-app #loginform { text-align: left; margin-top: 20px; }
.kh-app #loginform p { margin: 0 0 14px; }
.kh-app #loginform label { display: block; font-weight: 700; color: var(--kh-purple-dark); margin-bottom: 4px; }
.kh-app #loginform .login-remember label { display: inline; font-weight: 400; color: var(--kh-muted); }
.kh-app #loginform input[type=text], .kh-app #loginform input[type=password] { width: 100%; padding: 12px 14px; border: 1px solid var(--kh-lavender); border-radius: 12px; font: inherit; }
.kh-app #loginform input[type=submit] { width: 100%; border: 0; border-radius: 16px; padding: 14px; background: var(--kh-purple); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.kh-app #loginform input[type=submit]:hover { background: var(--kh-purple-dark); }
.kh-app .kh-login-link a { color: var(--kh-purple-dark); font-size: .9rem; }

@media print {
	body.kh-body, .kh-app { background: #fff !important; }
	.kh-app .kh-panel, .kh-app .kh-side-card { box-shadow: none; }
	.kh-app .kh-actions, .kh-app .kh-footer-actions, .kh-app .kh-progress, .kh-app .kh-topbar, .kh-app .kh-preview, .kh-app .kh-header::before { display: none !important; }
	.kh-app .kh-main { display: block; width: 100%; }
	.kh-app .kh-aside { margin-top: 20px; }
	.kh-app .kh-print-kop { display: block; font-size: .85rem; color: #333; border-bottom: 1px solid #ccc; padding: 6px 0; margin: 0 0 12px; }
	.kh-app .kh-logo { width: 200px; }
}

/* Smalle schermen: minder geneste randen/padding */
@media (max-width: 600px) {
	.kh-app .kh-question-card { border: 0; padding: 0; }
	.kh-app .kh-result, .kh-app .kh-deploy, .kh-app .kh-next, .kh-app .kh-report { padding: 14px; border-radius: 16px; }
	.kh-app .kh-main { width: calc(100% - 20px); }
}