/* توکن‌های رنگ/فاصله/تایپوگرافی در wwwroot/css/tokens.css تعریف شده‌اند (باید قبل از این
   فایل بارگذاری شود) - این فایل فقط کامپوننت‌ها را با همان متغیرها می‌سازد */

html {
    /* Vazirmatn renders visually larger than typical Latin fonts at the same rem size */
    font-size: 15px;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
    font-size: 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.validation-summary-valid,
.field-validation-valid {
    display: none;
}

/* --- Cards --- */
.glass-card,
.card-modern {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.glass-card:hover,
.card-modern:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

/* --- Typography & Buttons --- */
.gradient-text {
    color: var(--primary);
    font-weight: 700;
}

.main-container {
    margin-top: 100px;
}

.btn-glow {
    background: var(--primary);
    border: none;
    color: #fff;
    padding: 12px 30px;
    border-radius: 0.6rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}

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

/* --- Global button polish: calm, flat, no glow/scale-jump --- */
.btn {
    border-radius: 0.6rem;
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    border-width: 1px;
}

.btn-sm {
    padding: 0.35rem 1rem;
}

.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info {
    border: none;
}

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

.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; color: #fff; }

.btn-warning { background: #D97706; color: #1F2937; }
.btn-warning:hover { background: #B45309; color: #1F2937; }

.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; }

.btn-info { background: var(--accent); color: #fff; }
.btn-info:hover { background: #0891B2; color: #fff; }

.btn-outline-light, .btn-outline-warning, .btn-outline-danger, .btn-outline-info, .btn-outline-primary {
    background: transparent;
}

/* btn-outline-light پیش‌فرض بوت‌استرپ رنگ متن/بردرش تقریبا سفید است (برای زمینه‌ی همیشه-تیره‌ی
   قدیمی) - روی تمِ روشن یعنی نوشته‌ی سفید روی زمینه‌ی سفید، دقیقا همان دکمه‌ی نامرئی/بدِ «مطالعه
   و دانلود» که گزارش شد. برخلاف btn-outline-warning/danger/info/primary (که رنگ‌های معنادار و
   از قبل قابل‌دید دارند)، این یکی باید به رنگ متنی خودِ تم نگاشت شود، نه یک رنگ ثابت */
.btn-outline-light {
    color: var(--text);
    border-color: var(--border);
}

.btn-outline-light:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--primary);
}

/* --- بسیاری از ویوهای قدیمی‌تر (خارج از محدوده‌ی این بازطراحی) از text-white/text-white-50
   استفاده می‌کنند چون فرض‌شان این بود که زمینه همیشه تیره است - حالا که پیش‌فرض روشن است، این
   کلاس‌ها باید به رنگ متنی خودِ تم (روشن/تیره) نگاشت شوند تا این صفحات بدون بازنویسی هر کدام
   همچنان خوانا بمانند */
.text-white {
    color: var(--text) !important;
}

.text-white-50 {
    color: var(--text-muted) !important;
}

/* همان مشکل btn-outline-light: bg-white bg-opacity-10 روی زمینه‌ی تیره‌ی قدیمی یک تینت لطیف
   می‌ساخت؛ روی تمِ روشن یعنی سفید روی سفید (عملا بی‌اثر/نامرئی) - به یک پس‌زمینه‌ی ملایمِ
   خودِ تم نگاشت می‌شود */
.bg-white.bg-opacity-10 {
    background-color: var(--surface-2) !important;
}

.bg-transparent::after{
    background-color: transparent !important;
}

.form-floating label::after{
    background-color: transparent !important;
}

/* --- پس‌زمینه‌ی متحرک "اورورا" برای صفحات ورودی (ثبت‌نام/ورود/خانه) - سه حباب رنگی محوشده که
   به‌آرامی دور می‌چرخند. برخلاف AOS (که قبلا حذف شد)، این فقط transform/opacity را انیمیت
   می‌کند - هیچ reflow/repaint سنگینی ایجاد نمی‌کند و روی GPU کامپوزیت می‌شود، پس هزینه‌ی
   کارایی عملا صفر است؛ فقط یک ظاهر پویا و زنده به صفحه می‌دهد، نه کندی. */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.aurora-blob-1 {
    width: 520px;
    height: 520px;
    top: -12%;
    inset-inline-start: -8%;
    background: var(--primary);
    opacity: 0.35;
    animation: auroraDrift1 16s ease-in-out infinite;
}

.aurora-blob-2 {
    width: 460px;
    height: 460px;
    bottom: -14%;
    inset-inline-end: -6%;
    background: var(--accent);
    opacity: 0.3;
    animation: auroraDrift2 20s ease-in-out infinite;
}

.aurora-blob-3 {
    width: 420px;
    height: 420px;
    top: 28%;
    inset-inline-end: 18%;
    background: #EC4899;
    opacity: 0.22;
    animation: auroraDrift3 24s ease-in-out infinite;
}

[data-theme="dark"] .aurora-blob-1 { opacity: 0.45; }
[data-theme="dark"] .aurora-blob-2 { opacity: 0.4; }
[data-theme="dark"] .aurora-blob-3 { opacity: 0.3; }

@keyframes auroraDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, 50px) scale(1.15); }
}

@keyframes auroraDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, -40px) scale(1.1); }
}

@keyframes auroraDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -60px) scale(0.9); }
}

/* --- ورودی‌ها و جدول‌های تیره‌ی هاردکد (bg-dark/table-dark) از دورانی که زمینه‌ی همیشه تیره
   بود - حالا که تم پیش‌فرض روشن است، این‌ها به‌جای حذف کلاس از دهکاه فایل View (ریسک بالا، تغییر
   زیاد)، همین‌جا به رنگ‌های توکن‌محور override می‌شوند؛ همان ظاهر هماهنگ با تم روشن/تیره را
   می‌دهد بدون دست زدن به مارک‌آپ هر صفحه. شامل HTML هایی که در JS ساخته می‌شوند هم می‌شود (مثل
   addRow در صفحه‌ی محاسبه‌ی معدل) چون این یک override سطح CSS است، نه ویرایش Razor. */
.form-control.bg-dark,
.form-select.bg-dark,
select.bg-dark,
input.bg-dark,
textarea.bg-dark {
    background-color: var(--surface-muted) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.form-control.bg-dark::placeholder {
    color: var(--text-muted) !important;
}

.table.table-dark,
table.table-dark {
    --bs-table-bg: var(--surface-muted);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface);
    --bs-table-hover-bg: var(--surface);
    color: var(--text);
}

.hover-effect:hover {
    transform: translateY(-6px);
    background: var(--surface-muted);
}

/* --- نوار پیشرفت (آپلود جزوه، پیشرفت مطالعه) --- */
.progress-bar-track {
    height: 8px;
    background: var(--surface-muted);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width .2s;
}

.progress-bar {
    height: 6px;
    background: var(--surface-muted);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: 0.3s;
}

/* --- نقشه‌ی گرمایی تقویم فعالیت آزمون --- */
.calendar-cell {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--surface-muted);
}

.calendar-cell[data-level="1"] { background: color-mix(in srgb, var(--primary) 35%, var(--surface-muted)); }
.calendar-cell[data-level="2"] { background: color-mix(in srgb, var(--primary) 65%, var(--surface-muted)); }
.calendar-cell[data-level="3"] { background: var(--primary); }

#quizCalendar {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 12px);
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* --- سیستم آیکن یکدست: جایگزین ایموجی‌های تیتر صفحات (🎓📚🧮...) - آیکن Bootstrap Icons
   داخل یک دایره‌ی رنگی هم‌رنگ با برند --- */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.icon-badge-sm {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
}

.icon-badge-lg {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
}

/* --- حالت خالی استاندارد (EmptyState) --- */
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 2rem;
    margin: 0 auto;
}

.stat-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* --- Bottom Navigation (موبایل) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px;
    min-height: 56px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    background: none;
    border: none;
}

.bottom-nav-item i {
    font-size: 1.25rem;
}

.bottom-nav-item.active {
    color: var(--brand);
}

.bottom-nav-center {
    position: relative;
    flex: 1.2;
}

.bottom-nav-center-icon {
    position: absolute;
    top: -18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* محتوای اصلی روی موبایل باید به اندازه‌ی ارتفاع نوار پایین فاصله داشته باشد، وگرنه آخرین
   محتوای صفحه زیر نوار ثابت پنهان می‌شود */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}

/* --- Bottom Sheet «بیشتر» --- */
.more-sheet {
    border-top-right-radius: var(--radius-card);
    border-top-left-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    max-height: 80vh;
}

.more-sheet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 8px;
    border: none;
    background: none;
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-base);
    text-align: start;
}

.more-sheet-item:hover {
    background: var(--surface-2);
    border-radius: var(--radius-control);
}

/* --- آواتار کاربر (دسکتاپ) --- */
.user-avatar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 10px 4px 4px;
    color: var(--text);
}

.user-avatar-btn:hover {
    border-color: var(--brand);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

/* --- Stepper onboarding (رشته/دانشگاه → انتخاب واحد → تمام) --- */
.setup-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.setup-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    border: 2px solid var(--border);
}

.setup-step.active .setup-step-circle {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.setup-step.done .setup-step-circle {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.setup-step-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.setup-step.active .setup-step-label {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.setup-step-line {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
    align-self: flex-start;
    margin-top: 15px;
}

.setup-step-line.done {
    background: var(--success);
}

/* ===========================================================================
   ورودی‌های فرم - سراسری: قبلا هیچ استایل سفارشی‌ای نداشتند، فقط ظاهر خام
   بوت‌استرپ بودند (این دقیقا همان چیزی بود که به عنوان «ساده/بی‌استایل» حس می‌شد)
   =========================================================================== */
.form-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.form-control,
.form-select {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    padding: 0.65rem 1rem;
    font-size: var(--fs-sm);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: .7;
}

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* select های چندخطی (بدون یک گزینه‌ی انتخاب‌شده) ارتفاعشان با select عادی فرق دارد - اینجا دست‌نخورده می‌ماند */
select.form-select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239AA0C3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .9rem center;
    background-size: 14px 14px;
}

/* --- searchable-select.js: یک input جستجو بالای select --- */
.searchable-select-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.searchable-select-wrapper::before {
    content: "\F52A"; /* bi-search */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 13px;
    inset-inline-start: 14px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
    z-index: 2;
}

.searchable-select-wrapper .searchable-select-input {
    padding-inline-start: 2.4rem;
    background: var(--surface-2);
    border-color: var(--border);
}

.searchable-select-wrapper .searchable-select-input:focus {
    background: var(--surface);
}

/* --- نوار پایین Sticky نتیجه‌ی معدل --- */
.gpa-sticky-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1025; /* زیر bottom-nav (1030) تا روی موبایل بالای آن بنشیند */
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 12px 0;
}

@media (max-width: 991.98px) {
    .gpa-sticky-bar {
        bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
}

/* --- Chip فیلتر (رشته/دانشگاه در صفحه‌ی اساتید و مشابه) --- */
.filter-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.filter-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* --- Chip انتخاب روز (برنامه‌ریز هوشمند) --- */
.day-chip {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.day-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* --- Dropzone آپلود جزوه --- */
.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    background: var(--surface-2);
}

.dropzone:hover,
.dropzone.dropzone-active {
    border-color: var(--brand);
    background: var(--brand-soft);
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob-1, .aurora-blob-2, .aurora-blob-3 {
        animation: none;
    }
}

/* ===========================================================================
   کامپوننت‌های امضادار (Gate 1 - پیوت دستیار کلاس آنلاین)
   =========================================================================== */

/* --- گرادیان امضا: فقط CTA اصلی، لوگو، نشان‌های هوش مصنوعی --- */
.brand-gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-gradient {
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    font-weight: var(--fw-bold);
    border-radius: var(--radius-control);
    padding: 0.7rem 1.75rem;
    transition: filter var(--motion-fast) var(--ease-standard);
}

.btn-gradient:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* --- AIBadge: نشان کوچک برای هر خروجی هوش مصنوعی --- */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.6;
}

.ai-badge::before {
    content: "✦";
}

/* --- RecordButton: دکمه‌ی گرد بزرگ شروع/پایان ضبط --- */
.record-button {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: none;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: filter var(--motion-fast) var(--ease-standard);
}

.record-button:hover {
    filter: brightness(1.08);
}

.record-button.is-recording {
    background: var(--rec);
}

.record-button.is-recording::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--rec);
    animation: recordPulse 1.6s ease-out infinite;
}

@keyframes recordPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* --- LiveWaveform: canvas صدای زنده --- */
.live-waveform {
    width: 100%;
    height: 64px;
    border-radius: var(--radius-control);
    background: var(--surface-2);
    display: block;
}

/* --- TranscriptView: متن با timestamp --- */
.transcript-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.transcript-paragraph {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.transcript-paragraph:hover {
    background: var(--surface-2);
}

.transcript-paragraph.is-active {
    background: var(--brand-soft);
}

.transcript-paragraph.is-bookmarked {
    border-inline-start: 3px solid var(--warning);
}

.transcript-bookmark-star {
    color: var(--warning);
    margin-inline-end: 4px;
}

.transcript-timestamp {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.transcript-text {
    flex: 1;
    line-height: var(--lh-fa);
}

/* --- ProcessingTimeline: مراحل زنده‌ی پردازش بعد از ضبط --- */
.processing-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.processing-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.processing-step .processing-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.processing-step.is-active {
    color: var(--text);
}

.processing-step.is-active .processing-step-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.processing-step.is-done {
    color: var(--text);
}

.processing-step.is-done .processing-step-dot {
    background: var(--success);
}

.processing-step.is-error .processing-step-dot {
    background: var(--danger);
}

/* --- Skeleton: جایگزین لودینگ برای محتوای در حال بار شدن --- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-control);
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Toast: اعلان شناور گوشه‌ی صفحه (برای اکشن‌های AJAX جدید - ضبط، اشتراک و...) --- */
.toast-stack {
    position: fixed;
    inset-inline-end: var(--space-5);
    bottom: var(--space-5);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 320px;
}

.toast-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    animation: toastIn var(--motion-base) var(--ease-standard);
}

.toast-item.toast-success { border-inline-start: 3px solid var(--success); }
.toast-item.toast-error { border-inline-start: 3px solid var(--danger); }
.toast-item.toast-info { border-inline-start: 3px solid var(--info); }

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

@media (prefers-reduced-motion: reduce) {
    .record-button.is-recording::after,
    .skeleton,
    .toast-item {
        animation: none;
    }
}

/* ===== صفحه‌ی دروس من (Setup/MyList) ===== */
.mylist-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.soft-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-pill);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; border: 1px solid transparent;
    transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.soft-pill:hover { transform: translateY(-1px); }
.soft-pill-info { background: var(--accent-soft); color: var(--accent); border-color: rgba(61, 224, 200, 0.25); }
.soft-pill-info:hover { background: rgba(61, 224, 200, 0.22); color: var(--accent); }
.soft-pill-warn { background: rgba(255, 181, 71, 0.14); color: var(--warning); border-color: rgba(255, 181, 71, 0.25); }
.soft-pill-warn:hover { background: rgba(255, 181, 71, 0.22); color: var(--warning); }

.term-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); flex-wrap: wrap; margin-bottom: var(--space-6); }
.term-tab { padding: 7px 16px; border-radius: var(--radius-pill); color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); font-weight: var(--fw-medium); transition: background var(--motion-fast); }
.term-tab:hover { color: var(--text); }
.term-tab.active { background: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(124, 108, 255, 0.4); }

.course-tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-5);
    height: 100%; display: flex; flex-direction: column; gap: var(--space-5);
    transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.course-tile:hover { transform: translateY(-2px); border-color: rgba(124, 108, 255, 0.45); box-shadow: var(--shadow-md); }
.course-tile-head { display: flex; align-items: center; gap: var(--space-4); }
.course-tile-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.course-tile-title { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; color: var(--text); line-height: 1.6; }
.course-tile-teacher { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.course-tile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: auto; }
.course-action {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; border-radius: var(--radius-control);
    text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); border: 1px solid transparent;
    transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast);
}
.course-action i { font-size: 1.15rem; }
.course-action:hover { transform: translateY(-2px); }
.course-action-docs { background: var(--brand-soft); color: var(--brand-hover); border-color: rgba(124, 108, 255, 0.28); }
.course-action-docs:hover { background: rgba(124, 108, 255, 0.24); color: #fff; }
.course-action-quiz { background: rgba(255, 181, 71, 0.14); color: var(--warning); border-color: rgba(255, 181, 71, 0.28); }
.course-action-quiz:hover { background: rgba(255, 181, 71, 0.24); color: #FFD08A; }
@media (max-width: 420px) { .course-tile-actions { grid-template-columns: 1fr; } }