.diag-enc-root {
	--diag-primary: #1b4f72;
	--diag-primary-light: #eaf1f8;
	--diag-text: #1d2327;
	--diag-muted: #6b7280;
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--diag-text);
}

.diag-enc-screen { animation: diagFade .25s ease; }
@keyframes diagFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.diag-enc-hub-title { font-size: 1.6em; margin-bottom: 4px; }
.diag-enc-hub-sub { color: var(--diag-muted); margin-bottom: 20px; }

.diag-enc-role-grid { display: grid; gap: 12px; }
.diag-enc-role-card {
	display: flex; flex-direction: column; align-items: flex-start; text-align: left;
	border: 1px solid #dcdcde; border-radius: 10px; padding: 16px; background: #fff;
	cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.diag-enc-role-card:hover { border-color: var(--diag-primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.diag-enc-role-name { font-weight: 700; margin-bottom: 4px; }
.diag-enc-role-desc { color: var(--diag-muted); font-size: .92em; }

.diag-enc-back { background: none; border: none; color: var(--diag-primary); cursor: pointer; padding: 0 0 16px; font-size: .9em; }

.diag-enc-intro-text { font-size: 1.05em; line-height: 1.5; margin: 12px 0 20px; }
.diag-enc-meta { color: var(--diag-muted); font-size: .9em; margin-bottom: 20px; }

.diag-enc-btn {
	display: inline-block; padding: 12px 22px; border-radius: 8px; border: none;
	font-weight: 600; cursor: pointer; font-size: 1em;
}
.diag-enc-btn-primary { background: var(--diag-primary); color: #fff; }
.diag-enc-btn-primary:hover { opacity: .92; }
.diag-enc-btn-primary:disabled { opacity: .6; cursor: default; }
.diag-enc-btn-link { background: none; border: none; color: var(--diag-muted); text-decoration: underline; cursor: pointer; display: block; margin-top: 10px; }

.diag-enc-progress-track { height: 6px; background: #eee; border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
.diag-enc-progress-bar { height: 100%; background: var(--diag-primary); transition: width .2s ease; }
.diag-enc-qcount { color: var(--diag-muted); font-size: .85em; margin-bottom: 6px; }
.diag-enc-qtext { font-size: 1.25em; line-height: 1.4; margin-bottom: 18px; }

.diag-enc-options-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.diag-enc-option-btn {
	text-align: left; padding: 14px 16px; border-radius: 8px; border: 1.5px solid #dcdcde;
	background: #fff; cursor: pointer; font-size: 1em; transition: all .12s ease;
}
.diag-enc-option-btn:hover { border-color: var(--diag-primary); background: var(--diag-primary-light); }

.diag-enc-result { text-align: left; }
.diag-enc-score-circle {
	width: 96px; height: 96px; border-radius: 50%; border: 6px solid var(--diag-primary);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
	font-size: 1.3em; font-weight: 700;
}
.diag-enc-level-name { text-align: center; margin-bottom: 6px; }
.diag-enc-level-desc { text-align: center; color: var(--diag-muted); margin-bottom: 24px; }

.diag-enc-dim-breakdown { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.diag-enc-dim-item { border: 1px solid #eee; border-radius: 8px; padding: 12px; }
.diag-enc-dim-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.diag-enc-dim-track { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.diag-enc-dim-fill { height: 100%; background: var(--diag-primary); }
.diag-enc-dim-insight { color: var(--diag-muted); font-size: .92em; margin: 0; }

.diag-enc-next-steps { margin: 0 0 24px; padding-left: 20px; }
.diag-enc-next-steps li { margin-bottom: 8px; line-height: 1.4; }

.diag-enc-cta-block { background: var(--diag-primary-light); border-radius: 10px; padding: 20px; text-align: center; }
.diag-enc-cta-form { text-align: left; margin-top: 14px; }
.diag-enc-cta-form input {
	width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #dcdcde; margin-bottom: 4px; font-size: 1em;
}
.diag-enc-cta-confirm { font-weight: 600; color: var(--diag-primary); }

@media (max-width: 480px) {
	.diag-enc-root { padding: 0 8px; }
}