body.skorspm-flashcard-modal-open {
	overflow: hidden;
}

.skorspm-flashcard-section {
	position: relative;
}

.skorspm-flashcard-section,
.skorspm-flashcard-modal {
	--skorspm-flashcard-primary: var(--sk-ui-fq-button-bg, #123f7b);
	--skorspm-flashcard-primary-strong: var(--sk-ui-fq-button-hover-bg, #0d2e5b);
	--skorspm-flashcard-highlight: #1ca8b5;
	--skorspm-flashcard-highlight-rgb: 28, 168, 181;
	--skorspm-flashcard-text: var(--sk-ui-fq-header-color, #1f2f45);
	--skorspm-flashcard-heading: var(--sk-ui-fq-header-color, #12325f);
	--skorspm-flashcard-muted: var(--sk-ui-fq-subheader-color, #4f637e);
	--skorspm-flashcard-heading-font: var(--sk-ui-fq-header-font, "Poppins", "Trebuchet MS", sans-serif);
	--skorspm-flashcard-subheading-font: var(--sk-ui-fq-subheader-font, "Nunito Sans", "Trebuchet MS", "Helvetica Neue", sans-serif);
	--skorspm-flashcard-heading-size: var(--sk-ui-fq-header-size, clamp(1.38rem, 1.12rem + 0.72vw, 1.82rem));
	--skorspm-flashcard-subheading-size: var(--sk-ui-fq-subheader-size, 1rem);
	--skorspm-flashcard-surface: var(--sk-ui-fq-container-bg, #ffffff);
	--skorspm-flashcard-surface-soft: #f4f7fb;
	--skorspm-flashcard-surface-muted: #eaf0f7;
	--skorspm-flashcard-border: var(--sk-ui-fq-container-border, #d4dfec);
	--skorspm-flashcard-border-strong: var(--sk-ui-fq-container-border, #b9c9de);
	--skorspm-flashcard-front-bg: var(--sk-ui-fq-flashcard-front-bg, #eef4ff);
	--skorspm-flashcard-front-border: var(--sk-ui-fq-flashcard-front-border, #c7d8ec);
	--skorspm-flashcard-back-bg: var(--sk-ui-fq-flashcard-back-bg, #e5f5fa);
	--skorspm-flashcard-back-border: var(--sk-ui-fq-flashcard-back-border, #abdde1);
	--skorspm-flashcard-card-shadow: 0 16px 30px rgba(12, 45, 92, 0.11);
	--skorspm-flashcard-badge-bg: var(--sk-ui-fq-badge-bg, #f4f7fb);
	--skorspm-flashcard-badge-border: var(--sk-ui-fq-badge-border, #d4dfec);
	--skorspm-flashcard-badge-text: var(--sk-ui-fq-badge-text, #123f7b);
	--skorspm-flashcard-button-text: var(--sk-ui-fq-button-text, #ffffff);
	--skorspm-flashcard-button-bg: var(--sk-ui-fq-button-bg, var(--skorspm-flashcard-primary));
	--skorspm-flashcard-button-border: var(--sk-ui-fq-button-border, var(--skorspm-flashcard-primary));
	--skorspm-flashcard-button-hover-bg: var(--sk-ui-fq-button-hover-bg, var(--skorspm-flashcard-primary-strong));
	--skorspm-flashcard-button-hover-border: var(--sk-ui-fq-button-hover-border, var(--skorspm-flashcard-primary-strong));
	--skorspm-flashcard-button-hover-text: var(--sk-ui-fq-button-hover-text, #ffffff);
	--skorspm-flashcard-button-shadow-rgb: var(--sk-ui-fq-button-shadow-rgb, 18, 63, 123);
}

.skorspm-flashcard-launch,
.skorspm-flashcard-modal__close,
.skorspm-flashcard-actions__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--skorspm-flashcard-button-border);
	border-radius: 12px;
	background: var(--skorspm-flashcard-button-bg);
	color: var(--skorspm-flashcard-button-text);
	font-weight: 700;
	font-size: 0.95rem;
	font-family: var(--skorspm-flashcard-subheading-font);
	text-decoration: none;
	line-height: 1.3;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.skorspm-flashcard-launch:hover,
.skorspm-flashcard-launch:focus,
.skorspm-flashcard-modal__close:hover,
.skorspm-flashcard-modal__close:focus,
.skorspm-flashcard-actions__button:hover,
.skorspm-flashcard-actions__button:focus {
	background: var(--skorspm-flashcard-button-hover-bg);
	border-color: var(--skorspm-flashcard-button-hover-border);
	color: var(--skorspm-flashcard-button-hover-text);
	box-shadow: 0 6px 14px rgba(var(--skorspm-flashcard-button-shadow-rgb), 0.2);
	transform: translateY(-1px);
}

.skorspm-flashcard-launch:focus-visible,
.skorspm-flashcard-modal__close:focus-visible,
.skorspm-flashcard-actions__button:focus-visible {
	outline: 3px solid rgba(var(--skorspm-flashcard-highlight-rgb), 0.3);
	outline-offset: 2px;
}

.skorspm-flashcard-modal {
	position: fixed;
	inset: 0;
	z-index: 10030;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.skorspm-flashcard-modal[hidden] {
	display: none !important;
}

.skorspm-flashcard-modal__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 22, 46, 0.68) 0%, rgba(6, 18, 41, 0.78) 100%);
}

.skorspm-flashcard-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: calc(100dvh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overflow-x: hidden;
	background: var(--skorspm-flashcard-surface);
	border: 1px solid var(--skorspm-flashcard-border-strong);
	border-radius: 22px;
	box-shadow: 0 26px 58px rgba(8, 25, 52, 0.34);
}

.skorspm-flashcard-modal__close {
	position: sticky;
	top: 0;
	z-index: 3;
	align-self: flex-end;
	margin: 12px 14px 0 auto;
}

.skorspm-flashcard-player {
	flex: 1;
	padding: 6px 24px 26px;
	overflow-y: auto;
	overflow-x: hidden;
}

.skorspm-flashcard-player__title {
	margin: 10px 24px 4px;
	color: var(--skorspm-flashcard-heading);
	font-family: var(--skorspm-flashcard-heading-font);
	font-size: var(--skorspm-flashcard-heading-size);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.skorspm-flashcard-player__progress {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--skorspm-flashcard-badge-bg);
	border: 1px solid var(--skorspm-flashcard-badge-border);
	color: var(--skorspm-flashcard-badge-text);
	font-size: var(--skorspm-flashcard-subheading-size);
	font-family: var(--skorspm-flashcard-subheading-font);
	font-weight: 700;
}

.skorspm-flashcard-player__progress::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--skorspm-flashcard-highlight);
	box-shadow: 0 0 0 4px rgba(var(--skorspm-flashcard-highlight-rgb), 0.18);
}

.skorspm-flashcard-card {
	border-radius: 18px;
	border: 1px solid var(--skorspm-flashcard-front-border);
	background: var(--skorspm-flashcard-front-bg);
	box-shadow: var(--skorspm-flashcard-card-shadow);
	padding: 18px;
	color: var(--skorspm-flashcard-text);
}

.skorspm-flashcard-card.is-answer-visible {
	background: var(--skorspm-flashcard-surface);
	border-color: var(--skorspm-flashcard-border);
}

.skorspm-flashcard-card__front {
	padding: 14px 15px;
	border-radius: 14px;
	border: 1px solid var(--skorspm-flashcard-front-border);
	background: var(--skorspm-flashcard-front-bg);
	font-size: clamp(1.08rem, 0.97rem + 0.38vw, 1.32rem);
	font-weight: 700;
	font-family: var(--skorspm-flashcard-heading-font);
	line-height: 1.65;
	color: var(--skorspm-flashcard-heading);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.skorspm-flashcard-card__back {
	margin-top: 14px;
	padding: 14px 15px;
	border-radius: 14px;
	border: 1px solid var(--skorspm-flashcard-back-border);
	background: var(--skorspm-flashcard-back-bg);
	font-size: 1.02rem;
	font-family: var(--skorspm-flashcard-subheading-font);
	line-height: 1.6;
	color: #143f64;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.skorspm-flashcard-card__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin-top: 14px;
	border: 1px solid var(--skorspm-flashcard-border);
	background: var(--skorspm-flashcard-surface);
}

.skorspm-flashcard-card__instruction,
.skorspm-flashcard-card__hint,
.skorspm-flashcard-card__explanation,
.skorspm-flashcard-card__memory-prompt {
	margin: 12px 0 0;
	font-size: var(--skorspm-flashcard-subheading-size);
	font-family: var(--skorspm-flashcard-subheading-font);
	line-height: 1.55;
	color: var(--skorspm-flashcard-muted);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.skorspm-flashcard-card__hint {
	padding: 10px 12px;
	border-radius: 10px;
	background: #eef9fb;
	border: 1px solid #a6dce1;
	color: #155165;
}

.skorspm-flashcard-card__memory-prompt {
	font-weight: 700;
	color: var(--skorspm-flashcard-primary);
}

.skorspm-flashcard-actions {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.skorspm-flashcard-launch[disabled],
.skorspm-flashcard-actions__button[disabled] {
	opacity: 0.52;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	background: var(--skorspm-flashcard-surface-muted);
	border-color: var(--skorspm-flashcard-border-strong);
	color: var(--skorspm-flashcard-muted);
}

.skorspm-flashcard-summary {
	padding: 14px;
	border-radius: 16px;
	border: 1px solid var(--skorspm-flashcard-border);
	background: var(--skorspm-flashcard-surface);
	box-shadow: 0 10px 22px rgba(14, 38, 74, 0.08);
}

.skorspm-flashcard-summary h3 {
	margin: 0 0 10px;
	color: var(--skorspm-flashcard-heading);
	font-family: var(--skorspm-flashcard-heading-font);
	font-size: clamp(1.3rem, 1.05rem + 0.64vw, 1.65rem);
	line-height: 1.3;
}

.skorspm-flashcard-summary p {
	margin: 7px 0;
	font-size: var(--skorspm-flashcard-subheading-size);
	font-family: var(--skorspm-flashcard-subheading-font);
	line-height: 1.55;
	color: var(--skorspm-flashcard-muted);
	overflow-wrap: anywhere;
}

.skorspm-flashcard-summary__badge {
	display: inline-flex;
	align-items: center;
	margin: 0 8px 8px 0;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--skorspm-flashcard-badge-border);
	background: var(--skorspm-flashcard-badge-bg);
	color: var(--skorspm-flashcard-badge-text);
	font-size: 0.88rem;
	font-family: var(--skorspm-flashcard-subheading-font);
	font-weight: 700;
}

.skorspm-flashcard-summary__caption {
	margin-top: 2px;
	font-weight: 600;
	font-family: var(--skorspm-flashcard-subheading-font);
	color: var(--skorspm-flashcard-heading);
}

.skorspm-flashcard-summary__stat {
	display: block;
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid var(--skorspm-flashcard-border);
	background: var(--skorspm-flashcard-surface-soft);
	color: var(--skorspm-flashcard-text);
}

@media (max-width: 782px) {
	.skorspm-flashcard-modal {
		padding: 80px 0 0;
		align-items: stretch;
	}

	.skorspm-flashcard-modal__dialog {
		width: 100vw;
		max-width: none;
		height: calc(100dvh - 80px);
		max-height: calc(100dvh - 80px);
		border-radius: 0;
	}

	.skorspm-flashcard-modal__close {
		position: sticky;
		top: 0;
		margin: 10px 12px 2px auto;
	}

	.skorspm-flashcard-player {
		padding: 8px 14px 20px;
	}

	.skorspm-flashcard-player__title {
		margin: 8px 14px 6px;
		font-size: 1.32rem;
	}

	.skorspm-flashcard-card {
		padding: 14px;
	}

	.skorspm-flashcard-card__front,
	.skorspm-flashcard-card__back {
		font-size: 1.02rem;
	}

	.skorspm-flashcard-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.skorspm-flashcard-actions__button {
		width: 100%;
	}
}