/* King CDL Prep — all rules scoped to .kcp-app so the theme isn't affected */
.kcp-app {
	--kcp-primary: #1f4fa3;
	--kcp-text: #1b1f24;
	--kcp-muted: #5b6470;
	--kcp-line: #dde2e8;
	--kcp-bg: #ffffff;
	--kcp-soft: #f4f6f9;
	--kcp-ok: #1a7f37;
	--kcp-ok-bg: #e8f6ec;
	--kcp-bad: #c62828;
	--kcp-bad-bg: #fdecec;
	max-width: 760px;
	margin: 0 auto 2rem;
	color: var(--kcp-text);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
	scroll-margin-top: 80px;
}
.kcp-app *, .kcp-app *::before, .kcp-app *::after { box-sizing: border-box; }

.kcp-app .kcp-title { font-size: 1.6rem; margin: 0 0 .25rem; line-height: 1.25; }
.kcp-app .kcp-sub { margin: 0 0 1.25rem; color: var(--kcp-muted); }
.kcp-app .kcp-meta { color: var(--kcp-muted); font-size: .9rem; margin: .25rem 0; }
.kcp-app .kcp-loading, .kcp-app .kcp-error { padding: 1rem; background: var(--kcp-soft); border-radius: 10px; }
.kcp-app .kcp-error { color: var(--kcp-bad); }

/* cards */
.kcp-app .kcp-card {
	background: var(--kcp-bg);
	border: 1px solid var(--kcp-line);
	border-radius: 14px;
	padding: 1.1rem 1.1rem 1rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.kcp-app .kcp-card-title { margin: 0 0 .15rem; font-size: 1.2rem; }

.kcp-app .kcp-bar { height: 8px; background: var(--kcp-soft); border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.kcp-app .kcp-bar span { display: block; height: 100%; background: var(--kcp-primary); border-radius: 99px; transition: width .25s ease; }

/* buttons */
.kcp-app .kcp-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.kcp-app .kcp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: .55rem 1.1rem;
	border-radius: 10px; border: 2px solid var(--kcp-primary);
	font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
	cursor: pointer; text-decoration: none; text-align: center;
	background: transparent; color: var(--kcp-primary);
	-webkit-appearance: none; appearance: none;
}
.kcp-app .kcp-btn-primary { background: var(--kcp-primary); color: #fff; }
.kcp-app .kcp-btn-primary:hover { filter: brightness(1.08); }
.kcp-app .kcp-btn-outline:hover, .kcp-app .kcp-btn-ghost:hover { background: var(--kcp-soft); }
.kcp-app .kcp-btn-ghost { border-color: transparent; }
.kcp-app .kcp-btn:disabled { opacity: .6; cursor: default; }
.kcp-app .kcp-btn:focus-visible, .kcp-app .kcp-option:focus-visible, .kcp-app .kcp-link:focus-visible {
	outline: 3px solid var(--kcp-primary); outline-offset: 2px;
}
.kcp-app .kcp-link {
	background: none; border: 0; padding: .25rem 0; min-height: 0;
	color: var(--kcp-muted); text-decoration: underline; font: inherit; font-size: .9rem; cursor: pointer;
}
.kcp-app .kcp-reset { text-align: center; margin: .5rem 0; }
.kcp-app .kcp-disclaimer { color: var(--kcp-muted); font-size: .8rem; text-align: center; margin-top: 1rem; }

/* quiz */
.kcp-app .kcp-quiz, .kcp-app .kcp-results {
	background: var(--kcp-bg); border: 1px solid var(--kcp-line); border-radius: 14px; padding: 1.1rem;
}
.kcp-app .kcp-qhead { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.kcp-app .kcp-tag {
	display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
	color: var(--kcp-primary); background: var(--kcp-soft); padding: .2rem .6rem; border-radius: 99px; margin: 0;
}
.kcp-app .kcp-count { margin: .75rem 0 0; font-size: .9rem; color: var(--kcp-muted); }
.kcp-app .kcp-question { font-size: 1.2rem; line-height: 1.4; margin: .75rem 0 1rem; }

.kcp-app .kcp-options { display: grid; gap: .6rem; }
.kcp-app .kcp-option {
	display: flex; align-items: flex-start; gap: .75rem; width: 100%;
	text-align: left; padding: .8rem .9rem; min-height: 52px;
	background: var(--kcp-bg); color: var(--kcp-text);
	border: 2px solid var(--kcp-line); border-radius: 12px;
	font: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.kcp-app .kcp-option:hover:not(:disabled) { border-color: var(--kcp-primary); }
.kcp-app .kcp-option:disabled { cursor: default; }
.kcp-app .kcp-letter {
	flex: 0 0 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .85rem; background: var(--kcp-soft); color: var(--kcp-muted);
}
.kcp-app .kcp-option-text { padding-top: 2px; }
.kcp-app .kcp-option.is-selected { border-color: var(--kcp-primary); background: var(--kcp-soft); }
.kcp-app .kcp-option.is-selected .kcp-letter { background: var(--kcp-primary); color: #fff; }
.kcp-app .kcp-option.is-correct { border-color: var(--kcp-ok); background: var(--kcp-ok-bg); }
.kcp-app .kcp-option.is-correct .kcp-letter { background: var(--kcp-ok); color: #fff; }
.kcp-app .kcp-option.is-wrong { border-color: var(--kcp-bad); background: var(--kcp-bad-bg); }
.kcp-app .kcp-option.is-wrong .kcp-letter { background: var(--kcp-bad); color: #fff; }

.kcp-app .kcp-feedback { margin-top: 1rem; padding: .8rem .9rem; border-radius: 10px; border-left: 4px solid; }
.kcp-app .kcp-feedback.is-correct { background: var(--kcp-ok-bg); border-color: var(--kcp-ok); }
.kcp-app .kcp-feedback.is-wrong { background: var(--kcp-bad-bg); border-color: var(--kcp-bad); }

.kcp-app .kcp-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.kcp-app .kcp-nav-btns { display: flex; gap: .5rem; margin-left: auto; }

/* results */
.kcp-app .kcp-score { display: flex; align-items: baseline; gap: .75rem; margin: 1rem 0 .25rem; flex-wrap: wrap; }
.kcp-app .kcp-score-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.kcp-app .kcp-score.is-pass .kcp-score-num, .kcp-app .kcp-verdict.is-pass { color: var(--kcp-ok); }
.kcp-app .kcp-score.is-fail .kcp-score-num, .kcp-app .kcp-verdict.is-fail { color: var(--kcp-bad); }
.kcp-app .kcp-score-line { color: var(--kcp-muted); }
.kcp-app .kcp-verdict { font-weight: 700; margin: 0 0 .5rem; }

.kcp-app .kcp-cta { margin-top: 1.25rem; padding: 1rem; border-radius: 12px; background: var(--kcp-soft); }
.kcp-app .kcp-cta-text { margin: 0; font-weight: 600; }

.kcp-app .kcp-mistakes { margin-top: 1.25rem; border-top: 1px solid var(--kcp-line); padding-top: .75rem; }
.kcp-app .kcp-mistakes summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
.kcp-app .kcp-mistake { padding: .75rem 0; border-bottom: 1px solid var(--kcp-line); }
.kcp-app .kcp-mistake p { margin: .2rem 0; }
.kcp-app .kcp-mistake-q { font-weight: 600; }
.kcp-app .kcp-mistake-yours { color: var(--kcp-bad); }
.kcp-app .kcp-mistake-right { color: var(--kcp-ok); }

/* lead form */
.kcp-app .kcp-lead { margin-top: 1.25rem; padding: 1rem; border: 2px solid var(--kcp-primary); border-radius: 12px; }
.kcp-app .kcp-lead-title { margin: 0 0 .25rem; font-size: 1.15rem; }
.kcp-app .kcp-field { display: block; margin: .6rem 0; }
.kcp-app .kcp-field span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .2rem; }
.kcp-app .kcp-field input, .kcp-app .kcp-field select {
	width: 100%; min-height: 44px; padding: .5rem .7rem; font: inherit; font-size: 16px;
	border: 1px solid var(--kcp-line); border-radius: 8px; background: #fff; color: var(--kcp-text);
}
.kcp-app .kcp-lead .kcp-btn { margin-top: .5rem; width: 100%; }
.kcp-app .kcp-lead-msg { margin: .5rem 0 0; font-weight: 600; }
.kcp-app .kcp-lead-msg.is-error { color: var(--kcp-bad); }
.kcp-app .kcp-lead-msg.is-ok { color: var(--kcp-ok); }
.kcp-app .kcp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
	.kcp-app .kcp-actions .kcp-btn { flex: 1 1 100%; }
	.kcp-app .kcp-nav-btns { width: 100%; }
	.kcp-app .kcp-nav-btns .kcp-btn { flex: 1; }
	.kcp-app .kcp-question { font-size: 1.1rem; }
}