/*!
 * Kriya — front-end app.
 *
 * Every rule is scoped under .qtwm-app so the plugin cannot leak into (or be
 * clobbered by) the active theme. Layout is Flexbox + CSS Grid; the split
 * screen appears at 1024px and collapses to a stacked flow below it.
 *
 * @since 1.1.0
 */

/* ---------------------------------------------------------------------------
 * 1. Design tokens
 * ------------------------------------------------------------------------ */

.qtwm-app {
	--qtwm-bg: #f4f6fa;
	--qtwm-surface: #ffffff;
	--qtwm-surface-soft: #f8fafc;
	--qtwm-border: #e3e8ef;
	--qtwm-border-strong: #cbd5e1;
	--qtwm-text: #1a2233;
	--qtwm-text-soft: #5b6678;
	--qtwm-text-faint: #8b95a7;

	--qtwm-primary: #2f5de3;
	--qtwm-primary-dark: #2247bb;
	--qtwm-primary-soft: #eaeffd;

	--qtwm-draft: #64748b;
	--qtwm-draft-soft: #eef1f5;
	--qtwm-submitted: #e08600;
	--qtwm-submitted-soft: #fdf1de;
	--qtwm-approved: #12864c;
	--qtwm-approved-soft: #e2f5eb;
	--qtwm-rejected: #cf3030;
	--qtwm-rejected-soft: #fdecec;

	--qtwm-radius: 14px;
	--qtwm-radius-sm: 10px;
	--qtwm-radius-lg: 20px;

	--qtwm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
	--qtwm-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .14);
	--qtwm-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .3);
	--qtwm-ring: 0 0 0 3px rgba(47, 93, 227, .18);

	--qtwm-gap: 20px;

	box-sizing: border-box;
	color: var(--qtwm-text);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.qtwm-app *,
.qtwm-app *::before,
.qtwm-app *::after {
	box-sizing: border-box;
}

.qtwm-app h1,
.qtwm-app h2,
.qtwm-app h3 {
	margin: 0;
	font-weight: 650;
	letter-spacing: -.012em;
	line-height: 1.25;
	color: var(--qtwm-text);
}

.qtwm-app p {
	margin: 0;
}

.qtwm-app ol,
.qtwm-app ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qtwm-app img {
	max-width: 100%;
	height: auto;
	display: block;
}

.qtwm-is-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Primitives — cards, buttons, inputs, pills, alerts
 * ------------------------------------------------------------------------ */

.qtwm-card {
	background: var(--qtwm-surface);
	border: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius);
	box-shadow: var(--qtwm-shadow);
}

.qtwm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	min-height: 42px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
	white-space: nowrap;
}

.qtwm-btn:active {
	transform: translateY(1px);
}

.qtwm-btn:focus-visible {
	outline: none;
	box-shadow: var(--qtwm-ring);
}

.qtwm-btn[disabled],
.qtwm-btn.qtwm-is-busy {
	opacity: .55;
	pointer-events: none;
}

.qtwm-btn--primary {
	background: var(--qtwm-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}

.qtwm-btn--primary:hover {
	background: var(--qtwm-primary-dark);
	color: #fff;
}

.qtwm-btn--secondary {
	background: var(--qtwm-primary-soft);
	color: var(--qtwm-primary-dark);
}

.qtwm-btn--secondary:hover {
	background: #dde6fc;
	color: var(--qtwm-primary-dark);
}

.qtwm-btn--ghost {
	background: var(--qtwm-surface);
	border-color: var(--qtwm-border-strong);
	color: var(--qtwm-text-soft);
}

.qtwm-btn--ghost:hover {
	background: var(--qtwm-surface-soft);
	color: var(--qtwm-text);
}

.qtwm-btn--approve {
	background: var(--qtwm-approved);
	color: #fff;
}

.qtwm-btn--approve:hover {
	background: #0d6d3e;
	color: #fff;
}

.qtwm-btn--reject {
	background: var(--qtwm-surface);
	border-color: var(--qtwm-rejected);
	color: var(--qtwm-rejected);
}

.qtwm-btn--reject:hover {
	background: var(--qtwm-rejected-soft);
	color: var(--qtwm-rejected);
}

.qtwm-btn--block {
	width: 100%;
}

.qtwm-btn--sm {
	min-height: 34px;
	padding: 7px 14px;
	font-size: 13px;
}

.qtwm-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.qtwm-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--qtwm-text-soft);
}

.qtwm-input {
	width: 100%;
	padding: 11px 14px;
	background: var(--qtwm-surface);
	border: 1px solid var(--qtwm-border-strong);
	border-radius: var(--qtwm-radius-sm);
	font: inherit;
	font-size: 15px;
	color: var(--qtwm-text);
	box-shadow: var(--qtwm-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.qtwm-input::placeholder {
	color: var(--qtwm-text-faint);
}

.qtwm-input:focus {
	outline: none;
	border-color: var(--qtwm-primary);
	box-shadow: var(--qtwm-ring);
}

.qtwm-input[readonly],
.qtwm-input[disabled] {
	background: var(--qtwm-surface-soft);
	color: var(--qtwm-text-soft);
	cursor: default;
	box-shadow: none;
}

.qtwm-textarea {
	min-height: 96px;
	resize: vertical;
	line-height: 1.6;
}

.qtwm-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.qtwm-input-wrap .qtwm-input {
	padding-right: 44px;
}

.qtwm-reveal {
	position: absolute;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--qtwm-text-faint);
	cursor: pointer;
}

.qtwm-reveal:hover {
	color: var(--qtwm-text-soft);
	background: var(--qtwm-surface-soft);
}

.qtwm-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: var(--qtwm-text-soft);
	cursor: pointer;
	user-select: none;
}

.qtwm-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--qtwm-primary);
}

.qtwm-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .01em;
	white-space: nowrap;
	background: var(--qtwm-draft-soft);
	color: var(--qtwm-draft);
}

.qtwm-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.qtwm-pill--draft {
	background: var(--qtwm-draft-soft);
	color: var(--qtwm-draft);
}

.qtwm-pill--submitted {
	background: var(--qtwm-submitted-soft);
	color: var(--qtwm-submitted);
}

.qtwm-pill--approved {
	background: var(--qtwm-approved-soft);
	color: var(--qtwm-approved);
}

.qtwm-pill--rejected {
	background: var(--qtwm-rejected-soft);
	color: var(--qtwm-rejected);
}

.qtwm-alert {
	padding: 12px 15px;
	border-radius: var(--qtwm-radius-sm);
	font-size: 14px;
	line-height: 1.5;
}

.qtwm-alert strong {
	font-weight: 650;
}

.qtwm-alert--error {
	background: var(--qtwm-rejected-soft);
	color: #96201f;
	border: 1px solid #f5cfcf;
}

.qtwm-alert--warn {
	background: var(--qtwm-submitted-soft);
	color: #8a5300;
	border: 1px solid #f6dfb8;
}

.qtwm-alert--info {
	background: var(--qtwm-primary-soft);
	color: var(--qtwm-primary-dark);
	border: 1px solid #d3dffb;
}

.qtwm-alert--tight {
	padding: 9px 12px;
	font-size: 13px;
}

.qtwm-alert--page {
	margin: 0 auto 18px;
	max-width: 1320px;
	width: calc(100% - 32px);
}

.qtwm-lang {
	font-weight: 600;
	color: var(--qtwm-text-soft);
}

.qtwm-dot {
	color: var(--qtwm-text-faint);
}

/* ---------------------------------------------------------------------------
 * 3. Login
 * ------------------------------------------------------------------------ */

.qtwm-app--login {
	background: var(--qtwm-bg);
	background-image:
		radial-gradient(1000px 420px at 12% -8%, #e6ecfe 0%, rgba(230, 236, 254, 0) 62%),
		radial-gradient(900px 400px at 90% 4%, #e7f4ee 0%, rgba(231, 244, 238, 0) 60%);
	border-radius: var(--qtwm-radius-lg);
}

.qtwm-login-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(78vh, 720px);
	padding: 40px 16px;
}

.qtwm-login-card {
	width: 100%;
	max-width: 400px;
	padding: 32px 30px 26px;
	box-shadow: var(--qtwm-shadow-lg);
	border-radius: var(--qtwm-radius-lg);
}

.qtwm-login-card__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.qtwm-login-card__mark,
.qtwm-header__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: var(--qtwm-primary);
	color: #fff;
	flex: none;
}

.qtwm-header__mark {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

.qtwm-login-card__name {
	font-weight: 650;
	font-size: 15px;
	letter-spacing: -.01em;
}

.qtwm-login-card__title {
	font-size: 23px;
	margin-bottom: 6px;
}

.qtwm-login-card__sub {
	color: var(--qtwm-text-soft);
	font-size: 14px;
	margin-bottom: 20px !important;
}

.qtwm-login-card .qtwm-alert {
	margin-bottom: 16px;
}

.qtwm-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qtwm-login-card__foot {
	margin-top: 18px !important;
	text-align: center;
	font-size: 14px;
}

.qtwm-login-card__foot a {
	color: var(--qtwm-primary);
	text-decoration: none;
	font-weight: 550;
}

.qtwm-login-card__foot a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 4. App chrome — header
 * ------------------------------------------------------------------------ */

.qtwm-app--dashboard,
.qtwm-app--translate {
	background: var(--qtwm-bg);
	border-radius: var(--qtwm-radius-lg);
	padding-bottom: 40px;
}

.qtwm-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 18px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius-lg) var(--qtwm-radius-lg) 0 0;
}

.qtwm-header__left,
.qtwm-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.qtwm-header__title {
	font-weight: 650;
	letter-spacing: -.01em;
}

.qtwm-header__user {
	font-size: 14px;
	color: var(--qtwm-text-soft);
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.qtwm-header {
		flex-wrap: nowrap;
	}

	.qtwm-header__user {
		display: none;
	}

	/* On the translate screen the "Dashboard" button already names where you
	 * are; the wordmark would only truncate to "Quiz …". */
	.qtwm-app--translate .qtwm-header__title {
		display: none;
	}

	.qtwm-header__title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.qtwm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--qtwm-primary-soft);
	color: var(--qtwm-primary-dark);
	font-size: 13px;
	font-weight: 700;
	flex: none;
}

.qtwm-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px 6px 8px;
	margin-right: 4px;
	border-radius: 999px;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
	color: var(--qtwm-text-soft);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.qtwm-back:hover {
	background: #eef1f6;
	color: var(--qtwm-text);
}

.qtwm-main {
	max-width: 1320px;
	margin: 0 auto;
	padding: 26px 16px 0;
}

/* ---------------------------------------------------------------------------
 * 5. Dashboard
 * ------------------------------------------------------------------------ */

.qtwm-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.qtwm-page-title {
	font-size: 26px;
}

.qtwm-page-sub {
	margin-top: 4px !important;
	color: var(--qtwm-text-soft);
	font-size: 14px;
}

.qtwm-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.qtwm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: var(--qtwm-surface);
	border: 1px solid var(--qtwm-border);
	border-radius: 999px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--qtwm-text-soft);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.qtwm-chip:hover {
	border-color: var(--qtwm-border-strong);
	color: var(--qtwm-text);
}

.qtwm-chip.qtwm-is-active {
	background: var(--qtwm-text);
	border-color: var(--qtwm-text);
	color: #fff;
}

.qtwm-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--qtwm-surface-soft);
	color: var(--qtwm-text-soft);
	font-size: 11px;
	font-weight: 700;
}

.qtwm-chip.qtwm-is-active .qtwm-chip__count {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.qtwm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--qtwm-gap);
	/* Let each card be as tall as its own content. Stretching them to match the
	 * tallest card in the row leaves a dead gap above the button. */
	align-items: start;
}

.qtwm-quiz-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.qtwm-quiz-card:hover {
	transform: translateY(-2px);
	border-color: var(--qtwm-border-strong);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 40px -20px rgba(16, 24, 40, .3);
}

.qtwm-quiz-card__top {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.qtwm-quiz-card__thumb {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: var(--qtwm-radius-sm);
	overflow: hidden;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
}

.qtwm-quiz-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qtwm-quiz-card__id {
	flex: 1 1 auto;
	min-width: 0;
}

.qtwm-quiz-card__title {
	font-size: 16px;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qtwm-quiz-card__meta {
	margin-top: 3px !important;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--qtwm-text-faint);
}

.qtwm-quiz-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.qtwm-quiz-card__stamp {
	font-size: 12px;
	color: var(--qtwm-text-faint);
}

@media (max-width: 560px) {
	/* Side by side, the timestamp wrapped to two ragged lines beside the
	 * button. Stacked, the button gets the full width a thumb wants. */
	.qtwm-quiz-card__foot {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}

	.qtwm-quiz-card__stamp {
		text-align: center;
	}

	/* A separator dot left dangling at the end of a wrapped line reads as a
	 * typo. Below this width the line break is separator enough. */
	.qtwm-quiz-card__meta .qtwm-dot {
		display: none;
	}

	.qtwm-quiz-card__meta {
		gap: 2px 10px;
	}
}

.qtwm-progress {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.qtwm-progress__bar {
	height: 7px;
	border-radius: 999px;
	background: #e9edf3;
	overflow: hidden;
}

.qtwm-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--qtwm-draft);
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.qtwm-progress__fill--draft {
	background: var(--qtwm-draft);
}

.qtwm-progress__fill--submitted {
	background: var(--qtwm-submitted);
}

.qtwm-progress__fill--approved {
	background: var(--qtwm-approved);
}

.qtwm-progress__fill--rejected {
	background: var(--qtwm-rejected);
}

.qtwm-progress__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--qtwm-text-faint);
}

.qtwm-empty {
	padding: 52px 24px;
	text-align: center;
}

.qtwm-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 14px;
	border-radius: 18px;
	background: var(--qtwm-primary-soft);
	color: var(--qtwm-primary);
}

.qtwm-empty h2 {
	font-size: 18px;
	margin-bottom: 6px;
}

.qtwm-empty p {
	color: var(--qtwm-text-soft);
	font-size: 14px;
}

.qtwm-card--message {
	max-width: 520px;
	margin: 40px auto;
	padding: 28px;
	text-align: center;
}

.qtwm-card--message p + p {
	margin-top: 16px !important;
}

.qtwm-app--message {
	background: var(--qtwm-bg);
	border-radius: var(--qtwm-radius-lg);
	padding: 1px 16px;
}

/* ---------------------------------------------------------------------------
 * 6. Translate — sub-header
 * ------------------------------------------------------------------------ */

.qtwm-subhead {
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px 16px 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.qtwm-subhead__id {
	min-width: 0;
}

.qtwm-subhead__title {
	font-size: 22px;
	overflow-wrap: anywhere;
}

.qtwm-subhead__meta {
	margin-top: 6px !important;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
}

.qtwm-subhead__progress {
	flex: 1 1 260px;
	max-width: 380px;
}

.qtwm-progress--wide .qtwm-progress__bar {
	height: 8px;
}

/* ---------------------------------------------------------------------------
 * 7. Translate — workspace shell
 * ------------------------------------------------------------------------ */

.qtwm-workspace {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	display: grid;
	/* minmax(0, …) rather than 1fr: a grid item's automatic minimum size is its
	 * content, so the scrolling question rail would otherwise stretch the whole
	 * page sideways instead of clipping. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qtwm-gap);
	align-items: start;
}

/* Question navigation: a horizontal rail on small screens… */
.qtwm-nav {
	min-width: 0;
	background: var(--qtwm-surface);
	border: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius);
	box-shadow: var(--qtwm-shadow-sm);
	padding: 12px;
	position: sticky;
	top: 62px;
	z-index: 10;
}

.qtwm-nav__heading {
	display: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--qtwm-text-faint);
	margin-bottom: 10px !important;
	padding: 0 6px;
}

.qtwm-nav__list {
	display: flex;
	min-width: 0;
	gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-bottom: 2px;
}

.qtwm-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	background: var(--qtwm-surface-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--qtwm-text-soft);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.qtwm-nav__item:hover {
	background: #eef1f6;
	color: var(--qtwm-text);
}

.qtwm-nav__item.qtwm-is-current {
	background: var(--qtwm-primary-soft);
	border-color: #cfdcfb;
	color: var(--qtwm-primary-dark);
}

.qtwm-nav__dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid var(--qtwm-border-strong);
	background: transparent;
}

.qtwm-nav__item.qtwm-is-done .qtwm-nav__dot {
	background: var(--qtwm-approved);
	border-color: var(--qtwm-approved);
}

.qtwm-panel {
	background: var(--qtwm-surface);
	border: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius);
	box-shadow: var(--qtwm-shadow);
	min-width: 0;
}

/* No `overflow: hidden` here: it would make the panel the scroll container for
 * the sticky column headers and action bar, which pushes the headers down over
 * the step heading and stops the bars sticking to the viewport. The corners are
 * rounded per-child instead. */
.qtwm-panel > :first-child {
	border-top-left-radius: var(--qtwm-radius);
	border-top-right-radius: var(--qtwm-radius);
}

.qtwm-panel > :last-child {
	border-bottom-left-radius: var(--qtwm-radius);
	border-bottom-right-radius: var(--qtwm-radius);
}

/* The two column captions only make sense once the split screen exists. */
.qtwm-panel__heads {
	display: none;
}

.qtwm-panel__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
	font-size: 12px;
	font-weight: 650;
	color: var(--qtwm-text-soft);
}

.qtwm-panel__badge--target {
	background: var(--qtwm-primary-soft);
	border-color: #d3dffb;
	color: var(--qtwm-primary-dark);
}

.qtwm-panel__hint {
	font-size: 12px;
	color: var(--qtwm-text-faint);
}

.qtwm-panel__hint.qtwm-is-dirty {
	color: var(--qtwm-submitted);
	font-weight: 600;
}

.qtwm-panel__hint.qtwm-is-saved {
	color: var(--qtwm-approved);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 8. Translate — the step body (rendered by app.js)
 * ------------------------------------------------------------------------ */

.qtwm-step {
	padding: 20px 18px;
}

.qtwm-step__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--qtwm-border);
}

.qtwm-step__title {
	font-size: 17px;
}

.qtwm-step__count {
	font-size: 12px;
	font-weight: 650;
	color: var(--qtwm-text-faint);
}

.qtwm-pairs {
	display: flex;
	flex-direction: column;
}

.qtwm-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	padding: 18px 0;
	border-bottom: 1px dashed var(--qtwm-border);
}

.qtwm-pair:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.qtwm-cell {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.qtwm-cell__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-height: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--qtwm-text-faint);
}

/* "Option A" must never break across two lines to make room for a tag. */
.qtwm-cell__label > span:first-child {
	white-space: nowrap;
}

.qtwm-cell__tag {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
	font-size: 10px;
	letter-spacing: .03em;
	color: var(--qtwm-text-soft);
}

.qtwm-cell--target .qtwm-cell__tag {
	background: var(--qtwm-primary-soft);
	border-color: #d3dffb;
	color: var(--qtwm-primary-dark);
}

/* On a phone the source side is already obvious from its grey read-only box.
 * Tagging all six of its fields "English (source)" was pure noise; only the
 * target language tag earns its place. */
.qtwm-cell--source .qtwm-cell__tag {
	display: none;
}

/* Read-only English. Deliberately not an input: there is nothing to type in. */
.qtwm-source {
	padding: 11px 14px;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius-sm);
	font-size: 15px;
	line-height: 1.6;
	color: var(--qtwm-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.qtwm-source:empty::before {
	content: "—";
	color: var(--qtwm-text-faint);
}

.qtwm-source--correct {
	background: var(--qtwm-approved-soft);
	border-color: #bfe6d1;
}

.qtwm-correct {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	white-space: nowrap;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--qtwm-approved-soft);
	color: var(--qtwm-approved);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
}

/* Images: visible, shared across languages, never editable. */
.qtwm-figure {
	margin: 4px 0 0;
	padding: 10px;
	background: var(--qtwm-surface-soft);
	border: 1px solid var(--qtwm-border);
	border-radius: var(--qtwm-radius-sm);
}

.qtwm-figure img {
	/* Height-constrained, not width-stretched: forcing width:100% on a wide
	 * container letterboxed every image with white pillars. */
	width: auto;
	max-width: 100%;
	max-height: 340px;
	margin: 0 auto;
	border-radius: 8px;
	pointer-events: none;
	user-select: none;
}

.qtwm-figure figcaption {
	margin-top: 8px;
	font-size: 12px;
	color: var(--qtwm-text-faint);
	display: flex;
	align-items: center;
	gap: 6px;
}

.qtwm-image-note {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	border: 1px dashed var(--qtwm-border-strong);
	border-radius: var(--qtwm-radius-sm);
	background: var(--qtwm-surface);
	font-size: 12px;
	color: var(--qtwm-text-faint);
}

.qtwm-skeleton {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 10px 0 30px;
}

.qtwm-skeleton span {
	display: block;
	height: 58px;
	border-radius: var(--qtwm-radius-sm);
	background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%);
	background-size: 400% 100%;
	animation: qtwm-shimmer 1.3s ease infinite;
}

@keyframes qtwm-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.qtwm-app * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * 9. Translate — action bars
 * ------------------------------------------------------------------------ */

.qtwm-actionbar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 18px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: saturate(1.4) blur(8px);
	border-top: 1px solid var(--qtwm-border);
}

.qtwm-actionbar__nav,
.qtwm-actionbar__main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.qtwm-actionbar__main {
	margin-left: auto;
}

.qtwm-actionbar__count {
	font-size: 12px;
	font-weight: 650;
	color: var(--qtwm-text-faint);
}

.qtwm-workflowbar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 14px 18px;
	background: var(--qtwm-surface-soft);
	border-top: 1px solid var(--qtwm-border);
}

/* `:empty` does not match an element containing only whitespace, which is what
 * a PHP loop with no rows leaves behind — hence an explicit class. */
.qtwm-workflowbar.qtwm-is-empty {
	display: none;
}

.qtwm-footnote {
	max-width: 1320px;
	margin: 14px auto 0 !important;
	padding: 0 18px;
	font-size: 12px;
	color: var(--qtwm-text-faint);
}

/* ---------------------------------------------------------------------------
 * 10. Modal + toast
 * ------------------------------------------------------------------------ */

.qtwm-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.qtwm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .45);
}

.qtwm-modal__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 24px;
	box-shadow: var(--qtwm-shadow-lg);
}

.qtwm-modal__title {
	font-size: 18px;
}

.qtwm-modal__sub {
	margin: 6px 0 14px !important;
	font-size: 14px;
	color: var(--qtwm-text-soft);
}

.qtwm-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.qtwm-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 999999;
	max-width: min(92vw, 420px);
	padding: 12px 18px;
	border-radius: 999px;
	background: #12192a;
	color: #fff;
	font-size: 14px;
	font-weight: 550;
	box-shadow: var(--qtwm-shadow-lg);
	text-align: center;
}

.qtwm-toast--error {
	background: #96201f;
}

.qtwm-toast--success {
	background: #0d6d3e;
}

/* ---------------------------------------------------------------------------
 * 11. Tablet
 * ------------------------------------------------------------------------ */

@media (min-width: 720px) {
	.qtwm-step {
		padding: 24px 26px;
	}

	.qtwm-actionbar,
	.qtwm-workflowbar {
		padding: 14px 26px;
	}

	.qtwm-main,
	.qtwm-subhead,
	.qtwm-workspace {
		padding-left: 24px;
		padding-right: 24px;
	}

	.qtwm-header {
		padding: 14px 26px;
	}
}

/* ---------------------------------------------------------------------------
 * 12. Desktop — split screen at 1024px
 *
 * Below this width every pair stacks: English first, its translation field
 * immediately underneath. At and above it the same markup becomes a two-column
 * grid, giving the read-only English panel on the left and the editable
 * translation panel on the right.
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.qtwm-workspace {
		grid-template-columns: 236px minmax(0, 1fr);
	}

	.qtwm-nav__list {
		overflow-x: visible;
	}

	.qtwm-nav {
		position: sticky;
		top: 76px;
		padding: 16px 12px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}

	.qtwm-nav__heading {
		display: block;
	}

	.qtwm-nav__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
		overflow-x: visible;
	}

	.qtwm-nav__item {
		width: 100%;
		justify-content: flex-start;
		border-radius: var(--qtwm-radius-sm);
		background: transparent;
	}

	.qtwm-nav__label {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.qtwm-panel__heads {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px;
		padding: 14px 26px;
		background: var(--qtwm-surface-soft);
		border-bottom: 1px solid var(--qtwm-border);
		position: sticky;
		top: 62px;
		z-index: 5;
	}

	.qtwm-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.qtwm-pair {
		grid-template-columns: 1fr 1fr;
		gap: 26px;
		align-items: start;
	}

	/* The cell labels are redundant once the column captions are visible. */
	.qtwm-cell__tag {
		display: none;
	}
}

@media (min-width: 1400px) {
	.qtwm-step {
		padding: 26px 32px;
	}

	.qtwm-panel__heads,
	.qtwm-actionbar,
	.qtwm-workflowbar {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * 13. Locked state
 * ------------------------------------------------------------------------ */

.qtwm-is-locked .qtwm-input {
	background: var(--qtwm-surface-soft);
	border-style: dashed;
}

.qtwm-is-locked .qtwm-actionbar__main {
	display: none;
}

@media print {
	.qtwm-header,
	.qtwm-nav,
	.qtwm-actionbar,
	.qtwm-workflowbar,
	.qtwm-toast,
	.qtwm-modal {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * v1.3 source review + series grouping
 * ------------------------------------------------------------------------ */
.qtwm-series-group + .qtwm-series-group { margin-top: 30px; }
.qtwm-series-group__title { margin: 0 0 12px; font-size: 18px; }
.qtwm-pairs--source { max-width: 900px; }
.qtwm-source-field { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px dashed var(--qtwm-border); }
.qtwm-source-field:last-child { border-bottom: 0; padding-bottom: 4px; }
.qtwm-source-field .qtwm-figure { margin-bottom: 8px; }
.qtwm-field-hint { margin: -2px 0 0 !important; font-size: 12px; color: var(--qtwm-text-faint); }
.qtwm-panel__heads--source-review { grid-template-columns: 1fr !important; }
.qtwm-panel__head--source-review { grid-column: 1 / -1; }
.qtwm-is-source-review .qtwm-step { max-width: 100%; }

@media (min-width: 1024px) {
	.qtwm-pairs--source .qtwm-source-field { padding-left: 0; padding-right: 0; }
}

/* ---------------------------------------------------------------------------
 * v1.3.0 IndiYatra visual system
 *
 * Brand source: user-provided IndiYatra screenshots + palette/type guide.
 * Oswald is display-only; all working UI remains Nunito Sans for legibility.
 * ------------------------------------------------------------------------ */
.qtwm-app {
	--qtwm-bg: #ffffff;
	--qtwm-surface: #ffffff;
	--qtwm-surface-soft: #f3f8f8;
	--qtwm-border: #dce4e6;
	--qtwm-border-strong: #b9c6ca;
	--qtwm-text: #000000;
	--qtwm-text-soft: #3f4d52;
	--qtwm-text-faint: #6f7c80;

	--qtwm-primary: #00509e;
	--qtwm-primary-dark: #003f7d;
	--qtwm-primary-soft: #e8f1f8;
	--qtwm-saffron: #ff8e00;
	--qtwm-title: #df7c00;
	--qtwm-teal: #48a9a6;
	--qtwm-teal-soft: #e8f4f3;
	--qtwm-gold: #d4b483;
	--qtwm-green: #00924a;
	--qtwm-rose: #c1666b;

	--qtwm-draft: #6f7c80;
	--qtwm-draft-soft: #f1f4f4;
	--qtwm-submitted: #df7c00;
	--qtwm-submitted-soft: #fff3e2;
	--qtwm-approved: #00924a;
	--qtwm-approved-soft: #e7f6ef;
	--qtwm-rejected: #c1666b;
	--qtwm-rejected-soft: #faedef;

	--qtwm-radius: 10px;
	--qtwm-radius-sm: 7px;
	--qtwm-radius-lg: 12px;
	--qtwm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .035);
	--qtwm-shadow: 0 1px 2px rgba(0, 0, 0, .045);
	--qtwm-shadow-lg: 0 12px 30px rgba(0, 0, 0, .10);
	--qtwm-ring: 0 0 0 3px rgba(0, 80, 158, .16);

	font-family: "Nunito Sans", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

.qtwm-app h1,
.qtwm-app h2,
.qtwm-app h3,
.qtwm-page-title,
.qtwm-subhead__title,
.qtwm-step__title,
.qtwm-series-group__title,
.qtwm-empty h2,
.qtwm-modal__title,
.qtwm-login-card__title {
	font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
	font-weight: 500;
	letter-spacing: 0;
}

.qtwm-app h1,
.qtwm-page-title {
	color: var(--qtwm-title);
}

.qtwm-card,
.qtwm-panel,
.qtwm-nav {
	box-shadow: none;
}

.qtwm-btn {
	border-radius: 7px;
	font-family: "Nunito Sans", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: none;
}

.qtwm-btn--primary {
	background: var(--qtwm-primary);
	box-shadow: none;
}

.qtwm-btn--primary:hover {
	background: var(--qtwm-primary-dark);
}

.qtwm-btn--secondary {
	background: var(--qtwm-teal-soft);
	border-color: #c8e3e1;
	color: #246e6c;
}

.qtwm-btn--secondary:hover {
	background: #d9eeed;
	color: #1f6260;
}

.qtwm-btn--ghost,
.qtwm-back {
	background: #fff;
	border-color: var(--qtwm-border-strong);
	color: var(--qtwm-primary);
}

.qtwm-btn--ghost:hover,
.qtwm-back:hover {
	background: var(--qtwm-primary-soft);
	border-color: #a7bfd5;
	color: var(--qtwm-primary-dark);
}

.qtwm-btn--approve {
	background: var(--qtwm-green);
}

.qtwm-btn--approve:hover {
	background: #00783d;
}

.qtwm-btn--reject {
	border-color: var(--qtwm-rose);
	color: #a54c52;
}

.qtwm-btn--reject:hover {
	background: var(--qtwm-rejected-soft);
	color: #934148;
}

.qtwm-input,
.qtwm-source {
	border-radius: 7px;
	box-shadow: none;
	font-family: "Nunito Sans", Arial, sans-serif;
	font-size: 16px;
}

.qtwm-input:focus {
	border-color: var(--qtwm-primary);
}

.qtwm-label,
.qtwm-cell__label {
	color: #344247;
}

.qtwm-app--login,
.qtwm-app--dashboard,
.qtwm-app--translate,
.qtwm-app--message {
	background: #fff;
	border-radius: 0;
}

.qtwm-app--login {
	background-image: none;
}

.qtwm-login-shell {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 66%, var(--qtwm-teal-soft) 66%, var(--qtwm-teal-soft) 100%);
}

.qtwm-login-card {
	max-width: 430px;
	padding: 34px;
	border-color: var(--qtwm-border-strong);
	border-top: 4px solid var(--qtwm-saffron);
	box-shadow: none;
}

.qtwm-login-card__mark,
.qtwm-header__mark {
	background: var(--qtwm-primary);
	border-radius: 7px;
}

.qtwm-login-card__name,
.qtwm-header__title {
	font-weight: 700;
	color: var(--qtwm-primary);
}

.qtwm-login-card__title {
	font-size: 32px;
	line-height: 1.2;
	color: var(--qtwm-title);
}

.qtwm-login-card__sub,
.qtwm-page-sub {
	font-size: 16px;
}

.qtwm-header {
	background: #fff;
	backdrop-filter: none;
	border-radius: 0;
	padding-top: 12px;
	padding-bottom: 12px;
}

.qtwm-avatar {
	background: var(--qtwm-teal-soft);
	color: #246e6c;
}

.qtwm-main {
	padding-top: 34px;
}

.qtwm-page-head {
	margin-bottom: 28px;
}

.qtwm-page-title {
	font-size: 40px;
	line-height: 1.15;
}

.qtwm-chip {
	background: var(--qtwm-primary-soft);
	border-color: transparent;
	color: var(--qtwm-primary);
	font-weight: 700;
}

.qtwm-chip:hover {
	background: #dae9f5;
	border-color: transparent;
	color: var(--qtwm-primary-dark);
}

.qtwm-chip.qtwm-is-active {
	background: var(--qtwm-primary);
	border-color: var(--qtwm-primary);
}

.qtwm-grid {
	gap: 22px;
}

.qtwm-series-group + .qtwm-series-group {
	margin-top: 42px;
}

.qtwm-series-group__title {
	font-size: 24px;
	line-height: 1.25;
	color: var(--qtwm-title);
	padding-bottom: 9px;
	border-bottom: 2px solid rgba(212, 180, 131, .48);
}

.qtwm-quiz-card {
	gap: 16px;
	padding: 20px;
	border-color: var(--qtwm-border);
	transition: border-color .15s ease, background-color .15s ease;
}

.qtwm-quiz-card:hover {
	transform: none;
	border-color: #aac6c5;
	box-shadow: none;
	background: #fcfefe;
}

.qtwm-quiz-card__thumb {
	border-radius: 7px;
}

.qtwm-quiz-card__title {
	font-family: "Nunito Sans", Arial, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: #000;
}

.qtwm-quiz-card__meta,
.qtwm-quiz-card__stamp,
.qtwm-progress__label {
	color: var(--qtwm-text-soft);
}

.qtwm-progress__bar {
	background: #e6eeee;
}

.qtwm-empty__icon {
	background: var(--qtwm-teal-soft);
	color: var(--qtwm-teal);
	border-radius: 10px;
}

.qtwm-empty h2 {
	font-size: 24px;
	color: var(--qtwm-title);
}

.qtwm-subhead {
	padding-top: 28px;
	padding-bottom: 20px;
}

.qtwm-subhead__title {
	font-size: 28px;
	line-height: 1.2;
	color: var(--qtwm-title);
}

.qtwm-nav {
	border-color: var(--qtwm-border);
}

.qtwm-nav__item {
	border-radius: 7px;
	background: #fff;
	border-color: var(--qtwm-border);
}

.qtwm-nav__item:hover {
	background: var(--qtwm-teal-soft);
}

.qtwm-nav__item.qtwm-is-current {
	background: var(--qtwm-primary-soft);
	border-color: #aac4dd;
	color: var(--qtwm-primary-dark);
}

.qtwm-panel {
	border-color: var(--qtwm-border-strong);
}

.qtwm-panel__heads {
	background: var(--qtwm-teal-soft);
}

.qtwm-panel__badge {
	border-radius: 6px;
}

.qtwm-panel__badge--target {
	background: var(--qtwm-primary-soft);
	border-color: #bdd0e1;
	color: var(--qtwm-primary-dark);
}

.qtwm-step {
	padding-top: 24px;
}

.qtwm-step__title {
	font-size: 24px;
	color: #000;
}

.qtwm-source-field,
.qtwm-pair {
	border-bottom-color: #cbd7d9;
}

.qtwm-source--correct {
	background: var(--qtwm-approved-soft);
	border-color: #a9ddc3;
}

.qtwm-figure {
	background: #fff;
	border-color: var(--qtwm-border-strong);
}

.qtwm-image-note {
	background: var(--qtwm-teal-soft);
	border-color: #b9dbd9;
	color: #3b6665;
}

.qtwm-actionbar {
	background: rgba(255, 255, 255, .98);
	backdrop-filter: none;
	border-top-color: var(--qtwm-border-strong);
}

.qtwm-workflowbar {
	background: var(--qtwm-teal-soft);
}

.qtwm-modal__card {
	border-top: 4px solid var(--qtwm-saffron);
	box-shadow: var(--qtwm-shadow-lg);
}

.qtwm-modal__title {
	font-size: 24px;
	color: var(--qtwm-title);
}

.qtwm-toast {
	border-radius: 7px;
	background: var(--qtwm-primary-dark);
	font-weight: 700;
}

.qtwm-toast--error {
	background: var(--qtwm-rose);
}

.qtwm-toast--success {
	background: var(--qtwm-green);
}

@media (max-width: 560px) {
	.qtwm-page-title {
		font-size: 32px;
	}

	.qtwm-login-card__title,
	.qtwm-subhead__title {
		font-size: 26px;
	}

	.qtwm-login-card {
		padding: 28px 22px;
	}
}

/* ---------------------------------------------------------------------------
 * 15. Collaborative review (v1.3.1)
 * ------------------------------------------------------------------------ */
.qtwm-chip--attention:not(.qtwm-is-active) {
	background: var(--qtwm-submitted-soft);
	color: #8a5300;
}

.qtwm-quiz-card.qtwm-needs-attention {
	border-left: 4px solid var(--qtwm-saffron);
}

.qtwm-quiz-card__eyebrow {
	min-height: 17px;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--qtwm-title);
}

.qtwm-attention-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--qtwm-saffron);
}

.qtwm-card-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	font-size: 13px;
	color: var(--qtwm-text-soft);
}

.qtwm-card-metrics strong {
	color: #000;
}

.qtwm-card-metrics .qtwm-metric--open,
.qtwm-card-metrics .qtwm-metric--changed {
	color: #9b4f54;
}

.qtwm-collab-summary {
	margin-bottom: 7px;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	color: #2c6d6a;
}

.qtwm-nav__item {
	gap: 8px;
}

.qtwm-nav__markers {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	flex: none;
}

.qtwm-nav__review {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid var(--qtwm-border-strong);
	background: #fff;
}

.qtwm-nav__review--reviewed {
	border-color: var(--qtwm-green);
	background: var(--qtwm-green);
}

.qtwm-nav__review--changed {
	border-color: var(--qtwm-saffron);
	background: var(--qtwm-saffron);
}

.qtwm-nav__comments {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--qtwm-rejected-soft);
	color: #9b4f54;
	font-size: 10px;
	font-weight: 800;
}

.qtwm-collab {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--qtwm-border-strong);
}

.qtwm-review-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 14px;
	margin-bottom: 18px;
	border: 1px solid var(--qtwm-border);
	border-left: 4px solid var(--qtwm-border-strong);
	border-radius: 8px;
	background: #fff;
}

.qtwm-review-strip--reviewed {
	border-left-color: var(--qtwm-green);
	background: var(--qtwm-approved-soft);
}

.qtwm-review-strip--changed {
	border-left-color: var(--qtwm-saffron);
	background: var(--qtwm-submitted-soft);
}

.qtwm-review-strip__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: var(--qtwm-text-soft);
}

.qtwm-review-strip__text strong {
	font-size: 15px;
	color: #000;
}

.qtwm-discussion {
	padding: 18px;
	border: 1px solid var(--qtwm-border);
	border-radius: 8px;
	background: #fbfdfd;
}

.qtwm-discussion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--qtwm-title);
}

.qtwm-discussion__count {
	font-family: "Nunito Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--qtwm-text-soft);
}

.qtwm-thread {
	padding: 14px;
	margin-bottom: 12px;
	border: 1px solid var(--qtwm-border);
	border-left: 3px solid var(--qtwm-rose);
	border-radius: 7px;
	background: #fff;
}

.qtwm-thread--resolved {
	border-left-color: var(--qtwm-green);
	background: #fbfffd;
}

.qtwm-thread__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--qtwm-text-faint);
}

.qtwm-thread__meta strong {
	color: #000;
}

.qtwm-thread__role,
.qtwm-thread__resolved {
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--qtwm-primary-soft);
	color: var(--qtwm-primary);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.qtwm-thread__resolved {
	background: var(--qtwm-approved-soft);
	color: var(--qtwm-green);
}

.qtwm-thread__body {
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
}

.qtwm-thread__reply {
	margin: 12px 0 0 18px;
	padding: 10px 0 0 12px;
	border-left: 2px solid var(--qtwm-teal);
}

.qtwm-thread__actions {
	display: flex;
	gap: 14px;
	margin-top: 10px;
}

.qtwm-link-btn {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--qtwm-primary);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.qtwm-link-btn:hover {
	text-decoration: underline;
}

.qtwm-thread__replybox,
.qtwm-discussion__composer {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.qtwm-thread__replybox .qtwm-textarea,
.qtwm-discussion__composer .qtwm-textarea {
	min-height: 72px;
}

.qtwm-discussion__composer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--qtwm-border);
}

@media (max-width: 700px) {
	.qtwm-collab-summary { text-align: left; }
	.qtwm-review-strip,
	.qtwm-thread__replybox,
	.qtwm-discussion__composer { align-items: stretch; flex-direction: column; }
	.qtwm-review-strip .qtwm-btn,
	.qtwm-thread__replybox .qtwm-btn,
	.qtwm-discussion__composer .qtwm-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * 16. Kriya v1.4 — rationalised palette, compact navigation and dashboards
 * ------------------------------------------------------------------------ */
.qtwm-app {
	--qtwm-primary: #00509E;
	--qtwm-primary-dark: #003f7d;
	--qtwm-primary-soft: #e9f2fa;
	--qtwm-title: #DF7C00;
	--qtwm-saffron: #FF8E00;
	--qtwm-teal: #48A9A6;
	--qtwm-teal-soft: rgba(72,169,166,.12);
	--qtwm-gold: #D4B483;
	--qtwm-green: #00924A;
	--qtwm-rose: #C1666B;
	--qtwm-text: #000000;
	--qtwm-border: rgba(0,0,0,.13);
	--qtwm-border-strong: rgba(0,0,0,.22);
}

/* One primary visual grammar: white neutral cards, blue actions, semantic status only. */
.qtwm-card,
.qtwm-quiz-card,
.qtwm-panel,
.qtwm-nav,
.qtwm-discussion { border-color: var(--qtwm-border); box-shadow: none; }
.qtwm-btn { min-width: 104px; border-radius: 7px; }
.qtwm-btn--primary,
.qtwm-btn--secondary { background: var(--qtwm-primary); border-color: var(--qtwm-primary); color: #fff; }
.qtwm-btn--primary:hover,
.qtwm-btn--secondary:hover { background: var(--qtwm-primary-dark); border-color: var(--qtwm-primary-dark); color: #fff; }
.qtwm-btn--ghost { background: #fff; border-color: var(--qtwm-primary); color: var(--qtwm-primary); }
.qtwm-btn--ghost:hover { background: var(--qtwm-primary-soft); border-color: var(--qtwm-primary); color: var(--qtwm-primary-dark); }
.qtwm-btn--reject { background: #fff; border-color: var(--qtwm-rose); color: var(--qtwm-rose); }
.qtwm-btn--approve { background: var(--qtwm-green); border-color: var(--qtwm-green); color: #fff; }

.qtwm-workspace { display: block; max-width: 1320px; margin: 0 auto; }
.qtwm-nav { position: static; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #fff; }
.qtwm-nav__heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: rgba(0,0,0,.62); text-transform: uppercase; letter-spacing: .04em; }
.qtwm-nav__list { display: flex; flex-wrap: wrap; gap: 7px; max-height: none; overflow: visible; }
.qtwm-nav__list li { flex: 0 0 auto; }
.qtwm-nav__item {
	position: relative; display: inline-flex; width: 36px; height: 36px; min-width: 36px; padding: 0;
	align-items: center; justify-content: center; border: 1px solid var(--qtwm-primary); border-radius: 50%;
	background: #fff; color: var(--qtwm-primary); font-size: 11px; font-weight: 800;
}
.qtwm-nav__item:hover { background: var(--qtwm-primary-soft); border-color: var(--qtwm-primary); color: var(--qtwm-primary-dark); }
.qtwm-nav__item.qtwm-is-current { background: var(--qtwm-primary); border-color: var(--qtwm-primary); color: #fff; }
.qtwm-nav__item.qtwm-is-done:not(.qtwm-is-current) { background: var(--qtwm-primary); color: #fff; }
.qtwm-nav__item.qtwm-is-ready:not(.qtwm-is-current) { box-shadow: 0 0 0 2px var(--qtwm-saffron); }
.qtwm-nav__item.qtwm-is-updated:not(.qtwm-is-current) { box-shadow: 0 0 0 2px var(--qtwm-saffron); }
.qtwm-nav__markers { position: absolute; top: -5px; right: -5px; margin: 0; gap: 2px; }
.qtwm-nav__review { width: 8px; height: 8px; border-width: 1px; }
.qtwm-nav__review--reviewed { background: var(--qtwm-green); border-color: var(--qtwm-green); }
.qtwm-nav__review--changed { background: var(--qtwm-saffron); border-color: var(--qtwm-saffron); }
.qtwm-nav__comments { min-width: 15px; height: 15px; padding: 0 3px; background: var(--qtwm-rose); color: #fff; font-size: 9px; }

.qtwm-actionbar { gap: 14px; }
.qtwm-actionbar__nav,
.qtwm-actionbar__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qtwm-actionbar__count { min-width: 54px; text-align: center; }

.qtwm-ready-strip,
.qtwm-claim { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; margin-bottom: 12px; border: 1px solid var(--qtwm-border); border-radius: 8px; background: #fff; }
.qtwm-ready-strip--ready { border-left: 4px solid var(--qtwm-saffron); background: #fff7ea; }
.qtwm-ready-strip--updated { border-left: 4px solid var(--qtwm-saffron); background: #fff7ea; }
.qtwm-ready-strip span { color: rgba(0,0,0,.62); font-size: 13px; }
.qtwm-claim__label { font-weight: 700; color: var(--qtwm-primary); }

.qtwm-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 32px; }
.qtwm-kpi { min-height: 102px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.qtwm-kpi strong { font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-size: 30px; font-weight: 500; color: var(--qtwm-primary); }
.qtwm-kpi span { font-size: 13px; color: rgba(0,0,0,.66); }
.qtwm-kpi small { font-size: 11px; color: var(--qtwm-title); }
.qtwm-kpi--points { border-top: 3px solid var(--qtwm-saffron); }
.qtwm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.qtwm-section-head h2 { font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-size: 24px; font-weight: 500; color: var(--qtwm-title); }
.qtwm-section-head > span { color: rgba(0,0,0,.58); font-size: 13px; }
.qtwm-admin-summary { padding: 18px; margin-bottom: 30px; border: 1px solid rgba(72,169,166,.35); border-radius: 10px; background: var(--qtwm-teal-soft); }
.qtwm-admin-summary .qtwm-section-head { margin-top: 0; }
.qtwm-admin-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.qtwm-admin-metrics div { padding: 12px; border: 1px solid rgba(72,169,166,.30); border-radius: 7px; background: #fff; }
.qtwm-admin-metrics strong { display:block; font-size: 22px; color: var(--qtwm-primary); }
.qtwm-admin-metrics span { font-size: 12px; color: rgba(0,0,0,.62); }
.qtwm-quicklinks { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.qtwm-card-team { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--qtwm-border); border-bottom: 1px solid var(--qtwm-border); font-size: 12px; color: rgba(0,0,0,.66); }
.qtwm-card-team strong { color:#000; }

.qtwm-approved-accordion { margin: 34px 0; border: 1px solid rgba(0,146,74,.32); border-radius: 9px; background: #fff; }
.qtwm-approved-accordion > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; cursor:pointer; color:var(--qtwm-green); }
.qtwm-approved-accordion > summary strong { font-family:"Oswald","Arial Narrow",Arial,sans-serif; font-size:22px; font-weight:500; }
.qtwm-approved-accordion > summary > span:last-child { font-size:12px; color:rgba(0,0,0,.55); }
.qtwm-approved-body { padding: 4px 18px 20px; }
.qtwm-grid--approved .qtwm-quiz-card { padding: 15px; }
.qtwm-grid--approved .qtwm-quiz-card__thumb { width:64px; height:64px; }

.qtwm-leaderboard { margin: 36px 0 20px; }
.qtwm-leaderboard__table { overflow-x:auto; }
.qtwm-leaderboard table { width:100%; border-collapse:collapse; }
.qtwm-leaderboard th,.qtwm-leaderboard td { padding:11px 12px; border-bottom:1px solid var(--qtwm-border); text-align:left; }
.qtwm-leaderboard th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:rgba(0,0,0,.55); }
.qtwm-leaderboard tr.qtwm-is-me { background:var(--qtwm-primary-soft); }

/* Status colour has one meaning everywhere. */
.qtwm-pill--draft { background: var(--qtwm-primary-soft); color: var(--qtwm-primary); }
.qtwm-pill--submitted { background:#fff3e2; color:var(--qtwm-title); }
.qtwm-pill--approved { background:#e7f6ef; color:var(--qtwm-green); }
.qtwm-pill--rejected { background:#faedef; color:var(--qtwm-rose); }
.qtwm-progress__fill--draft,.qtwm-progress__fill--submitted { background:var(--qtwm-primary); }
.qtwm-progress__fill--approved { background:var(--qtwm-green); }
.qtwm-progress__fill--rejected { background:var(--qtwm-rose); }
.qtwm-chip { background:#fff; border:1px solid rgba(0,80,158,.30); color:var(--qtwm-primary); }
.qtwm-chip:hover { background:var(--qtwm-primary-soft); border-color:var(--qtwm-primary); }
.qtwm-chip.qtwm-is-active { background:var(--qtwm-primary); border-color:var(--qtwm-primary); color:#fff; }
.qtwm-chip--attention:not(.qtwm-is-active) { background:#fff7ea; border-color:rgba(255,142,0,.5); color:var(--qtwm-title); }
.qtwm-quiz-card.qtwm-needs-attention { border-left: 3px solid var(--qtwm-saffron); }

@media (max-width: 1000px) {
	.qtwm-kpis,.qtwm-admin-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
	.qtwm-kpis,.qtwm-admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.qtwm-section-head { align-items:flex-start; flex-direction:column; gap:4px; }
	.qtwm-actionbar { align-items:stretch; flex-direction:column; }
	.qtwm-actionbar__nav,.qtwm-actionbar__main { width:100%; }
	.qtwm-actionbar .qtwm-btn { flex:1; min-width:0; }
	.qtwm-nav__item { width:34px; height:34px; min-width:34px; }
}

/* --------------------------------------------------------------------------
 * v1.4.2 — app-page deployment polish for Hello Elementor / normal WP themes
 * ----------------------------------------------------------------------- */

/* Kriya pages are application surfaces. Remove the ordinary theme page-title
 * chrome and theme content-width constraint only on the three generated app
 * pages. Site header/footer and every non-Kriya Elementor page remain intact. */
body.qtwm-kriya-page .page-header,
body.qtwm-kriya-page article.page > .entry-header,
body.qtwm-kriya-page .site-main > article > .entry-header,
body.qtwm-kriya-page .entry-header > .entry-title,
body.qtwm-kriya-page h1.entry-title {
	display: none !important;
}

body.qtwm-kriya-page .site-main,
body.qtwm-kriya-page main.site-main,
body.qtwm-kriya-page .site-main > article,
body.qtwm-kriya-page .site-main .page-content,
body.qtwm-kriya-page .site-main .entry-content {
	width: 100% !important;
	max-width: none !important;
}

body.qtwm-kriya-page .site-main,
body.qtwm-kriya-page .site-main > article,
body.qtwm-kriya-page .site-main .page-content,
body.qtwm-kriya-page .site-main .entry-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.qtwm-app--workspace-picker {
	background: #fff;
	border-radius: 0;
	padding-bottom: 40px;
}

.qtwm-workspace-picker .qtwm-series-group:first-of-type {
	margin-top: 0;
}

.qtwm-workspace-picker__approved {
	margin-top: 34px;
}