.survey-creator-surface {
	height: auto;
	min-height: 20rem;
}

.survey-creator-surface,
[data-lesson-survey-container="true"] {
	--sjs-font-family: var(--bs-body-font-family);
	--sjs-primary-backcolor: var(--cui-primary);
	--sjs-primary-backcolor-light: color-mix(in srgb, var(--cui-primary) 82%, white 18%);
	--sjs-primary-backcolor-dark: color-mix(in srgb, var(--cui-primary) 84%, black 16%);
	--sjs-primary-forecolor: #fff;
	--sjs-primary-forecolor-light: #fff;
	--sjs-secondary-backcolor: color-mix(in srgb, var(--cui-primary) 12%, white 88%);
	--sjs-secondary-backcolor-light: color-mix(in srgb, var(--cui-primary) 8%, white 92%);
	--sjs-secondary-backcolor-semi-light: color-mix(in srgb, var(--cui-primary) 16%, white 84%);

	/* SurveyJS Creator v2 tokens used by the designer UI chrome */
	--sjs-primary-background-500: var(--cui-primary);
	--sjs-primary-background-400: color-mix(in srgb, var(--cui-primary) 88%, white 12%);
	--sjs-primary-background-25: color-mix(in srgb, var(--cui-primary) 25%, white 75%);
	--sjs-primary-background-10: color-mix(in srgb, var(--cui-primary) 10%, white 90%);
	--sjs-primary-foreground-100: #fff;
}

.lesson-survey-surface {
	--lesson-survey-bg: color-mix(in srgb, var(--cui-tertiary-bg) 100%, black 5%);
	background-color: var(--lesson-survey-bg) !important;
}

[data-lesson-survey-container="true"] {
	--lesson-survey-bg: color-mix(in srgb, var(--cui-tertiary-bg) 100%, black 5%);
	--sjs-general-backcolor: var(--lesson-survey-bg);
	--sjs-general-backcolor-dim: var(--lesson-survey-bg);
}

[data-lesson-survey-container="true"] .sd-title.sd-container-modern__title {
	background-color: var(--cui-body-bg);
	box-shadow: none;
}

[data-lesson-survey-container="true"] .sd-element--with-frame,
[data-lesson-survey-container="true"] .sd-question {
	background-color: var(--cui-body-bg);
}

[data-lesson-survey-container="true"] .sd-root-modern,
[data-lesson-survey-container="true"] .sd-root,
[data-lesson-survey-container="true"] .sd-body,
[data-lesson-survey-container="true"] .sd-container-modern {
	font-family: var(--bs-body-font-family) !important;
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
}

[data-lesson-survey-container="true"] .sd-root-modern .sv-string-viewer,
[data-lesson-survey-container="true"] .sd-root-modern .sd-item__control-label,
[data-lesson-survey-container="true"] .sd-root-modern .sd-input,
[data-lesson-survey-container="true"] .sd-root-modern .sd-btn,
[data-lesson-survey-container="true"] .sd-root-modern .sd-question__title {
	font-family: var(--bs-body-font-family) !important;
}

[data-lesson-survey-container="true"] .sd-title,
[data-lesson-survey-container="true"] .sd-page__title {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cui-heading-color, var(--cui-body-color));
}

[data-lesson-survey-container="true"] .sd-description,
[data-lesson-survey-container="true"] .sd-page__description {
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--cui-body-line-height);
}

[data-lesson-survey-container="true"] .sd-question__title,
[data-lesson-survey-container="true"] .sd-element__title {
	font-size: var(--bs-body-font-size);
	line-height: var(--bs-body-line-height);
}

.survey-creator-surface .svc-creator {
	min-height: inherit;
	--sjs2-color-bg-brand-primary: var(--cui-primary) !important;
	--sjs2-color-bg-brand-primary-dim: color-mix(in srgb, var(--cui-primary) 86%, white 14%) !important;
	--sjs2-color-bg-brand-secondary: color-mix(in srgb, var(--cui-primary) 14%, white 86%) !important;
	--sjs2-color-bg-accent-primary: var(--cui-primary) !important;
	--sjs2-color-bg-accent-secondary: color-mix(in srgb, var(--cui-primary) 14%, white 86%) !important;
	--sjs2-color-bg-accent-secondary-dim: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--sjs2-color-fg-static-main-primary: #fff !important;

	--sjs-primary-background-500: var(--cui-primary) !important;
	--sjs-primary-background-400: color-mix(in srgb, var(--cui-primary) 88%, white 12%) !important;
	--sjs-primary-background-25: color-mix(in srgb, var(--cui-primary) 25%, white 75%) !important;
	--sjs-primary-background-10: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--sjs-primary-foreground-100: #fff !important;

	--sjs-secondary-background-500: var(--cui-primary) !important;
	--sjs-secondary-background-400: color-mix(in srgb, var(--cui-primary) 88%, white 12%) !important;
	--sjs-secondary-background-25: color-mix(in srgb, var(--cui-primary) 25%, white 75%) !important;
	--sjs-secondary-background-10: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--sjs-secondary-foreground-100: #fff !important;
	--sjs-secondary-forecolor-25: rgba(255, 255, 255, 0.25) !important;
	--sjs-special-background: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;

	/* Legacy Survey Core tokens still used by parts of the designer surface */
	--primary: var(--cui-primary) !important;
	--green: var(--cui-primary) !important;
	--primary-light: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--green-light: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--primary-foreground: #fff !important;
	--primary-foreground-disabled: rgba(255, 255, 255, 0.55) !important;
}

.survey-creator-surface .sd-root-modern,
.survey-creator-surface .sd-root {
	--primary: var(--cui-primary) !important;
	--green: var(--cui-primary) !important;
	--primary-light: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--green-light: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
	--primary-foreground: #fff !important;
	--primary-foreground-disabled: rgba(255, 255, 255, 0.55) !important;
	--sjs-special-background: color-mix(in srgb, var(--cui-primary) 10%, white 90%) !important;
}

@media (max-width: 767.98px) {
	.survey-creator-surface {
		height: auto;
		min-height: 0;
	}
}