@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

.slq-portal {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 28px auto;
	color: #172033;
	font-family: Inter, Arial, sans-serif;
	line-height: 1.6;
}

.slq-portal *,
.slq-portal *::before,
.slq-portal *::after {
	box-sizing: border-box;
}

.slq-portal button,
.slq-portal input,
.slq-portal select,
.slq-portal textarea {
	font-family: inherit;
	line-height: 1.4;
}

.slq-portal.slq-auth-shell {
	display: flex;
	justify-content: center;
	width: min(100%, 500px);
	max-width: 500px !important;
	min-height: 0;
	margin: 42px auto;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.slq-dashboard-head span {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.slq-dashboard-head h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: 0;
}

.slq-auth-card {
	position: relative;
	width: 100%;
	max-width: 500px;
	overflow: hidden;
	padding: 26px 26px 24px;
	border: 1px solid #d9e1ec;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(24, 38, 63, 0.1);
}

.slq-auth-card::before,
.slq-auth-card::after {
	content: "";
	position: absolute;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #cbd5e1;
}

.slq-auth-card::before {
	left: 11px;
}

.slq-auth-card::after {
	right: 11px;
}

.slq-auth-brand {
	margin-bottom: 18px;
	text-align: center;
}

.slq-auth-logo {
	display: inline-grid;
	place-items: center;
	width: 70px;
	height: 70px;
	margin-bottom: 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, #27a9d8, #176f87);
	color: #ffffff;
	box-shadow: 0 7px 18px rgba(23, 111, 135, 0.24);
}

.slq-auth-logo .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 18px;
}

.slq-auth-logo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.slq-auth-brand h2 {
	margin: 0;
	color: #101722;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0;
}

.slq-auth-brand p {
	max-width: 260px;
	margin: 6px auto 0;
	color: #687386;
	font-size: 12px;
	line-height: 1.4;
}

.slq-tabs,
.slq-dashboard-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
	padding: 4px;
	border: 1px solid #d9e1ec;
	border-radius: 8px;
	background: #f6f8fb;
}

.slq-tabs {
	gap: 0;
	padding: 3px;
	background: #f8fafc;
}

.slq-tabs button,
.slq-dashboard-tabs button {
	flex: 1;
	min-height: 42px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #516173;
	font-weight: 700;
	cursor: pointer;
}

.slq-tabs button {
	min-height: 38px;
	font-size: 14px;
	font-weight: 700;
}

.slq-tabs button.is-active,
.slq-dashboard-tabs button.is-active {
	background: #ffffff;
	color: #10233f;
	box-shadow: 0 2px 8px rgba(24, 38, 63, 0.08);
}

.slq-auth-form,
.slq-dashboard-panel,
.slq-quiz-form {
	display: none;
}

.slq-auth-form.is-active,
.slq-dashboard-panel.is-active,
.slq-quiz-form.is-active {
	display: block;
}

.slq-auth-form label {
	display: block;
	margin-bottom: 16px;
}

.slq-auth-form label span,
.slq-question strong {
	display: block;
	margin-bottom: 7px;
	color: #172033;
	font-size: 14px;
	font-weight: 700;
}

.slq-required {
	color: #dc2626;
	font-weight: 800;
}

.slq-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}

.slq-field-head span {
	margin-bottom: 0;
}

.slq-auth-form input[type="text"],
.slq-auth-form input[type="email"],
.slq-auth-form input[type="tel"],
.slq-auth-form input[type="password"] {
	width: 100%;
	min-height: 34px;
	padding: 12px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #ffffff;
	color: #172033;
	font-size: 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slq-auth-form input[type="text"]:focus,
.slq-auth-form input[type="email"]:focus,
.slq-auth-form input[type="tel"]:focus,
.slq-auth-form input[type="password"]:focus {
	border-color: #091628;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12);
}

.slq-check-inline {
	display: flex !important;
	align-items: center;
	gap: 9px;
}

.slq-check-inline input {
	margin: 0;
}

.slq-check-inline span {
	margin-bottom: 0;
}

.slq-auth-form button,
.slq-quiz-card button,
.slq-quiz-start,
.slq-submit-quiz,
.slq-logout,
.slq-course-card a,
.slq-quiz-form__head button,
.slq-player-actions button,
.slq-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid #34B44A;
	border-radius: 6px;
	background: #34B44A;
	color: #ffffff;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.slq-auth-card .slq-auth-form button {
	width: 100%;
	min-height: 48px;
	border-color: #1d232d;
	border-radius: 999px;
	background: linear-gradient(180deg, #343a43, #151a21);
	font-weight: 700;
	box-shadow: 0 8px 16px rgba(21, 26, 33, 0.18);
}

.slq-auth-card .slq-auth-form .slq-auth-inline-tab {
	width: auto;
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #34B44A;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}

.slq-auth-card .slq-auth-form .slq-auth-inline-tab:hover,
.slq-auth-card .slq-auth-form .slq-auth-inline-tab:focus {
	color: #174bb4;
	text-decoration: none;
}

.slq-auth-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 22px -26px -24px;
	padding: 18px 20px;
	border-top: 1px solid #edf1f6;
	color: #687386;
	font-size: 12px;
	line-height: 1.4;
}

.slq-auth-card .slq-auth-form .slq-auth-tab-link {
	width: auto;
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #101722;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}

.slq-auth-card .slq-auth-form .slq-auth-tab-link:hover,
.slq-auth-card .slq-auth-form .slq-auth-tab-link:focus {
	color: #34B44A;
	text-decoration: none;
}

.slq-portal .slq-logout,
.slq-portal .slq-quiz-start,
.slq-portal .slq-course-card a {
	text-decoration: none !important;
}

.slq-portal .slq-logout:hover,
.slq-portal .slq-logout:focus,
.slq-portal .slq-logout:visited,
.slq-portal .slq-quiz-start:hover,
.slq-portal .slq-quiz-start:focus,
.slq-portal .slq-quiz-start:visited,
.slq-portal .slq-course-card a:hover,
.slq-portal .slq-course-card a:focus,
.slq-portal .slq-course-card a:visited {
	text-decoration: none !important;
}

.slq-auth-form button[disabled],
.slq-submit-quiz[disabled] {
	opacity: 0.7;
	cursor: wait;
}

.slq-message {
	display: none;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 6px;
	background: #eef6ff;
	color: #17456c;
	font-weight: 700;
}

.slq-message.is-visible {
	display: block;
}

.slq-message.is-error {
	background: #fff1f2;
	color: #a81935;
}

.slq-dashboard-shell {
	padding: 0;
	border: 1px solid #d9e1ec;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(24, 38, 63, 0.08);
}

.slq-dashboard-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px;
	border-bottom: 1px solid #e5ebf2;
	background: #f8fafc;
}

.slq-dashboard-head span {
	color: #34B44A;
}

.slq-dashboard-head h2 {
	color: #172033;
	font-size: 28px;
}

.slq-logout {
	border-color: #cbd5e1;
	background: #ffffff;
	color: #172033;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.slq-dashboard-tabs {
	margin: 22px 28px 0;
}

.slq-dashboard-panel {
	padding: 28px;
}

.slq-course-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.slq-course-card,
.slq-quiz-card,
.slq-empty,
.slq-result-row,
.slq-quiz-form {
	border: 1px solid #d9e1ec;
	border-radius: 8px;
	background: #ffffff;
}

.slq-course-card {
	padding: 20px;
}

.slq-course-card h3,
.slq-quiz-card h3,
.slq-quiz-form h3 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
}

.slq-course-card div {
	color: #516173;
	line-height: 1.6;
}

.slq-course-card a {
	margin-top: 14px;
	border-color: #34B44A;
	background: #34B44A;
}

.slq-quiz-browser {
	display: grid;
	grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	gap: 18px;
}

.slq-quiz-list,
.slq-result-list {
	display: grid;
	gap: 12px;
}

.slq-quiz-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px;
}

.slq-quiz-card p {
	margin: 0;
	color: #607084;
}

.slq-quiz-card p span {
	display: inline-block;
	margin-left: 8px;
	color: #34B44A;
	font-weight: 700;
}

.slq-quiz-stage {
	min-width: 0;
}

.slq-quiz-form {
	padding: 20px;
}

.slq-quiz-form__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e5ebf2;
}

.slq-quiz-form__head button {
	min-height: 34px;
	border-color: #cbd5e1;
	background: #ffffff;
	color: #172033;
}

.slq-question {
	padding: 16px 0;
	border-bottom: 1px solid #eef2f7;
}

.slq-answer-list {
	display: grid;
	gap: 10px;
}

.slq-answer-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid #d9e1ec;
	border-radius: 6px;
	cursor: pointer;
}

.slq-submit-quiz {
	margin-top: 18px;
}

.slq-empty {
	padding: 28px;
	background: #f8fafc;
	text-align: center;
}

.slq-empty strong {
	display: block;
	font-size: 20px;
}

.slq-empty p {
	margin: 8px 0 0;
	color: #607084;
}

.slq-result-row,
.slq-result-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
}

.slq-result-row span,
.slq-result-box span {
	display: block;
	color: #607084;
}

.slq-result-row.is-passed,
.slq-result-box.is-passed {
	border-color: #b7e4ce;
	background: #f0fdf4;
}

.slq-result-row.is-failed,
.slq-result-box.is-failed {
	border-color: #fed7aa;
	background: #f5f7fb;
}

.slq-result-box {
	margin-top: 18px;
	border: 1px solid #d9e1ec;
	border-radius: 8px;
}

.slq-dashboard-shell {
	max-width: 100%;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(37, 59, 116, 0.12);
}

.slq-dashboard-head {
	padding: 42px 48px 34px;
	background: #ffffff;
}

.slq-student-profile {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.slq-student-avatar {
	display: grid;
	flex: 0 0 auto;
	width: 82px;
	height: 82px;
	place-items: center;
	border-radius: 50%;
	background: #34B44A;
	color: #0f2a3d;
	font-size: 34px;
	font-weight: 900;
}

.slq-student-profile h2 {
	font-size: 30px;
}

.slq-student-profile p {
	margin: 8px 0 0;
	color: #6b7788;
}

.slq-dashboard-body {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	min-height: 640px;
	border-top: 1px solid #d8dee8;
}

.slq-dashboard-tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 26px 18px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
}

.slq-dashboard-tabs button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border-radius: 6px;
	color: #313946;
	font-size: 15px;
	text-align: left;
	box-shadow: none;
}

.slq-dashboard-tabs button .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #edf8ef;
	color: #091628;
	font-size: 17px;
	line-height: 1;
}

.slq-dashboard-tabs button.is-active {
	background: #091628;
	color: #ffffff;
	box-shadow: none;
}

.slq-dashboard-tabs button.is-active .dashicons {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.slq-dashboard-main {
	min-width: 0;
	padding: 30px 48px 48px;
	background: #ffffff;
}

.slq-dashboard-panel {
	padding: 0;
}

.slq-dashboard-panel > h3,
.slq-overview-title h3 {
	margin: 0 0 26px;
	color: #202631;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: 0;
}

.slq-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 34px;
}

.slq-summary-card {
	display: grid;
	min-height: 170px;
	place-items: center;
	padding: 24px;
	border: 1px solid #d8dee8;
	border-radius: 6px;
	background: #ffffff;
	text-align: center;
}

.slq-summary-card .dashicons {
	display: grid;
	width: 62px;
	height: 62px;
	margin-bottom: 10px;
	place-items: center;
	border-radius: 50%;
	background: #edf8ef;
	color: #091628;
	font-size: 32px;
	line-height: 62px;
}

.slq-summary-card strong {
	display: block;
	color: #202631;
	font-size: 34px;
	line-height: 1;
}

.slq-summary-card p {
	margin: 8px 0 0;
	color: #7a8493;
	font-size: 15px;
}

.slq-overview-section {
	margin-top: 10px;
}

.slq-overview-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
}

.slq-overview-title h3 {
	margin: 0;
}

.slq-overview-title button {
	border: 0;
	background: transparent;
	color: #687386;
	font-weight: 700;
	cursor: pointer;
}

.slq-dashboard-main .slq-course-grid {
	grid-template-columns: 1fr;
}

.slq-dashboard-main .slq-course-card,
.slq-dashboard-main .slq-quiz-card,
.slq-dashboard-main .slq-result-row,
.slq-dashboard-main .slq-empty {
	border-radius: 6px;
}

.slq-quiz-card.is-completed {
	background: #f8fafc;
}

.slq-quiz-start {
	flex: 0 0 auto;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.slq-quiz-player {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.slq-portal .slq-back-link {
	min-height: 38px;
	width: max-content;
	margin: 0 0 16px auto;
	border-color: #cbd5e1;
	background: #ffffff;
	color: #172033;
	font-family: Inter, Arial, sans-serif;
	font-weight: 700;
	text-decoration: none !important;
}

.slq-portal .slq-back-link:hover,
.slq-portal .slq-back-link:focus,
.slq-portal .slq-back-link:visited {
	color: #172033;
	text-decoration: none !important;
}

.slq-quiz-player-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
	padding: 28px;
	border: 1px solid #d9e1ec;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(24, 38, 63, 0.08);
}

.slq-quiz-player-head span {
	display: block;
	margin-bottom: 8px;
	color: #34B44A;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.slq-quiz-player-head h2 {
	margin: 0;
	font-size: 30px;
	line-height: 1.35;
	letter-spacing: 0;
}

.slq-quiz-player-head strong {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: #edf8ef;
	color: #091628;
	font-size: 18px;
}

.slq-player-form {
	padding: 26px;
	border: 1px solid #d9e1ec;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(24, 38, 63, 0.08);
}

.slq-player-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 auto;
}

.slq-player-dots button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	border: 1px solid #d9e1ec;
	border-radius: 999px;
	background: #ffffff;
	color: #516173;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(24, 38, 63, 0.06);
}

.slq-player-dots button.is-answered {
	border-color: #b7e4ce;
	background: #f0fdf4;
	color: #177245;
}

.slq-player-dots button.is-active {
	border-color: #091628;
	background: #091628;
	color: #ffffff;
}

.slq-player-dots-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	min-height: 38px;
	color: #607084;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.slq-player-question {
	display: none;
}

.slq-player-question.is-active {
	display: block;
}

.slq-player-question-count {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 10px;
	color: #607084;
	font-weight: 700;
}

.slq-player-question-count span {
	color: #34B44A;
	font-size: 12px;
	text-transform: uppercase;
}

.slq-player-question-count strong {
	color: #172033;
	font-size: 16px;
	line-height: 1.4;
}

.slq-player-question h3 {
	margin: 0 0 24px;
	color: #172033;
	font-size: 24px;
	line-height: 1.35;
	letter-spacing: -0.4px;
}

.slq-player-options {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	touch-action: none;
	user-select: none;
}

.slq-player-options label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 14px 16px;
	border: 1px solid #d9e1ec;
	border-radius: 8px;
	background: #ffffff;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23091628' d='M3 21l4.5-1.2 10.6-10.6c.8-.8.8-2 0-2.8l-1.5-1.5c-.8-.8-2-.8-2.8 0L3.7 15.1 3 21zm12.1-15.7l1.6 1.6-2 2-1.6-1.6 2-2z'/%3E%3Cpath fill='%2334B44A' d='M2 22l4.8-1.1-.9-.9L2 22z'/%3E%3C/svg%3E") 2 20, pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	z-index: 1;
}

.slq-player-options label * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23091628' d='M3 21l4.5-1.2 10.6-10.6c.8-.8.8-2 0-2.8l-1.5-1.5c-.8-.8-2-.8-2.8 0L3.7 15.1 3 21zm12.1-15.7l1.6 1.6-2 2-1.6-1.6 2-2z'/%3E%3Cpath fill='%2334B44A' d='M2 22l4.8-1.1-.9-.9L2 22z'/%3E%3C/svg%3E") 2 20, pointer;
}

.slq-player-options label:hover,
.slq-player-options label.is-selected {
	border-color: #091628;
	background: #f4fbf5;
	box-shadow: 0 8px 24px rgba(52, 180, 74, 0.12);
}

.slq-player-options input {
	flex: 0 0 auto;
	margin: 0;
}

.slq-player-options span {
	color: #253044;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

.slq-draw-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.slq-player-actions {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid #e8edf4;
}

.slq-player-actions button {
	border-color: #cbd5e1;
	background: #ffffff;
	color: #172033;
	font-weight: 600;
}

.slq-player-actions button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.slq-player-actions [data-slq-next-question],
.slq-player-actions .slq-submit-quiz {
	justify-self: end;
	border-color: #34B44A;
	background: #34B44A;
	color: #ffffff;
}

.slq-player-actions [data-slq-next-question],
.slq-player-actions .slq-submit-quiz {
	margin-left: 0;
}

.slq-save-status {
	display: none;
	color: #607084;
	font-size: 13px;
	font-weight: 700;
}

.slq-player-actions .slq-player-dots {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}

.slq-quiz-result-card {
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: 34px;
	border: 1px solid #d9e1ec;
	border-radius: 12px;
	background: #ffffff;
	text-align: center;
	box-shadow: 0 18px 50px rgba(24, 38, 63, 0.08);
}

.slq-quiz-result-card span {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: #edf8ef;
	color: #091628;
	font-weight: 800;
}

.slq-quiz-result-card strong {
	display: block;
	margin: 16px 0 6px;
	color: #172033;
	font-size: 64px;
	line-height: 1;
}

.slq-quiz-result-card p {
	margin: 0;
	color: #607084;
	font-size: 22px;
	font-weight: 800;
}

.slq-quiz-result-card small {
	display: block;
	max-width: 420px;
	margin-top: 16px;
	color: #607084;
	font-size: 14px;
	line-height: 1.6;
}

.slq-quiz-result-card.is-passed {
	border-color: #b7e4ce;
	background: #f0fdf4;
}

.slq-quiz-result-card.is-failed {
	border-color: #fed7aa;
	background: #f5f7fb;
}

@media (max-width: 860px) {
	.slq-auth-shell,
	.slq-quiz-browser,
	.slq-course-grid {
		grid-template-columns: 1fr;
	}

	.slq-auth-card,
	.slq-dashboard-panel,
	.slq-dashboard-head {
		padding: 22px;
	}

	.slq-dashboard-head,
	.slq-quiz-card,
	.slq-quiz-form__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.slq-dashboard-tabs {
		margin: 0;
		padding: 14px;
		border-right: 0;
		border-bottom: 1px solid #d8dee8;
	}

	.slq-dashboard-shell {
		border-radius: 12px;
	}

	.slq-dashboard-body,
	.slq-summary-grid {
		grid-template-columns: 1fr;
	}

	.slq-dashboard-main {
		padding: 22px;
	}

	.slq-student-avatar {
		width: 64px;
		height: 64px;
		font-size: 26px;
	}

	.slq-quiz-player-head,
	.slq-player-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.slq-player-actions [data-slq-next-question],
	.slq-player-actions .slq-submit-quiz {
		margin-left: 0;
	}

	.slq-player-form,
	.slq-quiz-player-head {
		padding: 20px;
	}

	.slq-player-options {
		grid-template-columns: 1fr;
	}
}

/* SLQ theme override */
.slq-logout,
.slq-back-link,
.slq-quiz-form__head button,
.slq-player-actions button {
	background: #ffffff;
	border-color: rgba(9, 22, 40, 0.16);
	color: #091628;
}

.slq-logout:hover,
.slq-logout:focus,
.slq-back-link:hover,
.slq-back-link:focus,
.slq-quiz-form__head button:hover,
.slq-quiz-form__head button:focus,
.slq-player-actions button:hover,
.slq-player-actions button:focus {
	background: rgba(52, 180, 74, 0.08);
	border-color: rgba(52, 180, 74, 0.28);
	color: #091628;
}

.slq-auth-form button:hover,
.slq-quiz-start:hover,
.slq-submit-quiz:hover,
.slq-course-card a:hover,
.slq-player-actions [data-slq-next-question]:hover,
.slq-player-actions .slq-submit-quiz:hover {
	background: #091628;
	border-color: #091628;
	color: #ffffff;
}

/* SLQ dashboard hardening */
.slq-portal.slq-dashboard-shell,
.slq-portal.slq-auth-shell,
.slq-portal.slq-quiz-player {
	isolation: isolate;
}

.slq-portal.slq-dashboard-shell .slq-dashboard-body {
	display: grid !important;
	grid-template-columns: 230px minmax(0, 1fr) !important;
	align-items: stretch;
}

.slq-portal.slq-dashboard-shell .slq-dashboard-tabs {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
}

.slq-portal.slq-dashboard-shell .slq-dashboard-tabs button {
	width: 100%;
}
.slq-portal.slq-dashboard-shell .slq-dashboard-tabs button:hover,
.slq-portal.slq-dashboard-shell .slq-dashboard-tabs button:focus-visible {
	background: #091628 !important;
	color: #ffffff !important;
	box-shadow: 0 10px 24px rgba(9, 22, 40, 0.16);
}

.slq-portal.slq-dashboard-shell .slq-dashboard-tabs button:hover .dashicons,
.slq-portal.slq-dashboard-shell .slq-dashboard-tabs button:focus-visible .dashicons {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

.slq-portal.slq-dashboard-shell .slq-summary-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.slq-portal.slq-dashboard-shell .slq-summary-card {
	min-width: 0;
}

.slq-portal.slq-dashboard-shell .slq-dashboard-main {
	min-width: 0;
}

@media (max-width: 860px) {
	.slq-portal.slq-dashboard-shell .slq-dashboard-body,
	.slq-portal.slq-dashboard-shell .slq-summary-grid {
		grid-template-columns: 1fr !important;
	}

	.slq-portal.slq-dashboard-shell .slq-dashboard-tabs {
		flex-direction: row !important;
		flex-wrap: wrap;
	}
}

/* v0.3.7: enforced quiz timer */
.slq-quiz-player-status {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.slq-quiz-player-head .slq-quiz-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #d9e1ec;
	border-radius: 999px;
	background: #ffffff;
	color: #516173;
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 0;
	text-transform: uppercase;
}

.slq-quiz-player-head .slq-quiz-timer b {
	color: #091628;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}

.slq-quiz-player-head .slq-quiz-timer.is-warning {
	border-color: #f59e0b;
	background: #fffbeb;
	color: #92400e;
}

.slq-quiz-player-head .slq-quiz-timer.is-expired {
	border-color: #dc2626;
	background: #fef2f2;
	color: #991b1b;
}

@media (max-width: 700px) {
	.slq-quiz-player-status {
		justify-content: flex-start;
	}
}

/* v0.3.8 quiz marks / retake context */
.slq-quiz-player-head > div > small {
	display: block;
	margin-top: 4px;
	opacity: 0.82;
}


/* Result review and responsive refinements */
.slq-portal,
.slq-portal button,
.slq-portal input,
.slq-portal select,
.slq-portal textarea {
	font-family: Inter, Arial, sans-serif;
}

.slq-dashboard-head span,
.slq-tabs button,
.slq-dashboard-tabs button,
.slq-auth-form label span,
.slq-question strong,
.slq-player-question-count,
.slq-player-actions button,
.slq-quiz-result-card span,
.slq-quiz-result-card p,
.slq-review-number,
.slq-review-badge {
	font-weight: 500;
}

.slq-auth-form button,
.slq-quiz-start,
.slq-submit-quiz,
.slq-logout,
.slq-back-link,
.slq-quiz-result-card strong,
.slq-review-title h4,
.slq-review-answer strong {
	font-weight: 600;
}

.slq-quiz-player-head,
.slq-player-form,
.slq-quiz-result-card,
.slq-review-item,
.slq-result-row,
.slq-quiz-card,
.slq-course-card,
.slq-summary-card,
.slq-dashboard-panel,
.slq-empty {
	max-width: 100%;
}

.slq-quiz-result-wrap {
	display: grid;
	gap: 22px;
}

.slq-quiz-result-card {
	padding: 34px 24px;
	border-radius: 16px;
}

.slq-quiz-result-card strong {
	font-size: clamp(44px, 8vw, 64px);
	line-height: 1;
	letter-spacing: -0.03em;
}

.slq-quiz-result-card p {
	font-size: clamp(22px, 3.8vw, 30px);
	line-height: 1.2;
}

.slq-quiz-result-card small {
	max-width: 520px;
	margin: 10px auto 0;
	font-weight: 400;
	line-height: 1.7;
}

.slq-quiz-review {
	padding: 24px;
	border: 1px solid #d9e1ec;
	border-radius: 16px;
	background: #ffffff;
}

.slq-review-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

.slq-review-section-head h3 {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
	color: #172033;
}

.slq-review-section-head p {
	margin: 0;
	color: #607086;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

.slq-review-list {
	display: grid;
	gap: 16px;
}

.slq-review-item {
	padding: 18px;
	border: 1px solid #d9e1ec;
	border-radius: 14px;
	background: #fbfcfe;
}

.slq-review-item.is-correct {
	border-color: #b9e3c1;
	background: #f4fbf5;
}

.slq-review-item.is-wrong,
.slq-review-item.is-unanswered {
	border-color: #f0d0d0;
	background: #fff8f8;
}

.slq-review-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.slq-review-title {
	min-width: 0;
}

.slq-review-number {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: #eef3f8;
	color: #536377;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.slq-review-title h4 {
	margin: 10px 0 0;
	font-size: 18px;
	line-height: 1.55;
	color: #172033;
}

.slq-review-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

.slq-review-badge.is-correct {
	background: #dff4e3;
	color: #157347;
}

.slq-review-badge.is-wrong,
.slq-review-badge.is-unanswered {
	background: #fde4e4;
	color: #b42318;
}

.slq-review-answer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.slq-review-answer {
	padding: 14px 16px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid #e4ebf3;
	min-width: 0;
}

.slq-review-answer.is-correct-answer {
	background: #f7fbff;
	border-color: #d8e6f7;
}

.slq-review-answer small {
	display: block;
	margin-bottom: 6px;
	color: #6a788d;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.slq-review-answer strong {
	display: block;
	color: #172033;
	font-size: 15px;
	line-height: 1.7;
	word-break: break-word;
}

@media (max-width: 900px) {
	.slq-quiz-player-head {
		gap: 18px;
	}

	.slq-review-answer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.slq-portal {
		margin: 18px auto;
	}

	.slq-quiz-player-head,
	.slq-review-head,
	.slq-dashboard-body,
	.slq-dashboard-head {
		flex-direction: column;
		align-items: stretch;
	}

	.slq-quiz-player-status {
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
	}

	.slq-quiz-result-card,
	.slq-quiz-review,
	.slq-review-item,
	.slq-player-form {
		padding: 18px;
	}

	.slq-review-badge {
		align-self: flex-start;
	}

	.slq-player-actions {
		gap: 10px;
	}

	.slq-player-actions [data-slq-prev-question],
	.slq-player-actions [data-slq-next-question],
	.slq-player-actions .slq-submit-quiz {
		width: 100%;
	}

	.slq-review-title h4 {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.slq-back-link,
	.slq-logout,
	.slq-quiz-start,
	.slq-submit-quiz,
	.slq-player-actions button {
		width: 100%;
	}

	.slq-quiz-player-status {
		align-items: stretch;
	}

	.slq-player-dots {
		width: 100%;
		justify-content: center;
	}

	.slq-review-section-head h3 {
		font-size: 19px;
	}

	.slq-review-answer strong {
		font-size: 14px;
	}
}


/* v0.4.0 answer review, retake flow, and light Inter typography */
.slq-portal {
	font-weight: 400;
}

.slq-portal .slq-back-link,
.slq-quiz-player-head > div > span,
.slq-quiz-player-head h2,
.slq-quiz-player-head strong,
.slq-player-question-count,
.slq-player-question h3,
.slq-save-status {
	font-weight: 600;
}

.slq-quiz-player-head > div > small {
	font-weight: 400;
	line-height: 1.55;
}

.slq-quiz-result-card {
	min-height: 330px;
}

.slq-result-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 18px;
}

.slq-result-actions .slq-retake-quiz {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid #34b44a;
	border-radius: 9px;
	background: #34b44a;
	color: #ffffff !important;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(52, 180, 74, 0.16);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.slq-result-actions .slq-retake-quiz:hover,
.slq-result-actions .slq-retake-quiz:focus {
	background: #2da541;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(52, 180, 74, 0.2);
}

.slq-result-actions em {
	color: #607086;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
}

.slq-review-summary {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.slq-review-summary span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.slq-review-summary .is-correct {
	background: #e8f7eb;
	color: #157347;
}

.slq-review-summary .is-wrong,
.slq-review-summary .is-unanswered {
	background: #fdecec;
	color: #a8261c;
}

.slq-review-item {
	box-shadow: 0 8px 24px rgba(24, 38, 63, 0.035);
}

.slq-review-answer strong,
.slq-review-title h4 {
	font-weight: 500;
}

.slq-review-answer.is-correct-answer strong {
	color: #145a32;
}

.slq-review-item.is-wrong .slq-review-answer:first-child strong,
.slq-review-item.is-unanswered .slq-review-answer:first-child strong {
	color: #9f2f27;
}

@media (max-width: 767px) {
	.slq-quiz-player-head h2 {
		font-size: clamp(23px, 7vw, 28px);
	}

	.slq-quiz-result-card {
		min-height: 285px;
	}

	.slq-review-section-head {
		gap: 12px;
	}

	.slq-review-summary {
		justify-content: flex-start;
	}

	.slq-result-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
	}

	.slq-result-actions .slq-retake-quiz {
		width: 100%;
	}

	.slq-result-actions em {
		text-align: center;
	}
}

@media (max-width: 480px) {
	.slq-quiz-result-wrap {
		gap: 16px;
	}

	.slq-quiz-review,
	.slq-review-item,
	.slq-quiz-result-card {
		border-radius: 12px;
	}

	.slq-review-list {
		gap: 12px;
	}

	.slq-review-answer {
		padding: 12px 13px;
	}

	.slq-review-number,
	.slq-review-badge,
	.slq-review-summary span {
		font-size: 11px;
	}
}