/**
 * TalkiLand Panel — استایل پایه پنل‌های سه‌گانه (RTL / موبایل‌محور)
 */

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

html {
	-webkit-text-size-adjust: 100%;
}

body.tl-app {
	margin: 0;
	font-family: var(--tl-font);
	font-size: var(--tl-font-size);
	line-height: var(--tl-line-height);
	color: var(--tl-text);
	background: var(--tl-bg);
	direction: rtl;
}

body.tl-app a {
	color: var(--tl-primary);
	text-decoration: none;
}

body.tl-app a:hover {
	color: var(--tl-primary-ink);
}

body.tl-app :focus-visible {
	outline: none;
	box-shadow: var(--tl-focus-ring);
	border-radius: var(--tl-radius-sm);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Layout ---------- */

/*
 * سایدبار Sticky با ارتفاع 100vh است، پس در صفحات بلند رنگش وسط صفحه تمام
 * می‌شد و زیرش یک ستون سفیدِ ناجور می‌ماند. این نوار پس‌زمینه، همان رنگ
 * سایدبار را برای تمام ارتفاع صفحه پشت آن می‌کشد.
 */
.tl-layout {
	/* گرید ۲ستونه، دقیقاً مثل .shell طرح مرجع (نه Flex). */
	display: grid;
	grid-template-columns: var(--tl-sidebar-width) 1fr;
	min-height: 100vh;
	background-image: linear-gradient(185deg, var(--tl-sidebar-bg), var(--tl-sidebar-bg-2));
	background-repeat: no-repeat;
	background-size: var(--tl-sidebar-width) 100%;
	background-position: right top;
}

[dir="ltr"] .tl-layout {
	background-position: left top;
}

/* در حالت کشویی سایدبار روی محتوا شناور است، پس نوار پس‌زمینه نباید بماند. */
@media (max-width: 900px) {
	.tl-layout {
		grid-template-columns: 1fr;
		background-image: none;
	}
}

.tl-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.tl-content {
	flex: 1;
	width: 100%;
	padding: 26px;
	display: grid;
	gap: var(--tl-gap-lg);
	align-content: start;
}

/*
 * سقف عرض عمداً برداشته شد: طرح مرجع (.content) هیچ max-width ندارد و ستون
 * محتوا تمام فضای باقی‌مانده را پر می‌کند. سقف قبلی (۱۳۶۰px) روی نمایشگر
 * عریض دو نوار خالی در طرفین می‌ساخت — همان «کنارها فاصله داره» گزارش‌شده.
 */

/* ---------- Sidebar ---------- */

.tl-sidebar {
	/* عرض از ستون گرید می‌آید؛ width اینجا فقط برای حالت کشویی (position:fixed) لازم است. */
	width: var(--tl-sidebar-width);
	background: linear-gradient(185deg, var(--tl-sidebar-bg), var(--tl-sidebar-bg-2));
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 14px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.tl-sidebar__brand {
	padding: 4px 8px 18px;
}

.tl-sidebar__brand a {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #ffffff;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.2px;
}

.tl-sidebar__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--tl-primary-fill-strong), var(--tl-accent));
	color: #fff;
	font-weight: 800;
	font-size: 19px;
	box-shadow: var(--tl-shadow-brand);
}

.tl-sidebar__panel-label {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--tl-sidebar-text);
	opacity: 0.7;
}

.tl-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* آیکون خطی کنار هر آیتم منو (طرح مرجع: .nav a .ico). */
.tl-nav-ico {
	width: 20px;
	height: 20px;
	flex: none;
	opacity: 0.9;
}

.tl-sidebar__link.is-active .tl-nav-ico {
	opacity: 1;
}

.tl-sidebar__label {
	flex: 1;
	min-width: 0;
}

/* شعاع آیتم‌های سایدبار مستطیلِ گردشده است (مثل طرح مرجع)، نه پیل کامل. */
.tl-sidebar__link {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: var(--tl-radius-sm);
	color: var(--tl-sidebar-text);
	font-size: 14.5px;
	transition: background-color var(--tl-duration) var(--tl-ease), color var(--tl-duration) var(--tl-ease);
}

.tl-sidebar__link:hover {
	background: var(--tl-sidebar-hover);
	color: #ffffff;
}

/*
 * گزینهٔ فعال: گرادیانِ رنگ برند با متن سفید، مثل طرح مرجع
 * (linear-gradient(100deg, accent, accent-strong) + color:#fff).
 * از --tl-primary-fill-strong استفاده می‌شود نه خودِ --tl-primary: متن این
 * آیتم ۱۴.۵px نیمه‌درشت است، یعنی متن معمولی با آستانهٔ ۴.۵:۱.
 */
.tl-sidebar__link.is-active,
.tl-sidebar__link.is-active:hover {
	background: linear-gradient(100deg, var(--tl-primary-fill-strong), color-mix(in srgb, var(--tl-primary-fill-strong) 82%, black));
	color: #fff;
	font-weight: var(--tl-weight-semibold);
	box-shadow: var(--tl-shadow-brand);
}

.tl-sidebar__footer {
	margin-top: auto;
	border-top: 1px solid var(--tl-sidebar-divider);
	padding-top: 10px;
	margin-top: auto;
}

.tl-sidebar__link--logout {
	color: #ffb1a3;
	border-bottom: 0;
}

.tl-sidebar__link--logout:hover {
	background: var(--tl-sidebar-hover);
	color: #ffd3ca;
}

/* ---------- Header ---------- */

/*
 * در طرح مرجع نوار بالا سطح جداگانه‌ای نیست: هم‌رنگ پس‌زمینهٔ صفحه است و خط
 * جداکننده ندارد؛ فقط عنوان صفحه در یک سو و چیپ کاربر/زنگ در سوی دیگر. برای
 * Sticky بودن پس‌زمینهٔ نیمه‌شفافِ هم‌رنگِ صفحه + Blur نگه داشته شده تا محتوا
 * هنگام اسکرول از زیرش پیدا نباشد.
 */
.tl-header {
	display: flex;
	align-items: center;
	gap: var(--tl-gap);
	min-height: 72px;
	padding: var(--tl-space-4) var(--tl-gap-lg);
	background: color-mix(in srgb, var(--tl-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--tl-text);
	border-bottom: 1px solid var(--tl-line);
	position: sticky;
	top: 0;
	z-index: var(--tl-z-header);
}

.tl-header__title {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	flex: 1;
	color: var(--tl-text);
}

.tl-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--tl-line);
	background: var(--tl-surface);
	color: var(--tl-text);
	border-radius: 12px;
	font-size: 18px;
	cursor: pointer;
	box-shadow: var(--tl-shadow-sm);
	transition: transform var(--tl-duration) var(--tl-ease), border-color var(--tl-duration) var(--tl-ease);
}

.tl-header__menu-toggle:hover {
	transform: translateY(-1px);
	border-color: var(--tl-primary);
}

/* دکمهٔ آیکونیِ نوار بالا (زنگ اعلان‌ها) — طرح مرجع: .iconbtn. */
.tl-iconbtn {
	position: relative;
	width: 40px;
	height: 40px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid var(--tl-line);
	border-radius: 12px;
	background: var(--tl-surface);
	color: var(--tl-text-muted);
	box-shadow: var(--tl-shadow-sm);
	transition: transform var(--tl-duration) var(--tl-ease), color var(--tl-duration) var(--tl-ease), border-color var(--tl-duration) var(--tl-ease);
}

.tl-iconbtn:hover {
	transform: translateY(-1px);
	color: var(--tl-primary-ink);
	border-color: var(--tl-primary);
}

/* نشان «اعلان خوانده‌نشده»؛ تعدادش در aria-label دکمه اعلام می‌شود. */
.tl-iconbtn__dot {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tl-primary-active);
	border: 2px solid var(--tl-surface);
}

.tl-header__user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 6px 5px 14px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius-pill);
	background: var(--tl-surface);
	box-shadow: var(--tl-shadow-sm);
}

.tl-header__user-name {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--tl-text);
}

.tl-header__avatar {
	border-radius: 50%;
}

/* ---------- Cards & Grid ---------- */

.tl-grid--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--tl-gap-lg);
}

/*
 * سه سطح کارت طبق سلسله‌مراتب اهمیت. طبق طرح مرجع، کارت‌ها **فقط با حاشیهٔ
 * مویی** از پس‌زمینه جدا می‌شوند و هیچ سایه‌ای ندارند — همین چیزی است که حس
 * «مینیمال و مرتب» را می‌سازد. سایه فقط در Hover و بسیار محو ظاهر می‌شود.
 *  - .tl-card (پیش‌فرض): «Standard».
 *  - .tl-card--primary: اطلاعات شاخص؛ فقط شعاع بزرگ‌تر (نه سایهٔ سنگین‌تر).
 *  - .tl-card--flat: اطلاعات فرعی؛ بدون Border/Shadow، فقط فاصله + تایپوگرافی.
 */
.tl-card {
	background: var(--tl-surface);
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	box-shadow: var(--tl-shadow);
	padding: var(--tl-gap-lg);
	transition: border-color var(--tl-duration) var(--tl-ease);
}

.tl-card--primary {
	border-radius: var(--tl-radius-lg);
}

.tl-card--flat {
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/*
 * عنوان کارت: متنِ ساده و پُروزن، بدون نشانگر رنگی (طرح مرجع هیچ عنوانی نوار
 * گرادیان ندارد؛ آن ::before قبلی در ۳۴ Template تکرار می‌شد).
 */
.tl-card__title {
	margin: 0 0 var(--tl-space-4);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--tl-text);
	display: flex;
	align-items: center;
	gap: 9px;
}

/*
 * «نوار عنوان» طرح مرجع (.card__head): عنوان تا لبه‌های کارت کشیده می‌شود و یک
 * خط مویی زیرش می‌آید. با Margin منفی ساخته شده تا هیچ‌یک از ۲۹ Template که
 * ساختار .tl-card > .tl-card__title + .tl-card__body دارند لازم نباشد عوض شود.
 * فقط برای فرزند مستقیم .tl-card اعمال می‌شود تا کاربردهای مستقلِ عنوان نشکنند.
 */
.tl-card > .tl-card__title {
	margin: calc(-1 * var(--tl-gap-lg)) calc(-1 * var(--tl-gap-lg)) var(--tl-gap-lg);
	padding: var(--tl-space-4) var(--tl-gap-lg);
	border-bottom: 1px solid var(--tl-line);
}

.tl-card--flat > .tl-card__title {
	margin: 0 0 var(--tl-space-4);
	padding: 0;
	border-bottom: none;
}

/* لینک کمکیِ سمت مقابلِ عنوان کارت («تقویم کامل ›» / «همه ›» در طرح مرجع). */
.tl-card__link {
	margin-inline-start: auto;
	font-size: var(--tl-font-size-sm);
	font-weight: var(--tl-weight-medium);
	color: var(--tl-primary-ink);
	white-space: nowrap;
}

.tl-card__link:hover {
	color: var(--tl-primary-active);
	text-decoration: underline;
}

.tl-profile-summary {
	display: flex;
	align-items: center;
	gap: var(--tl-gap);
}

.tl-profile-summary__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.tl-profile-summary__name {
	margin: 0;
	font-weight: 700;
	font-size: 16px;
}

.tl-profile-summary__meta {
	margin: 2px 0 0;
	color: var(--tl-text-muted);
	font-size: 13px;
}

.tl-datetime__date {
	margin: 0;
	font-weight: 700;
	font-size: 17px;
}

.tl-datetime__time {
	margin: 4px 0;
	font-size: 15px;
	color: var(--tl-secondary);
}

.tl-stat__value {
	margin: 0;
	font-size: var(--tl-font-size-stat);
	font-weight: var(--tl-weight-bold);
	color: var(--tl-primary-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */

.tl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--tl-radius-sm);
	border: 1px solid var(--tl-line);
	background: var(--tl-surface);
	color: var(--tl-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--tl-weight-medium);
	cursor: pointer;
	box-shadow: var(--tl-shadow-sm);
	transition: background-color var(--tl-duration) var(--tl-ease), border-color var(--tl-duration) var(--tl-ease), color var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

.tl-btn:hover {
	border-color: var(--tl-primary);
	color: var(--tl-primary-ink);
}

/* Secondary از پایه .tl-btn (سفید + Border) به‌ارث می‌رسد؛ این کلاس فقط نام
   صریح می‌دهد تا Templateهای آینده به‌جای حذفِ هر مدیفایر، آن را انتخاب کنند. */
.tl-btn--secondary {
	background: var(--tl-surface);
	color: var(--tl-text);
	border-color: var(--tl-border);
}

.tl-btn--primary {
	background: var(--tl-primary);
	color: var(--tl-text-on-primary);
	border-color: transparent;
}

.tl-btn--primary:hover {
	background: var(--tl-primary-hover);
	color: var(--tl-text-on-primary);
	border-color: transparent;
}

.tl-btn--ghost {
	background: transparent;
	box-shadow: none;
}

/*
 * دکمهٔ «خط‌دار» رنگ برند: پس‌زمینهٔ شفاف + حاشیه و متنِ رنگ برند — دقیقاً
 * الگوی دکمه‌های «ورود به کلاس»/«جزئیات» در طرح مرجع. متن از --tl-primary-ink
 * است که تضمین ۴.۵:۱ روی سفید دارد (نه خودِ --tl-primary که برای متن روی
 * زمینهٔ روشن کنتراست کافی ندارد).
 */
.tl-btn--outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--tl-primary) 55%, transparent);
	color: var(--tl-primary-ink);
	border-radius: var(--tl-radius-pill);
	box-shadow: none;
}

.tl-btn--outline:hover {
	background: var(--tl-primary-fill-strong);
	border-color: transparent;
	color: #fff;
}

.tl-btn--danger {
	/* --tl-danger-strong ثابت است (مستقل از حالت روشن/تاریک) تا متن سفید
	   همیشه حداقل ۴.۵:۱ کنتراست WCAG AA داشته باشد. */
	background: var(--tl-danger-strong);
	color: #fff;
	border-color: transparent;
}

.tl-btn--danger:hover {
	color: #fff;
	border-color: transparent;
	filter: brightness(1.1);
}

.tl-btn:disabled,
.tl-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* ---------- States ---------- */

.tl-empty-state {
	text-align: center;
	padding: 48px var(--tl-gap-lg);
	display: grid;
	gap: 12px;
	justify-items: center;
}

.tl-empty-state__title {
	margin: 0;
	font-size: 17px;
}

.tl-skeleton {
	background: linear-gradient(90deg, var(--tl-border) 25%, var(--tl-bg) 50%, var(--tl-border) 75%);
	background-size: 200% 100%;
	animation: tl-skeleton 1.4s ease infinite;
	border-radius: var(--tl-radius-sm);
	color: transparent;
	pointer-events: none;
	user-select: none;
}

@keyframes tl-skeleton {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/*
 * نوار رنگی ظریف در سمت راست (نه Border دورتادور)؛ نشانِ دایره‌ای ساده
 * به‌جای Emoji/آیکون تصویری. border-inline-start طبق سمتِ RTL همیشه سمت
 * راست را رنگ می‌کند، مستقل از جهت سند.
 */
.tl-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: var(--tl-space-3) var(--tl-space-4);
	border-radius: var(--tl-radius-sm);
	border-inline-start: 3px solid;
	background: var(--tl-surface-soft);
	font-size: 14px;
	line-height: var(--tl-line-height);
}

.tl-alert::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-block-start: 6px;
	border-radius: 50%;
	background: currentColor;
}

.tl-alert--success { background: var(--tl-success-soft); border-color: var(--tl-success); color: var(--tl-success); }
.tl-alert--warning { background: var(--tl-warning-soft); border-color: var(--tl-warning); color: var(--tl-warning); }
.tl-alert--error   { background: var(--tl-danger-soft);  border-color: var(--tl-danger);  color: var(--tl-danger); }
.tl-alert--info    { background: var(--tl-info-soft);    border-color: var(--tl-info);    color: var(--tl-info); }

/* ---------- Responsive ---------- */

/*
 * Breakpoint سایدبار روی ۹۰۰px تنظیم شد (همان مقدار طرح مرجع) تا روی
 * نمایشگرهای متوسط، سایدبارِ ثابت بیشتر دیده شود. تفاوت با طرح: طرح زیر این
 * عرض سایدبار را کاملاً display:none می‌کند و هیچ راهی برای بازکردنش نمی‌گذارد؛
 * این‌جا به‌جای حذف، کشویی می‌شود و با دکمهٔ منو باز می‌شود — وگرنه در موبایل
 * هیچ راه پیمایشی باقی نمی‌ماند.
 */
@media (max-width: 900px) {

	.tl-header__menu-toggle {
		display: inline-flex;
	}

	.tl-sidebar {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: var(--tl-z-modal);
		transform: translateX(100%);
		transition: transform var(--tl-duration) var(--tl-ease);
		box-shadow: var(--tl-shadow-lg);
	}

	/* در RTL سایدبار به لبهٔ راست می‌چسبد؛ translateX مثبت آن را بیرون می‌برد.
	   در LTR باید قرینه باشد وگرنه از سمت اشتباه بیرون می‌رود. */
	[dir="ltr"] .tl-sidebar {
		transform: translateX(-100%);
	}

	.tl-layout.is-sidebar-open .tl-sidebar,
	[dir="ltr"] .tl-layout.is-sidebar-open .tl-sidebar {
		transform: translateX(0);
	}

	/*
	 * پس‌زمینهٔ تیره پشت سایدبارِ باز. نبودنش باعث می‌شد سایدبارِ کشویی روی
	 * محتوا «شناور و بی‌ربط» دیده شود و کاربر فکر کند اصلاً سایدباری وجود ندارد.
	 */
	.tl-layout::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: var(--tl-z-overlay);
		background: rgb(15 16 30 / 45%);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--tl-duration) var(--tl-ease), visibility var(--tl-duration) var(--tl-ease);
	}

	.tl-layout.is-sidebar-open::after {
		opacity: 1;
		visibility: visible;
	}

	.tl-content {
		padding: var(--tl-gap);
	}
}

/* ---------- Forms ---------- */

.tl-form {
	display: grid;
	gap: var(--tl-space-5);
	max-width: 640px;
}

.tl-field {
	display: grid;
	gap: var(--tl-space-2);
}

.tl-field label {
	font-weight: var(--tl-weight-medium);
	font-size: 14px;
}

.tl-field input[type="text"],
.tl-field input[type="email"],
.tl-field textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	font-family: inherit;
	font-size: 14px;
	background: var(--tl-surface);
	color: var(--tl-text);
	transition: border-color var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

.tl-field textarea {
	min-height: 110px;
	resize: vertical;
}

.tl-field input:focus,
.tl-field textarea:focus {
	outline: none;
	border-color: var(--tl-primary);
	box-shadow: var(--tl-focus-ring);
}

.tl-field input[type="file"] {
	font-size: 13px;
}

.tl-field__hint {
	margin: 0;
	font-size: 12px;
	color: var(--tl-text-muted);
}

.tl-required {
	color: var(--tl-danger);
}

/* ---------- Badges & misc ---------- */

.tl-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 27px;
	padding: 3px 12px;
	border-radius: var(--tl-radius-pill);
	font-size: 12.5px;
	font-weight: var(--tl-weight-semibold);
	background: var(--tl-border);
	color: var(--tl-secondary);
}

/* برای Badge کنار یک عنوان بزرگ‌تر (مثلاً نام مدرس در کارت هیرو داشبورد)؛
   جایگزین style="vertical-align:middle;font-size:12px" پراکنده در Template. */
.tl-badge--inline {
	vertical-align: middle;
	font-size: 12px;
	min-height: auto;
}

.tl-badge--approved { background: var(--tl-success-soft); color: var(--tl-success); }
.tl-badge--draft    { background: var(--tl-warning-soft); color: var(--tl-warning); }
.tl-badge--suspended{ background: var(--tl-danger-soft);  color: var(--tl-danger); }

.tl-muted {
	color: var(--tl-text-muted);
}

/* ---------- Utility (جایگزین Inline CSS پراکنده در Templateها) ---------- */

.tl-stack {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-3);
}

.tl-mt-4 {
	margin-top: var(--tl-space-4);
}

.tl-table__col-tight {
	width: 1%;
	white-space: nowrap;
}

.tl-audio {
	width: 100%;
}

.tl-count {
	display: inline-block;
	min-width: 22px;
	text-align: center;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--tl-primary-soft);
	color: var(--tl-primary-ink-soft);
	font-size: 12px;
}

.tl-subheading {
	margin: 16px 0 8px;
	font-size: 14px;
	color: var(--tl-text-muted);
}

.tl-audio {
	width: 100%;
	max-width: 420px;
}

/* ---------- Revisions ---------- */

.tl-revision {
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: var(--tl-gap);
	margin-bottom: var(--tl-gap);
}

.tl-revision__head {
	display: flex;
	justify-content: space-between;
	gap: var(--tl-gap);
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

.tl-revision__fields dt {
	font-weight: 600;
	font-size: 13px;
	color: var(--tl-text-muted);
	margin-top: 8px;
}

.tl-revision__fields dd {
	margin: 2px 0 0;
}

.tl-revision__photo {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--tl-radius-sm);
	border: 1px solid var(--tl-border);
	margin-bottom: 6px;
}

.tl-revision__actions {
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.tl-revision__actions .tl-btn {
	justify-self: start;
	margin-inline-end: 8px;
}

/* ---------- Tables ---------- */

.tl-table-wrap {
	overflow-x: auto;
}

.tl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.tl-table th,
.tl-table td {
	text-align: right;
	padding: var(--tl-space-4) var(--tl-space-3);
	border-bottom: 1px solid var(--tl-border);
	min-height: 56px;
}

.tl-table th {
	color: var(--tl-text-muted);
	font-size: 13px;
	font-weight: var(--tl-weight-semibold);
	background: var(--tl-surface-soft);
}

.tl-table tbody tr {
	transition: background-color var(--tl-duration) var(--tl-ease);
}

.tl-table tbody tr:hover {
	background: var(--tl-surface-soft);
}

/*
 * روی همهٔ سلول‌های جدول (نه فقط dir="ltr")، چون مبلغ/تعداد در بسیاری از
 * جدول‌ها بدون آن Attribute رندر می‌شود؛ روی متن غیرعددی هیچ اثری ندارد.
 */
.tl-table td {
	font-variant-numeric: tabular-nums;
}

.tl-table td[dir="ltr"] {
	text-align: start;
}

.tl-compare-table th {
	white-space: nowrap;
}

.tl-compare-table td {
	min-width: 180px;
	vertical-align: top;
}

.tl-suggestion-score {
	font-size: 12px;
}

/* ---------- Pagination ---------- */

.tl-pagination {
	display: flex;
	gap: 6px;
	margin-top: var(--tl-gap);
	flex-wrap: wrap;
}

.tl-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	text-align: center;
	padding: 6px 10px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	color: var(--tl-text);
	transition: border-color var(--tl-duration) var(--tl-ease), background-color var(--tl-duration) var(--tl-ease);
}

.tl-pagination__item:hover {
	border-color: var(--tl-primary);
}

.tl-pagination__item.is-current {
	background: var(--tl-primary);
	border-color: var(--tl-primary);
	color: var(--tl-text-on-primary);
	font-weight: var(--tl-weight-semibold);
}

.tl-pagination__item[aria-disabled="true"],
.tl-pagination__item.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Public apply page ---------- */

.tl-apply-wrap {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding: var(--tl-gap-lg) var(--tl-gap);
}

.tl-apply {
	width: 100%;
	max-width: 680px;
}

.tl-apply__header {
	text-align: center;
	display: grid;
	gap: 8px;
	justify-items: center;
	margin-bottom: var(--tl-gap);
}

.tl-apply__header h1 {
	margin: 0;
	font-size: 22px;
}

.tl-apply__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--tl-text);
}

/* Honeypot — خارج از دید و دسترس کاربر واقعی */
.tl-hp {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tl-phone-row {
	display: flex;
	gap: 8px;
	direction: ltr;
}

.tl-phone-row input:last-child {
	flex: 1;
}

.tl-field--consent label {
	font-weight: 400;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.7;
}

/* ---------- Term selection ---------- */

.tl-field--terms {
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 12px;
	margin: 0;
}

.tl-field--terms legend {
	font-weight: 600;
	font-size: 14px;
	padding: 0 6px;
}

.tl-term-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.tl-term-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
}

/* ---------- فرم ظاهر: انتخاب پالت رنگی + حالت نمایش ---------- */

.tl-palette-picker,
.tl-mode-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.tl-palette-option,
.tl-mode-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 400;
	min-height: 44px;
}

.tl-palette-option__swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex: none;
	border: 1px solid var(--tl-border);
	box-shadow: var(--tl-shadow-sm);
}

.tl-subject-assign {
	min-width: 220px;
}

.tl-subject-assign summary {
	cursor: pointer;
	color: var(--tl-primary);
	font-size: 13px;
}

.tl-subject-assign form {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---------- Scheduling: weekly plan ---------- */

.tl-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tl-gap);
	align-items: flex-end;
}

.tl-field-row .tl-field {
	min-width: 150px;
	flex: 1;
}

/* گروه دکمه‌های اقدام (تأیید/رد، رنج گزارش، پاسخ تیکت...)؛ بدون این، دکمه‌ها فقط با فاصلهٔ سفید HTML از هم جدا می‌شدند. */
.tl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tl-gap);
	margin-top: var(--tl-gap);
}

/* .tl-form--inline/--inline-select: فرم‌های کوتاه که نباید در یک ستون ۶۴۰px پشت هم بیفتند. */
.tl-form--inline,
.tl-form--inline-select {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--tl-gap);
	max-width: none;
}

.tl-form--inline > .tl-field {
	min-width: 200px;
	flex: 1;
}

.tl-field select,
.tl-field input[type="time"],
.tl-field input[type="date"],
.tl-field input[type="number"] {
	width: 100%;
	min-height: 46px;
	padding: 9px 14px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	font-family: inherit;
	font-size: 14px;
	background: var(--tl-surface);
	color: var(--tl-text);
	transition: border-color var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

.tl-field select:focus,
.tl-field input[type="time"]:focus,
.tl-field input[type="date"]:focus,
.tl-field input[type="number"]:focus {
	outline: none;
	border-color: var(--tl-primary);
	box-shadow: var(--tl-focus-ring);
}

.tl-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.tl-details > summary {
	list-style: none;
	margin-top: var(--tl-gap);
	width: fit-content;
	border: 1px dashed var(--tl-primary);
	background: transparent;
	color: var(--tl-primary-ink);
}

.tl-details > summary::-webkit-details-marker { display: none; }

.tl-details[open] > summary {
	margin-bottom: var(--tl-gap);
}

.tl-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(120px, 1fr));
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.tl-week__day {
	background: var(--tl-bg);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 10px;
	display: grid;
	gap: 8px;
	align-content: start;
	min-height: 96px;
}

.tl-week__day-name {
	margin: 0;
	font-size: 13px;
	color: var(--tl-text-muted);
	font-weight: 700;
}

.tl-week__empty {
	margin: 0;
	font-size: 12px;
	color: var(--tl-text-muted);
}

.tl-rule-chip {
	background: var(--tl-primary-soft);
	border: 1px solid var(--tl-primary);
	border-radius: var(--tl-radius-sm);
	padding: 8px 10px;
	display: grid;
	gap: 2px;
	position: relative;
	font-size: 13px;
}

.tl-rule-chip__time {
	font-weight: 700;
	color: var(--tl-primary-ink);
}

.tl-rule-chip__meta {
	font-size: 11px;
	color: var(--tl-text-muted);
}

.tl-rule-chip__remove {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	margin: 0;
}

.tl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tl-border);
	background: var(--tl-surface);
	border-radius: var(--tl-radius-sm);
	width: 44px;
	height: 44px;
	flex: none;
	line-height: 1;
	font-size: 14px;
	cursor: pointer;
	color: var(--tl-text-muted);
	transition: color var(--tl-duration) var(--tl-ease), border-color var(--tl-duration) var(--tl-ease), background-color var(--tl-duration) var(--tl-ease);
}

.tl-icon-btn:hover {
	color: var(--tl-primary);
	border-color: var(--tl-primary);
}

.tl-icon-btn--danger:hover {
	color: var(--tl-danger);
	border-color: var(--tl-danger);
	background: var(--tl-danger-soft);
}

.tl-icon-btn--danger { color: var(--tl-danger); }

/* ---------- Exceptions list ---------- */

.tl-exception-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.tl-exception {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
}

.tl-exception--block { border-inline-start: 3px solid var(--tl-danger); }
.tl-exception--extra { border-inline-start: 3px solid var(--tl-success); }

.tl-exception form { margin-inline-start: auto; }

/* ---------- Duration selection (teacher) ---------- */

.tl-duration-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	background: var(--tl-surface);
}

.tl-duration-option.is-unpriced { opacity: 0.65; }

.tl-duration-option__price {
	font-size: 12px;
	color: var(--tl-text-muted);
}

/* ---------- Duration editor (manager) ---------- */

.tl-duration-editor {
	display: grid;
	gap: 8px;
	max-width: 460px;
}

.tl-duration-editor__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tl-duration-editor__row input[type="number"] {
	width: 100px;
}

.tl-duration-editor__active {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
}

/* ---------- Slot calendar widget ---------- */

.tl-slotcal {
	display: grid;
	gap: var(--tl-gap);
}

.tl-slotcal__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.tl-slotcal__nav { padding: 8px 14px; border-color: var(--tl-border); }

.tl-slotcal__range {
	font-size: 13px;
	color: var(--tl-text-muted);
	margin-inline: auto;
}

.tl-slotcal__duration { max-width: 160px; }

/* --- مینی‌تقویم دو ماهه شمسی --- */

.tl-minical-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--tl-gap);
}

.tl-minical {
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	overflow: hidden;
	background: var(--tl-surface);
}

.tl-minical__title {
	background: var(--tl-bg);
	border-bottom: 1px solid var(--tl-border);
	padding: 8px 12px;
	font-weight: 700;
	font-size: 14px;
}

.tl-minical__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tl-minical__table th {
	padding: 6px 0;
	font-size: 12px;
	color: var(--tl-text-muted);
	font-weight: 600;
	text-align: center;
}

.tl-minical__table td {
	text-align: center;
	padding: 2px;
}

.tl-minical__day {
	width: 100%;
	border: 1px solid transparent;
	background: transparent;
	border-radius: var(--tl-radius-sm);
	padding: 6px 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--tl-primary-ink);
	cursor: pointer;
}

.tl-minical__day:hover:not(:disabled) {
	background: var(--tl-primary-soft);
}

.tl-minical__day:disabled {
	color: var(--tl-text-muted);
	opacity: 0.45;
	cursor: default;
}

.tl-minical__day.is-today {
	border-color: var(--tl-primary);
	font-weight: 700;
}

.tl-minical__day.is-selected {
	background: var(--tl-primary);
	color: var(--tl-text-on-primary);
	font-weight: 700;
}

/* --- جدول هفتگی: ستون = روز، سطر = ساعت --- */

.tl-weekgrid {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	background: var(--tl-surface);
}

.tl-weekgrid th,
.tl-weekgrid td {
	border: 1px solid var(--tl-border);
	text-align: center;
	padding: 8px 6px;
	font-size: 13px;
}

.tl-weekgrid thead th {
	background: var(--tl-bg);
}

.tl-weekgrid__weekday {
	display: block;
	font-weight: 700;
}

.tl-weekgrid__date {
	display: block;
	font-size: 12px;
	color: var(--tl-text-muted);
	margin-top: 2px;
}

.tl-weekgrid__day.is-today .tl-weekgrid__weekday,
.tl-weekgrid__day.is-today .tl-weekgrid__date {
	color: var(--tl-primary-ink);
}

.tl-weekgrid__today {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--tl-primary);
	color: var(--tl-text-on-primary);
	font-size: 11px;
}

.tl-weekgrid__day.is-focus {
	box-shadow: inset 0 -3px 0 var(--tl-primary);
}

.tl-weekgrid__counts th,
.tl-weekgrid__counts td {
	background: var(--tl-bg);
	font-size: 12px;
	color: var(--tl-text-muted);
}

.tl-weekgrid__counts td.has-slots {
	color: var(--tl-primary-ink);
	font-weight: 700;
}

.tl-weekgrid__time {
	background: var(--tl-bg);
	font-weight: 600;
	white-space: nowrap;
}

.tl-weekgrid tbody td.is-today {
	background: var(--tl-primary-soft);
	background: color-mix(in srgb, var(--tl-primary-soft) 45%, var(--tl-surface));
}

.tl-weekgrid .tl-slot {
	display: inline-block;
	padding: 4px 10px;
	min-width: 92px;
}

.tl-weekgrid__dash {
	color: var(--tl-text-muted);
	opacity: 0.6;
}

.tl-weekgrid__sk {
	padding: 32px;
	text-align: center;
	border-radius: var(--tl-radius-sm);
}

.tl-slot {
	display: block;
	text-align: center;
	padding: 6px 8px;
	border-radius: var(--tl-radius-sm);
	font-size: 13px;
	border: 1px solid transparent;
}

.tl-slot--free {
	background: var(--tl-success-soft);
	border-color: var(--tl-success);
	color: var(--tl-success);
	font-weight: 600;
}

.tl-slot--selected {
	background: var(--tl-primary);
	border-color: var(--tl-primary-hover);
	color: var(--tl-text-on-primary);
}

.tl-slot--blocked {
	background: var(--tl-danger-soft);
	border-color: var(--tl-danger);
	color: var(--tl-danger);
	text-decoration: line-through;
}

.tl-slot--booked {
	background: var(--tl-border);
	color: var(--tl-text-muted);
}

@media (max-width: 720px) {
	.tl-week {
		grid-template-columns: repeat(7, 130px);
	}

	.tl-slotcal__body {
		overflow-x: auto;
	}
}

/* ---------- Booking bar & lists ---------- */

.tl-booking-bar {
	position: sticky;
	bottom: max(var(--tl-gap), env(safe-area-inset-bottom));
	display: grid;
	gap: 10px;
	border-color: var(--tl-primary);
	box-shadow: var(--tl-shadow-lg);
}

.tl-booking-bar__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
}

.tl-booking-bar__summary {
	margin: 0;
	font-weight: 700;
}

.tl-booking-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tl-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}

button.tl-slot--free {
	cursor: pointer;
	font-family: inherit;
	width: 100%;
	transition: background-color var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

button.tl-slot--free:hover { box-shadow: var(--tl-shadow-sm); }

button.tl-slot--free.tl-slot--selected {
	background: var(--tl-primary);
	border-color: var(--tl-primary-hover);
	color: var(--tl-text-on-primary);
}

.tl-booking {
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: var(--tl-gap);
	margin-bottom: var(--tl-gap);
	display: grid;
	gap: 8px;
}

.tl-booking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.tl-booking__items {
	list-style: disc;
	margin: 0;
	padding-inline-start: 20px;
	font-size: 13px;
	color: var(--tl-secondary);
}

.tl-booking__items:empty { display: none; }

.tl-booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* هر رزروِ قطعی می‌تواند چند جلسه داشته باشد؛ فهرست بدون این، فقط بولت پیش‌فرض مرورگر بود. */
.tl-booking__sessions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.tl-session {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--tl-radius-sm);
	background: var(--tl-surface-soft);
	font-size: 13px;
}

/* بدون کلاس پایهٔ .tl-details (Summary این‌جا خودش ظاهر دکمه دارد)؛ فقط علامتِ پیش‌فرض disclosure حذف می‌شود. */
.tl-session__cancel {
	margin-inline-start: auto;
}

.tl-session__cancel > summary {
	list-style: none;
}

.tl-session__cancel > summary::-webkit-details-marker {
	display: none;
}

.tl-session__cancel[open] {
	flex-basis: 100%;
	margin-top: 6px;
}

.tl-session__cancel .tl-form {
	margin-top: var(--tl-gap);
}

/* --- گفتگو (پیام‌ها و تیکت‌ها) --- */
.tl-thread {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-3, 12px);
	margin-bottom: var(--tl-space-4, 16px);
}

.tl-msg {
	max-width: 46rem;
	padding: var(--tl-space-3, 12px);
	border: 1px solid var(--tl-border, #e2e8f0);
	border-radius: var(--tl-radius, 10px);
	background: var(--tl-surface, #fff);
}

.tl-msg--own {
	margin-inline-start: auto;
	background: var(--tl-primary-soft, #f0fdfa);
	border-color: var(--tl-primary, #0f766e);
}

.tl-msg--note {
	background: var(--tl-warning-soft, #fefce8);
	border-style: dashed;
}

.tl-msg__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tl-space-2, 8px);
	align-items: center;
	font-size: 0.85em;
	color: var(--tl-text-muted);
	margin-bottom: var(--tl-space-2, 8px);
}

.tl-msg__body {
	white-space: pre-line;
	word-break: break-word;
}

.tl-attach {
	display: inline-block;
	margin-top: var(--tl-space-2, 8px);
	font-size: 0.9em;
	text-decoration: none;
}

.tl-sidebar__badge {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 0.4em;
	margin-inline-start: 0.5em;
	border-radius: 999px;
	/* --tl-danger-strong (نه --tl-danger) چون این پس‌زمینهٔ توپر است؛ --tl-danger
	   در حالت تاریک برای متنِ روی نرم روشن‌تر می‌شود و با متن سفید فقط ۳.۶:۱ می‌داد. */
	background: var(--tl-danger-strong, #c33940);
	color: #fff;
	font-size: 0.78em;
	text-align: center;
}

.tl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-2, 8px);
}

/* --- امتیاز ستاره‌ای --- */
.tl-stars {
	color: var(--tl-warning);
	letter-spacing: 2px;
	white-space: nowrap;
}

/*
 * روی سطح تیرهٔ ثابتِ هیروی پروفایل عمومی، --tl-warning (کهربایی تیره، برای
 * زمینهٔ روشن) فقط ~۳.۲:۱ کنتراست می‌داد. --tl-accent (طلاییِ روشن‌تر) آنجا
 * ~۹.۳:۱ می‌دهد و برای ستارهٔ امتیاز هم مناسب‌تر است.
 */
.tl-pub-hero .tl-stars {
	color: var(--tl-accent);
}

/* ---------- صفحات عمومی (فهرست و پروفایل مدرس) ---------- */

.tl-pub-shell {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--tl-gap-lg);
}

.tl-pub-topbar {
	background: var(--tl-surface);
	border-bottom: 1px solid var(--tl-border);
	position: sticky;
	top: 0;
	z-index: var(--tl-z-header);
}

.tl-pub-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tl-gap);
	padding-block: 10px;
	flex-wrap: wrap;
}

.tl-pub-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 17px;
	color: var(--tl-text);
}

.tl-pub-topbar__nav {
	display: flex;
	align-items: center;
	gap: var(--tl-gap);
	flex-wrap: wrap;
}

.tl-pub-topbar__nav a:not(.tl-btn) {
	color: var(--tl-secondary);
	font-weight: 600;
}

.tl-pub-topbar__nav a:not(.tl-btn):hover {
	color: var(--tl-primary);
}

/*
 * قبلاً این هیرو از رنگ روشن مرجانی به‌سمت --tl-secondary (قهوه‌ای بسیار
 * تیره) گرادیان می‌شد ولی متن با یک رنگ ثابت (--tl-text-on-primary) نوشته
 * می‌شد — همان متغیری که برای خوانایی روی رنگ CTA محاسبه شده، نه روی این
 * گرادیان؛ نتیجه در انتهای گرادیان کنتراستی معادل ۱.۳:۱ بود (کاملاً
 * ناخوانا). حالا مثل کارت هیرو داشبورد: سطح تیرهٔ ثابت + درخشش ملایم
 * برند، با متن سفید ثابت که در سراسر سطح (نه فقط یک لبه) خوانا بماند.
 */
.tl-pub-hero {
	background:
		radial-gradient(130% 160% at 85% 0%, color-mix(in srgb, var(--tl-primary) 35%, transparent), transparent 55%),
		radial-gradient(100% 130% at 10% 100%, color-mix(in srgb, var(--tl-accent) 14%, transparent), transparent 50%),
		linear-gradient(160deg, #241a17, #1a1210);
	color: #fff;
	padding-block: 44px;
	text-align: center;
}

.tl-pub-hero h1 {
	margin: 0 0 8px;
	font-size: clamp(22px, 4vw, 32px);
	color: #fff;
}

.tl-pub-hero > .tl-pub-shell > p {
	margin: 0 0 24px;
	opacity: 0.9;
}

.tl-pub-filters {
	display: flex;
	gap: 10px;
	max-width: 720px;
	margin-inline: auto;
	background: var(--tl-surface);
	padding: 10px;
	border-radius: var(--tl-radius);
	box-shadow: var(--tl-shadow-sm);
	flex-wrap: wrap;
}

.tl-pub-filters input[type="search"] {
	flex: 2 1 220px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
}

.tl-pub-filters select {
	flex: 1 1 150px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius-sm);
	padding: 10px;
	font-family: inherit;
	font-size: 14px;
	background: var(--tl-surface);
}

.tl-pub-main {
	padding-block: var(--tl-gap-lg) 48px;
	display: grid;
	gap: var(--tl-gap-lg);
}

.tl-pub-count {
	color: var(--tl-text-muted);
	font-size: 14px;
}

.tl-teacher-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: var(--tl-gap-lg);
}

.tl-teacher-card {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	box-shadow: var(--tl-shadow);
	padding: var(--tl-gap-lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow var(--tl-duration) var(--tl-ease);
}

.tl-teacher-card:hover {
	box-shadow: var(--tl-shadow);
}

.tl-teacher-card.is-selected {
	border-color: var(--tl-primary);
	box-shadow: 0 0 0 2px var(--tl-primary-soft);
}

.tl-teacher-card__selected-badge {
	align-self: flex-start;
}

.tl-teacher-card__fav button {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--tl-primary);
	padding: 4px;
}

.tl-teacher-filters__form {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tl-teacher-card__head {
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
	color: var(--tl-text);
}

.tl-teacher-card__avatar {
	border-radius: 50%;
	border: 3px solid var(--tl-primary-soft);
}

.tl-teacher-card__name {
	font-weight: var(--tl-weight-bold);
	font-size: 16px;
}

.tl-teacher-card__role {
	color: var(--tl-text-muted);
	font-size: 13px;
}

.tl-teacher-card__meta {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
}

.tl-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.tl-chip {
	background: var(--tl-primary-soft);
	color: var(--tl-primary-ink);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
}

.tl-chip--light {
	background: rgb(255 255 255 / 18%);
	color: var(--tl-text-on-primary);
}

.tl-chip--muted {
	background: var(--tl-bg);
	color: var(--tl-text-muted);
}

.tl-teacher-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--tl-border);
	padding-top: 12px;
}

.tl-teacher-card__price {
	font-weight: 700;
	font-size: 13px;
	color: var(--tl-primary-ink);
}

/* --- پروفایل عمومی --- */

.tl-pub-hero--profile {
	text-align: start;
}

.tl-pub-profile-head {
	display: flex;
	align-items: center;
	gap: var(--tl-gap-lg);
	flex-wrap: wrap;
}

.tl-pub-profile-head__avatar {
	border-radius: 50%;
	border: 4px solid rgb(255 255 255 / 35%);
	flex-shrink: 0;
}

.tl-pub-profile-head__info {
	flex: 1;
	min-width: 240px;
	display: grid;
	gap: 8px;
}

.tl-pub-profile-head__info h1 {
	margin: 0;
	font-size: clamp(20px, 3.5vw, 28px);
}

.tl-pub-profile-head__role {
	margin: 0;
	opacity: 0.9;
}

.tl-pub-profile-head__meta {
	margin: 0;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
}

.tl-pub-profile-head__info .tl-chip-row {
	justify-content: flex-start;
}

.tl-pub-profile-head__cta {
	display: grid;
	gap: 6px;
	justify-items: center;
}

/*
 * پس‌زمینه و متن ثابت (نه توکن‌های وابسته به تم): این دکمه همیشه روی سطح
 * تیرهٔ ثابت .tl-pub-hero می‌نشیند، نه سطح متغیر با تم. متن قبلی
 * (--tl-primary-hover روی --tl-surface) در حالت روشن فقط ~۳.۷:۱ کنتراست
 * داشت (زیر ۴.۵:۱ AA) و در حالت تاریک اصلاً ناخوانا می‌شد چون --tl-surface
 * خودش تیره می‌شود. --tl-primary-ink روی سفید ثابت ~۹.۳:۱ می‌دهد.
 */
.tl-btn--hero {
	background: #fff;
	color: var(--tl-primary-ink);
	font-size: 15px;
	padding: 13px 26px;
	border-radius: var(--tl-radius-pill);
	box-shadow: var(--tl-shadow-sm);
}

.tl-btn--hero:hover {
	box-shadow: var(--tl-shadow);
	color: var(--tl-primary-ink);
}

.tl-pub-profile-head__hint {
	font-size: 12px;
	opacity: 0.85;
}

.tl-pub-profile-head__fav {
	margin: 0;
}

/*
 * دکمهٔ «افزودن به علاقه‌مندی» (.tl-btn--ghost) هم روی همین سطح تیرهٔ ثابت
 * می‌نشیند؛ پایه‌اش (border/رنگ متن معمولی و Hover) برای زمینهٔ روشن
 * محاسبه شده و تقریباً نامرئی می‌شد. مثل Avatar همین بخش، حاشیهٔ سفیدِ
 * نیم‌شفاف + متن سفید.
 */
.tl-pub-hero .tl-btn--ghost {
	border-color: rgb(255 255 255 / 35%);
	color: #fff;
}

.tl-pub-hero .tl-btn--ghost:hover {
	border-color: rgb(255 255 255 / 60%);
	color: #fff;
	background: rgb(255 255 255 / 10%);
}

.tl-pub-cols {
	grid-template-columns: 2fr 1fr;
	align-items: start;
}

.tl-pub-cols__main,
.tl-pub-cols__side {
	display: grid;
	gap: var(--tl-gap-lg);
	min-width: 0;
}

.tl-pub-bio {
	line-height: 2;
}

.tl-price-list {
	list-style: none;
	margin: 0 0 var(--tl-gap);
	padding: 0;
	display: grid;
	gap: 8px;
}

.tl-price-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px dashed var(--tl-border);
	padding-bottom: 8px;
	font-size: 14px;
}

.tl-price-list li strong {
	font-variant-numeric: tabular-nums;
}

.tl-btn--block {
	display: flex;
	width: 100%;
}

.tl-pub-footer {
	border-top: 1px solid var(--tl-border);
	background: var(--tl-surface);
	padding-block: 18px;
}

.tl-pub-footer .tl-pub-shell {
	display: flex;
	justify-content: space-between;
	gap: var(--tl-gap);
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--tl-text-muted);
}

@media (max-width: 860px) {
	.tl-pub-cols {
		grid-template-columns: 1fr;
	}

	.tl-pub-profile-head {
		flex-direction: column;
		text-align: center;
	}

	.tl-pub-profile-head__info .tl-chip-row,
	.tl-pub-profile-head__meta {
		justify-content: center;
	}
}

/* --- انتخاب ساعت ۲۴ساعته --- */
.tl-time-select {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tl-time-select select {
	min-width: 64px;
}

/* --- شبکه کارهای در انتظار داشبورد مدیر --- */
.tl-queue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--tl-gap);
}

.tl-queue {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: var(--tl-space-5) var(--tl-space-3);
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-surface);
	color: var(--tl-text-muted);
	text-align: center;
	transition: border-color var(--tl-duration) var(--tl-ease);
}

.tl-queue:hover {
	border-color: color-mix(in srgb, var(--tl-primary) 35%, var(--tl-line));
}

.tl-queue__count {
	font-size: 26px;
	font-weight: var(--tl-weight-bold);
	font-variant-numeric: tabular-nums;
}

.tl-queue--hot {
	background: var(--tl-warning-soft);
	border-color: var(--tl-warning);
	color: var(--tl-warning);
}

.tl-queue__label {
	font-size: 12px;
}

/* ---------- جریان رزروِ درس‌محور (PHASE 5) ---------- */

.tl-book-steps {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--tl-gap-lg);
	font-size: 14px;
}

.tl-book-step {
	color: var(--tl-text-muted);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: var(--tl-radius-sm);
}

.tl-book-step.is-current {
	color: var(--tl-primary);
	background: var(--tl-primary-soft);
	font-weight: 700;
}

.tl-book-step.is-disabled {
	pointer-events: none;
	opacity: .55;
}

.tl-book-step__sep {
	color: var(--tl-text-muted);
}

.tl-subject-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--tl-gap-lg);
}

.tl-subject-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 22px 16px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	background: var(--tl-surface);
	color: var(--tl-text);
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

.tl-subject-tile:hover {
	border-color: var(--tl-primary);
	box-shadow: var(--tl-shadow);
}

@media (max-width: 480px) {
	.tl-book-steps {
		font-size: 12px;
	}

	.tl-subject-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}
}

/* ---------- داشبورد مدرس (PHASE 10) ---------- */

/* ستون کنارِ عرض‌ثابت ۳۴۰px و شکست در ۱۱۵۰px — همان چیدمان طرح مرجع. */
.tl-teacher-dash {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--tl-space-5);
	align-items: start;
	margin-top: var(--tl-space-5);
}

.tl-teacher-dash__main,
.tl-teacher-dash__side {
	display: grid;
	gap: var(--tl-space-5);
	align-content: start;
	min-width: 0;
}

/* نوار هفته: ۶ ستون مساوی و وسط‌چین (طرح مرجع)، در موبایل ۳ ستون. */
.tl-week-cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

@media (max-width: 640px) {
	.tl-week-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tl-week-cards__day {
	border: 1px solid var(--tl-line);
	border-radius: 14px;
	padding: 12px 8px;
	text-align: center;
	background: var(--tl-surface-soft);
	transition: transform var(--tl-duration) var(--tl-ease), border-color var(--tl-duration) var(--tl-ease);
}

.tl-week-cards__day:hover {
	transform: translateY(-2px);
	border-color: var(--tl-primary);
}

.tl-week-cards__day.is-empty {
	color: var(--tl-text-muted);
}

/*
 * روز جاری: کارتِ توپرِ رنگ برند با متن سفید (طرح مرجع). چون همهٔ متن‌های داخلش
 * کوچک‌اند، از --tl-primary-fill-strong (آستانهٔ ۴.۵:۱) استفاده می‌شود نه
 * --tl-primary-fill که برای متن بزرگ هیرو کالیبره شده است.
 */
.tl-week-cards__day.is-today {
	background: linear-gradient(160deg, var(--tl-primary-fill-strong), color-mix(in srgb, var(--tl-primary-fill-strong) 82%, black));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--tl-shadow-brand);
}

.tl-week-cards__day.is-today:hover {
	border-color: transparent;
}

.tl-week-cards__day.is-today .tl-muted {
	color: inherit;
	opacity: 0.85;
}

/* برچسب تعداد داخل کارت روز جاری: پوشش تیرهٔ نیمه‌شفاف + متن سفید (نه سفیدِ
   نیمه‌شفاف که زمینه را روشن و متن سفید را ناخوانا می‌کند). */
.tl-week-cards__day.is-today .tl-count {
	background: rgb(0 0 0 / 22%);
	color: #fff;
}

.tl-week-cards__head {
	display: grid;
	gap: 4px;
	margin-bottom: 6px;
}

.tl-week-cards__weekday {
	font-weight: 700;
	font-size: 12px;
	opacity: 0.85;
}

/* شمارهٔ روز، درشت و وسط‌چین (طرح مرجع: .day__d ۲۰px وزن ۸۰۰). */
.tl-week-cards__daynum {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* برچسب «آزاد» برای روز بی‌کلاس: بدون پس‌زمینه، کم‌رنگ (طرح مرجع). */
.tl-week-cards__free {
	font-size: 11px;
	font-weight: 700;
	color: var(--tl-text-muted);
}

.tl-week-cards__day .tl-count {
	font-size: 11px;
	font-weight: 700;
}

.tl-week-cards__times {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	display: grid;
	gap: 3px;
	font-variant-numeric: tabular-nums;
}

/*
 * ردیف پیشرفت (طرح مرجع: .cap) — عنوان و مقدار در دو سرِ یک سطر، بعد نوار.
 */
.tl-cap + .tl-cap {
	margin-top: var(--tl-space-4);
	padding-top: var(--tl-space-4);
	border-top: 1px solid var(--tl-line);
}

.tl-cap__top {
	display: flex;
	justify-content: space-between;
	gap: var(--tl-space-3);
	font-size: 13px;
	margin-bottom: 8px;
}

.tl-cap__top b {
	font-weight: 700;
}

.tl-cap__top span {
	color: var(--tl-text-muted);
	font-variant-numeric: tabular-nums;
}

/* نمودار کوچکِ روند جلسات روی کاشی آماری (طرح مرجع: .spark). */
.tl-spark {
	display: block;
	width: 100%;
	height: 30px;
	margin-top: 10px;
	overflow: visible;
	/* رنگ برند مثل طرح مرجع. خطِ روند تنها حاملِ اطلاعات نیست (عدد بزرگ کنارش
	   هست)، پس رنگِ سرزنده این‌جا مانعی ندارد. */
	color: var(--tl-primary);
}

.tl-progress {
	background: var(--tl-primary-soft);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}

.tl-progress__bar {
	background: linear-gradient(90deg, var(--tl-primary), var(--tl-accent));
	height: 100%;
	border-radius: 999px;
}

.tl-notice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.tl-card__body > .tl-notice-list {
	margin-inline: calc(-1 * var(--tl-gap-lg));
}

.tl-notice-list__item {
	border-bottom: 1px solid var(--tl-line);
	padding: 14px var(--tl-gap-lg);
}

.tl-notice-list__item:last-child {
	border-bottom: 0;
}

/*
 * نقطهٔ رنگیِ کنار هر اطلاعیه (طرح مرجع: .ann__dot). روی همهٔ آیتم‌ها هست تا
 * ریتم بصری فهرست حفظ شود؛ خوانده‌نشده با رنگ مکمل، خوانده‌شده کم‌رنگ.
 * --tl-primary خودش روی زمینهٔ روشن ~۲.۹:۱ می‌داد (زیر ۳:۱ لازم برای عناصر
 * غیرمتنیِ معنادار)، پس از --tl-primary-active/faint استفاده می‌شود.
 */
.tl-notice-list__item strong {
	display: block;
	position: relative;
	padding-inline-start: 16px;
}

.tl-notice-list__item strong::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tl-text-faint);
}

.tl-notice-list__item.is-unread strong::before {
	background: var(--tl-primary-active);
}

.tl-notice-list__item p,
.tl-notice-list__item time {
	padding-inline-start: 16px;
}

.tl-notice-list__item time {
	display: block;
	font-size: 12px;
	color: var(--tl-text-muted);
	margin-top: 4px;
}

@media (max-width: 1150px) {
	.tl-teacher-dash {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   بازطراحی Sunrise — لایهٔ افزودنی: اسکلتون لودینگ، ورود نرم کارت‌ها،
   بالا‌آمدن هنگام hover، و احترام به کاهش حرکت.
   ============================================================ */

/* --- ورود نرم و مرحله‌ای کارت‌ها هنگام بارگذاری صفحه --- */
@keyframes tl-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.tl-content > .tl-card,
.tl-content > .tl-grid--cards > .tl-card,
.tl-teacher-dash > * {
	animation: tl-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tl-content > *:nth-child(2) { animation-delay: 0.04s; }
.tl-content > *:nth-child(3) { animation-delay: 0.08s; }
.tl-content > *:nth-child(4) { animation-delay: 0.12s; }
.tl-content > *:nth-child(5) { animation-delay: 0.16s; }

/* --- بازخورد ملایم کارت‌های تعاملی هنگام Hover (بدون جابه‌جایی/بزرگ‌شدن) --- */
.tl-card.is-interactive:hover,
a.tl-card:hover {
	box-shadow: var(--tl-shadow);
	border-color: var(--tl-primary-soft);
}

/* --- سیستم اسکلتون لودینگ (shimmer) --- */
.tl-sk {
	position: relative;
	overflow: hidden;
	background: var(--tl-border);
	border-radius: var(--tl-radius-sm);
}

.tl-sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--tl-surface) 70%, transparent),
		transparent
	);
	animation: tl-shimmer 1.35s infinite;
}

/* RTL: درخشش از راست به چپ حرکت می‌کند */
@keyframes tl-shimmer {
	100% { transform: translateX(100%); }
}

.tl-sk--line { height: 12px; margin: 8px 0; }
.tl-sk--line.is-sm { width: 45%; }
.tl-sk--line.is-md { width: 70%; }
.tl-sk--title { height: 18px; width: 40%; margin-bottom: 14px; }
.tl-sk--avatar { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.tl-sk--tile { height: 110px; border-radius: var(--tl-radius); }
.tl-sk--block { height: 120px; border-radius: var(--tl-radius); }

/* نمایش/مخفی‌سازی وضعیت لودینگ با data-loading روی یک ظرف */
[data-loading="false"] .tl-sk-only { display: none; }
[data-loading="true"] .tl-real-only { display: none; }

/* --- کاشی آماری داشبورد (سبک 51Talk) — اختیاری برای قالب‌های داشبورد --- */
/* چهار ستون ثابت (طرح مرجع)، در عرض کم دو ستون و در موبایل یک ستون. */
.tl-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

/*
 * طرح مرجع در ۷۶۰px به ۲ ستون می‌رود، اما در همان ۷۶۰ تا ۹۰۰ چهار کاشی روی
 * تبلت به‌شدت فشرده می‌شوند (~۱۷۵px هرکدام). شکست به ۹۰۰ منتقل شد — همان
 * نقطه‌ای که سایدبار هم کشویی می‌شود و چیدمان کلاً عوض می‌شود.
 */
@media (max-width: 900px) {
	.tl-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.tl-tiles {
		grid-template-columns: 1fr;
	}
}

/*
 * کاشی آماری: سطح سفیدِ توپر با حاشیهٔ مویی و بدون سایه (مثل طرح مرجع). پیش‌تر
 * کلاس .tl-glass در مارک‌آپ به آن پس‌زمینهٔ نیمه‌شفاف + Blur + سایهٔ محسوس
 * می‌داد که کاشی‌ها را سنگین و «شیشه‌ای‌تر از حد» نشان می‌داد؛ آن ترکیب از
 * مارک‌آپ برداشته شد و کاشی حالا خودش سطحش را تعریف می‌کند.
 */
.tl-tile {
	background: var(--tl-surface);
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	box-shadow: var(--tl-shadow-sm);
	padding: var(--tl-space-4);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform var(--tl-duration) var(--tl-ease), box-shadow var(--tl-duration) var(--tl-ease);
}

/* بالاآمدن ملایم هنگام Hover — دقیقاً رفتار طرح مرجع (translateY(-3px)). */
.tl-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--tl-shadow);
}

/*
 * آیکون همهٔ کاشی‌ها یک تینتِ ملایمِ رنگ برند دارد (نه چهار رنگ معنایی متفاوت).
 * در طرح مرجع هر چهار کاشی آیکون هم‌رنگ دارند؛ رنگ‌های متفاوت، ردیف کاشی‌ها را
 * شلوغ می‌کرد و با «مینیمال و مرتب» ناسازگار بود. مدیفایرهای رنگی حذف شدند.
 */
.tl-tile__ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--tl-primary-soft);
	color: var(--tl-primary-ink-soft);
	margin-bottom: var(--tl-space-3);
}

.tl-tile__value {
	font-size: 28px;
	font-weight: var(--tl-weight-bold);
	letter-spacing: -0.5px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.tl-tile__label {
	font-size: 12.5px;
	color: var(--tl-text-muted);
}

/*
 * برچسب کوچکِ پایین کاشی («این هفته» / «۲ آنلاین الان» در طرح مرجع). طرح مرجع
 * برای آن خانوادهٔ رنگ «موفقیت» را به‌کار می‌برد نه رنگ برند (.tile__trend).
 */
.tl-tile__chip {
	margin-top: var(--tl-space-2);
	font-size: 11.5px;
	font-weight: var(--tl-weight-bold);
	padding: 2px 9px;
	border-radius: var(--tl-radius-pill);
	background: var(--tl-success-soft);
	color: var(--tl-success);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/*
 * کارت هیرو هویتی (داشبورد) — یکی از معدود جاهای مجاز افکت شیشه‌ای/تزئینی:
 * سطح تیرهٔ گرم + درخشش بسیار ملایمِ رنگ برند (نه پرکردن توپر و اشباع‌شدهٔ
 * قبلی) تا هم حس Premium بدهد هم با «۸۰٪ سطح ساده / ۲۰٪ شاخص» هم‌خوان بماند.
 */
/*
 * پس‌زمینهٔ هیرو با گرادیانِ خودِ رنگ برند (نه تیرهٔ ثابت قبلی) طبق مرجع
 * طراحی جدید. دلتای بین دو Stop عمداً کوچک (Darken ~۱۰٪، نه روشن‌کردن به‌سمت
 * سفید) — با محاسبهٔ واقعی تأیید شد که رنگ متن یکسان (--tl-text-on-primary)
 * برای هر سه پالت (مرجانی/آبی/سبز) روی هر دو Stop حداقل ۴.۵:۱ کنتراست دارد؛
 * روشن‌کردن به‌سمت سفید برای پالت آبی (که متنش سفید است) این کنتراست را
 * می‌شکند، برای همین این مسیر انتخاب نشده.
 */
/*
 * کارت هیرو: گرادیان رنگی + متن سفید، دقیقاً ساختار طرح مرجع
 * (linear-gradient(120deg, accent-strong, accent)). به‌جای خودِ --tl-primary از
 * --tl-primary-fill استفاده می‌شود که «تیره‌شدهٔ حداقلی تا سفید بخواند» است؛
 * برای پالت نیلی صفر درصد تفاوت دارد (عیناً رنگ طرح) و برای مرجانی/سبز فقط
 * ۴٪ و ۹٪ — با چشم دیده نمی‌شود ولی متن سفید را از ۲.۸/۲.۵ به بالای ۳:۱
 * می‌رساند (عنوان هیرو متن بزرگ/درشت است، پس آستانهٔ WCAG آن ۳:۱ است).
 * درخشش تزئینی سفیدِ کم‌رنگ است نه رنگ مکمل: رنگ مکمل زمینه را روشن می‌کرد و
 * کنتراست متن سفید را زیر آستانه می‌برد (محاسبه‌شده).
 */
.tl-hero {
	position: relative;
	color: #fff;
	border: none;
	border-radius: var(--tl-radius);
	overflow: hidden;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	gap: var(--tl-space-5);
	flex-wrap: wrap;
	background:
		radial-gradient(120% 140% at 92% 0%, rgb(255 255 255 / 14%), transparent 55%),
		linear-gradient(120deg, var(--tl-primary-fill-deep), var(--tl-primary-fill));
	box-shadow: var(--tl-shadow);
}

/* حالت خطا (صفحهٔ سلامت سیستم): عمداً هیچ‌وقت گرم/مرجانی نمی‌شود — این یک بنر
   هشدار است، نه کارت هویتی؛ متن همیشه سفید (کنتراست ثابت با --tl-danger-strong
   تأیید شده، مستقل از پالت کاربر). */
.tl-hero--danger {
	color: #fff;
	background:
		radial-gradient(120% 140% at 92% 0%, rgb(255 255 255 / 10%), transparent 55%),
		linear-gradient(120deg, color-mix(in srgb, var(--tl-danger-strong) 85%, black), var(--tl-danger-strong));
}

/* آواتار هیرو در طرح مرجع مربعِ گردشده است (۲۰px)، نه دایره. */
.tl-hero__avatar {
	width: 78px;
	height: 78px;
	border-radius: 20px;
	object-fit: cover;
	flex: none;
	border: 3px solid rgb(255 255 255 / 35%);
	box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
}

.tl-hero__id {
	flex: 1;
	min-width: 180px;
}

.tl-hero__id h2 {
	margin: 0;
	font-size: 23px;
	/* بدون رنگ ثابت: از .tl-hero/.tl-hero--danger به ارث می‌برد. */
	font-weight: 800;
}

.tl-hero__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 9px;
}

/*
 * چیپ و پنل داخل هیرو: قرصِ **شیشه‌ای روشن** روی گرادیان — همان حسِ طرح مرجع.
 *
 * طرح مرجع سفیدِ نیمه‌شفاف با متنِ سفید دارد که AA نمی‌دهد. راه‌حل: همان
 * شیشهٔ روشن (سفید ۹۲٪ + Blur) اما با متنِ رنگ برند، و مشخصاً با
 * --tl-primary-ink-soft نه --tl-primary-ink: ink معمولی فقط روی سفیدِ خالص
 * تضمین دارد و با ۸٪ رنگِ گرادیانی که از پشتِ شیشه می‌آید می‌شکند، ولی
 * ink-soft برای همین حالتِ «تینت‌دار» کالیبره شده است (۴.۵ تا ۵.۱ محاسبه شد).
 */
.tl-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: var(--tl-radius-pill);
	background: rgb(255 255 255 / 92%);
	border: 1px solid rgb(255 255 255 / 55%);
	color: var(--tl-primary-ink-soft);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
}

.tl-hero__wallet {
	text-align: center;
	background: rgb(255 255 255 / 92%);
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: var(--tl-radius-sm);
	padding: 12px 20px;
	color: var(--tl-primary-ink-soft);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	box-shadow: 0 8px 18px rgb(0 0 0 / 12%);
}

/*
 * کاربری که شفافیت کمتر را ترجیح داده: شیشه کاملاً مات می‌شود. آن‌وقت زمینه
 * سفیدِ خالص است و ink معمولی هم درست است، ولی ink-soft تیره‌تر است پس همچنان
 * ایمن می‌ماند و لازم به تعویض نیست.
 */
@media (prefers-reduced-transparency: reduce) {
	.tl-hero__tag,
	.tl-hero__wallet {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.tl-hero__wallet .lbl { font-size: 11.5px; opacity: .85; }
.tl-hero__wallet .amt { font-size: 21px; font-weight: var(--tl-weight-bold); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* دکمهٔ اصلی هیرو: سفیدِ توپر با متن رنگ برند و شعاع ۱۴px (طرح مرجع). */
.tl-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--tl-primary-ink);
	font-weight: 800;
	font-size: 14.5px;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: 14px;
	box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
	transition: transform var(--tl-duration) var(--tl-ease);
}

.tl-hero__cta:hover {
	transform: translateY(-2px);
	color: var(--tl-primary-ink);
}

/* کارت «نزدیک‌ترین زمان آزاد» (طرح مرجع: کارت رزرو سریع ستون کناری). */
.tl-soonest {
	text-align: center;
}

.tl-soonest__who {
	margin: 0;
	font-size: 13px;
	color: var(--tl-text-muted);
}

.tl-soonest__when {
	margin: 6px 0 var(--tl-space-4);
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* لیست کلاس‌های پیشِ‌رو (داشبورد زبان‌آموز) */
/*
 * سطرهای فهرست در طرح مرجع تا لبهٔ کارت کشیده می‌شوند (نه تودرتو با Padding
 * کارت). با Margin منفی + Padding قرینه ساخته می‌شود، بدون تغییر Template.
 */
.tl-sess {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tl-line);
}

.tl-card__body > .tl-sess {
	margin-inline: calc(-1 * var(--tl-gap-lg));
	padding-inline: var(--tl-gap-lg);
}
.tl-sess:last-child { border-bottom: none; }
.tl-sess__time { text-align: center; flex: none; width: 56px; }
.tl-sess__time b { font-size: 16px; font-weight: var(--tl-weight-bold); font-variant-numeric: tabular-nums; }
.tl-sess__time span { display: block; font-size: 11px; color: var(--tl-text-muted); }
.tl-sess__meta { flex: 1; min-width: 0; }
.tl-sess__meta b { font-size: 14px; }
.tl-sess__meta p { margin: 2px 0 0; font-size: 12.5px; color: var(--tl-text-muted); }
.tl-sess__actions { flex: none; }

/* مدرک/گواهینامهٔ مدرس زیر عنوان حرفه‌ای در پروفایل عمومی. */
.tl-pub-profile-head__credential {
	margin: 6px 0 0;
}

/* متن قرارداد همکاری: بلوک خواندنی با فاصلهٔ سطر بیشتر. */
.tl-contract {
	max-height: 420px;
	overflow-y: auto;
	padding: var(--tl-space-4);
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius-sm);
	background: var(--tl-surface-soft);
	margin-bottom: var(--tl-space-4);
}

.tl-contract p {
	margin: 0 0 var(--tl-space-3);
}

.tl-contract p:last-child {
	margin-bottom: 0;
}

/* اطلاعات حساب مدرس در جدول مدیر (فشرده، فقط برای مدیریت). */
.tl-account-info {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	display: grid;
	gap: 2px;
	max-width: 280px;
}