.kd-app {
	--kd-primary: #2563eb;
	--kd-bg: #f8fafc;
	--kd-card: #ffffff;
	--kd-text: #1e293b;
	--kd-muted: #64748b;
	--kd-border: #e2e8f0;
	max-width: 640px;
	margin: var(--kd-form-margin, 0px) auto;
	font-family: system-ui, -apple-system, sans-serif;
	color: var(--kd-text);
}

.kd-card {
	background: var(--kd-card);
	border: 1px solid var(--kd-border);
	border-radius: 12px;
	padding: var(--kd-form-padding, 24px);
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.kd-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.kd-desc { color: var(--kd-muted); margin-bottom: 20px; line-height: 1.6; }
.kd-intro-text { margin-bottom: 20px; line-height: 1.6; }
.kd-progress { background: var(--kd-border); border-radius: 999px; height: 6px; margin-bottom: 16px; overflow: hidden; }
.kd-progress-bar { background: var(--kd-primary); height: 100%; transition: width .3s; border-radius: 999px; }
.kd-progress-label { font-size: .875rem; color: var(--kd-muted); margin-bottom: 12px; }
.kd-prompt { font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; line-height: 1.5; }

.kd-options { display: flex; flex-direction: column; gap: 10px; }
.kd-option {
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	padding: 12px 14px; border: 2px solid var(--kd-border);
	border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.kd-option-key {
	flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex;
	align-items: center; justify-content: center; border-radius: 6px;
	background: var(--kd-primary); color: #fff; font-size: .875rem; margin: 0;
}
.kd-option:hover { border-color: #93c5fd; background: #eff6ff; }
.kd-option.selected { border-color: var(--kd-primary); background: #eff6ff; }
.kd-option input[type="radio"],
.kd-option input {
	width: 18px !important; min-width: 18px !important; max-width: 18px !important;
	height: 18px !important; margin: 0 !important; padding: 0 !important;
	flex: 0 0 18px !important; accent-color: var(--kd-primary); cursor: pointer;
}
.kd-option-text { flex: 1; line-height: 1.4; text-align: left; margin: 0; }

.kd-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.kd-btn {
	padding: 10px 20px; border-radius: 8px; border: none; font-size: .95rem;
	font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.kd-btn:disabled { opacity: .5; cursor: not-allowed; }
.kd-btn-primary { background: var(--kd-primary); color: #fff; }
.kd-btn-secondary { background: var(--kd-bg); color: var(--kd-text); border: 1px solid var(--kd-border); }

.kd-cta {
	margin-top: 24px; padding-top: 20px;
	border-top: 1px solid var(--kd-border); text-align: center;
}
.kd-cta-title { margin: 0 0 8px; font-size: 1.1rem; }
.kd-cta-desc { margin: 0 0 16px; color: var(--kd-muted); line-height: 1.5; }
.kd-cta-actions { display: flex; flex-direction: column; gap: 10px; }
.kd-cta-actions .kd-btn { text-decoration: none; display: block; text-align: center; }
.kd-btn-wa { background: #25d366; color: #fff; }
.kd-btn-wa:hover { opacity: .9; color: #fff; }

.kd-form-group { margin-bottom: 14px; }
.kd-form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .875rem; }
.kd-form-group input:not([type="checkbox"]):not([type="radio"]),
.kd-form-group select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--kd-border);
	border-radius: 8px; font-size: .95rem; box-sizing: border-box;
}
.kd-form-group input:focus, .kd-form-group select:focus { outline: 2px solid #93c5fd; border-color: var(--kd-primary); }
.kd-error { color: #dc2626; font-size: .8rem; margin-top: 4px; }

.kd-form-group.kd-consent,
.kd-consent {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	font-size: .875rem;
	margin-top: 16px;
	margin-bottom: 16px;
}
.kd-form-group.kd-consent input[type="checkbox"],
.kd-consent input[type="checkbox"],
.kd-consent input {
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 18px !important;
	cursor: pointer;
	accent-color: var(--kd-primary);
	box-sizing: content-box !important;
}
.kd-form-group.kd-consent label,
.kd-consent label {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	cursor: pointer;
	flex: 1 1 auto;
	text-align: left !important;
}
.kd-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.kd-type-badge {
	display: inline-flex; align-items: center; color: #fff;
	padding: 8px 16px; border-radius: 8px; font-size: 1.15rem; font-weight: 700; margin: 12px 0;
}
.kd-type-badge-d { background: #ef4444; }
.kd-type-badge-i { background: #f59e0b; }
.kd-type-badge-s { background: #22c55e; }
.kd-type-badge-c { background: #3b82f6; }
.kd-dominant-types { display: flex; gap: 8px; flex-wrap: wrap; }

.kd-interpretation-primary { margin-top: 8px; }

.kd-other-types { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kd-border); }
.kd-other-label { font-size: .875rem; color: var(--kd-muted); margin: 0 0 10px; }
.kd-type-chips { display: flex; flex-direction: column; gap: 8px; }
.kd-type-chip {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 10px 14px !important;
	border: 2px solid var(--kd-border) !important;
	border-radius: 8px !important;
	background: var(--kd-card) !important;
	cursor: pointer !important;
	font-size: .9rem !important;
	text-align: left !important;
	transition: border-color .15s, background .15s !important;
	box-sizing: border-box !important;
}
.kd-type-chip:hover { border-color: var(--kd-primary) !important; background: #eff6ff !important; }
.kd-type-chip-letter {
	width: 28px !important;
	height: 28px !important;
	border-radius: 6px !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}
.kd-type-chip-text,
.kd-type-chip span:not(.kd-type-chip-letter) {
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 1 auto !important;
	display: inline-block !important;
}
.kd-type-chip-d .kd-type-chip-letter { background: #ef4444; }
.kd-type-chip-i .kd-type-chip-letter { background: #f59e0b; }
.kd-type-chip-s .kd-type-chip-letter { background: #22c55e; }
.kd-type-chip-c .kd-type-chip-letter { background: #3b82f6; }

.kd-modal[hidden] { display: none !important; }
.kd-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.kd-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.kd-modal-box {
	position: relative; background: var(--kd-card); border-radius: 12px;
	padding: 24px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.kd-modal-close {
	position: absolute; top: 8px; right: 12px; border: none; background: none;
	font-size: 1.5rem; cursor: pointer; color: var(--kd-muted); line-height: 1;
}
.kd-modal-title { margin: 0 0 12px; font-size: 1.1rem; padding-right: 24px; }
.kd-modal-body { line-height: 1.7; color: var(--kd-muted); margin-bottom: 16px; }
.kd-modal-body p { margin: 0 0 1em; }

.kd-interpretation { line-height: 1.7; color: var(--kd-muted); }
.kd-interpretation p { margin: 0 0 1em; }
.kd-loading { text-align: center; padding: 40px; color: var(--kd-muted); }
.kd-alert { background: #fef2f2; color: #dc2626; padding: 12px; border-radius: 8px; margin-bottom: 12px; }

.kd-resume-box {
	background: #eff6ff; border: 1px solid #93c5fd; border-radius: 8px;
	padding: 14px; margin-bottom: 16px;
}
.kd-resume-box p { margin: 0 0 10px; font-size: .875rem; color: var(--kd-muted); }

.kd-shortcode-wrap { margin: 1.5em 0; }
.kd-shortcode-error {
	padding: 12px 16px;
	margin: 1em 0;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #991b1b;
	font-size: 0.95rem;
}