/* =========================================================
   تست تشخیص نوع پوست — استایل فرانت‌اند
   رنگ‌ها و فونت‌ها از متغیرهای سراسری المنتور خوانده می‌شوند.
   ========================================================= */

.stq {
	/* رنگ‌های سراسری المنتور با فال‌بک */
	--stq-primary:  var(--e-global-color-primary,   #7A6FF0);
	--stq-secondary:var(--e-global-color-secondary, #2B2A3D);
	--stq-text:     var(--e-global-color-text,      #4B4B5B);
	--stq-accent:   var(--e-global-color-accent,    #2BB3A3);

	/* تایپوگرافی سراسری المنتور */
	--stq-font:      var(--e-global-typography-text-font-family, inherit);
	--stq-font-head: var(--e-global-typography-primary-font-family, var(--e-global-typography-text-font-family, inherit));
	--stq-fw-head:   var(--e-global-typography-primary-font-weight, 700);

	--stq-surface: #ffffff;
	--stq-soft:    color-mix(in srgb, var(--stq-primary) 7%, #ffffff);
	--stq-border:  color-mix(in srgb, var(--stq-primary) 16%, #ffffff);
	--stq-radius:  20px;
	--stq-shadow:  0 18px 45px -22px color-mix(in srgb, var(--stq-secondary) 60%, transparent);

	direction: rtl;
	text-align: right;
	font-family: var(--stq-font);
	color: var(--stq-text);
	max-width: 760px;
	margin-inline: auto;
	position: relative;
	line-height: 1.9;
	-webkit-tap-highlight-color: transparent;
}

/* فال‌بک برای مرورگرهایی که color-mix ندارند */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stq { --stq-soft: #f5f4ff; --stq-border: #e6e3fb; --stq-shadow: 0 18px 45px -22px rgba(40,40,70,.45); }
}

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

.stq h3, .stq h4 {
	font-family: var(--stq-font-head);
	font-weight: var(--stq-fw-head);
	color: var(--stq-secondary);
	margin: 0 0 10px;
}

/* ---------- کارت ---------- */
.stq-card {
	background: var(--stq-surface);
	border: 1px solid var(--stq-border);
	border-radius: var(--stq-radius);
	box-shadow: var(--stq-shadow);
	padding: 34px 30px;
	position: relative;
	overflow: hidden;
}
.stq-card::before {
	content: "";
	position: absolute;
	inset-inline-start: -60px;
	top: -80px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, color-mix(in srgb, var(--stq-primary) 22%, transparent), transparent 70%);
	filter: blur(6px);
	pointer-events: none;
}

/* ---------- صفحه‌ها ---------- */
.stq-screen { display: none; }
.stq-screen.is-active { display: block; animation: stq-screen-in .45s cubic-bezier(.22,1,.36,1) both; }

@keyframes stq-screen-in {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
.stq-fade-in { animation: stq-screen-in .5s cubic-bezier(.22,1,.36,1) both; }

/* ---------- صفحه شروع ---------- */
.stq-intro { text-align: center; }
.stq-intro-title { font-size: clamp(20px, 3.4vw, 28px); }
.stq-intro-text { margin: 0 auto 22px; max-width: 46ch; font-size: 15px; opacity: .9; }

.stq-orb {
	width: 92px; height: 92px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-size: 38px;
	background: linear-gradient(140deg, color-mix(in srgb, var(--stq-primary) 24%, #fff), color-mix(in srgb, var(--stq-accent) 22%, #fff));
	position: relative;
	animation: stq-float 4.5s ease-in-out infinite;
}
.stq-orb.small { width: 72px; height: 72px; font-size: 30px; }
.stq-orb::after {
	content: "";
	position: absolute; inset: -10px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--stq-primary) 35%, transparent);
	animation: stq-pulse 2.6s ease-out infinite;
}
@keyframes stq-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes stq-pulse { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

.stq-meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.stq-chip {
	font-size: 13px;
	background: var(--stq-soft);
	color: var(--stq-secondary);
	border: 1px solid var(--stq-border);
	border-radius: 999px;
	padding: 5px 14px;
}

/* ---------- دکمه‌ها ---------- */
.stq-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--stq-font-head);
	font-weight: 600;
	font-size: 16px;
	border: 0; cursor: pointer;
	border-radius: 999px;
	padding: 14px 34px;
	text-decoration: none;
	transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .25s ease;
	position: relative; overflow: hidden;
}
.stq-btn-primary {
	background: linear-gradient(135deg, var(--stq-primary), color-mix(in srgb, var(--stq-primary) 55%, var(--stq-accent)));
	color: #fff;
	box-shadow: 0 12px 26px -12px var(--stq-primary);
}
.stq-btn-primary::after {
	content: "";
	position: absolute; top: 0; inset-inline-start: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
	transform: skewX(-18deg);
	animation: stq-shine 3.4s ease-in-out infinite;
}
@keyframes stq-shine { 0%,65% { inset-inline-start: -120%; } 100% { inset-inline-start: 140%; } }
.stq-btn:hover  { transform: translateY(-2px); filter: brightness(1.04); }
.stq-btn:active { transform: translateY(0) scale(.97); }

.stq-skip {
	display: block; margin: 14px auto 0;
	background: none; border: 0; cursor: pointer;
	color: var(--stq-text); opacity: .65; font-size: 14px;
	font-family: var(--stq-font);
	text-decoration: underline;
}
.stq-skip:hover { opacity: 1; }

/* ---------- نوار پیشرفت ---------- */
.stq-head { margin-bottom: 22px; }
.stq-progress {
	height: 8px; border-radius: 999px;
	background: var(--stq-soft);
	overflow: hidden;
}
.stq-progress-fill {
	height: 100%; width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--stq-accent), var(--stq-primary));
	transition: width .55s cubic-bezier(.22,1,.36,1);
	position: relative;
}
.stq-progress-fill::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
	animation: stq-slide 1.8s linear infinite;
}
@keyframes stq-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.stq-head-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.stq-counter { font-size: 13px; opacity: .75; }
.stq-counter b { color: var(--stq-primary); font-size: 15px; }

.stq-back {
	display: inline-flex; align-items: center; gap: 5px;
	background: none; border: 0; cursor: pointer;
	color: var(--stq-text); font-size: 14px; font-family: var(--stq-font);
	opacity: .7; padding: 4px 6px; border-radius: 10px;
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.stq-back:hover { opacity: 1; background: var(--stq-soft); transform: translateX(3px); }
.stq-back[hidden] { visibility: hidden; }

/* ---------- سؤال و گزینه‌ها ---------- */
.stq-q { animation: stq-q-in .42s cubic-bezier(.22,1,.36,1) both; }
.stq-q.is-out { animation: stq-q-out .26s ease forwards; }
@keyframes stq-q-in  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stq-q-out { to { opacity: 0; transform: translateX(-24px); } }
.stq-q.is-back { animation-name: stq-q-in-back; }
@keyframes stq-q-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.stq-q-title {
	font-family: var(--stq-font-head);
	font-weight: var(--stq-fw-head);
	color: var(--stq-secondary);
	font-size: clamp(17px, 2.6vw, 22px);
	margin: 0 0 20px;
	line-height: 1.7;
}

.stq-options { display: grid; gap: 12px; }

.stq-option {
	display: flex; align-items: center; gap: 12px;
	width: 100%; text-align: right;
	background: #fff;
	border: 1.5px solid var(--stq-border);
	border-radius: 16px;
	padding: 15px 16px;
	padding-inline-end: 44px;
	font-family: var(--stq-font);
	font-size: 15px;
	color: var(--stq-text);
	cursor: pointer;
	position: relative; overflow: hidden;
	transition: border-color .22s ease, background .22s ease, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
	animation: stq-opt-in .4s cubic-bezier(.22,1,.36,1) both;
	animation-delay: calc(var(--i) * 65ms);
}
@keyframes stq-opt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.stq-option:hover {
	border-color: var(--stq-primary);
	background: var(--stq-soft);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -16px var(--stq-primary);
}
.stq-option:active { transform: scale(.985); }

.stq-option .stq-dot {
	flex: none;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid var(--stq-border);
	display: grid; place-items: center;
	transition: border-color .2s ease, background .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.stq-option .stq-dot svg { width: 13px; height: 13px; stroke: #fff; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.34,1.56,.64,1); }

.stq-option.is-selected {
	border-color: var(--stq-primary);
	background: var(--stq-soft);
}
.stq-option.is-selected .stq-dot { background: var(--stq-primary); border-color: var(--stq-primary); transform: scale(1.12); }
.stq-option.is-selected .stq-dot svg { opacity: 1; transform: scale(1); }
.stq-option.is-selected .stq-opt-text { color: var(--stq-secondary); font-weight: 600; }

/* موج لمس */
.stq-ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: color-mix(in srgb, var(--stq-primary) 26%, transparent);
	animation: stq-ripple .6s ease-out forwards;
	pointer-events: none;
}
@keyframes stq-ripple { to { transform: scale(2.6); opacity: 0; } }

.stq-key {
	position: absolute; inset-inline-end: 14px;
	font-size: 11px; opacity: .35;
	border: 1px solid currentColor; border-radius: 6px;
	padding: 0 5px; line-height: 1.6;
}

/* ---------- ورودی ---------- */
.stq-contact { text-align: center; }
.stq-input {
	width: 100%; max-width: 320px;
	margin: 0 auto 18px; display: block;
	text-align: center;
	font-family: var(--stq-font); font-size: 17px;
	letter-spacing: 1px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1.5px solid var(--stq-border);
	background: var(--stq-soft);
	color: var(--stq-secondary);
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.stq-input:focus { border-color: var(--stq-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stq-primary) 15%, transparent); }

/* ---------- در حال تحلیل ---------- */
.stq-loading { text-align: center; padding-block: 56px; }
.stq-scanner { width: 120px; height: 120px; margin: 0 auto 22px; position: relative; }
.stq-scan-face {
	width: 100%; height: 100%;
	border-radius: 46% 46% 42% 42%;
	background: linear-gradient(160deg, color-mix(in srgb, var(--stq-primary) 18%, #fff), color-mix(in srgb, var(--stq-accent) 18%, #fff));
	border: 2px solid var(--stq-border);
	position: relative; overflow: hidden;
	animation: stq-breathe 2.4s ease-in-out infinite;
}
@keyframes stq-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.stq-scan-line {
	position: absolute; inset-inline: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--stq-primary), transparent);
	box-shadow: 0 0 14px 3px color-mix(in srgb, var(--stq-primary) 45%, transparent);
	animation: stq-scan 1.5s ease-in-out infinite;
}
@keyframes stq-scan { 0% { top: 6%; } 50% { top: 88%; } 100% { top: 6%; } }
.stq-loading-text { font-size: 15px; opacity: .8; margin: 0; }

/* ---------- نتیجه ---------- */
.stq-result-card { text-align: center; --stq-type: var(--stq-primary); }
.stq-result-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--stq-type) 14%, #fff);
	color: var(--stq-type);
	border: 1px solid color-mix(in srgb, var(--stq-type) 30%, #fff);
	border-radius: 999px;
	font-size: 13px; padding: 5px 16px; margin-bottom: 14px;
}
.stq-result-emoji {
	font-size: 58px; line-height: 1;
	margin-bottom: 10px;
	animation: stq-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes stq-pop { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
.stq-result-title { font-size: clamp(22px, 4vw, 30px); color: var(--stq-type); }
.stq-result-desc { max-width: 52ch; margin: 0 auto 26px; font-size: 15px; }

.stq-bars { display: grid; gap: 10px; margin-bottom: 26px; text-align: right; }
.stq-bar-row { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 10px; font-size: 13px; }
.stq-bar-label { color: var(--stq-secondary); }
.stq-bar-track { height: 10px; border-radius: 999px; background: var(--stq-soft); overflow: hidden; }
.stq-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(.22,1,.36,1); }
.stq-bar-val { opacity: .7; text-align: left; font-variant-numeric: tabular-nums; }

.stq-tips-title { font-size: 17px; margin-bottom: 12px; }
.stq-tips { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; text-align: right; }
.stq-tips li {
	background: var(--stq-soft);
	border: 1px solid var(--stq-border);
	border-radius: 14px;
	padding: 12px 44px 12px 14px;
	font-size: 14.5px;
	position: relative;
	animation: stq-opt-in .5s cubic-bezier(.22,1,.36,1) both;
	animation-delay: calc(var(--i, 0) * 100ms + 200ms);
}
.stq-tips li::before {
	content: "✓";
	position: absolute; inset-inline-start: 14px; top: 12px;
	width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--stq-type); color: #fff; font-size: 12px;
}
.stq-note { font-size: 12.5px; opacity: .6; margin: 16px 0 0; }

/* ---------- بخش جدای حساسیت ---------- */
.stq-sens-block {
	--stq-sens: #E0A33E;
	text-align: right;
	background: color-mix(in srgb, var(--stq-sens) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--stq-sens) 25%, #fff);
	border-radius: 16px;
	padding: 18px 18px 20px;
	margin: 8px 0 22px;
}
.stq-sens-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.stq-sens-emoji { font-size: 26px; line-height: 1; flex: none; }
.stq-sens-title { font-size: 15px; color: var(--stq-sens); margin: 0 0 4px; }
.stq-sens-desc { font-size: 13.5px; margin: 0; opacity: .9; }

.stq-gauge {
	height: 9px; border-radius: 999px;
	background: color-mix(in srgb, var(--stq-sens) 14%, #fff);
	overflow: hidden;
	margin-bottom: 14px;
}
.stq-gauge-fill {
	display: block; height: 100%; width: 0;
	border-radius: 999px;
	background: var(--stq-sens);
	transition: width 1s cubic-bezier(.22,1,.36,1);
}

.stq-sens-tips { margin-bottom: 0; }
.stq-sens-tips li::before { background: var(--stq-sens); }

/* کاغذرنگی */
.stq-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stq-confetti i {
	position: absolute; top: -12px;
	width: 8px; height: 14px; border-radius: 2px;
	opacity: 0;
	animation: stq-fall 2.6s ease-in forwards;
}
@keyframes stq-fall {
	0%   { opacity: 1; transform: translateY(0) rotate(0); }
	100% { opacity: 0; transform: translateY(420px) rotate(520deg); }
}

/* ---------- قفل / خطا ---------- */
.stq-gate { text-align: center; }
.stq-gate-icon { font-size: 42px; margin-bottom: 10px; }
.stq-gate-title { font-size: 20px; }
.stq-gate-text { margin-bottom: 20px; font-size: 15px; opacity: .85; }

.stq-error {
	display: none;
	margin-top: 14px;
	background: #FDECEC;
	color: #B3261E;
	border: 1px solid #F6C9C6;
	border-radius: 14px;
	padding: 12px 16px;
	font-size: 14px;
}
.stq-error.is-visible { display: block; animation: stq-shake .45s ease; }
@keyframes stq-shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* ---------- موبایل ---------- */
@media (max-width: 600px) {
	.stq-card { padding: 24px 18px; border-radius: 18px; }
	.stq-option { padding: 14px; font-size: 14.5px; border-radius: 14px; }
	.stq-btn { width: 100%; padding: 15px 20px; }
	.stq-bar-row { grid-template-columns: 76px 1fr 38px; font-size: 12.5px; }
	.stq-result-emoji { font-size: 48px; }
	.stq-key { display: none; }
	.stq-orb { width: 78px; height: 78px; font-size: 32px; }
}

/* ---------- احترام به تنظیم کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
	.stq *, .stq *::before, .stq *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- همیشه لایت ---------- */
/* حالت تیره عمداً غیرفعال است؛ آزمون همیشه روشن نمایش داده می‌شود. */
.stq { color-scheme: light; }
.stq .stq-card,
.stq .stq-option { background-color: #ffffff; }
.stq .stq-q-title,
.stq .stq-intro-title,
.stq .stq-gate-title,
.stq .stq-tips-title { color: var(--stq-secondary); }

/* ---------- تصویرسازی دست‌کشیده ---------- */
.stq-art {
	--art-skin:  #F7E5D9;
	--art-scarf: color-mix(in srgb, var(--stq-primary) 16%, #ffffff);
	--art-line:  color-mix(in srgb, var(--stq-secondary) 82%, #ffffff);
	--art-blush: color-mix(in srgb, #E88E88 35%, #ffffff);

	display: flex;
	justify-content: center;
	margin: 0 auto 16px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stq-art { --art-scarf: #EDEAFC; --art-line: #3C3B4E; --art-blush: #F6D6D2; }
}

.stq-art-svg {
	width: 132px;
	height: 132px;
	overflow: visible;
	animation: stq-art-in .6s cubic-bezier(.22,1,.36,1) both, stq-float 6s ease-in-out 1s infinite;
}
.stq-art-intro .stq-art-svg { width: 168px; height: 168px; }

@keyframes stq-art-in {
	from { opacity: 0; transform: scale(.88) rotate(-3deg); }
	to   { opacity: 1; transform: none; }
}

.stq-art-scarf { fill: var(--art-scarf); stroke: none; }
.stq-art-skin  { fill: var(--art-skin);  stroke: none; }
.stq-art-blush { fill: var(--art-blush); stroke: none; }

.stq-art-line,
.stq-art-accent path,
.stq-art-accent circle {
	fill: none;
	stroke: var(--art-line);
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.stq-art-accent .stq-art-pop,
.stq-art-accent .stq-art-ring {
	stroke: var(--stq-primary);
	stroke-width: 2.2;
	animation: stq-art-pop .55s cubic-bezier(.34,1.56,.64,1) .25s both;
}
.stq-art-accent .stq-art-ring { stroke-dasharray: 5 6; animation: stq-art-pop .55s cubic-bezier(.34,1.56,.64,1) .25s both, stq-art-spin 14s linear 1s infinite; }
.stq-art-accent .stq-art-dot  { fill: var(--stq-primary); stroke: none; animation: stq-art-pop .5s cubic-bezier(.34,1.56,.64,1) .4s both; }
.stq-art-accent .stq-art-spot {
	fill: color-mix(in srgb, #E2857E 55%, #ffffff);
	stroke: var(--art-line); stroke-width: 1.4;
	animation: stq-art-pop .5s cubic-bezier(.34,1.56,.64,1) .35s both;
}
.stq-art-accent .stq-art-blot {
	fill: color-mix(in srgb, #E0A33E 45%, transparent);
	stroke: var(--art-line); stroke-width: 1.2;
	animation: stq-art-pop .5s cubic-bezier(.34,1.56,.64,1) .35s both;
}

@keyframes stq-art-pop {
	from { opacity: 0; transform: scale(.55); }
	to   { opacity: 1; transform: none; }
}
@keyframes stq-art-spin { to { stroke-dashoffset: -110; } }

.stq-art-accent > * { transform-box: fill-box; transform-origin: center; }

@media (max-width: 600px) {
	.stq-art-svg { width: 104px; height: 104px; }
	.stq-art-intro .stq-art-svg { width: 132px; height: 132px; }
	.stq-art { margin-bottom: 12px; }
}