/**
 * עיצוב המשחקים בגרסה בתשלום.
 *
 * הפלטה, המידות והטיפוגרפיה מועתקות מהתוספים החינמיים הקיימים באתר
 * (herb-flashcards / herb-who-am-i ומקביליהם), כדי שהמעבר בין הגרסה
 * החינמית לגרסה בתשלום ירגיש כמו אותו מוצר.
 *
 * מה שאין בחינמי ולכן עוצב באותה שפה: מסך הפתיחה עם הסינון, תגית מצב
 * הפריט, ובורר כרטיס גלוי/מוסתר.
 *
 * @package Qilab_Core
 */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;700;900&family=Noto+Serif+Hebrew:wght@300;400;700&family=Heebo:wght@400;500;700;800;900&display=swap');

/* ------------------------------------------------------------------ פלטה */

.qilab-app,
.qilab-dashboard,
.qilab-gate,
.qilab-devices,
.qilab-progress-overview {
	--q-bg:          #F1F6F4;
	--q-surface:     #FFFFFF;
	--q-surface2:    #BFD9CF;
	--q-surface3:    #ACC3BA;
	--q-gold:        #027E7F;
	--q-gold-light:  #4EAAAB;
	--q-gold-dim:    #014B4C;
	--q-gold-faint:  rgba(2, 126, 127, .10);
	--q-green:       #027E7F;
	--q-green-light: #4EAAAB;
	--q-green-bg:    rgba(2, 126, 127, .12);
	--q-red:         #D81757;
	--q-red-light:   #E45D89;
	--q-red-bg:      rgba(216, 23, 87, .12);
	--q-text:        #11221C;
	--q-text-dim:    #88908D;
	--q-text-muted:  #ABB1AF;
}

/* ------------------------------------------------------------- מיכל האפליקציה */

.qilab-app {
	box-sizing: border-box;
	color: var(--q-text);
	background: var(--q-bg);
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px 14px;
	position: relative;
	direction: rtl;
	text-align: right;
}

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

.qilab-app::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 70% 50% at 15% 10%, rgba(2, 126, 127, .07) 0%, transparent 55%),
		radial-gradient(ellipse 50% 70% at 85% 90%, rgba(2, 126, 127, .06) 0%, transparent 55%);
}

.qilab-app > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------ כותרת */

.qilab-header {
	width: 100%;
	text-align: center;
	padding: 12px 0 6px;
	flex-shrink: 0;
}

.qilab-title-zh {
	font-size: 10px;
	letter-spacing: 6px;
	color: var(--q-gold-dim);
	margin-bottom: 2px;
}

.qilab-title {
	font-size: 22px;
	font-weight: 900;
	color: var(--q-gold-light);
	margin: 0;
}

/* -------------------------------------------------------------- מסך הפתיחה */

.qilab-setup {
	width: 100%;
	flex: 1;
	padding-bottom: 12px;
}

.qilab-setup__summary {
	display: flex;
	gap: 8px;
	width: 100%;
	margin-bottom: 10px;
}

.qilab-chip {
	flex: 1;
	padding: 6px 4px;
	border-radius: 10px;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
}

.qilab-chip__val {
	font-size: 17px;
	display: block;
	font-weight: 900;
	line-height: 1.1;
}

.qilab-chip--known {
	background: var(--q-green-bg);
	color: var(--q-green-light);
	border: 1px solid var(--q-green);
}

.qilab-chip--unknown {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 1px solid var(--q-red);
}

.qilab-chip--total {
	background: var(--q-gold-faint);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
}

.qilab-panel {
	background: var(--q-surface);
	border: 1px solid var(--q-surface2);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 10px;
}

.qilab-panel > summary,
.qilab-panel__title {
	font-size: 11px;
	letter-spacing: 3px;
	color: var(--q-gold-dim);
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 8px;
}

.qilab-panel > summary::marker {
	color: var(--q-gold-light);
}

.qilab-panel__actions {
	margin: 8px 0;
	display: flex;
	gap: 8px;
}

.qilab-panel__actions button {
	background: var(--q-gold-faint);
	border: 1px solid var(--q-gold-dim);
	color: var(--q-gold);
	border-radius: 8px;
	padding: 4px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	transition: background .15s;
}

.qilab-panel__actions button:hover {
	background: var(--q-green-bg);
}

.qilab-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.qilab-cats::-webkit-scrollbar {
	width: 3px;
}

.qilab-cats::-webkit-scrollbar-thumb {
	background: var(--q-surface3);
	border-radius: 2px;
}

.qilab-cats label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	cursor: pointer;
	font-size: 13px;
	color: var(--q-text);
}

.qilab-cats small {
	color: var(--q-text-muted);
	font-size: 11px;
}

.qilab-cats__children {
	list-style: none;
	margin: 0;
	padding-right: 1.5rem;
}

.qilab-cats input,
.qilab-toggles input {
	accent-color: var(--q-gold);
}

.qilab-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.qilab-toggles label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
}

.qilab-start {
	width: 100%;
	padding: 14px;
	border-radius: 13px;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 1px;
	background: var(--q-gold);
	color: #fff;
	border: 1px solid var(--q-gold-dim);
	transition: background .15s, transform .15s;
}

.qilab-start:hover {
	background: var(--q-gold-dim);
}

.qilab-start:active {
	transform: scale(.97);
}

.qilab-hint {
	color: var(--q-red-light);
	font-size: 12px;
	min-height: 1.2em;
	text-align: center;
	margin: 8px 0 0;
}

/* -------------------------------------------------------------- התקדמות */

/*
 * ‎.qilab-app הוא flex עם align-items: center, ולכן ילד בלי רוחב מפורש
 * מתכווץ לרוחב התוכן שלו במקום להימתח. בלי השורה הזו כל אזור המשחק
 * הצטמצם, והכרטיס ירד לכ-220px עם שם שנשבר לשתי שורות.
 */
.qilab-play {
	width: 100%;
}

.qilab-progress-wrap {
	width: 100%;
	margin: 4px 0;
	flex-shrink: 0;
}

.qilab-progress-track {
	height: 3px;
	background: var(--q-surface2);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 8px;
}

.qilab-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--q-gold-dim), var(--q-gold));
	border-radius: 2px;
	transition: width .4s ease;
	width: 0;
}

.qilab-progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.qilab-badge {
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
}

.qilab-badge--known {
	background: var(--q-green-bg);
	color: var(--q-green-light);
}

.qilab-badge--unknown {
	background: var(--q-red-bg);
	color: var(--q-red-light);
}

.qilab-badge--left {
	background: var(--q-gold-faint);
	color: var(--q-gold);
}

.qilab-round {
	font-size: 11px;
	color: var(--q-text-muted);
	text-align: center;
	flex-shrink: 0;
	letter-spacing: 1px;
	min-height: 16px;
}

/* ------------------------------------------------------------ שורת סטטיסטיקה */

.qilab-stats {
	display: flex;
	gap: 8px;
	width: 100%;
	flex-shrink: 0;
	margin-bottom: 6px;
}

.qilab-stat {
	flex: 1;
	padding: 6px 4px;
	border-radius: 10px;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
}

.qilab-stat__val {
	font-size: 17px;
	display: block;
	font-weight: 900;
	line-height: 1.1;
}

.qilab-stat--correct {
	background: var(--q-green-bg);
	color: var(--q-green-light);
	border: 1px solid var(--q-green);
}

.qilab-stat--wrong {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 1px solid var(--q-red);
}

.qilab-stat--streak {
	background: var(--q-gold-faint);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
}

/* ------------------------------------------------------------ אזור הכרטיס */

.qilab-stack {
	position: relative;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-height: 0;
	padding: 10px 0 6px;
}

.qilab-hints {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	left: 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 5;
	padding: 0 4px;
}

.qilab-hint-icon {
	font-size: 20px;
	opacity: .18;
	padding: 8px;
}

.qilab-hint-icon--know {
	color: var(--q-green-light);
}

.qilab-hint-icon--unknown {
	color: var(--q-red-light);
}

.qilab-card-container {
	position: relative;
	width: calc(100% - 32px);
	max-width: 420px;
	cursor: grab;
	touch-action: none;
	z-index: 10;
	display: flex;
	flex-direction: column;
}

.qilab-card-container:active {
	cursor: grabbing;
}

.qilab-card {
	width: 100%;
	/* גובה קבוע כדי שהכרטיס לא יקפוץ בין מצב מוסתר לגלוי. */
	min-height: 280px;
	background: var(--q-surface);
	border: 1px solid var(--q-surface2);
	border-radius: 18px;
	padding: 24px 24px 36px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .04) inset;
	user-select: none;
}

.qilab-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(2, 126, 127, .3), transparent);
}

.qilab-overlay {
	position: absolute;
	inset: 0;
	border-radius: 18px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .1s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: 2px;
}

.qilab-overlay--know {
	background: var(--q-green-bg);
	color: var(--q-green-light);
	border: 2px solid var(--q-green);
}

.qilab-overlay--unknown {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 2px solid var(--q-red);
}

/* הקטגוריה והתגית באותה שורה, בזרימה רגילה — בלי מיקום מוחלט שחופף. */
.qilab-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	flex-shrink: 0;
}

.qilab-card__category {
	font-size: 10px;
	letter-spacing: 3px;
	color: var(--q-gold-dim);
	line-height: 1.6;
	min-width: 0;
}

.qilab-card__name {
	font-size: clamp(22px, 5vw, 34px);
	font-weight: 700;
	color: var(--q-gold-light);
	font-style: italic;
	margin-bottom: 14px;
	line-height: 1.2;
	flex-shrink: 0;
}

.qilab-card__name small {
	display: block;
	font-size: 14px;
	font-style: normal;
	color: var(--q-text-dim);
	margin-top: 2px;
}

.qilab-card__divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--q-surface2), transparent);
	margin-bottom: 14px;
	flex-shrink: 0;
}

.qilab-card__label {
	font-size: 10px;
	letter-spacing: 3px;
	color: var(--q-text-muted);
	margin-bottom: 8px;
	flex-shrink: 0;
}

.qilab-card__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--q-text);
	font-weight: 300;
	margin-bottom: 10px;
	min-height: 0;
	overflow-y: auto;
}

.qilab-card__text::-webkit-scrollbar {
	width: 3px;
}

.qilab-card__text::-webkit-scrollbar-thumb {
	background: var(--q-surface2);
	border-radius: 2px;
}

.qilab-card__number {
	position: absolute;
	bottom: 10px;
	left: 16px;
	font-size: 10px;
	color: var(--q-text-muted);
	/* "2 / 200" נקרא הפוך בהקשר RTL. הבידוד שומר על סדר המספרים. */
	direction: ltr;
	unicode-bidi: isolate;
}

/* מסך המצב המוסתר — שטח שקט במקום גוף ריק שנראה שבור. */
.qilab-card__veil {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--q-text-muted);
	font-size: 13px;
	letter-spacing: 1px;
	text-align: center;
	padding: 12px 0;
}

.qilab-card.is-hidden .qilab-card__divider {
	visibility: hidden;
}

/* תגית מצב הפריט — לא קיימת בגרסה החינמית. */
.qilab-state {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 20px;
	letter-spacing: .5px;
	white-space: nowrap;
	flex-shrink: 0;
}

.qilab-state:empty {
	display: none;
}

.qilab-state--known {
	background: var(--q-green-bg);
	color: var(--q-green-light);
	border: 1px solid var(--q-green);
}

.qilab-state--half {
	background: var(--q-gold-faint);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
}

.qilab-state--unknown {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 1px solid var(--q-red);
}

/* כפתור החשיפה במצב "כרטיס מוסתר". */
.qilab-reveal {
	width: 100%;
	padding: 12px;
	margin: 6px 0 4px;
	border-radius: 13px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 1px;
	background: var(--q-surface2);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
	transition: background .15s;
}

.qilab-reveal:hover {
	background: var(--q-surface3);
}

/* ------------------------------------------------------------------ כפתורים */

.qilab-btn-row {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-shrink: 0;
	padding-top: 10px;
	width: 100%;
}

.qilab-btn {
	flex: 1;
	max-width: 150px;
	padding: 11px 10px;
	border-radius: 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: transform .15s, background .15s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.qilab-btn:active {
	transform: scale(.94);
}

.qilab-btn:disabled {
	opacity: .5;
	cursor: default;
}

.qilab-btn--unknown {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 1px solid var(--q-red);
}

.qilab-btn--unknown:hover:not(:disabled) {
	background: rgba(216, 23, 87, .22);
}

.qilab-btn--know {
	background: var(--q-green-bg);
	color: var(--q-green-light);
	border: 1px solid var(--q-green);
}

.qilab-btn--know:hover:not(:disabled) {
	background: rgba(2, 126, 127, .22);
}

.qilab-btn__icon {
	font-size: 22px;
	line-height: 1;
}

.qilab-btn__label {
	font-size: 12px;
	letter-spacing: 1px;
	opacity: .8;
}

.qilab-quit {
	background: none;
	border: none;
	color: var(--q-text-muted);
	text-decoration: underline;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	padding: 10px 0 0;
}

/* ------------------------------------------------------------- מי אני — שאלה */

.qilab-q-card {
	width: 100%;
	min-height: 0;
	background: var(--q-surface);
	border: 1px solid var(--q-surface2);
	border-radius: 20px;
	padding: 30px 30px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 1px 0 rgba(255, 255, 255, .03) inset;
	margin-bottom: 10px;
}

.qilab-q-card__label {
	font-size: 10px;
	letter-spacing: 4px;
	color: var(--q-gold-dim);
	margin-bottom: 8px;
	flex-shrink: 0;
}

.qilab-q-card__category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--q-gold-faint);
	border: 1px solid var(--q-gold-dim);
	color: var(--q-gold-light);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 12px;
	flex-shrink: 0;
	width: fit-content;
}

.qilab-feedback {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 900;
	font-size: 26px;
	letter-spacing: 1px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
	z-index: 5;
}

.qilab-feedback.is-shown {
	opacity: 1;
}

.qilab-feedback--correct {
	background: rgba(2, 126, 127, .28);
	color: var(--q-gold-dim);
	border: 2px solid var(--q-green);
}

.qilab-feedback--wrong {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border: 2px solid var(--q-red);
}

.qilab-feedback__answer {
	font-size: 14px;
	font-weight: 400;
	color: var(--q-text-dim);
	font-style: italic;
}

.qilab-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	width: 100%;
	flex-shrink: 0;
}

.qilab-opt {
	background: var(--q-surface2);
	border: 1px solid var(--q-surface3);
	border-radius: 13px;
	padding: 12px 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--q-text);
	cursor: pointer;
	transition: background .12s, border-color .12s, transform .1s, color .12s;
	font-style: italic;
	text-align: center;
	line-height: 1.3;
}

.qilab-opt:hover:not(:disabled) {
	background: var(--q-surface3);
	border-color: var(--q-gold-dim);
	color: var(--q-gold-light);
	transform: translateY(-2px);
}

.qilab-opt:active:not(:disabled) {
	transform: scale(.96);
}

.qilab-opt.is-correct {
	background: var(--q-green-bg);
	border-color: var(--q-green);
	color: var(--q-green-light);
	animation: qilabPopIn .3s ease;
}

.qilab-opt.is-wrong {
	background: var(--q-red-bg);
	border-color: var(--q-red);
	color: var(--q-red-light);
	animation: qilabShake .35s ease;
}

.qilab-opt.is-reveal {
	background: rgba(2, 126, 127, .07);
	border-color: var(--q-green);
	color: var(--q-green-light);
	opacity: .65;
}

.qilab-opt:disabled {
	cursor: default;
}

@keyframes qilabPopIn {
	0%   { transform: scale(.95); }
	50%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes qilabShake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-4px); }
	80%      { transform: translateX(4px); }
}

.qilab-next {
	display: none;
	width: 100%;
	padding: 12px;
	margin-top: 8px;
	border-radius: 13px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 900;
	background: var(--q-surface2);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
	letter-spacing: 1px;
	flex-shrink: 0;
	transition: background .15s;
}

.qilab-next.is-shown {
	display: block;
	animation: qilabFadeUp .3s ease;
}

.qilab-next:hover {
	background: var(--q-surface3);
}

/* ------------------------------------------------------------------ סיום */

.qilab-done {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	width: 100%;
	padding: 24px 20px;
}

.qilab-done.is-shown {
	display: flex;
	animation: qilabFadeUp .5s ease;
}

@keyframes qilabFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.qilab-done__zh {
	font-size: 44px;
	color: var(--q-gold-dim);
	margin-bottom: 4px;
}

.qilab-done__title {
	font-size: 28px;
	font-weight: 900;
	color: var(--q-gold-light);
	margin-bottom: 10px;
}

.qilab-done__score {
	font-size: 54px;
	font-weight: 900;
	color: var(--q-gold);
	line-height: 1;
	margin: 8px 0 4px;
}

.qilab-done__label {
	font-size: 12px;
	color: var(--q-text-dim);
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.qilab-done__sub {
	font-size: 15px;
	color: var(--q-text-dim);
	line-height: 1.7;
	margin-bottom: 24px;
}

.qilab-done__sub b {
	color: var(--q-gold-light);
}

.qilab-done__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.qilab-done-btn {
	padding: 13px 28px;
	border-radius: 13px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1px;
	background: var(--q-gold-faint);
	color: var(--q-gold);
	border: 1px solid var(--q-gold-dim);
	transition: transform .15s, background .15s;
}

.qilab-done-btn:hover {
	background: var(--q-green-bg);
	transform: translateY(-2px);
}

.qilab-done-btn:active {
	transform: scale(.96);
}

.qilab-done-btn--repeat {
	background: var(--q-red-bg);
	color: var(--q-red-light);
	border-color: var(--q-red);
}

.qilab-done-btn--repeat:hover {
	background: rgba(216, 23, 87, .22);
}

/* ------------------------------------------------------------ טעינה ושגיאה */

.qilab-loading,
.qilab-error {
	width: 100%;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--q-text-dim);
	text-align: center;
	padding: 24px 0;
}

/* ------------------------------------------------------------------ שער גישה */

.qilab-gate {
	border: 1px solid var(--q-surface2);
	border-radius: 18px;
	background: var(--q-surface);
	padding: 2rem 1.5rem;
	text-align: center;
	direction: rtl;
	max-width: 520px;
	margin: 2rem auto;
	color: var(--q-text);
}

.qilab-gate__message {
	font-size: 15px;
	line-height: 1.7;
	color: var(--q-text-dim);
}

.qilab-gate__action {
	display: inline-block;
	margin-top: .5rem;
	padding: 12px 28px;
	background: var(--q-gold);
	color: #fff;
	border-radius: 13px;
	text-decoration: none;
	font-weight: 900;
	letter-spacing: 1px;
	transition: background .15s;
}

.qilab-gate__action:hover {
	background: var(--q-gold-dim);
	color: #fff;
}

/* ------------------------------------------------------------------ סקירה */

.qilab-progress-overview {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	direction: rtl;
	text-align: right;
}

.qilab-progress-overview h4 {
	margin: 0 0 .5rem;
	color: var(--q-gold-light);
}

.qilab-progress-overview p {
	margin: .25rem 0 0;
	color: var(--q-text-dim);
	font-size: .9rem;
}

.qilab-progress-overview .qilab-progress-track {
	height: 6px;
}

/* ------------------------------------------------------------------ הלוח */

.qilab-dashboard {
	direction: rtl;
	text-align: right;
	color: var(--q-text);
}

.qilab-dash-heading {
	margin: 2rem 0 .75rem;
	color: var(--q-gold-light);
	font-weight: 900;
}

.qilab-dash-card {
	border: 1px solid var(--q-surface2);
	background: var(--q-surface);
	border-radius: 18px;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.qilab-dash-card h3 {
	margin: 0 0 .35rem;
	color: var(--q-gold-light);
}

.qilab-dash-card__meta {
	margin: 0;
	color: var(--q-text-dim);
}

.qilab-dash-card__meta.is-urgent {
	color: var(--q-red);
	font-weight: 700;
}

.qilab-dash-card__queued {
	margin: .5rem 0 0;
	font-size: .9rem;
	color: var(--q-gold);
}

/* ראש עמוד הלוח: כרטיס אחד, ברכה ומנוי מימין, ההתקדמות משמאל. */
.qilab-dash-hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 4rem;
	align-items: center;
	padding: 2.5rem 2.25rem;
	margin-bottom: 1rem;
	background: var(--q-surface);
	border: 1px solid var(--q-surface2);
	border-radius: 28px;
}

.qilab-dash-hero__greeting {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--q-text);
}

/* כרטיס המנוי בתוך הכרטיס הגדול — בלי מסגרת משלו. */
.qilab-dash-hero .qilab-dash-card {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.qilab-dash-hero .qilab-dash-card h3 {
	margin: 0 0 1rem;
	font-size: 2rem;
	font-weight: 400;
	color: var(--q-gold-light);
}

.qilab-dash-hero .qilab-dash-card__meta {
	font-size: 1.2rem;
}

.qilab-dash-hero .qilab-dash-card__queued {
	margin-top: 1rem;
	font-size: 1.05rem;
}

.qilab-dash-hero .qilab-dash-heading {
	margin: 0 0 1.25rem;
}

/* ההתקדמות בעמודה אחת: שם מימין, מספרים משמאל, והפס מתחת לשניהם. */
.qilab-dash-hero .qilab-progress-overview {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.qilab-dash-hero .qilab-progress-overview__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label count"
		"bar   bar";
	align-items: baseline;
	row-gap: .6rem;
}

.qilab-dash-hero .qilab-progress-overview h4 {
	grid-area: label;
	margin: 0;
	font-size: 1.3rem;
	font-weight: 400;
}

.qilab-dash-hero .qilab-progress-overview p {
	grid-area: count;
	margin: 0;
}

.qilab-dash-hero .qilab-progress-overview .qilab-progress-track {
	grid-area: bar;
	height: 10px;
}

@media (max-width: 768px) {
	.qilab-dash-hero {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.75rem 1.25rem;
		border-radius: 20px;
	}

	.qilab-dash-hero .qilab-dash-card h3 {
		font-size: 1.6rem;
	}
}

/* ארבעה משחקים בשורה — כל סקשן בלוח נכנס בשורה אחת. במסך בינוני יורד
   לשלושה, ואז לשניים ולאחד. */
.qilab-dash-games {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.qilab-dash-games {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.qilab-dash-games {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.qilab-dash-games {
		grid-template-columns: minmax(0, 1fr);
	}
}

.qilab-dash-game {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--q-surface2);
	background: var(--q-surface);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .15s;
}

.qilab-dash-game:hover {
	border-color: var(--q-gold);
	transform: translateY(-2px);
}

.qilab-dash-game.is-locked {
	opacity: .5;
	pointer-events: none;
}

/* מסגרת התמונה שומרת על גובה קבוע גם כשאין תמונה, כדי שכל הכרטיסים
   בשורה יתחילו באותו גובה. */
.qilab-dash-game__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--q-surface2);
}

.qilab-dash-game__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qilab-dash-game__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .85rem;
	flex: 1;
}

.qilab-dash-game__label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	color: var(--q-gold-light);
}

.qilab-dash-game__tagline {
	display: block;
	font-size: .85rem;
	color: var(--q-text-dim);
}

/* דוחף את הכפתור לתחתית הכרטיס, כך שכפתורי השורה מיושרים. */
.qilab-dash-game__progress {
	display: block;
	margin-top: auto;
	padding-top: .5rem;
}

.qilab-dash-game__progress .qilab-progress-track {
	display: block;
	height: 5px;
	margin-bottom: .35rem;
}

.qilab-dash-game__progress .qilab-progress-fill {
	display: block;
}

.qilab-dash-game__stat {
	display: block;
	font-size: .85rem;
	color: var(--q-text-dim);
}

.qilab-dash-game__button {
	display: block;
	margin-top: auto;
	text-align: center;
	padding: .55rem .75rem;
	border-radius: 10px;
	background: var(--q-gold);
	color: var(--q-bg);
	font-weight: 700;
}

/* כשיש מד, הוא זה שתופס את הרווח, והכפתור צמוד אליו. */
.qilab-dash-game__progress + .qilab-dash-game__button {
	margin-top: .35rem;
}

.qilab-dash-game:hover .qilab-dash-game__button {
	background: var(--q-gold-light);
}

/* הכפתור ללוח הלימוד ב"החשבון שלי" — בשפת הכפתורים של האתר:
   גלולה עם מסגרת, מתמלאת במעבר עכבר, ובגופן של התבנית. */
.qilab-dash-board-link {
	margin: 2.5rem 0 2rem;
}

.qilab-dash-board-link__btn {
	display: inline-block;
	padding: 12px 48px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--q-gold);
	background: transparent;
	border: 1.5px solid var(--q-gold);
	border-radius: 50px;
	text-decoration: none;
	transition: background .2s, color .2s, transform .15s;
}

.qilab-dash-board-link__btn:hover,
.qilab-dash-board-link__btn:focus-visible {
	background: var(--q-gold);
	color: #fff;
	transform: translateY(-2px);
}

.qilab-dash-links {
	margin-top: 1.5rem;
	font-size: .9rem;
}

.qilab-dash-links a {
	color: var(--q-gold);
}

.qilab-dash-admin-note {
	margin-top: .75rem;
	font-size: .85rem;
	color: var(--q-gold-dim);
}

/* ------------------------------------------------------------------ מכשירים */

.qilab-devices {
	direction: rtl;
	text-align: right;
	color: var(--q-text);
}

.qilab-devices__list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.qilab-devices__item {
	border: 1px solid var(--q-surface2);
	background: var(--q-surface);
	border-radius: 14px;
	padding: 1rem;
	margin-bottom: .75rem;
}

.qilab-devices__item form {
	margin-top: .5rem;
}

.qilab-devices__item button {
	background: var(--q-red-bg);
	color: var(--q-red);
	border: 1px solid var(--q-red);
	border-radius: 10px;
	padding: 6px 16px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

.qilab-devices__warning {
	color: var(--q-red);
}

.qilab-devices__notice {
	color: var(--q-gold);
}

/* ==========================================================================
   פריסה מצומצמת של מסך הפתיחה
   ==========================================================================
   רכיב משותף, לא של משחק מסוים: רשימת קטגוריות קצרה שנכנסת בלי גלילה.
   הגלילה של הרשימה הארוכה רק מייצרת שם פס גלילה שלא זז.
   ========================================================================== */

.qilab-cats--flat {
	max-height: none;
	overflow: visible;
}

/* ==========================================================================
   כרטיסיות — השפה של הכרטיסיות החינמיות המעודכנות
   ==========================================================================
   כל כלל כאן תחום תחת `.qilab-app--flashcards`, או תחת
   `.qilab-engine-whoami` — שלושת "מי אני" והאבחנה, שרצים על אותו מנוע.
   הרכיבים המשותפים לשניהם (כותרת, מסך פתיחה, פס התקדמות, מסכי סיום)
   מופיעים פעם אחת עם שני הסלקטורים. משחקי בניית הטיפול לא משתנים.

   שלושה עקרונות: כפתורים מלאים (טורקיז ליודע, ורוד ללא יודע), כרטיס
   שגדל עם הטקסט במקום גלילה פנימית, וטקסט משני בניגודיות קריאה.
   ========================================================================== */

.qilab-app--flashcards,
.qilab-engine-whoami {
	/* גוונים כהים יותר לטקסט המשני — האפורים המקוריים לא עמדו בניגודיות. */
	--q-text-dim:   #5E6B66;
	--q-text-muted: #6B7672;
	--q-title:      #3A9D98;
	--q-teal-tint:  rgba(2, 126, 127, .12);
	--q-pink-tint:  rgba(216, 23, 87, .10);

	min-height: 0;
	padding-bottom: 0;
	/* הכרטיס עף הצידה. clip ולא hidden — hidden שובר את הכפתורים הנצמדים. */
	overflow-x: clip;
}

/* ---------------------------------------------------------------- כותרת */

.qilab-app--flashcards .qilab-header,
.qilab-engine-whoami .qilab-header {
	padding: 18px 0 10px;
}

.qilab-app--flashcards .qilab-title,
.qilab-engine-whoami .qilab-title {
	font-size: clamp(22px, 6vw, 28px);
	color: var(--q-title);
	line-height: 1.25;
}

/* ---------------------------------------------------------- מסך הפתיחה */

.qilab-app--flashcards .qilab-chip,
.qilab-engine-whoami .qilab-chip {
	font-size: 12px;
	padding: 8px 4px;
	border-radius: 12px;
}

.qilab-app--flashcards .qilab-chip__val,
.qilab-engine-whoami .qilab-chip__val {
	font-size: 20px;
}

.qilab-app--flashcards .qilab-chip--known,
.qilab-engine-whoami .qilab-chip--known {
	color: var(--q-green);
}

.qilab-app--flashcards .qilab-chip--unknown,
.qilab-engine-whoami .qilab-chip--unknown {
	color: var(--q-red);
}

.qilab-app--flashcards .qilab-panel,
.qilab-engine-whoami .qilab-panel {
	border-radius: 16px;
	padding: 16px;
}

.qilab-app--flashcards .qilab-panel > summary,
.qilab-app--flashcards .qilab-panel__title,
.qilab-engine-whoami .qilab-panel > summary,
.qilab-engine-whoami .qilab-panel__title {
	font-size: 13px;
	letter-spacing: .5px;
	color: var(--q-text-dim);
}

.qilab-app--flashcards .qilab-cats label,
.qilab-app--flashcards .qilab-toggles label,
.qilab-engine-whoami .qilab-cats label,
.qilab-engine-whoami .qilab-toggles label {
	font-size: 15px;
	padding: 5px 0;
}

.qilab-app--flashcards .qilab-cats small,
.qilab-engine-whoami .qilab-cats small {
	color: var(--q-text-muted);
	font-size: 12px;
}

.qilab-app--flashcards .qilab-panel__actions button,
.qilab-engine-whoami .qilab-panel__actions button {
	font-size: 13px;
	padding: 6px 14px;
}

.qilab-app--flashcards .qilab-start,
.qilab-app--flashcards .qilab-start:hover,
.qilab-app--flashcards .qilab-start:focus,
.qilab-engine-whoami .qilab-start,
.qilab-engine-whoami .qilab-start:hover,
.qilab-engine-whoami .qilab-start:focus {
	min-height: 54px;
	border-radius: 16px;
	border: none;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
	background: var(--q-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(2, 126, 127, .25);
}

.qilab-app--flashcards .qilab-start:hover,
.qilab-engine-whoami .qilab-start:hover {
	filter: brightness(1.07);
}

.qilab-app--flashcards .qilab-hint,
.qilab-engine-whoami .qilab-hint {
	font-size: 14px;
	color: var(--q-red);
}

/* -------------------------------------------------------------- התקדמות */

.qilab-app--flashcards .qilab-progress-wrap {
	margin: 2px 0 4px;
}

.qilab-app--flashcards .qilab-progress-track,
.qilab-engine-whoami .qilab-progress-track {
	height: 6px;
	border-radius: 3px;
	background: var(--q-teal-tint);
	margin-bottom: 10px;
}

.qilab-app--flashcards .qilab-progress-fill,
.qilab-engine-whoami .qilab-progress-fill {
	border-radius: 3px;
	background: linear-gradient(90deg, var(--q-title), var(--q-green));
}

.qilab-app--flashcards .qilab-badge {
	display: inline-block;
	padding: 5px 14px;
	font-size: 13px;
}

.qilab-app--flashcards .qilab-badge--known {
	background: var(--q-teal-tint);
	color: var(--q-green);
}

.qilab-app--flashcards .qilab-badge--unknown {
	background: var(--q-pink-tint);
	color: var(--q-red);
}

.qilab-app--flashcards .qilab-badge--left {
	background: var(--q-teal-tint);
	color: var(--q-gold-dim);
}

.qilab-app--flashcards .qilab-badge.is-popping {
	animation: qilabBadgePop .45s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes qilabBadgePop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.qilab-app--flashcards .qilab-round {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--q-text-dim);
	min-height: 18px;
	margin-top: 4px;
}

/* ---------------------------------------------------------------- הכרטיס */

.qilab-app--flashcards .qilab-stack {
	padding: 8px 0 4px;
}

.qilab-app--flashcards .qilab-hint-icon {
	font-size: 18px;
	font-weight: 700;
	opacity: .35;
	padding: 0 1px;
}

.qilab-app--flashcards .qilab-hint-icon--know {
	color: var(--q-green);
}

.qilab-app--flashcards .qilab-hint-icon--unknown {
	color: var(--q-red);
}

/* pan-y משאיר את גלילת העמוד לאצבע; ההחלקה הצידה מזוהה ב-JS. */
.qilab-app--flashcards .qilab-card-container {
	touch-action: pan-y;
}

/* בלי גובה קבוע ובלי גלילה פנימית: הכרטיס גדל עם הטקסט, והעמוד נגלל. */
.qilab-app--flashcards .qilab-card {
	min-height: 0;
	border-radius: 20px;
	padding: 26px 22px 40px;
	box-shadow: 0 8px 24px rgba(1, 75, 76, .08);
	-webkit-user-select: none;
}

.qilab-app--flashcards .qilab-card::before {
	display: none;
}

.qilab-app--flashcards .qilab-card.is-entering {
	animation: qilabCardEnter .3s ease-out;
}

@keyframes qilabCardEnter {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: scale(1); }
}

.qilab-app--flashcards .qilab-overlay {
	border-radius: 20px;
	font-size: 40px;
	z-index: 2;
}

.qilab-app--flashcards .qilab-overlay--know {
	background: rgba(2, 126, 127, .14);
	color: var(--q-green);
}

.qilab-app--flashcards .qilab-overlay--unknown {
	background: var(--q-pink-tint);
	color: var(--q-red);
}

.qilab-app--flashcards .qilab-card__category {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--q-text-dim);
	line-height: 1.5;
}

.qilab-app--flashcards .qilab-card__name {
	font-size: clamp(30px, 9vw, 42px);
	color: var(--q-title);
	margin-bottom: 16px;
	overflow-wrap: anywhere;
}

.qilab-app--flashcards .qilab-card__name small {
	font-size: 16px;
	color: var(--q-text-dim);
	margin-top: 4px;
}

.qilab-app--flashcards .qilab-card__divider,
.qilab-engine-whoami .qilab-card__divider {
	background: var(--q-surface2);
	opacity: .6;
	margin-bottom: 16px;
}

.qilab-app--flashcards .qilab-card__label,
.qilab-engine-whoami .qilab-card__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--q-text-dim);
	margin-bottom: 6px;
}

.qilab-app--flashcards .qilab-card__text,
.qilab-engine-whoami .qilab-card__text {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
	margin-bottom: 16px;
	overflow: visible;
	overflow-wrap: break-word;
}

.qilab-app--flashcards .qilab-card__text:last-child,
.qilab-engine-whoami .qilab-card__text:last-child {
	margin-bottom: 0;
}

.qilab-app--flashcards .qilab-card__number,
.qilab-engine-whoami .qilab-card__number {
	bottom: 12px;
	left: 18px;
	font-size: 13px;
}

.qilab-app--flashcards .qilab-card__veil {
	font-size: 15px;
	letter-spacing: 0;
	padding: 28px 0;
}

.qilab-app--flashcards .qilab-state {
	font-size: 12px;
	padding: 3px 10px;
	letter-spacing: 0;
}

.qilab-app--flashcards .qilab-state--known {
	color: var(--q-green);
}

.qilab-app--flashcards .qilab-state--half {
	color: var(--q-gold-dim);
}

.qilab-app--flashcards .qilab-state--unknown {
	color: var(--q-red);
}

.qilab-app--flashcards .qilab-reveal,
.qilab-app--flashcards .qilab-reveal:hover,
.qilab-app--flashcards .qilab-reveal:focus {
	min-height: 48px;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0;
	background: var(--q-surface);
	color: var(--q-green);
	border: 1.5px solid var(--q-green);
}

/* ------------------------------------------------------------- כפתורים */

/* נצמדים לתחתית המסך כשכרטיס ארוך גולל את העמוד. */
.qilab-app--flashcards .qilab-btn-row {
	position: sticky;
	bottom: 0;
	z-index: 20;
	gap: 12px;
	padding: 14px 0 max(14px, env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--q-bg) 75%, rgba(241, 246, 244, 0));
}

.qilab-app--flashcards .qilab-btn {
	max-width: none;
	min-height: 54px;
	padding: 12px 10px;
	border-radius: 16px;
	border: none;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 800;
	transition: transform .15s, filter .15s;
}

.qilab-app--flashcards .qilab-btn:hover:not(:disabled) {
	filter: brightness(1.07);
}

.qilab-app--flashcards .qilab-btn:focus-visible {
	outline: 3px solid var(--q-gold-dim);
	outline-offset: 2px;
}

/* המצבים מפורטים במפורש: התבנית מעצבת button:hover/:focus ומוחקת את המילוי. */
.qilab-app--flashcards .qilab-btn--know,
.qilab-app--flashcards .qilab-btn--know:hover,
.qilab-app--flashcards .qilab-btn--know:focus,
.qilab-app--flashcards .qilab-btn--know:active {
	background: var(--q-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(2, 126, 127, .25);
}

.qilab-app--flashcards .qilab-btn--unknown,
.qilab-app--flashcards .qilab-btn--unknown:hover,
.qilab-app--flashcards .qilab-btn--unknown:focus,
.qilab-app--flashcards .qilab-btn--unknown:active {
	background: var(--q-red);
	color: #fff;
	box-shadow: 0 6px 16px rgba(216, 23, 87, .22);
}

.qilab-app--flashcards .qilab-btn:disabled {
	opacity: .7;
}

.qilab-app--flashcards .qilab-btn__label {
	font-size: 18px;
	letter-spacing: 0;
	opacity: 1;
}

.qilab-app--flashcards .qilab-quit,
.qilab-engine-whoami .qilab-quit {
	display: block;
	margin: 0 auto;
	padding: 4px 0 18px;
	font-size: 14px;
	color: var(--q-text-dim);
}

/* ------------------------------------------------ מסך מעבר ומסך סיום */

.qilab-app--flashcards .qilab-screen,
.qilab-app--flashcards .qilab-done,
.qilab-engine-whoami .qilab-screen,
.qilab-engine-whoami .qilab-done {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 36px 12px 40px;
}

.qilab-app--flashcards .qilab-screen.is-shown,
.qilab-app--flashcards .qilab-done.is-shown,
.qilab-engine-whoami .qilab-screen.is-shown,
.qilab-engine-whoami .qilab-done.is-shown {
	display: flex;
	animation: qilabFadeUp .5s ease;
}

.qilab-app--flashcards .qilab-screen__emoji,
.qilab-engine-whoami .qilab-screen__emoji {
	font-size: 60px;
	line-height: 1;
	margin-bottom: 14px;
}

.qilab-app--flashcards .is-shown .qilab-screen__emoji,
.qilab-engine-whoami .is-shown .qilab-screen__emoji {
	animation: qilabBadgePop .6s .15s cubic-bezier(.3, 1.6, .5, 1) both;
}

.qilab-app--flashcards .qilab-screen__title,
.qilab-engine-whoami .qilab-screen__title {
	font-size: 32px;
	font-weight: 900;
	color: var(--q-title);
	line-height: 1.2;
	margin-bottom: 10px;
}

.qilab-app--flashcards .qilab-screen__sub,
.qilab-engine-whoami .qilab-screen__sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--q-text);
	margin-bottom: 8px;
}

.qilab-app--flashcards .qilab-screen__sub--heading,
.qilab-engine-whoami .qilab-screen__sub--heading {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--q-gold-dim);
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
}

.qilab-app--flashcards .qilab-screen__note,
.qilab-engine-whoami .qilab-screen__note {
	font-size: 15px;
	line-height: 1.6;
	color: var(--q-text-dim);
	margin-bottom: 26px;
}

.qilab-app--flashcards .qilab-screen__note:empty,
.qilab-engine-whoami .qilab-screen__note:empty {
	margin-bottom: 18px;
}

.qilab-app--flashcards .qilab-screen__btn,
.qilab-app--flashcards .qilab-screen__btn:hover,
.qilab-app--flashcards .qilab-screen__btn:focus,
.qilab-app--flashcards .qilab-screen__btn:active,
.qilab-engine-whoami .qilab-screen__btn,
.qilab-engine-whoami .qilab-screen__btn:hover,
.qilab-engine-whoami .qilab-screen__btn:focus,
.qilab-engine-whoami .qilab-screen__btn:active {
	min-height: 52px;
	padding: 12px 32px;
	border-radius: 16px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	background: var(--q-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(2, 126, 127, .25);
	transition: transform .15s, filter .15s;
}

.qilab-app--flashcards .qilab-screen__btn:hover,
.qilab-engine-whoami .qilab-screen__btn:hover {
	filter: brightness(1.07);
}

.qilab-app--flashcards .qilab-screen__btn:active,
.qilab-engine-whoami .qilab-screen__btn:active {
	transform: scale(.95);
}

/* ==========================================================================
   "מי אני" והאבחנה — מה שאין לו מקביל בכרטיסיות
   ========================================================================== */

.qilab-engine-whoami .qilab-progress-track {
	margin-bottom: 12px;
}

/* ------------------------------------------------------ שורת המדדים */

.qilab-engine-whoami .qilab-stats {
	margin-bottom: 10px;
}

.qilab-engine-whoami .qilab-stat {
	padding: 8px 4px;
	border-radius: 14px;
	border: none;
	font-size: 13px;
	letter-spacing: 0;
}

.qilab-engine-whoami .qilab-stat__val {
	font-size: 22px;
	line-height: 1.15;
}

.qilab-engine-whoami .qilab-stat--correct {
	background: var(--q-teal-tint);
	color: var(--q-green);
}

.qilab-engine-whoami .qilab-stat--streak {
	background: rgba(1, 75, 76, .07);
	color: var(--q-gold-dim);
}

.qilab-engine-whoami .qilab-stat--wrong {
	background: var(--q-pink-tint);
	color: var(--q-red);
}

.qilab-engine-whoami .qilab-stat__val.is-popping {
	animation: qilabBadgePop .45s cubic-bezier(.3, 1.6, .5, 1);
}

/* רצף של 5, 10, 15… */
.qilab-engine-whoami .qilab-stat.is-streak-hit {
	animation: qilabStreakHit .7s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes qilabStreakHit {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(2, 126, 127, .45); }
	40%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(2, 126, 127, 0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(2, 126, 127, 0); }
}

/* ---------------------------------------------------- כרטיס השאלה */

/* גדל עם הטקסט, והעמוד נגלל. */
.qilab-engine-whoami .qilab-q-card {
	border-radius: 20px;
	padding: 24px 22px 40px;
	overflow: visible;
	box-shadow: 0 8px 24px rgba(1, 75, 76, .08);
	margin-bottom: 12px;
}

.qilab-engine-whoami .qilab-q-card.is-entering {
	animation: qilabCardEnter .3s ease-out;
}

.qilab-engine-whoami .qilab-q-card__label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--q-text-dim);
	margin-bottom: 10px;
}

.qilab-engine-whoami .qilab-q-card__category {
	background: var(--q-teal-tint);
	border: none;
	color: var(--q-green);
	padding: 5px 14px;
	font-size: 14px;
	letter-spacing: 0;
	margin-bottom: 16px;
}

.qilab-engine-whoami .qilab-q-card__category:empty {
	display: none;
}

/* ------------------------------------------------------- התשובות */

.qilab-engine-whoami .qilab-options {
	gap: 10px;
}

/* המצבים מפורטים במפורש: התבנית מעצבת button:hover/:focus/:disabled. */
.qilab-engine-whoami .qilab-opt,
.qilab-engine-whoami .qilab-opt:focus,
.qilab-engine-whoami .qilab-opt:disabled {
	background: var(--q-surface);
	border: 2px solid var(--q-surface2);
	color: var(--q-text);
	border-radius: 16px;
	padding: 12px 10px;
	min-height: 58px;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.3;
	overflow-wrap: anywhere;
	box-shadow: 0 2px 8px rgba(1, 75, 76, .06);
}

.qilab-engine-whoami .qilab-opt:hover:not(:disabled) {
	background: var(--q-surface);
	border-color: var(--q-green);
	color: var(--q-green);
	transform: translateY(-2px);
}

.qilab-engine-whoami .qilab-opt:focus-visible {
	outline: 3px solid var(--q-gold-dim);
	outline-offset: 2px;
}

.qilab-engine-whoami .qilab-opt:disabled:not(.is-correct):not(.is-wrong):not(.is-reveal) {
	opacity: .55;
}

.qilab-engine-whoami .qilab-opt.is-correct {
	background: var(--q-green);
	border-color: var(--q-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(2, 126, 127, .28);
}

.qilab-engine-whoami .qilab-opt.is-wrong {
	background: var(--q-red);
	border-color: var(--q-red);
	color: #fff;
	box-shadow: 0 6px 16px rgba(216, 23, 87, .22);
}

.qilab-engine-whoami .qilab-opt.is-reveal {
	background: var(--q-teal-tint);
	border-color: var(--q-green);
	color: var(--q-green);
	opacity: 1;
}

/* ------------------------------------------------------- כפתור הבא */

/* השורה נצמדת לתחתית המסך כשכרטיס ארוך גולל את העמוד. */
.qilab-engine-whoami .qilab-next-row {
	position: sticky;
	bottom: 0;
	z-index: 20;
	width: 100%;
	background: linear-gradient(to top, var(--q-bg) 75%, rgba(241, 246, 244, 0));
}

.qilab-engine-whoami .qilab-next,
.qilab-engine-whoami .qilab-next:hover,
.qilab-engine-whoami .qilab-next:focus {
	min-height: 54px;
	margin: 12px 0 max(14px, env(safe-area-inset-bottom));
	border-radius: 16px;
	border: none;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
	background: var(--q-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(2, 126, 127, .28);
}

.qilab-engine-whoami .qilab-next:active {
	transform: scale(.97);
}

/* ------------------------------------------------------- מסך הסיום */

/* "15/20" בכיוון לועזי — בעמוד מימין לשמאל הוא היה מתהפך. */
.qilab-engine-whoami .qilab-screen__score {
	font-size: 60px;
	font-weight: 900;
	color: var(--q-green);
	line-height: 1;
	margin: 8px 0 6px;
	direction: ltr;
	unicode-bidi: isolate;
}

.qilab-engine-whoami .is-shown .qilab-screen__score {
	animation: qilabBadgePop .6s .15s cubic-bezier(.3, 1.6, .5, 1) both;
}

.qilab-engine-whoami .qilab-screen__label {
	font-size: 15px;
	color: var(--q-text-dim);
	margin-bottom: 18px;
}

.qilab-engine-whoami .qilab-screen__grade {
	font-size: 17px;
	line-height: 1.7;
	color: var(--q-text);
	margin-bottom: 26px;
}

.qilab-engine-whoami .qilab-screen__grade b {
	color: var(--q-green);
}

/* קנבס הקונפטי יושב ב-body, מחוץ לאפליקציה. */
.qilab-confetti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 99999;
}

@media (prefers-reduced-motion: reduce) {
	.qilab-app--flashcards *,
	.qilab-app--flashcards *::before,
	.qilab-app--flashcards *::after,
	.qilab-engine-whoami *,
	.qilab-engine-whoami *::before,
	.qilab-engine-whoami *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------- חינמי ופרו */

/* תג "פרו" — על כרטיס נעול בלוח, על המד הנעול, בחלון ההסבר ובמסך
   הפתיחה של משחק חינמי. */
.qilab-pro-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--q-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* כפתור השדרוג: אותה צורה כמו כפתור הפעולה בשער, בצבע של פרו. */
.qilab-upgrade {
	display: inline-block;
	padding: 10px 24px;
	background: var(--q-red);
	color: #fff;
	border-radius: 13px;
	text-decoration: none;
	font-weight: 900;
	transition: background .15s;
}

.qilab-upgrade:hover,
.qilab-upgrade:focus {
	background: var(--q-red-light);
	color: #fff;
}

/* כפתור הפעולה הגדול, כשהוא מוביל לפרו — בכרטיס המנוי ובשער של משחק
   פרו. ורוד = פרו בכל מקום; הטורקיז נשאר לפעולות הרגילות. */
.qilab-gate__action--pro {
	background: var(--q-red);
}

.qilab-gate__action--pro:hover,
.qilab-gate__action--pro:focus {
	background: var(--q-red-light);
	color: #fff;
}

/* שורת הכפתורים בכרטיס המנוי — "לשדרוג לפרו" ולצידו "ללוח הלימוד". */
.qilab-dash-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.qilab-dash-card__actions .qilab-gate__action {
	margin-top: 0;
}

/* כרטיס של משחק פרו אצל נרשמת חינמית: נשאר צבעוני ולחיץ — הוא פותח
   את חלון ההסבר. רק הכפתור שבתחתית מעומעם. */
.qilab-dash-game.is-pro .qilab-dash-game__media {
	position: relative;
}

.qilab-dash-game.is-pro .qilab-dash-game__media .qilab-pro-badge {
	position: absolute;
	top: 10px;
	right: 10px;
}

.qilab-dash-game.is-pro .qilab-dash-game__media img {
	filter: saturate(.6);
}

.qilab-dash-game.is-pro .qilab-dash-game__button {
	background: var(--q-surface2);
	color: var(--q-gold-dim);
}

.qilab-dash-game.is-pro:hover {
	border-color: var(--q-red);
}

/* המד הנעול: הפסים מטושטשים מאחור, וההסבר מעליהם. */
.qilab-progress-locked {
	position: relative;
}

.qilab-progress-locked .qilab-progress-overview {
	filter: blur(3px);
	opacity: .55;
	user-select: none;
	pointer-events: none;
}

.qilab-progress-locked__veil {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1rem;
	text-align: center;
}

/* רקע בהיר מאחורי הטקסט, כדי שהפסים שמתחת לא יבלבלו את הקריאה. */
.qilab-progress-locked__veil p {
	margin: 0;
	max-width: 34ch;
	padding: .4rem .75rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, .85);
	font-weight: 700;
	color: var(--q-text);
}

/* חלון ההסבר — באמצע המסך. המיקום כתוב במפורש, כי איפוס ה-CSS של
   התבנית מאפס את ה-margin שבזכותו הדפדפן ממרכז חלון כזה, והחלון נדבק
   לפינה. */
.qilab-pro-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	border: 0;
	border-radius: 18px;
	padding: 28px 24px 24px;
	background: var(--q-surface);
	color: var(--q-text);
	text-align: right;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.qilab-pro-dialog::backdrop {
	background: rgba(17, 34, 28, .55);
}

.qilab-pro-dialog__close {
	position: absolute;
	top: 10px;
	left: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--q-text-dim);
	cursor: pointer;
}

.qilab-pro-dialog__title {
	margin: .75rem 0 .25rem;
	color: var(--q-gold);
}

.qilab-pro-dialog__tagline {
	margin: 0 0 1rem;
	color: var(--q-text-dim);
}

.qilab-pro-dialog__lead {
	margin: 0 0 .5rem;
	font-weight: 700;
}

.qilab-pro-dialog__list {
	margin: 0 0 1.25rem;
	padding-right: 1.2rem;
	line-height: 1.7;
}

/* מסך הפתיחה של משחק חינמי: הפאנל של מה ששמור לפרו. */
.qilab-panel--locked {
	border-style: dashed;
}

.qilab-panel--locked .qilab-panel__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.qilab-locked-list {
	margin: 0 0 .75rem;
	padding-right: 1.2rem;
	color: var(--q-text-dim);
	line-height: 1.7;
}

/* ------------------------------------------------------- הרשמה חינמית */

/* כפתור הפעולה של השער מוגדר לקישור; כאן הוא גם כפתור — בטופס ההרשמה
   ובמסך "לא הצלחנו לזהות את המכשיר". */
button.qilab-gate__action {
	border: 0;
	font: inherit;
	font-weight: 900;
	cursor: pointer;
}

.qilab-gate__help {
	margin: .75rem auto 0;
	max-width: 40ch;
	color: var(--q-text-dim);
	font-size: .95rem;
}

.qilab-gate__link {
	display: inline-block;
	margin-inline-start: 1rem;
	color: var(--q-gold);
	font-weight: 700;
}

.qilab-signup__title {
	margin: 0 0 .35rem;
	color: var(--q-gold);
	font-size: 1.5rem;
}

.qilab-signup__lead {
	margin: 0 0 1.25rem;
	color: var(--q-text-dim);
}

/* הטפסים מיושרים לימין גם בתוך כרטיס ממורכז. */
.qilab-signup form {
	text-align: right;
}

.qilab-signup__row {
	margin: 0 0 .85rem;
}

.qilab-signup label {
	display: block;
	margin-bottom: .3rem;
	font-weight: 700;
	font-size: .95rem;
}

.qilab-signup input[type="text"],
.qilab-signup input[type="email"],
.qilab-signup input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--q-surface3);
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.qilab-signup input:focus {
	outline: 2px solid var(--q-gold-light);
	outline-offset: 1px;
}

.qilab-signup__submit {
	display: block;
	width: 100%;
	margin-top: .5rem;
}

/* טקסט הפרטיות של ווקומרס, שנכנס דרך woocommerce_register_form. */
.qilab-signup .woocommerce-privacy-policy-text {
	font-size: .85rem;
	color: var(--q-text-dim);
}

/* צ'קבוקסי ההסכמה: התיבה ליד הטקסט, לא מעליו. */
.qilab-signup .qilab-signup__consent {
	margin: 0 0 .7rem;
}

.qilab-signup .qilab-signup__consent label {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0;
	font-weight: 400;
	font-size: .9rem;
	line-height: 1.5;
	cursor: pointer;
}

.qilab-signup__consent input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: .15rem 0 0;
	accent-color: var(--q-gold);
}

.qilab-signup__consent a {
	color: var(--q-gold);
}

.qilab-signup__consent .required {
	color: #b42318;
	text-decoration: none;
	border: 0;
}

.qilab-signup__login {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--q-surface2);
}

.qilab-signup__login > summary {
	cursor: pointer;
	color: var(--q-gold);
	font-weight: 700;
}

/* טופס ההתחברות של ווקומרס: שדות אחד מתחת לשני, בלי הצפים של התבנית. */
.qilab-signup__login .form-row {
	float: none;
	width: 100%;
	margin: 0 0 .85rem;
}

.qilab-signup__login form {
	margin-top: 1rem;
}

.qilab-signup__login button[type="submit"] {
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: 13px;
	background: var(--q-gold);
	color: #fff;
	font: inherit;
	font-weight: 900;
	cursor: pointer;
}

.qilab-signup__login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 400;
}

.qilab-signup .woocommerce-error,
.qilab-signup .woocommerce-message,
.qilab-signup .woocommerce-info {
	text-align: right;
	margin-bottom: 1rem;
}

/* כל הכפתורים בפונט Heebo. ה-!important מכוון: כפתורים שונים מקבלים
   את הגופן מכללים שונים (font: inherit, בוררים מוגבהים, ווקומרס), וזו
   הדרך היחידה שההחלטה תחול על כולם בלי לרדוף אחרי כל אחד. */
.qilab-app button,
.qilab-dashboard button,
.qilab-gate button,
.qilab-devices button,
.qilab-pro-dialog button,
.qilab-gate__action,
.qilab-upgrade,
.qilab-dash-game__button,
.qilab-dash-board-link__btn {
	font-family: 'Heebo', sans-serif !important;
}